“📢 스크린 리더: 접근성, 상세보기, 버튼, 눌림”

"실무에 바로 적용하는 웹 접근성 가이드북" 책을 읽고 알게 된 내용들, 도움이 되는 내용들, 실무에 바로 적용할 수 있는 내용들, 나중에 생각 안 날 때 볼 내용들을 정리 해보려고 한다.

🙂‍↔️ (나는) 접근성을 알고 있는가?

프론트엔드 채용 공고들을 살펴보면 "접근성"이라는 키워드가 들어있는 것들을 자주 봤을 것이다. 보통은 접근성에 대한 키워드에 크게 중요하다 생각하지 않고, 다른 키워드들에 더 집중하는 경향이 있다. (적어도 나는 그랬다.)

이 책을 읽기 전에 접근성을 생각하면서 개발에 적용한 것들은 meta 태그 사용하기, aria-label 달기, img 태그에 alt 쓰기 와 같이 단순한 것들이었다.

지금와서 생각해보면 접근성을 알고 개발에 사용한 것이 아니라 '그냥' 개발 했던 것 같다. 접근성에 대한 정리와 실제 스크린 리더가 어떻게 읽는지 예시와 함께 정리하려고 한다.

🚥 웹 접근성이란?

다양한 신체적/환경적 조건과 관계없이, 웹 접근성은 모든 사용자가 웹에서 제공하는 콘텐츠(정보)에 어려움 없이 접근 가능하도록 함을 의미한다.

접근성을 지켜야 하는 이유?
접근성을 지켜야 하는 이유가 크게 와닿지 않을 수 있는데 이 글을 읽어보면 쉽게 이해할 수 있다.

🛖 의미있게(시맨틱하게) 태그 사용하기

시멘틱 태그를 지키는 것만으로도 접근성을 지키는데 도움이 된다. 단순히 디자인상으로 동일하게 화면을 구성하는 것이 아니라 "의미에 맞는 태그"를 쓰는 것을 고민해야 한다.

이 그림은 예전에 처음 HTML 공부할때 봐왔던 사진이다. 이 태그들을 개발할때 모두 의미론적으로 "정확히" 알면서 쓰는가? (일단 나는 아니였다.)

1. <article> vs <section>

article 태그와 section 태그는 콘텐츠 영역을 구분하는 데 사용된다. 두 태그의 가장 큰 차이점은 article은 완전히 독립적인 영역으로 사용되고, seciton은 웹페이지 내 주요 주제의 일부 영역이라는 점이다.

<!-- article: 독립적인 게시글 -->
<article>
  <h2>React 19 출시!</h2>
  <p>React 팀에서 React 19의 정식 버전을 공개했습니다. 많은 새로운 기능이 추가되었습니다.</p>
</article>

<!-- section: 페이지 내 특정 주제를 묶는 구간 -->
<section>
  <h2>회원 가입 방법</h2>
  <p>이 서비스에 가입하려면 이름과 이메일이 필요합니다.</p>
</section>

2. <p> vs <span> vs <div>

이 태그들은 매우 자주 쓰이는 태그들인데, 각 태그들의 용도를 기억하면 구분이 쉽다.

• p: Paragraph라는 의미로 글의 내용상 끊어서 구분하는 토막을 나타낸다.
• span: 아무런 의미가 없는 태그로, 스타일을 지정하고 싶은 텍스트를 묶는 용도로 사용한다.
• div: Division을 의미하는 태그로, 아무런 의미가 없지만 영역을 구분하는 컨테이너 역할로 사용된다.

3. <strong> vs <b/>

strong 태그와 b 태그 둘다 굵은 텍스트로 화면에 그리지만 다른 의미로 사용한다.

• strong 태그: 화면에서 중요한 의미를 가지는 텍스트에 사용되는 태그
• b 태그: 단순히 독자의 주의를 끌기 위한 텍스트에 사용되며 중요도를 부여하는 것이 아님!

<p>
  결제는 <strong>보안 연결(HTTPS)</strong>을 통해 이루어져야 합니다.
</p>

<!-- b: 단순 시각적 강조 -->
<p>
  오늘의 추천 메뉴: <b>치즈버거 세트</b>
</p>

4. <em> vs <i/>

em, i 태그 모두 italic 속성이 추가된 텍스트가 표시된다. 이 둘의 태그도 역할이 다르다.

• em: strong 태그와 비슷하게 중요한 의미를 가지는 텍스트에 사용되는 태그
• i: 관용적 또는 기술적 표현의 텍스트를 나타내기 위해 사용되는 태그

<!-- em: 문맥상 강조 -->
<p>
  저는 <em>정말로</em> 피자를 좋아합니다.
</p>

<!-- i: 관용적/기술적 표현 -->
<p>
  이탈리아어로 "사랑"은 <i>amore</i> 입니다.
</p>

5. <br> vs <hr>

br은 Line Break를 의미하며 텍스트를 줄바꿈할 때 사용된다. 이는 단순히 줄바꿈에만 영향을 주는 것이 아니라 스크린 리더에도 영향을 준다.(스크린 리더가 br을 만나면 '줄바꿈', '비어있음' 이라고 안내하는 경우도 있다.) 스타일적인 간격을 주기 위한 용도로 사용하면 스크린 리더가 잘못 읽게 된다.

<p>
  이것은 줄바꿈
  <br/>
  테스트이다.
</p>

// 📢 스크린 리더: 이것은 줄바꿈 (멈춤) 그룹이 비어 있음 (멈춤) 테스트이다.
// => 스크린 리더가 중간에 한번 끊어서 읽게 됨

hr은 주제가 전환되는 영역 사이의 구분을 나타내기 위해 사용된다. 스크린 리더가 hr 태그를 만나게 되면 '수평 분할선', '구분선'로 안내하는 경우도 있어서 스타일적으로만 사용하면 안된다.

6. <table>

• 표의 제목은 반드시 <caption>으로 작성한다.
• 표의 영역은 <thead>, <tbody>, <tfoot> 으로 구분한다.
• 데이터 셀(<td>)과 구분되는 헤더 셀(<th>) 을 올바르게 사용해야 한다.
• <th>에는 scope="col"(열 헤더), scope="row"(행 헤더)를 지정한다.
• 레이아웃 용도로 <table>을 사용하지 않는다. (CSS Flex/Grid 활용 권장)
• 스크린 리더는 <table>을 데이터 표로 인식하기 때문에 의미 없는 사용은 오히려 접근성을 해친다.

<table>
  <caption>2025년 9월 사내 교육 일정</caption>
  <thead>
    <tr>
      <th scope="col">날짜</th>
      <th scope="col">주제</th>
      <th scope="col">강사</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">9월 3일</th>
      <td>React 고급 패턴</td>
      <td>김개발</td>
    </tr>
    <tr>
      <th scope="row">9월 10일</th>
      <td>TypeScript 실무</td>
      <td>이프론트</td>
    </tr>
  </tbody>
</table>

7. <button>

button 태그는 기본적으로 Space, Enter로 활성화가 가능하다. button 에는 type 속성을 지정할 수 있는데 기본적으로 'submit'이 지정된다. (이렇기 때문에 버튼 사용시 type="button"이라고 명시하는 것)

• type="submit": 사용자로부터 입력받은 데이터를 제출할 수 있는 기능
• type="reset": 사용자로부터 입력받은 데이터를 초기화 하는 기능
• type="button": 일반적인 버튼 기능

🕸️ WAI-ARIA 들

시맨틱 태그들로만 모든것을 정의하기에는 웹이 점점 복잡해졌고, 이를 보완하기 위해서 속성 값으로 상태를 나타내는게 필요했다. 그것이 바로 W3C에서 작성한 기술 문서인, WAI-ARIA(web accessibility initiavtie - accessible rich internet application)이다.

각 태그들에게 역할에 맞는 상태나 속성을 지정하면, 웹브라우저는 접근성 트리로 변환하게 된다. 속성들을 부여할 경우 실제 동작에는 아무런 영향을 주지 않기 때문에 이를 유의해야 한다.

개발자 도구에서 접근성 트리를 확인할 수 있다.

🤔: aria-xx 대해서 공부하고 싶었는데, 깔끔하게 정리된 문서를 못 찾았었는데 책을 읽으면서 많이 알게 된 것 같다.

W3C에서 권장하는 ARIA 사용 규칙

1. ARIA를 사용하기 전에 기본 HTML 요소를 우선적으로 고려한다.

❌ 나쁜 예시 (불필요한 ARIA)

<!-- role="button" 으로 span을 버튼처럼 쓰는 경우 -->
<span role="button" aria-pressed="false">클릭</span>

✅ 좋은 예시 (기본 HTML 요소 사용)

<!-- 기본 button 요소 사용 -->
<button>클릭</button>

2. 꼭 필요한 경우가 아니라면 요소의 기본 의미를 변경하지 않는다.

❌ 나쁜 예시

<!-- h1을 role="presentation" 으로 의미 제거 -->
<h1 role="presentation">공지사항</h1>

✅ 좋은 예시

<h1>공지사항</h1>

3. 상호작용이 가능한 ARIA 역할의 경우 반드시 키보드 사용성을 보장해야 한다.

❌ 나쁜 예시 (키보드 접근 불가)

<div role="button">제출</div>

✅ 좋은 예시 (키보드 이벤트 추가)
// 버튼은 space와 Enter키로 동작이 가능해야 한다.
<div 
  role="button" 
  tabindex="0" 
  onclick="alert('제출됨')" 
  onkeydown="if(event.key === 'Enter' || event.key === ' ' || event.key === 'Space') alert('제출됨')"
>
  제출
</div>

✅ 하지만 더 좋은 방법은 그냥 button을 사용하는 것!

<button onclick="alert('제출됨')">제출</button>

4. 초점(focus) 가능한 요소에 role=presentation 또는 aria-hidden="true"속성을 사용하지 않는다.

❌ 나쁜 예시

<a href="/home" aria-hidden="true">홈으로</a>

→ 시각적으로는 보이는데 스크린리더에서 읽히지 않아 접근성 문제 발생

✅ 좋은 예시

<a href="/home">홈으로</a>

5. 상호작용이 가능한 대화형 요소에는 반드시 접근성 API가 접근할 수 있는 이름이 있어야 한다.

❌ 나쁜 예시 (레이블 없음)

<button></button>

✅ 좋은 예시 (텍스트 제공)

<button>검색</button>

✅ 아이콘 버튼인 경우 aria-label 제공

<button aria-label="검색">
  <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16">
    <circle cx="6" cy="6" r="5" stroke="black" fill="none"/>
    <line x1="10" y1="10" x2="15" y2="15" stroke="black"/>
  </svg>
</button>

자주 사용되는 ARIA 상태 및 속성

대화형 요소에 스크린 리더가 읽는 순서는 "인터랙티브 요소에 이름 붙이기" 글을 추천한다.

aria-activedescendant

활성화 된 하위 항목을 보조 기술(스크린 리더)을 통해 전달하기 위해 사용된다.

• 실제 초점이 상위 항목에 유지되어 있어도 스크린 리더를 사용하면 활성화된 하위 항목에 초점을 받은 상태인 것 처럼 스크린 리더 초점 표시기가 노출된다.

✅ 좋은 예시
<div role="listbox" tabindex="0" aria-activedescendant="item-2">
  <div id="item-1" role="option">옵션 1</div>
  <div id="item-2" role="option" aria-selected="true">옵션 2</div>
  <div id="item-3" role="option">옵션 3</div>
</div>

❌ 나쁜 예시
<div role="listbox" tabindex="0" aria-activedescendant="item-99">
  <!-- id="item-99" 요소가 존재하지 않음 -->
</div>

aria-atomic

aria-live 영역의 내용이 변경될 때 스크린 리더가 읽어줄 영역의 범위를 결정하기 위해 사용된다.

• 라이브 영역 전체 내용을 안내하기보다 특정 영역의 변경된 내용만 읽어주길 원할때 사용한다.
• 너무 큰 영역을 atomic으로 지정하면 불필요하게 모든 내용을 반복 낭독할 수 있다.

<div aria-live="polite" aria-atomic="true">
  <span>현재 상태: </span><span>대기 중</span>
</div>

aria-autocomplete

사용자 입력값에 따라 자동 완성 지원 여부와 자동 완성되는 단어들을 어떤 형태로 제공할지를 나타내기 위해 사용된다.

• none: 자동완성 기능을 제공하지 않음
• inline: 사용자가 입력한 값 뒤쪽으로 자동 완성된 값을 제공
• list: 사용자가 입력한 값에 맞는 자동 완성이 가능한 값들을 목록 형태로 제공
• both: inline + list 동시 제공

<input type="text" role="combobox" aria-autocomplete="list" aria-owns="suggestions" />
<ul id="suggestions" role="listbox">
  <li role="option">사과</li>
  <li role="option">바나나</li>
</ul>

aria-checked

현재 요소의 '체크된 상태'를 나타내기 위해 사용된다. (checkbox, radio 등의 요소에 자주 사용된다.)

<div role="checkbox" aria-checked="true" tabindex="0">동의합니다</div>

• 가능하면 기본checkbox, radio 요소를 사용하는 게 좋다.

aria-controls

현재 요소에 의해 제어되는 요소를 식별하기 위해 사용된다. 특정 요소에 제어되는 요소를 식별하여 요소 간 관계를 나타낸다.

⚠️ 대부분의 스크린 리더에서 이 속성을 지원하지 않아 논의중으로 보인다.

• https://support.freedomscientific.com/Downloads/JAWS/JAWSWhatsNew?version=2019
• https://a11ysupport.io/tech/aria/aria-controls_attribute

<button aria-controls="menu" aria-expanded="false">메뉴 열기</button>
<ul id="menu" hidden>
  <li>항목1</li>
  <li>항목2</li>
</ul>

aria-current

연관된 요소 그룹 내에서 현재 항목에 해당하는 요소를 나타내기 위해 사용된다. 같은 그룹 내 “하나의 요소”에만 aria-current="true"가 있어야 한다.

• page: 네비게이션 링크 메뉴에서 현재 페이지를 나타낼 때 사용한다.
• step: 단계가 있는 UI에서 현재 단계를 나타낼 때 사용한다.
• location: 계층 구조의 UI에서 현재 위치를 나타낼 때 사용한다.
• date: 여러 날짜 중에서 현재 날짜를 나타낼 때 사용한다.
• time: 여러 시간 중에서 현재 시간을 나타낼 때 사용한다.
• true|false: 다른 값들로 특정할 수 없는 현재 항목을 나타낼 때 사용 | 현재 항목을 나타내지 않는다.

<nav>
  <a href="/home">홈</a>
  <a href="/about" aria-current="page">소개</a>
  <a href="/contact">문의</a>
</nav>

aria-describedby

현재 요소에 대한 상세한 설명을 다른 요소를 통해 제공하기 위해 사용된다.

• 상세한 설명이 필요한 요소를 페이지에 랜더링되어 있는 id값을 찾게 된다.
• 이때는 시각적으로는 숨겨져 있어도 되지만, display:none, aria-hidden="true"와 같이 스크린 리더가 인지할 수 없으면 설명을 제공하지 못한다.

<button aria-describedby="tip1">삭제</button>
<p id="tip1" class="sr-only">이 버튼은 선택한 항목을 삭제합니다.</p>

aria-disabled

현재 요소가 접근 가능하지만 의미적으로 비활성화된 상태임을 알리기 위해 사용한다.

여기서 중요한 점은 요소가 접근 가능하기 때문에 시각적으로 보이고, 모든 기능이 정상적으로 동작한다. 그러므로 실제 기능을 끄기 위해서는 disabled 속성을 사용해야 한다.

• 기능은 비활성화되지만 사용자가 키보드 Tab키로 해당 요소를 탐색할 수 있기를 원하는 경우

<!-- 저장 버튼은 아직 동작하지 않지만 Tab으로 탐색 가능 -->
<button aria-disabled="true" tabindex="0" onclick="alert('실행되지 않음')">
  저장
</button>

• 요소의 원래 기능은 비활성화되지만 다른 기능의 이벤트를 원하는 경우

<!-- 구매하기 버튼은 아직 막아두지만, 클릭하면 안내 메시지 표시 -->
<button aria-disabled="true" onclick="alert('구매는 로그인 후 가능합니다.')">
  구매하기
</button>

• HTML disabled 속성을 지원하지 않는 요소에 ARIA역할을 추가해 대화형 요소로 만든 경우

<!-- role="button" 으로 대화형 요소를 만들고, aria-disabled로 비활성화 표시 -->
<div role="button" aria-disabled="true" tabindex="0" onclick="alert('실행되지 않음')">
  커스텀 버튼
</div>

aria-expanded

현재 요소의 확장/축소 여부를 나타내기 위해 사용한다. 이때 중요한 점은 이미 텍스트로 '확장/축소 여부'를 나타내고 있다면 중복으로 속성을 부여하지 않아도 된다.

<button type="button" aria-expanded={isExpanded} aria-controls="detail">
  상세 보기
  // 화면상에는 표기하지 않음
  <span className="visually-hidden">{isExpanded ? "확장됨" : "축소됨"}</span>
</button>
<div id="detail" hidden>상세 내용</div>

// isExpanded="true"인 경우 📢 스크린 리더: "상세보기: 확장됨,확장됨, 버튼"
// isExpanded="false"인 경우 📢 스크린 리더: "상세보기: 축소됨,축소됨, 버튼"

이렇게 스크린 리더에서 두번 반복되어 나오기 때문에 별도로 텍스트를 넣을 필요가 없다.

또 다른 예시로는

<ul>
  <li>질문</li>
  ...
  {isExpanded && <li></li>}
</ul>
<button type="button" onClick={() => setIsExpanded(!isExpanded)}>
  {isExpanded ? "접기" : "더보기"}
</button>

이미 버튼의 텍스트로 "접기/더보기"를 제공해주기 때문에 aria 속성을 넣을 필요가 없다.

aria-haspopup

현재 요소에 의해 어떤 유형의 대화형 팝업 요소가 노출될 것인지를 나타내기 위해 사용된다.
스크린 리더 사용자에게 어떤 팝업 요소가 노출될 것인지 미리 알려주는 역할을 하는 것이다.

-menu, listbox, tree, grid, dialog, true|false 와 같은 속성들이 있다.

aria-hidden

스크린 리더를 사용중인 사용자들에게 현재 요소를 숨기기 위해 사용한다.

• css로 콘텐츠를 숨길 경우에는 스크린 리더가 읽지 못하기 때문에 속성을 부여하지 않아도 된다.
• 부모 요소가 aria-hidden="true"로 되어 있을 경우 자식 요소는 모두 읽을 수 없다.

상위 요소에 aria-hidden을 넣어도 초점 가능한 요소가 자식에 있다면 Tab키로 접근이 가능하다.

❌ 나쁜 예시

// 버튼 태그는 focus가 가능
<div aria-hidden="true">
  <button type="button">...</button>
</div>

// tabIndex가 0이면 focus가 가능
<div aria-hidden="true">
  <a tabIndex={0}>...</a>
</div>

그러므로 하위 요소에 초점 가능한 요소가 있다면 제거하거나 초점 가능한 요소를 초점 불가하게 만들어야 한다.

// 초점이 불가하도록 -1로 지정
<div aria-hidden="true">
  <a tabIndex={-1}>...</a>
</div>

// css로 숨기기
<div aria-hidden="true">
  <button type="button" style={{ display: "none" }}>...</button>
</div>

// disabled 속성 지정
<div aria-hidden="true">
  <button type="button" disabled>...</button>
</div>

aria-label

현재 요소의 이름을 문자열 형태로 제공하여 스크린 리더를 통해 목적을 인식할 수 있도록 하기 위해 사용한다.

• 콘텐츠에 접근 가능한 레이블이 없고, 외부에서 해당 콘텐츠의 설명이 가능하다면 aria-lablledby 속성을 사용하면 된다.

aria-label, aria-labelledby를 동시에 사용하면 labelledby가 우선으로 적용된다.

// 스크린 리더: "열기, 버튼"
<button type="button" aria-label="닫기" aria-labelledby="button-label">
  <img src="close.png" alt="" />
</button>
<span id="button-label">열기</span>

aria-labelledby

현재 요소의 레이블을 다른 요소를 통해 정의하기 위해 사용한다.

• 레이블이 필요한 요소에 aria-labelledby 속성을 추가하고, 요소의 id값을 참조하여 설명이 가능하다.
• 여러 요소의 id값을 참조하여, 참조된 순서에 따라 레이블을 결합하여 전달할 수 있다.

// 스크린 리더: "결제 비밀번호 숫자 6자리, 비밀번호 입력창"
<span id="payment-label">결제 비밀번호</span>
<span id="payment-hint">(숫자 6자리)</span>

<input type="password" aria-labelledby="payment-label payment-hint" />

aria-level

계층 구조 내에서 현재 요소의 계층적 수준을 나타내기 위해 사용한다.

• 계층 구조 내에서 요소 간의 계층 수준을 명시적으로 표시할때 사용한다.
• 즉, 마크업 구조상으로 계층 수준 파악이 가능하다면 속성을 추가하지 않아도 된다.

aria-live

특정 요소의 내용이 동적으로 변경될 때, 스크린 리더 사용자에게 알리기 위해 사용된다.

• 페이지가 로드 된 이후 동적으로 변경되는 콘텐츠들을 알려주기 위해 사용한다.
• polite: 콘텐츠가 업데이트되면 보조기술(스크린리더)이 현재 전달하고 있는 메시지를 모두 전달한 후 업데이트 된 내용을 알린다.
• assertive: 콘텐츠가 업데이트되면 보조기술이 현재 전달하고 있는 메시지를 중지하고 즉시 업데이트된 콘텐츠를 알린다.
• off: 기본값으로 해당 요소 내부가 aria-live 영역으로 지정되지 않는다.

aria-modal

현재 요소의 모달 여부를 나타내기 위해 사용한다.

• 모달이 노출되면 초점(focus)가 모달 내부로 이동해야 한다.
• 모달이 닫히기 전 까지 모달 내부에서만 이동 가능하도록 제한되어야 한다.
• 모달이 닫히면 이전에 노출시킨 트리거 요소로 초점이 복귀되어야 한다.

<div role="dialog" aria-modal="true">
  <h2>로그인</h2>
  <form>...</form>
</div>

aria-multiselectable

현재 항목의 선택 가능한 하위 항목을 2개 이상 동시에 선택할 수 있는지를 나타내기 위해 사용한다.

• 선택된 항목에는 aria-selected="true" 속성을 추가해서 선택되었는지 알려야 한다.

<ul role="listbox" aria-multiselectable="true">
  <li role="option" aria-selected="true">사과</li>
  <li role="option" aria-selected="true">바나나</li>
  <li role="option" aria-selected="false">체리</li>
</ul>

aria-orientation

현재 요소의 방향이 가로인지 세로인지를 나타내는 데 사용한다.

• horizontal(수평 방향), vertical(수직 방향)을 지정할 수 있다.
• 기본 방향과 다른 UI를 구현할 경우 속성을 추가해 방향을 나타내야 한다.

<!-- 세로 탭 UI -->
<div role="tablist" aria-orientation="vertical">
  <button role="tab" aria-selected="true">탭 1</button>
  <button role="tab" aria-selected="false">탭 2</button>
  <button role="tab" aria-selected="false">탭 3</button>
</div>

aria-pressed

버튼을 토글 버튼 역할로 변경시키고, 토글 버튼이 현재 눌린 상태인지 나타내기 위해 사용한다.

• aria-pressed 속성을 통해 상태 변화를 나타내는데, 이때 레이블도 변화를 주면 혼란을 줄 수 있다. 레이블을 통해 버튼의 상태가 나타난다면 굳이 제공하지 않아도 된다.

export const PlayPauseButton = () => {
  const [playing, setPlaying] = useState(false);

  const handleClick = () => {
    setPlaying(prev => !prev);
  };

  return (
    <button
      onClick={handleClick}
      aria-pressed={playing}         // 현재 상태를 스크린 리더에 전달
      aria-label={playing ? "일시정지" : "재생"} // 레이블로 상태 제공
    >
      {playing ? "⏸️ 일시정지" : "▶️ 재생"}
    </button>
  );
};

// 재생 전 📢 스크린 리더: "재생, 버튼, 눌리지 않음"
// 재생 중 📢 스크린 리더: "일시정지, 버튼, 눌림"

레이블과 상태 변화를 동시에 주면 스크린 리더가 읽은 내용이 헷갈릴 수 있다.
즉, label을 고정해서 스크린 리더가 읽을때 내용이 헷갈리지 않게 해야 한다.

export const PlayPauseButton = () => {
  const [playing, setPlaying] = useState(false);

  const handleClick = () => {
    setPlaying(prev => !prev);
  };

  return (
    <button
      onClick={handleClick}
      aria-pressed={playing}       // 상태는 aria-pressed로만 전달
      aria-label="재생/일시정지"   // 레이블은 고정
    >
      {/* 시각적 표시: 선택 사항 */}
      {playing ? "⏸️" : "▶️"}
    </button>
  );
};

// 재생 전 📢 스크린 리더: "재생/일시정지, 버튼, 눌리지 않음"
// 재생 중 📢 스크린 리더: "재생/일시정지, 버튼, 눌림"

aria-readonly

현재 요소가 읽기 전용 상태임(편집 불가능)을 나타내기 위해 사용한다.

• 실제 요소가 편집 불가능하도록 지정하는게 아니기 때문에, 편집 불가능하도록 처리하기 위해서는 자바스크립트를 통해 막아야 한다.
• readonly 속성을 사용할 수 있다면, 해당 속성으로도 충분하다.

다음과 같이 div 태그를 input처럼 사용하고 readonly로 쓰고 싶을때는 아래 코드와 같이 써야 한다.

<div role="textbox" aria-readonly="true" contenteditable="true" id="readonly-box">
  읽기 전용 값
</div>

<script>
  const readonlyBox = document.getElementById("readonly-box");

  // 키 입력 차단
  readonlyBox.addEventListener("keydown", (e) => {
    e.preventDefault();
  });

  // 마우스로 붙여넣기 차단
  readonlyBox.addEventListener("paste", (e) => {
    e.preventDefault();
  });
</script>

aria-required

양식 제출 전에 사용자 입력이 필요한 요소임을 나타내기 위해 사용한다.

• input, select, textarea 태그의 required 속성을 사용한다면 속성을 부여하지 않아도 된다.
• aria-required를 사용한다고 해서 유효성 검사나, 제출 방지를 따로 제공하지 않기 때문에 직접 구현해야 한다.

<form id="signup-form">
  <label for="email">이메일</label>
  <input type="email" id="email" aria-required="true" />

  <button type="submit">가입</button>
</form>

<script>
  document.getElementById("signup-form").addEventListener("submit", (e) => {
    const email = document.getElementById("email");
    if (!email.value.trim()) {
      e.preventDefault();
      alert("이메일은 필수 입력 항목입니다.");
      email.focus();
    }
  });
</script>

(이렇게 할거면 required 속성을 쓰는게 더 좋다.)

aria-selected

현재 요소가 선택되었는지 여부를 나타내기 위해 사용한다.

• 현재 선택된 요소에 true값을, 아닌 요소에는 false 를 부여하여 선택되었는지를 알려야 한다.

aria-valuemax/aria-valuemin/aria-valuenow

범위를 나타내는 현재 요소에서 허용되는 최댓값/최솟값/현재값을 나타내기 위해 사용한다.

• 숫자로 최댓값/최솟값/현재값을 나타내야 한다.

aria-valuetext

범위를 나타내는 현재 요소에서 현재 값을 원하는 텍스트 형식으로 나타내기 위해 사용한다.

• 스크린 리더에 따라 백분율로 계산하여 안내하는 경우도 있고, 숫자만으로는 현재값이 어떤 값인지 모를수 있다.
• 기호나 단위를 추가하여 원하는 텍스트 형식으로 값을 제공할 수 있다.

<div role="slider" 
     aria-valuemin="0" 
     aria-valuemax="100" 
     aria-valuenow="30" 
     aria-valuetext="30% 완료">
</div>

---

이렇게 정리하고 보면 HTML에서 제공해주는 기본적인 태그들이 있다면 이를 활용하는게 가장 좋고, 스크린 리더가 읽혔을 때를 고려하여 aria-xx 속성을 부여하는게 가장 중요하다.

🧱 접근성을 지키는 컴포넌트 만들기

책에서는 Accordion, Carousel, Dialog 등 프론트엔드 개발을 하다보면 자주 마주치게 되는 UI에 대해서 접근성을 지키면서 개발하는 방법들을 알려준다.

이 중에 가장 자주 쓰이지만 그만큼 구현 방식이 너무나도 다양한 Dialog 컴포넌트를 뜯어보고, Radix/ui의 Dialog 컴포넌트를 뜯어보려고 한다.

Dialog 컴포넌트에 지켜야할 접근성 규칙

• 스크린리더 사용자가 dialog 역할을 인지 할 수 있도록 한다.(role & aria-modal)
• 화면에 나타나게 하는 트리고 요소가 dialog 역할을 인지 할 수 있도록 한다. (aria-haspopup)
• 다이얼로그들의 각 요소에 설명을 나타낸다. (aria-labelledby, aria-describedby)
• dialog가 열리면 초점이 내부로 이동되어야 하고, 초점 이동이 다이얼로그 안에서만 이뤄져야 한다.

위의 규칙들을 하나씩 지키면서 구현해보자.

dialog 역할을 인지할 수 있도록 명시

• aria-haspopup을 사용하여 dialog가 열릴 것이라는 것을 표기한다.
• role="dialog",aria-modal="true"를 통해 dialog 형태인 것을 명시한다. (이때 aria-modal는 모달형태인 것을 의미한다.)

function Dialog() {
  const dialogRef = useRef(null);
  const contentRef = useRef(null);

  const [showDialog, setShowDialog] = useState(false);

  return (
    <>
      {/* Dialog를 화면에 나타나게 하는 트리거 요소 */}
      <button
        type="button"
        // 현재 열리게 될 것이 dialog인 것을 명시한다.
        aria-haspopup="dialog"
        onClick={() => setShowDialog(true)}
        className={cx("button")}
      >
        Dialog 노출
      </button>
      {showDialog && (
        <div
          ref={dialogRef}
          // dialog 역할과 modal임을 명시한다.
          role="dialog"
          aria-modal="true"
          className={cx("dialog")}
        >
          <div ref={contentRef} tabIndex={-1} className={cx("content")}>
            <button
              type="button"
              aria-label="닫기"
              onClick={() => setShowDialog(false)}
              className={cx("button-close")}
            />
            <h2 className={cx("title")}>
              다이얼로그 타이틀
            </h2>
            <p className={cx("desc")}>
              다이얼로그 설명
            </p>
            <button
              type="button"
              onClick={() => setShowDialog(false)}
              className={cx("button-confirm")}
            >
              확인
            </button>
          </div>
        </div>
      )}
    </>
  );
}

다이얼로그들의 각 요소에 설명을 나타낸다.
aria-labelledby,aria-describedby를 사용하여 제목과 설명을 id값을 참조한다.

function Dialog() {
  const dialogRef = useRef(null);
  const contentRef = useRef(null);

  const [showDialog, setShowDialog] = useState(false);

  return (
    <>
      {/* Dialog를 화면에 나타나게 하는 트리거 요소 */}
      <button
        type="button"
        aria-haspopup="dialog"
        onClick={() => setShowDialog(true)}
        className={cx("button")}
      >
        Dialog 노출
      </button>
      {showDialog && (
        <div
          ref={dialogRef}
          role="dialog"
          aria-modal="true"
          // 모달 요소의 설명을 위해 id를 추가한다.
          aria-labelledby="dialog-title-id"
          aria-describedby="dialog-description-id"
          className={cx("dialog")}
        >
          <div ref={contentRef} tabIndex={-1} className={cx("content")}>
            <button
              type="button"
              aria-label="닫기"
              onClick={() => setShowDialog(false)}
              className={cx("button-close")}
            />
            // id를 매핑한다.
            <h2 id="dialog-title-id" className={cx("title")}>
              다이얼로그 타이틀
            </h2>
            <p id="dialog-description-id" className={cx("desc")}>
              다이얼로그 설명
            </p>
            <button
              type="button"
              onClick={() => setShowDialog(false)}
              className={cx("button-confirm")}
            >
              확인
            </button>
          </div>
        </div>
      )}
    </>
  );
}

dialog 내부에서 초점이 이동되어야 한다.

const INTERACTIVE_ELEMENTS =
  "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])";

function Dialog() {
  ...
  
  useEffect(() => {
    if (!showDialog) {
      return;
    }

    const dialogContent = contentRef.current;

    /* 열릴 때 활성화된 요소 저장 */
    const prevFocusRef = document.activeElement;

    /* 열릴 때 내부로 초점 이동 */
    dialogContent.focus();

    /* Dialog 내 초점 가능한 요소들 */
    const focusableElements =
      dialogContent.querySelectorAll(INTERACTIVE_ELEMENTS);
    const firstFocusableElement = focusableElements[0];
    const lastFocusableElement =
      focusableElements[focusableElements.length - 1];

    /* 내부 초점 순환 */
    const focusTrap = (event) => {
      const currentFocusElement = document.activeElement;
      const isFirstFocusableElementActive =
        currentFocusElement === firstFocusableElement;
      const isLastFocusableElementActive =
        currentFocusElement === lastFocusableElement;

      if (event.code === "Tab") {
        /* 첫번째 요소에서 'Shift + Tab'키 동작 시 마지막 요소로 초점 이동 */
        if (event.shiftKey && isFirstFocusableElementActive) {
          event.preventDefault();

          lastFocusableElement.focus();
        }

        /* 마지막 요소에서 'Tab'키 동작 시 첫번째 요소로 초점 이동 */
        if (isLastFocusableElementActive) {
          event.preventDefault();

          firstFocusableElement.focus();
        }
      }
    };
    
    dialogContent.addEventListener("keydown", focusTrap);

    return () => {
      /* 닫힐 때 초점 복귀 */
      prevFocusRef.focus();

      dialogContent.removeEventListener("keydown", focusTrap);
    };
  }, [showDialog]);

  return (
    <>...</>
  );
}

로직을 살펴보면 초점이 가능한 요소들에서 첫번째/마지막 요소를 찾아 내부에서만 tab키로 focus 되도록 강제하고 있다. 그리고 닫히면 이전에 focus되어 있던 요소로 다시 focus 시키게 된다.

이외에도 추가적으로 다이얼로그가 열릴 때 외부 요소들에는 aria-hidden="true"를 적용해야 스크린 리더가 다이얼로그를 제대로 추적할 수 있다.

const INTERACTIVE_ELEMENTS =
  "a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])";

function Dialog() {
  ...
  
  useEffect(() => {
    if (!showDialog) {
      return;
    }
    
    // ...
    /* Dialog 형제 요소들 */
    
    const siblingNodes = dialogRef.current.parentNode.childNodes;

    Array.from(siblingNodes).forEach((child) => {
      if (child !== dialogRef.current) {
        child.setAttribute("aria-hidden", "true");
      }
    });
    
    //...
    
    dialogContent.addEventListener("keydown", focusTrap);

    return () => {
      /* 닫힐 때 초점 복귀 */
      prevFocusRef.focus();

      dialogContent.removeEventListener("keydown", focusTrap);
    };
  }, [showDialog]);

  return (
    <>...</>
  );
}

모든 형제들을 찾아서 aria-hidden="true" 속성을 부여하는 코드가 추가되었다.

모든 코드는 여기서 확인이 가능하다!
스토리북도 제공하는데, 여기서 확인이 가능하다.

Shadcn/ui > Dialog 컴포넌트 살펴보기

디자인 라이브러리들도 접근성을 열심히 지키고 있나 한번 살펴보자

Shadcn/ui
shadcn/ui는 Radix UI를 기반으로 만들어졌고, 디자인과 스타일을 추가한 컴포넌트 모음이다. (Radix UI는 컴포넌트의 기능만을 담아 제공하고, 디자인적인 요소는 모두 빠진 헤드리시 UI 컴포넌트 라이브러리이다.)

다이얼로그 컴포넌트 문서:
https://ui.shadcn.com/docs/components/dialog

실제로 shadcn-ui 코드에는 radix-ui를 임포트해 레핑하고 있다.
=> https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/dialog.tsx

위에서 직접 구현한 컴포넌트를 디자인 라이브러리에서는 추상화하여 풀어나간 것들이 몇개 있다.

다이얼로그 초점 이동 코드 뜯어보기

위에서는 내부 초점 이동을 반복 시키기 위해 focus 되는 요소들을 찾아 loop 시켰었다.
그러나 여기서는 FocusScope라는 추상화된 컴포넌트를 사용하여 선언적으로 사용중이다.

// https://github.com/radix-ui/primitives/blob/main/packages/react/dialog/src/dialog.tsx#L384C1-L424C3

const DialogContentImpl = React.forwardRef<DialogContentImplElement, DialogContentImplProps>(
  (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {
    const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
    const context = useDialogContext(CONTENT_NAME, __scopeDialog);
    const contentRef = React.useRef<HTMLDivElement>(null);
    const composedRefs = useComposedRefs(forwardedRef, contentRef);

    // Make sure the whole tree has focus guards as our `Dialog` will be
    // the last element in the DOM (because of the `Portal`)
    useFocusGuards();

    return (
      <>
        <FocusScope
          asChild
          loop
          trapped={trapFocus}
          onMountAutoFocus={onOpenAutoFocus}
          onUnmountAutoFocus={onCloseAutoFocus}
        >
          <DismissableLayer
            role="dialog"
            id={context.contentId}
            aria-describedby={context.descriptionId}
            aria-labelledby={context.titleId}
            data-state={getState(context.open)}
            {...contentProps}
            ref={composedRefs}
            onDismiss={() => context.onOpenChange(false)}
          />
        </FocusScope>
        {process.env.NODE_ENV !== 'production' && (
          <>
            <TitleWarning titleId={context.titleId} />
            <DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />
          </>
        )}
      </>
    );
  }
);
const DialogContentImpl = React.forwardRef<DialogContentImplElement, DialogContentImplProps>(
  (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {
    const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
    const context = useDialogContext(CONTENT_NAME, __scopeDialog);
    const contentRef = React.useRef<HTMLDivElement>(null);
    const composedRefs = useComposedRefs(forwardedRef, contentRef);

    // Make sure the whole tree has focus guards as our `Dialog` will be
    // the last element in the DOM (because of the `Portal`)
    useFocusGuards();

    return (
      <>
        <FocusScope
          asChild
          loop
          trapped={trapFocus}
          onMountAutoFocus={onOpenAutoFocus}
          onUnmountAutoFocus={onCloseAutoFocus}
        >
          <DismissableLayer
            role="dialog"
            id={context.contentId}
            aria-describedby={context.descriptionId}
            aria-labelledby={context.titleId}
            data-state={getState(context.open)}
            {...contentProps}
            ref={composedRefs}
            onDismiss={() => context.onOpenChange(false)}
          />
        </FocusScope>
      </>
    );
  }
);

그럼 FocusScope의 코드는 어떻게 되어 있을까?

// https://github.com/radix-ui/primitives/blob/main/packages/react/focus-scope/src/focus-scope.tsx

interface FocusScopeProps extends PrimitiveDivProps {
  loop?: boolean;                 // Tab 순환 여부
  trapped?: boolean;              // 스코프 외부로 포커스가 나가지 않도록 강제
  onMountAutoFocus?: (event: Event) => void; // 포커싱 이벤트에 대한 핸들러
  onUnmountAutoFocus?: (event: Event) => void;
}

컴포넌트가 마운트/언마운트될 때 처리하는 포커싱 이벤트 처리도 진행한다.

// 자동 포커싱 로직
// https://github.com/radix-ui/primitives/blob/main/packages/react/focus-scope/src/focus-scope.tsx#L132-L170

React.useEffect(() => {
    if (container) {
      focusScopesStack.add(focusScope);
      const previouslyFocusedElement = document.activeElement as HTMLElement | null;
      // 포커스가 가능한 후보들
      const hasFocusedCandidate = container.contains(previouslyFocusedElement);

      // 포커스가 가능하다면 커스텀 이벤트로 마운트 될때 포커스 시킴
      if (!hasFocusedCandidate) {
        const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
        container.addEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
        container.dispatchEvent(mountEvent);
        if (!mountEvent.defaultPrevented) {
          focusFirst(removeLinks(getTabbableCandidates(container)), { select: true });
          if (document.activeElement === previouslyFocusedElement) {
            focus(container);
          }
        }
      }

      return () => {
        // 이벤트 제거 로직
        container.removeEventListener(AUTOFOCUS_ON_MOUNT, onMountAutoFocus);
        // We hit a react bug (fixed in v17) with focusing in unmount.
        // We need to delay the focus a little to get around it for now.
        // See: https://github.com/facebook/react/issues/17894
        setTimeout(() => {
          const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
          container.addEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);
          container.dispatchEvent(unmountEvent);
          if (!unmountEvent.defaultPrevented) {
            focus(previouslyFocusedElement ?? document.body, { select: true });
          }
          // we need to remove the listener after we `dispatchEvent`
          container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus);

          focusScopesStack.remove(focusScope);
        }, 0);
      };
    }
  }, [container, onMountAutoFocus, onUnmountAutoFocus, focusScope]);

그리고 Tab키로 다이얼로그 내에서 이동할 때에도 focus가 벗어나지 않게 처리하는 것도 포함되어 있다.

// https://github.com/radix-ui/primitives/blob/main/packages/react/focus-scope/src/focus-scope.tsx#L173C9-L201

  const handleKeyDown = React.useCallback(
    (event: React.KeyboardEvent) => {
      if (!loop && !trapped) return;
      if (focusScope.paused) return;

      // 탭키만 눌렀을 경우
      const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey;
      // 활성화된 요소
      const focusedElement = document.activeElement as HTMLElement | null;

      if (isTabKey && focusedElement) {
        const container = event.currentTarget as HTMLElement;
        const [first, last] = getTabbableEdges(container);
        const hasTabbableElementsInside = first && last;

        // shift + tab 키는 이전 활성화 요소, tab 키는 다음 활성화 요소로 돌도록 처리
        // 단, loop 옵션이 있을때는 loop로 focus되도록 처리
        // we can only wrap focus if we have tabbable edges
        if (!hasTabbableElementsInside) {
          if (focusedElement === container) event.preventDefault();
        } else {
          if (!event.shiftKey && focusedElement === last) {
            event.preventDefault();
            if (loop) focus(first, { select: true });
          } else if (event.shiftKey && focusedElement === first) {
            event.preventDefault();
            if (loop) focus(last, { select: true });
          }
        }
      }
    },
    [loop, trapped, focusScope.paused]
  );

이외에도 focus된 요소와 관련된 다양한 헬퍼 함수들도 같이 정의 되어 있으니 코드 살펴보는 것도 추천한다.

다이얼로그 외부 요소 hidden 처리 코드 뜯어보기

스크린 리더가 다이얼로그 내부만 확인이 가능하도록 aria-hidden="true" 처리를 해야 한다고 했다.

라이브러리에서는 'aria-hidden 라이브러리'를 통해 내부 요소를 제외하고 모두 hidden 처리를 하고 있다.

// https://github.com/radix-ui/primitives/blob/main/packages/react/dialog/src/dialog.tsx#L265-L269

    // aria-hide everything except the content (better supported equivalent to setting aria-modal)
    React.useEffect(() => {
      const content = contentRef.current;
      if (content) return hideOthers(content);
    }, []);

다이얼로그 내부 요소들 접근성 속성 살펴보기

직접 구현했을 때에는 aria-describedby, aria-haspopup등 여러가지 속성들을 사용했는데 내부에도 있을지 살펴보자

코드에서 검색해보면 총 12개가 뜬다.

// https://github.com/radix-ui/primitives/blob/main/packages/react/dialog/src/dialog.tsx#L106-L108

const DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>(
  (props: ScopedProps<DialogTriggerProps>, forwardedRef) => {
    // ...
    return (
      <Primitive.button
        type="button"
        aria-haspopup="dialog"
        aria-expanded={context.open}
        aria-controls={context.contentId}
        data-state={getState(context.open)}
        {...triggerProps}
        ref={composedTriggerRef}
        onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}
      />
    );
  }
);

비슷하게 haspopup속성도 부여하였고, 이외에도 expanded, controls 속성도 사용 중인게 보인다.

개발자 도구에서 접근성 트리를 확인해보면, 위에 코드처럼 부여된 것을 확인할 수 있다.

여기서 aria-controls는 다이얼로그가 열린 컨텐츠에 부여되어 있다.

당연하게도 describedby, labelledby 도 코드에서 제공중이다.

https://github.com/radix-ui/primitives/blob/main/packages/react/dialog/src/dialog.tsx#L407-L409

const DialogContentImpl = React.forwardRef<DialogContentImplElement, DialogContentImplProps>(
  (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {
    //...

    return (
      <>
        <FocusScope
          asChild
          loop
          trapped={trapFocus}
          onMountAutoFocus={onOpenAutoFocus}
          onUnmountAutoFocus={onCloseAutoFocus}
        >
          <DismissableLayer
            role="dialog"
            id={context.contentId}
            aria-describedby={context.descriptionId}
            aria-labelledby={context.titleId}
            data-state={getState(context.open)}
            {...contentProps}
            ref={composedRefs}
            onDismiss={() => context.onOpenChange(false)}
          />
        </FocusScope>
      </>
    );
  }
);

각 요소들의 id 값들은 dialog의 title, subtitle에 각각 매핑이 되어 있다.

💡 접근성의 중요한 사소한 팁들

🥹 버튼이 버튼이 아니야

div, a, button 태그들은 모두 버튼으로 사용 가능한 태그들이다. 접근성을 배웠으니 각 태그들을 버튼으로 사용하는 코드를 살펴보자

// 1. div 태그 사용
<div role="button" style={{ cursor: pointer }}>버튼</div>
// 2. a 태그 사용
<a href="#" role="button">버튼</a>
// 3. 버튼 태그 사용
<button type="button">버튼</button>

위 3가지는 모두 접근성 트리에서는 버튼으로 인식된다. 그러나 본질적인 기능에는 아무런 영향을 미치지 않는다. 우측 클릭을 했을 때 각기 다른 기능이 나타난다.

div 태그	a 태그	button 태그

링크로 버튼을 만들 경우 버튼의 역할이 아닌 링크의 기능이 노출된다. 또 버튼은 Space/Enter 키로 동작이 되는데, 링크는 Space로는 동작하지 않는다.

🥹 목록이 목록이 아니야

ul과 ol 태그로 목록 컴포넌트를 구현할때 디자인에는 기본적인 list-style을 사용하지 않는게 대부분이다. 그래서 reset/nomalize css를 사용하여 스타일을 초기화하여 디자인을 하는게 대부분이다.

list-style-type: none

그러나 이렇게 스타일을 지정하게 되면, 해당 요소가 더 이상 '목록'으로 인식되지 않는 문제가 발생한다.

이를 해결하기 위한 여러가지 방법들이 있다.

role 속성 부여하기

<ul role="list">
  <li role="listitem">항목1</li>
</ul>

css marker or before 가상요소 사용

• marker: none 속성을 사용하지 않고 font-size를 줄여 글머리 기호를 숨기는 방법
• before: content 속성에 빈 값이 아닌 것을 할당하여 글머리 기호로 인식하도록 한다.

<ul>
  <li>항목1</li>
</ul>

// marker 사용
li:marker {
	font-size: 0;
}

// before 사용
ul {
	list-style-type: none;
}
li:before {
	content: "\200B"
}

🥹 이모티콘이 이모티콘이 아니야

시각적으로 보는 이모티콘과 스크린 리더가 읽는 이모티콘에 따라서 해석이 달라질 수 있다.

❌ 나쁜 예시
<!-- 스크린 리더: 알림 있음, 종 모양 -->
<span aria-live="polite">
  알림 있음 🔔
</span>

✅ 좋은 예시
<!-- 스크린 리더: 알림이 도착했습니다 -->
<span role="img" aria-label="알림이 도착했습니다">
  🔔
</span>

위 예시에서 종 모양을 읽게 되면서 이해하는데 방해를 할 수 있다. 의미 없는 이모티콘이라면 aria-label을 통해 설명을 적거나, aria-hidden을 사용하는 것도 한가지 방법이다.

마무리

흐릿했던 웹 접근성 지식이 정리되면서, 이제는 aria-x 속성을 '그냥' 사용하는 것이 아니라 "스크린 리더는 어떻게 읽을까?"라는 질문을 잊지 않고 개발해야겠다.

접근성 공부에 도움되는 글들

• 토스 > 프론트엔드 접근성의 모든 것
• W3C - ARIA