보조기기 사용자들을 위해 접근성을 개선하고 싶어요.

왜 접근성을 개선해야 하는가?

HTML 문서를 작성하다 보면 우리는 음성 보조기기 등을 사용하는 사용자들을 배려하기가 쉽지 않다.

내가 직접 겪은 문제가 아니기 때문에 필요성을 잘 느낄 수 없기 때문이다. 하지만 이런 문제는 반드시 해결되어야 하는 문제이다. 일반 사용자와 완전히 같은 페이지를 사용할 수는 없겠지만 적어도 정보에 접근하는 것이 차별로 다가가지는 않아야 하기 때문이다. 

이 단어는 이렇게 발음했으면 좋겠어요.

프로젝트를 진행하다 보면, 문서 작성 중에 특정 언어의 발음이 지원되어야 하는 경우가 있다. 예를 들어 외국의 단어를 차용하여 만든 브랜드명이 있다. 에스쁘아(espoir), 레종(raison), 뚜레쥬르(tous les jours)등으로 이 단어들은 영어가 아닌 프랑스어 단어이다. 때문에 이 단어들을 음성 보조기기가 제대로 읽기 위해서는 해당 단어를 span으로 감싼 뒤 lang 속성을 이용하면 정확한 발음으로 알려준다. 

어떤 페이지로 이동하는 버튼인지 정확하게 알려주고 싶어요.

한 페이지에 같은 디자인의 섹션이 여러 개 있고, 각 섹션에는 더 보기라고 쓰여 있는 버튼이 각각 존재하고 있다. 이 페이지를 음성 보조기기를 이용하여 사용했을 때 일반적인 방법으로는 더 보기 버튼이 어디로 이동하는 더 보기 버튼인지 정확하게 알 수가 없다.

이때 어떤 페이지로 이동하는 버튼인지 정확하게 알려주기 위한 방법은 2가지가 있다. 

• a태그에 title을 사용할 수 있어요.
  전역속성인 title을 이용하면 어떤 페이지로 이동되는 a태그인지 알려줄 수 있습니다.

  <a href="링크경로" title="게시판">더보기</a>

• a태그가 포함된 (해당하는) 영역의 heading 태그에 id를 작성하고, a태그에 aria-labelledby="id명"으로 연결해 주면 해당 내용의 a태그라고 알려준다.

  <h2 id="notice">공지사항</h2>
      <a href="링크경로" aria-lavelledby="notice">더보기</a>

input에 대한 설명이 필요해요.

input은 label을 이용하여 해당 인풋에 대해서 설명할 수 있다. WCAG 지침에 따르면 input은 1:1로 대응하는 label이 있어야 하는데 input의 id속성 값을 label의 for에 작성하여 연결할 수 있다. 이렇게 label과 input을 연결하면 접근성뿐만이 아니라 사용성 면에서도 장점이 될 수 있다.

<label for="id">아이디</label>
<input type="text" id="id">