23.9.6 ~ 23.9.25 까지 진행했던 스터디 기록
Ex00 - 웹 접근성의 정의와 의의
: 시각, 청각, 신체, 언어, 인지, 학습 및 신경장애 등을 가진 사람들이 웹을 더 쉽게 이용할 수 있도록 만드는 방법.
: 접근성이란 장애인 뿐만 아니라 모든 사람이 정보 통신 기기나 서비스를 손쉽게 활용(사용성을 증진)할 수 있도록 만드는 것.
웹 접근성의 필요성
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)
팀 버너스 리 경 - 웹의 창시자 (Tim Berners - Lee , W3C Director and inventor of the World Wide Web)
: 현대 사회에서 웹은 교육, 고용, 정부, 전자 상거래, 건강, 여가 등 중요한 자원으로 활용되고 있다. 따라서, 웹 접근성을 준수하게 되면 웹에서 제공하는 정보에 모두가 동등하게 접근하고 이용할 수 있고, 정보격차를 줄일 수 있다.
웹 접근성의 주요 원칙
WCAG(Web Content Accessibility Guidelines) 에 기반하면…
1. 인식성 (Perceivable)
: 정보와 사용자 인터페이스 요소는 사용자가 인식할 수 있는 방법으로 제시되어야 한다.
1.1 대체 텍스트 (Text Alternatives)
: 사용자에게 제시되는 모든 텍스트가 아닌 콘텐츠는 그 목적에 상응하는 대체 텍스트를 제공해야 한다.
1.2 시간 기반 미디어 - 시간의 흐름에 따라 정보가 전달되는 미디어 형식 (Time-based Media)
: 시간 기반 미디어에 대한 대체수단을 제공해야 한다. 자막, 오디오 설명, 수어 통역 등.
1.3 적응 가능 (Adaptable)
: 웹 컨텐츠가 다양한 사용자와 상황에 맞게 적응할 수 있도록 설계되어야 한다. 정보나 관계가 손실되지 않고 다양한 방법으로 표시될 수 있어야 한다.
- 예시이 기준은 웹 페이지의 정보, 구조, 관계가 프로그래밍적으로 이해될 수 있거나 텍스트로 제공되어야 함을 의미합니다. 예를 들어, 표의 헤더가 있으면 이 헤더가 프로그래밍적으로 연결되어야 합니다.이 기준은 웹 페이지의 콘텐츠가 표시되는 순서가 의미에 영향을 미치는 경우, 그 순서가 프로그래밍적으로 결정되어야 함을 의미합니다. 예를 들어, 단계별 지침이 있는 경우 단계가 올바른 순서로 나타나야 합니다.이 기준은 콘텐츠를 이해하고 작동하기 위한 지시사항이 색상, 모양, 크기 등의 감각적인 특성에만 의존해서는 안 된다는 것을 의미합니다. 예를 들어, "빨간 버튼을 눌러주세요"라고만 지시하면 색맹 사용자에게 문제가 될 수 있습니다.이 기준은 웹 콘텐츠가 특정 디스플레이 방향 (가로 또는 세로)에만 제한되지 않아야 함을 의미합니다. 예를 들어, 모바일 웹사이트가 세로 모드에서만 작동한다면 이는 접근성을 제한하는 것입니다.이 기준은 웹페이지에서 사용자 정보를 수집하는 입력 필드의 목적이 프로그래밍적으로 식별되어야 함을 의미합니다. 예를 들어, 이메일 주소를 입력하는 필드는 프로그래밍적으로 "이메일"로 표시되어야 합니다.이 기준은 웹 페이지의 UI 구성요소나 아이콘, 영역의 목적이 프로그래밍적으로 식별되어야 함을 의미합니다. 예를 들어, "장바구니" 아이콘 옆에 "장바구니"라는 텍스트 레이블이 있어야 합니다.
- 1.3.6: 목적 식별 (Identify Purpose)
- 1.3.5: 입력 목적 식별 (Identify Input Purpose)
- 1.3.4: 방향 (Orientation)
- 1.3.3: 감각적인 특성 (Sensory Characteristics)
- 1.3.2: 유의미한 순서 (Meaningful Sequence)
- 1.3.1: 정보와 관계 (Info and Relationships)
1.4 식별 가능 (Distinguishable)
: 콘텐츠는 사용자가 더 쉽게 보고 들을 수 있도록 제작되어야 한다. 예를 들어, 명도 대비를 높이면 저시력 사용자도 텍스트를 더 쉽게 읽을 수 있고, 오디오에 대한 제어 기능을 제공하면 청각 장애를 가진 사용자에게도 더 나은 경험을 제공할 수 있다.
2. 운용성 (Operable)
: 사용자 인터페이스 구성요소 및 네비게이션은 운용 가능해야 한다.
2.1 키보드 접근성
: 키보드로 모든 기능을 사용할 수 있어야 한다.
2.2 충분한 시간
: 사용자가 콘텐츠를 읽고 사용할 수 있는 충분한 시간을 제공해야 한다.
2.3 발작 및 신체적 반응
: 콘텐츠는 발작이나 신체적 반응을 일으키지 않도록 설계되어야 한다.
2.4 네비게이션 가능
: 사용자에게 쉽게 이동가능하고, 콘텐츠를 찾고, 현재 위치를 파악할 수 있는 기능을 제공해야 한다.
2.5 입력 방식
: 사용자가 키보드 이외에 다양한 입력장치를 통해 기능들을 보다 쉽게 조작할 수 있도록 해야 한다.
3. 이해성 (Understandable)
: 정보와 조작 방법이 명확하고 이해하기 쉬워야 한다.
3.1 가독성
: 텍스트 콘텐츠는 읽기 쉬운 언어와 형식을 사용해야 한다.
3.2 예측 가능성
: 사용자 인터페이스는 일관성을 유지하고, 사용자가 예상할 수 있는 방식으로 동작해야 한다.
3.3 입력 도움
: 사용자가 입력을 하는 과정에서 도움을 줄 수 있는 안내문, 에러 메시지, 유효성 검사 등을 제공해야 한다.
4. 견고성 (Robust)
: 다양한 기기, 브라우저, 보조 기술 등에 대응할 수 있어야 한다. 즉, 호환성.
→ 이외에도 각 지침의 하위에 성공 기준들이 상세하게 분류되어있으니 참고할 것!
한국형 웹 콘텐츠 접근성 지침 살펴보기
Ex01 - WCAG 읽어보기
WCAG 2.1 를 보고 고려해 볼만한 것들
지침 1.4 식별 가능
배경으로부터 전경을 분리하는 것을 포함하여, 콘텐츠는 사용자가 더 쉽게 보고 들을 수 있도록 제작되어야 한다
쇼케이스 카드 등, 배경과 텍스트가 같이 있을 경우 식별 가능하도록 제작해야 할 것. 디자인도 디자인이지만 배경과의 대비를 생각해 폰트 색상, 크기를 선택해야할 것이다.
성공기준 2.1.2 키보드 함정 방지
키보드 인터페이스를 사용하여 키보드 포커스를 페이지의 구성요소로 이동할 수 있는 경우, 키보드 인터페이스만으로도 해당 구성요소에서 포커스를 이동시킬 수 있어야 한다. 수정되지 않은 화살표, 탭 키, 또는 다른 표준 종료 방법이 필요한 경우, 사용자에게 포커스를 이동시키는 방법에 대해 안내해야 한다.
사용자가 탭 등을 사용해 포커스를 이동할 때, 그 순서나 위치가 명확하고 논리적이어야 할 것.. 예) 입력창이 여러 개인 마이페이지 등
성공기준 2.4.8 위치
웹 사이트가 웹 페이지 세트로 구성되어 있는 경우, 사용자 위치 정보를 제공해야 한다.
예) 스터디/프로젝트 검색시 사용자 본인이 스터디영역에서 검색하는지 프로젝트영역에서 검색하는지 알 수 있도록 명시해주어야 할 것
성공기준 3.1.3 생소한 단어
관용어와 전문용어을 포함하여, 특수하거나 제한적으로 사용된 단어나 문구의 구체적인 정의를 인식할 수 있는 메커니즘을 제공해야 한다.
쇼케이스나, 히치하이킹 처럼 사용자에게 생소할 수 있는 용어를 다루는 페이지들은 그 용어를 설명하는 영역이 필요할 것이다.
WCAG 2.2에 추가된 사항
2.4.11 Focus Not Obscured (Minimum)
: 사용자가 키보드 또는 다른 입력 방법으로 요소에 포커스를 줄 때, 그 포커스가 다른 콘텐츠에 의해 가려지지 않아야 한다.
2.4.12 Focus Not Obscured (Enhanced)
: 2.4.11의 확장 버전으로, 포커스가 더욱 명확하게 표시되어야 한다.
2.4.13 Focus Appearance
: 포커스가 어떻게 표시되어야 하는지에 대한 명확한 가이드라인을 제공해야 한다.
2.5.7 Dragging Movements
: 드래그 앤 드롭 같은 드래깅 동작을 사용할 때, 사용자가 이를 쉽게 수행할 수 있어야 한다.
팀페이지 드래그 앤 드롭 기능 - 드래그 되는 아이템이 어디에 놓일지 미리보기 제공 등
2.5.8 Target Size (Minimum)
: 클릭 가능한 요소의 최소 크기를 명시한다. 특히 모바일 환경에서 작은 타겟을 클릭하기 어려운 사용자를 위함.
3.2.6 Consistent Help
: 웹사이트 내에서 도움말 옵션이 일관되게 제공되어야 한다. 예를 들어, '문의하기' 또는 '도움말' 같은 섹션은 모든 페이지에서 동일한 위치에 있어야 한다.
3.3.7 Redundant Entry
: 사용자가 반복적으로 같은 정보를 입력해야 하는 경우, 그 정보가 자동으로 채워져야 한다.
3.3.8 Accessible Authentication (Minimum)
: 웹사이트의 인증 과정(인지 기능 테스트 등)도 접근성을 고려해야 한다. 인증 과정에서 인지 기능 테스트를 요구하는 경우, 사용자를 도와주는 메커니즘 또는 대안적인 인증 방법을 제공해야 한다.
- Alternative: 인지 기능 테스트에 의존하지 않는 다른 인증 방법을 제공해야 한다.
- Mechanism: 사용자가 인지 기능 테스트를 완료할 수 있도록 도와주는 메커니즘을 제공해야 한다.
- Object Recognition: 인지 기능 테스트가 객체 인식에 관한 것이어야 한다.
- Personal Content: 인지 기능 테스트가 사용자가 웹사이트에 제공한 비텍스트 콘텐츠를 식별하는 것이어야 한다.
3.3.9 Accessible Authentication (Enhanced)
: 3.3.8의 확장 버전으로, 인증 과정에서 더욱 다양한 접근성 옵션을 제공해야 한다. 텍스트 기반 인증 외에도 음성 인증, 생체 인증 등 다양한 인증 방법 제공.
Ex02 - 모두를 위한 ARIA
: Accessible Rich Internet Application
- 장애인들이 웹 콘텐츠나 애플리케이션을 더 쉽게 이용할 수 있게 도와주는 속성들로, html 태그에 이 속성들을 추가하면 해당 콘텐츠의 기능이나 구조에 대한 추가 정보를 제공할 수 있다.
- WAI-ARIA는 HTML 요소에 role 또는 aria-* 속성을 추가하여 콘텐츠의 '역할(roles), 상태(states), 속성(properties)' 정보를 보조기기에 제공한다.
브라우저 호환성
ARIA 속성 종류
역할 Roles
: 요소가 무엇을 하는지 정의한다.
- Widget roles
<button>클릭하세요</button> <div role="button" tabindex="0">클릭하세요</div> - : button, checkbox, link, menuitem, tab 등 사용자가 직접 조작할 수 있는 UI컴포넌트 들
- Composite roles
<div> <button>탭 1</button> <div>내용 1</div> </div> <div role="tabpanel"> <div role="tab" tabindex="0">탭 1</div> <div role="tabpanel">내용 1</div> </div> - : 여러 개의 요소가 함께 작동해 하나의 복잡한 위젯을 형성하는 경우. tablist, tree, grid 등
- Document structure roles
<article> <h2>제목</h2> <p>내용</p> </article> <div role="article"> <h2>제목</h2> <p>내용</p> </div> - : application, article, heading, img, math, persentation 등 문서의 구조를 설명하는 역할
- Landmark roles
<nav> <a href="#">홈</a> <a href="#">소개</a> </nav> <nav role="navigation"> <a href="#">홈</a> <a href="#">소개</a> </nav> - : navigation, main, banner 등 웹 페이지의 특정 영역을 식별하는 데 사용된다.
- Live Region roles
<div>경고! 오류가 발생했습니다.</div> <div role="alert">경고! 오류가 발생했습니다.</div> - : alert, log, timer등 동적으로 변경되는 콘텐츠들에 사용된다.
- Window roles
<div> <h2>다이얼로그 제목</h2> <p>다이얼로그 내용</p> </div> <div role="dialog" aria-labelledby="dialog-title"> <h2 id="dialog-title">다이얼로그 제목</h2> <p>다이얼로그 내용</p> </div> - : 팝업 창이나 모달 다이얼로그 같은 별도의 창을 제어하는 데 사용된다. dialog, alertdialog.
상태 States & 속성 Properties
: 요소의 현재상태를 의미하고 추가적인 의미나 구조를 부여한다.
- Widget attributes (위젯 속성)
<button disabled>클릭 불가</button> <div role="button" aria-disabled="true">클릭 불가</div> - : aria-autocomplete, aria-checked, aria-current, aria-disabled, aria-errormessage, aria-expanded 등
- Live region attributes (동적으로 변경되는 컨텐츠 속성, 상태)
<div>이 메시지는 동적으로 변경됩니다.</div> <div aria-live="polite">이 메시지는 동적으로 변경됩니다.</div> - : aria-live, aria-relevant, aria-atomic, aria-busy 등
- Drag & drop attributes (드래그 & 드롭 속성) - Deprecated
- <div draggable="true">드래그 가능한 아이템</div> <div role="listbox" aria-dropeffect="copy">드래그 가능한 아이템</div>
- Relationship attributes (관계 속성)
<input /> <div>입력 정보를 여기에 적어주세요.</div> <input aria-describedby="info" /> <div id="info">입력 정보를 여기에 적어주세요.</div> - : aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-describedby, aria-details 등
참고
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques
https://www.w3.org/TR/wai-aria-1.2/
Ex03 - 웹 표준 & Semantic Tags
웹 표준
: 웹에서 정보를 표현한고 접근하는 방법에 대한 규칙이나 가이드라인을 뜻함. 이를 따르면 다양한 웹 브라우저와 플랫폼에서 웹사이트가 일관되게 동작할 수 있다.
: html이 접근성과 시맨틱 html의 가이드라인을 충족해야 한다.
웹 접근성과 관련된 html 태그들
: html및 xhtml은 속성을 포함하는 요소로 구성된 마크업 언어. 이런 요소는 문서의 다양한 콘텐츠 유형을 마크업하는 데 사용되며, 웹 브라우저에서 어떻게 렌더링될지 지정한다.
- <img>: alt 속성을 사용하여 이미지 설명 제공, 배경 이미지는 빈값으로 넣어 스크린리더에 읽히지 않도록 함
- <a>: aria-label 속성을 사용하여 링크의 목적을 명확하게 함
- <form>: label 태그와 for 속성을 사용하여 폼 요소를 명확하게 설명
- <button>: type으로 버튼의 기능을 명확하게 설명
- <table>: scope 속성을 사용하여 테이블 헤더와 데이터의 관계를 명확하게 함<audio>와 <video>: 미디어 콘텐츠를 삽입할 때 사용되며, controls 속성을 사용하면 재생, 일시정지 등의 컨트롤을 제공할 수 있다.
- <table> <caption>예제</caption> <colgroup> <col style="width: 50%;" /> <col style="width: 25%;" /> <col style="width: 25%;" /> <colgroup /> <thead> <tr> <th scope="col">구분</th> <th scope="col">제목1</th> <th scope="col">제목2</th> </tr> </thead> <tbody> <tr> <th scope="row">구분1</th> <td>내용</td> <td>내용</td> </tr> <tr> <th scope="row">구분2</th> <td>내용</td> <td>내용</td> </tr> </tbody> </table>
Semantic Tags
: 웹 문서의 구조와 콘텐츠에 의미를 부여하는 HTML 요소이다. 이러한 태그들은 웹 브라우저와 검색 엔진에게 문서의 구조를 이해하고 해석하는 데 도움을 주며 웹 접근성을 향상시키는 데 중요한 역할을 한다.
- 의미 부여: 시맨틱 태그는 그 자체로 어떤 요소나 콘텐츠의 역할과 의미를 설명하기 때문에 다른 개발자나 브라우저, 검색 엔진이 문서를 이해하고 해석하는 데 도움이 됩니다.
- 웹 접근성 향상: 시맨틱 태그는 웹 접근성을 향상시키는 데 기여해 스크린 리더 등의 보조 기술을 사용하는 사용자에게 문서의 구조와 콘텐츠를 더 명확하게 전달한다.
- 검색 엔진 최적화(SEO): 검색 엔진은 시맨틱 태그를 통해 웹 페이지의 콘텐츠와 의미를 더 잘 이해할 수 있으므로, SEO에 도움을 준다.
예시
- <article> : 독립적으로 구성된 콘텐츠를 나타낸다. 블로그 포스트, 뉴스 기사, 포럼 게시물 등
- <article> <h2>블로그 포스트 제목</h2> <p>블로그 포스트 내용...</p> </article>
- <aside> : 페이지의 주 콘텐츠와 간접적으로만 관련된 콘텐츠를 나타낸다. 사이드바, 광고, 설명 상자 등
- <aside> <h3>관련 링크</h3> <ul> <li><a href="#">링크 1</a></li> <li><a href="#">링크 2</a></li> </ul> </aside>
- <details> : 사용자가 선택적으로 보거나 숨길 수 있는 정보를 나타낼 수 있다. <summary> 태그와 함께 사용
- <details> <summary>More Information</summary> <p>This is additional information that you can show or hide.</p> </details>
- <figcaption> : <figure> 태그 내의 미디어 콘텐츠에 대한 설명을 제공
- <figure> <img src="image.jpg" alt="Example Image"> <figcaption>This is an example image</figcaption> </figure>
- <figure> : 이미지, 도표, 비디오 등의 미디어 콘텐츠를 감싼다. 주로 <figcaption> 태그와 함께 사용
- <figure> <img src="image.jpg" alt="Example Image"> <figcaption>This is an example image</figcaption> </figure>
- <footer> : 섹션 또는 페이지의 하단에 위치한 정보. 일반적으로 저작권 정보, 연락처 정보 등
- <footer> <p>Copyright 2023, Example Company</p> </footer>
- <header> : 섹션 또는 페이지의 상단에 위치한 정보. 일반적으로 로고, 제목, 네비게이션 등
- <header> <h1>Website Title</h1> <nav> <!-- Navigation links --> </nav> </header>
- <main> : 웹 페이지의 주요 콘텐츠를 나타냅니다. 웹 페이지의 고유한 정보를 포함.
- <main> <article> <!-- Main content --> </article> </main>
- <mark> : 현재의 사용자 상호작용에 대한 참조로 강조되어야 하는 텍스트를 나타냄 + <strong>
- <p>Do not forget to <mark>buy milk</mark> today.</p>
- <nav> : 페이지 내 또는 다른 페이지로의 주요 네비게이션 링크.
- <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
- <section> : 웹 페이지 내에서 관련된 콘텐츠의 그룹
- <section> <h2>Section Title</h2> <p>Section content...</p> </section>
- <summary> : <details> 태그 내에서 사용되며, 접힌 콘텐츠의 제목이나 간단한 설명을 제공합니다.
- <details> <summary>More Information</summary> <p>This is additional information that you can show or hide.</p> </details>
- <time> : 날짜나 시간. datetime 속성을 사용하여 기계가 읽을 수 있는 형식으로 날짜나 시간을 지정할 수 있다.
- <p>The event will take place on <time datetime="2023-10-15">October 15, 2023</time>.</p>
참고
https://www.w3.org/wiki/The_web_standards_model_-_HTML_CSS_and_JavaScript
https://developer.mozilla.org/ko/docs/Glossary/Semantics
Ex04, 05 웹 접근성 검사
웹 접근성 검사 서비스
- https://www.accessibilitychecker.org/→ 웹 접근성과 관련해 어떤 문제점이 있는지, 해당 접근성이 어떤 영역인지, 지키지 않았을 때의 영향 등을 제시해준다.
- https://www.accessibilitychecker.org/
- https://www.tawdis.net/?lang=en→ WCAG 2.1 에 기반해 입력한 웹 사이트가 어떤 특정 영역의 권장사항을 지키지 않았는지 알 수 있다.
- TAW | Web accessibility and W3C standardization services
- https://wave.webaim.org/→ 사이트 자체를 임베딩하고 그 위에 경고사항을 라벨링해서 보여준다.
- https://wave.webaim.org/
- 스크린 리더 등을 통해 수동 검사를 해볼 수도 있다!
직접 검사해보기
→ Audit, WAVE Evaluation tool 둘 다 사용
1. 이노베이션 아카데미 https://42seoul.kr/seoul42/main/view
- ARIA 입력 필드에 접근 가능한 이름이 없습니다.
- → aria-label 속성으로 리스트 박스의 내용이나 목적을 설명해야 함. 또는 리스트 박스를 설명하는 텍스트에 aria-labelledby 속성으로 함
- 특정 role을 필요로 하는 자식 요소가 부족하거나 누락되었습니다.→ role="tablist"를 가진 <ul> 요소의 자식 <li> 에 role="tab" 속성을 추가해야 한다.
- <ul class="slick-dots" style="display: block;" role="tablist"> <ul class="slick-dots" style="" role="tablist">
- ARIA 토글 필드에 접근 가능한 이름이 없습니다.→ aria-label 속성으로 슬라이드 내용이나 목적을 설명해야 함.
- <div class="item slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide10" style="width: 412px;">
- [aria-*] 속성의 값이 유효하지 않습니다.→ ARIA 속성의 사용: role="presentation"을 가진 요소에는 다른 ARIA 속성 (aria-selected, aria-controls 등)이 있어서는 안 됩니다. 이런 속성들은 보조 기술에 의미 있는 정보를 제공하는 것으로 간주되므로, 순전히 장식용 요소에는 적합하지 않습니다.
- 완전 장식용이라면 role=”presentation” 사용으로 스크린 리더에서 무시될 수 있도록 하는게 맞음. 하지만 실제 사용자와 상호작용을 할 수 있고, 슬라이더의 특정 위치로 이동하는 기능을 제공한다면 role=”tab”과 같은 aria-tag 사용을 고려해야한다.
- : <li class="slick-active" aria-hidden="false" role="presentation" aria-selected="true" aria-controls="navigation00" id="slick-slide00">이미지 슬라이더 밑의 인디케이터 용 dots
- 배경색과 전경색의 대비 비율이 충분하지 않습니다.
- 링크에 구별 가능한 이름이 없습니다.
- → “aria-label”을 사용해 링크의 목적을 제공해야 함.
- <meta name="viewport"> 요소에서 [user-scalable="no"]가 사용되었거나 [maximum-scale] 속성이 5 미만입니다.→ maximum-scale 속성이 5 미만의 값으로 설정되어 있다면, 이 값을 5 이상으로 설정하거나 속성 자체를 제거
- → user-scalable=no 속성은 사용자가 페이지를 확대/축소하는 것을 방지하는데, 이는 저시력 사용자나 장애를 가진 사용자들이 콘텐츠를 제대로 보거나 읽는 데 어려움을 겪게 할 수 있다. 이는 웹사이트의 접근성을 저하시키는 주요 요인 중 하나.
2. 42 인트라 https://profile.intra.42.fr/
- A form control does not have a corresponding label.
- → 검색창 input에 대응하는 label이 존재해야 한다 <input aria-label="search" ... >
- An aria-labelledby or aria-describedby reference exists, but the target for the reference does not exist.
- → <ul> 태그에 aria-labelledby="User menu" 속성이 있는데 “User menu”라는 id를 가진 참조대상이 존재하지 않는다. 이러한 부정확한 참조는 스크린 리더와 같은 보조 기술을 사용하는 사용자에게 혼란을 줄 수 있다.
- A select element does not have an associated label
- → <label for="courseSelect">과정 선택:</label> <select id="courseSelect” … > select에도 <label>로 select의 용도나 기능을 설명해야한다.
'Front-End' 카테고리의 다른 글
| [React / Next.js + Zustand] StompJS로 채팅 구현하기 (2) - 실시간 채팅 방 상태 관리하기 (2) | 2024.04.05 |
|---|---|
| [React / Next.js] StompJS로 채팅 구현하기 (1) - 웹 소켓 연결 (0) | 2024.03.29 |
| Next.js에서 Axios Interceptor 작성하기 (feat. Zustand, localStorage) (1) | 2024.03.23 |
| [Next.js + Vanilla Extract css + Storybook] 공용 컴포넌트 만들기 (feat. 절대경로) (0) | 2024.03.15 |
| 컴포넌트 랜덤 분포 애니메이션 구현하기 (0) | 2024.03.08 |
