스크린 리더가 읽어야 할 접근 가능한 이름과 설명

앞선 내용에서 웹 접근성이 무엇인지를 살펴봤고, 그 중에서 스크린 리더가 글을 읽어주는 규칙에 대해서 알아봤다.

이번에는 그 스크린 리더가 내용을 읽어주는 이름과 설명을 어떻게 배치하고 지어야하는지를 학습해보고자 한다.

목차

📛 접근 가능한 이름

🗣️ 접근 가능한 설명

📛 접근 가능한 이름

• 접근 가능한 이름

  • 소프트웨어를 통해 사용자에게 웹 콘텐츠 내에 있는 컴포넌트를 확인시켜 줄 수 있는 텍스트
  • 스크린 리더와 같이 소프트웨어를 통해 사용자에게 이 레이블을 정보를 전달하게 해주는 것
    • 요소의 목적이나 의도를 전달하거나 요소를 구별하기 위해 사용한다.
    • 사용자의 눈에 띄거나, 이용할 수 있는 요소들을 사용자가 명확하게 식별할 수 있도록 제공하는 것이 ‘접근 가능한 이름’이다.

• 작성하기 위한 규칙

  1. 문서에 설명된 경고를 주의해서 살피고 철저하게 테스트해야 한다.
     • 자신이 생각한대로 나오는지 테스트를 함으로서 접근성의 품질을 떨어뜨리지 않도록 해야 한다.
  2. 가시적으로 보이는 텍스트를 접근 가능한 이름으로 사용해라.
     • 접근 가능한 이름이 눈에 보이는 형태로 존재하면, 유지보수할 때도 좋으며 명시적인 정보를 얻으므로 이해를 더 쉽게 만들 수 있다.
  3. 기본적인 기술들을 선택하라.
     • ‘aria’ attribute를 사용하는 것보다 HTML 요소 자체를 활용하는 것으로 더 깔끔하게 나타낼 수 있는 것이 많다.
     • <form>은 <label>로, <table>은 <caption>으로, <img>는 <figure>로 이용하여 해당 태그의 이름을 지정하는 기법을 사용하는 것이 접근성을 향상시키는 데 도움이 된다.
  4. 브라우저의 Fallback이 일어나지 않게 하라.
     • Fallback(폴백)이란 지정한 값을 사용할 수 없을 때에 시스템에서 대체되는 값을 적용하여 처리를 속행하는 것을 가리킨다.
     • 접근 가능한 이름을 지정하지 않으면 브라우저는 자동 생성을 위해 fallback 기능을 시도한다.
       • 이 fallback은 사용할 수 있는 이름이 없을 때 어거지로 만들어내는 것이므로 좋지 않은 이름을 만들어 낼 수 있다.
  5. 간단하고 유용한 이름을 작성해야 한다.
     • 장황하게 설명하지 말고, 간단 명료하게 작성하는 게 훨씬 더 도움이 된다.
       • 형태가 아닌 기능 혹은 목적을 전달하자.
         • X라는 이미지가 담긴 버튼이라면, ‘X’가 아닌 ‘닫기’로 읽히도록 작성한다.
       • 가장 특징적이고 중요한 단어를 먼저 넣자.
         • “신촌역 편집”, “신촌역 삭제”라고 읽히기보다 “편집 신촌역”, “삭제 신촌역”으로 기능이나 동작이 먼저 읽히도록 하는 것이 더 좋다.
       • 간결하게 하자.
         • 길면 이름을 이해하는 데에 시간이 걸리고, 스크린 리더에 부하를 줄 수 있다.
       • 접근 가능한 이름에 role attribute를 부여하지 말자.
         • 이미 sementic tag나 role attribute를 사용하고 있다면, 해당 내용이 읽히므로 aria-label 등을 통해 읽힐 필요가 없다.
           • 아울러 sementic tag나 role attribute를 둘 다 쓴다면 하나만 쓰도록 한다.
             • <button role=”button”>은 ‘버튼 버튼’으로 읽히게 된다.
       • 같은 요소가 완전하게 동일한 요소가 아니라면 각각의 요소에 고유한 이름을 생성하도록 하자.
         • 같은 <section>이라고 해도 주요 기사를 담는 <section>과 논평을 담은 <section>은 같을 수가 없으므로, 각각의 고유한 이름을 담도록 해주자.
       • 영어로 접근 가능한 이름을 작성한다면 무조건 대문자로 작성하자.
         • 접근 가능한 이름을 대문자로 작성하면 스크린 리더가 적절한 어조로 읽어준다.

• 이름을 지정하는 방법

  1. 후손 요소들에 존재하는 문자열 내용을 이름으로 지정하는 방법

     이건 이해가 잘 안 되어서 코드를 보면서 설명하는 게 빠르다.

     <ul role="tree">
       <li role="treeitem">과일
         <ul role="group">
           <li role="treeitem">사과</li>
           <li role="treeitem">바나나</li>
           <li role="treeitem">오렌지</li>
         </ul>
       </li>
     </ul>
     

     위의 코드를 보면 tree라는 역할(role)이 부여된 요소에 접근 가능한 이름을 부여하려면, 후손에 treeitem이라는 role을 가진 요소를 통해 접근 가능한 이름을 부여할 수 있다.

     여기서 ‘후손’이라는 건 직계 자식이 아닌 요소의 문자열도 받아올 수 있다는 건데, 만약 ‘과일’이라는 글자가 없다면 tree의 접근 가능한 이름은 그 다음에 나열되는 treeitem인 ‘사과’가 될 수 있다.

  2. aria-label을 이용해 직접적으로 이름을 지정하는 방법

     • 이름으로 사용할 만한 시각적인 콘텐츠가 없을 때 사용한다.
       • 대표적으로 창을 닫을 때 쓰는 X버튼의 경우, 의미 전달을 해주기 위해 aria-label를 붙여 “닫기”로 명시해 해당 버튼이 ‘닫기 버튼’임을 지정할 수 있다.
     • aria-label을 사용하면 안되는 요소들이 존재한다.
       • 해당 요소들은 이 링크를 통해 확인할 수 있다.
     • 아울러 눈에 보이지 않는 요소에 이름을 붙이는 만큼, 제대로 이름이 붙여졌는지 테스트가 필요하다.
       • 스크린 리더 등을 통해서 원하는 대로 읽히는지 확인해줄 필요가 있다.

  3. aria-labelledby를 이용해 간접적으로 이름을 지정하는 방법

     • <label>에 for attribute를 사용하는 것과 비슷하다.

       <label for="night-mode">야간 모드</label>
       <input type="checkbox" role="switch" id="night-mode">
       

       위와 같이 <label>을 <input>에 묶고 싶을 때, <label>의 for attribute에 <input>의 id를 붙이는 것이 일반적이다.

       aria-labelledby도 이 방식처럼 이용하면 된다.

       <span id="night-mode-label" hidden>야간 모드</span>
       <input type="checkbox" role="switch" aria-labelledby="night-mode-label">
       

       위의 코드와 같이 <span> 요소를 숨겨주고 aria-labelledby를 통해 <span>을 묶어줌으로서 <input>의 접근 가능한 이름을 ‘야간 모드’로 지정할 수 있다.

     • aria-labelledby는 다음과 같은 특징이 있다.

       • 접근 가능한 이름의 순서를 정할 때, 가장 높은 우선 순위를 가진다.
       • aria-labelledby에 넣을 수 있는 id는 하나 뿐이 아니다. 즉, 여러 HTML 태그 요소를 참조할 수 있다.
       • 숨겨진 텍스트를 참조할 수 있다.
       • input 요소의 값도 참조가 가능하다.

  4. **<label>, <caption>, <legend>, <figcaption> 등을 활용해 이름을 지정하는 방법**

     • <label> 는 다른 요소와 엮어주는 것으로 이름을 지정해준다.

       • 컨트롤하려는 요소에 해당 태그들을 감싸는 방법

       <label>
       	<input type="checkbox" name="subscribe"> 
       </label>
       

       • id와 for를 활용해 이름을 지정하는 방법

         <input type="checkbox" name="subscribe" id="subscribe_checkbox">
         <label for="subscribe_checkbox">뉴스레터 구독</label>
         

     • <legend> 는 form 내에서 그룹화할 양식들의 이름을 지정해준다.

       <fieldset>
       	<legend>시작 클래스 선택</legend>
       	<label><input type="radio" name="starter-class" value="green">Green</label>
       	<label><input type="radio" name="starter-class" value="red">Red</label>
       	<label><input type="radio" name="starter-class" value="blue">Blue</label>
       </fieldset>
       

     • <caption>과 <figcaption>은 표나 이미지에 붙일 이름을 지정해준다.

       • 단, 이 요소들은 aria-label이나 aria-labelledby를 사용하지 않아야 접근 가능한 이름으로 지정된다.
       • 만일 사용할 경우, aria-labelledby를 통해 참조되어야 접근 가능한 이름으로 지정된다.

🗣️ 접근 가능한 설명

• 접근 가능한 설명

  • 소프트웨어에 의해 전달되는 텍스트 콘텐츠
  • 인터페이스 요소에 사용되며, 접근 가능한 이름을 보완하는 추가적인 정보를 전달하는 문자열이다.
    • 입력란의 지시 사항 또는 요구 사항 같은 경우가 접근 가능한 설명의 예시에 해당한다.
  • 스크린 리더가 낭독할 때, 마지막에 낭독하거나 약간 지역된 후에 낭독되도록 한다.
  • 일부 스크린 리더에서는 사용자가 선택적으로 읽게 하기도 해, 다소 중요도가 떨어지지만 알면 유용한 정보에 사용된다.
  • 사용 예시) 비밀번호 입력 시, '비밀번호는 몇 자 이내로 입력하세요' 같은 내용이 접근 가능한 설명이 되겠다.

• 설명을 지정하는 방법

  1. aria-describedby를 이용하는 방법

     • 해당 속성에 특정 엘리먼트의 id값을 설정해 참조하는 방법이다.
       • aria-labelledby를 사용하는 방식과 유사하다.
       • 아래의 코드 내용처럼 aria-describedby attribute에 id를 지정(마크업)하면 해당 내용을 접근 가능한 설명으로 배치할 수 있다.

     <button aria-describedby="trash-desc">휴지통으로 이동</button>
     ...
     <p id="trash-desc">휴지통의 항목은 30일 후 영구적으로 제거될 것입니다.</p>
     
     <!-- 접근 가능한 설명은 '문자열'이므로 이미지를 가져와 대체 텍스트를 작성하는 아래의 방법도 가능하다. -->
     <!-- 위와 아래는 같은 내용으로 읽힌다. -->
     <button aria-describedby="trash-desc"><img src="bin.svg" alt="휴지통">으로 이동</button>
     ...
     <p id="trash-desc"><img src="bin.svg" alt="휴지통">의 항목은 30일 후 영구적으로 제거될 것입니다.</p>
     

     • aria-describedby는 aria-labelledby처럼 내용이 숨겨져 있어도 참조가 가능하다.

     <label for="username">Username</label>
     <input id="username" name="username" aria-describedby="username-desc">
     <button aria-expanded="false" aria-controls="username-desc" aria-label="Help about username">?</button>
     <p id="username-desc" hidden>
       username은 이 서비스에 로그인하는데 사용되는 이름입니다.
     </p>
     

  2. <table>에서 <caption>을 사용하는 방법

     • 표를 나타내는 <table>에서는 <caption>을 이용해 접근 가능한 이름을 지정할 수 있다.
     • 그러나, <table>이 aria-labelledby나 aria-label을 통해 어떤 id를 마크업하고 있으면, 마크업한 id의 문자열을 접근 가능한 이름으로 받는다.
       • 그리고 이때의 <caption>은 접근 가능한 설명으로 받는다.

     <h2 id="events-heading">다가오는 일정</h2>
     <table aria-labelledby="events-heading">
      <caption>
       다가오는 일정의 달력, 27주에서 31주까지, 매주 월요일에 시작합니다.
       첫 번째 열은 주차입니다.
      </caption>
      <tr><th>주차<th>월<th>화<th>수<th>목<th>금<th>토<th>일
      <tr><td>27<td><td><td><td><td><td><td>
      <tr><td>28<td><td><td><td><td><td><td><a href="/events/9856">왕세자비 생일</a>
      <tr><td>29<td><td><td><td><td><td><td>
      <tr><td>30<td><td><td><td><td><td><td>
      <tr><td>31<td><td><td><td><td><td><td>
     </table>
     

     • <caption>과 비슷한 역할을 하는 <figure>의 <figcaption>의 경우, <caption>과 다르게 aria-describedby attribute를 통해 <figcaption>을 연결해줘야 접근 가능한 설명으로 동작된다.