접근성

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

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

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

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

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

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

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

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

<h2 id="notice">공지사항</h2>
<a href="링크경로" aria-labelledby="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">