[티스토리] 웹 접근성 높이기 위한 오류 해결 하기, "버튼에 접근 가능한 이름이 없습니다"

 
요즘은 모바일이나 PC 등 인터넷 사용자들이 많아지면서 웹 접근성이 중요한 이슈로 떠오르고 있어요. 
웹 접근성이란 장애인 분들이나, 일반 사용자들이 웹사이트를 보다 쉽게 이용할 수 있도록 하는 것을 말합니다. 그래서 오늘은 웹 접근성을 높이기 위한 오류 해결 방법에 대해서 알아보도록 할게요.

---

 웹 접근성이란 무엇인가요?

웹 접근성은 장애인 분들이나 일반 사용자들이 웹사이트를 보다 쉽게 이용할 수 있도록 하는 것을 말합니다. 웹 접근성이 높다는 것은 모든 사용자들이 웹사이트에 쉽게 접근할 수 있으며, 정보를 쉽게 찾아볼 수 있도록 하는 것을 의미합니다. 검색엔진최적화에 중요한 요소 중에 하나이죠. 웹 접근성을 높이기 위해서는 다양한 방법이 있지만, 가장 중요한 것은 HTML, CSS, JavaScript 등의 코드를 올바르게 작성하는 것입니다.
 

---

 웹 접근성을 어떻게 확인할 수 있나요?

 
Page Speed Insights에서 확인할 수 있습니다. 
이 사이트는 모든 기기에서 웹페이지의 성능을 확인할 수 있는 사이트입니다. 

PageSpeed Insights

 
사이트에 들어가면, 아래 화면처럼 "웹페이지 URL 입력"해서 웹페이지 성능을 분석합니다. 

 
저의 티스토리 블로그의 경우, 휴대전화는 84점입니다. 점수 아래 보면 어떤 부분을 수정해야 하는지 알 수 있습니다.
높은 점수를 높이기 위해 한번 수정해 보도록 하겠습니다. 

 

"버튼에 접근 가능한 이름이 없습니다"라는 오류가 뜨네요.  해결 방법은 버튼 코드에"대체 텍스트"를 추가해야 합니다.

여기서 대체 텍스트란  웹페이지 화면 각 요소(대표적으로 이미지)에 대한 설명 문구입니다. 이것을 통해 눈으로 화면을 보지 못할 때, 스크린리더를 통해 웹페이지에 각 요소의 정보를 인식할 수 있습니다. 그러니, 텍스트가 아닌 콘텐츠는 꼭 콘텐츠의 용도와 의미에 대하여 인식할 수 있도록 대체 텍스트를 제공해야 합니다. 
 
그럼 직접 스크린 리더를 설치해서 확인해 보겠습니다. 구글 웹스토어에서 아래 화면처럼, "Screen Reader"를 설치해 주세요. 
이후 크롬에서 자신의 웹페이지에 들어가면 각 요소에서 음성 인식을 확인할 수 있습니다. 

 
버튼 코드에 대체 텍스트를 추가하기 위해 아래 코드처럼 aria-label을 추가했습니다. 
티스토리 스킨편집 > HTML편집에 들어가서 해당 코드를 수정하고 적용합니다. 

<button type="button" aria-label="menu_button"></button>

 

 
코드를 수정하고, "Screen Reader" 확장 프로그램을 설치한, 크롬에서 나의 티스토리 블로그에 들어가서 확인해 보면, aira-label에 있는 "menu button"이 음성 인식이 되는 걸 확인할 수 있습니다. 
이후 "Page Speed Insights"에서 나의 웹페이지의 성능을 다시 분석해 보면, 오류가 해결된 것을 확인할 수 있습니다. 

 

---

코드 유형별로 어떤 대체 텍스트를 넣어야 할지 정리했습니다.

대체 텍스트는 검색엔진최적화를 위해서도 중요하지만, 시각적으로 화면을 읽기 어려우신 분들을 위한 것이란 게 핵심이죠!
따라서 대체텍스트에는 사용자에게 해당 요소나 이미지가, 무슨 목적으로 쓰였는지, 무엇을 의미하는지 등을 간결하게 작성해야 합니다. 
 
1. <a> 태그

(1) 링크의 경우, 자동 인식이 되므로, 대체텍스트를 추가할 필요가 없습니다.

<a href="www.nayoee-naver.tistory.com">나요이 티스토리</a>

(2) 링크와 이미지가 있는 경우, alt="대체텍스트"를 추가합니다. 여기서 대체텍스트는 사용자가 인식해야 하는 문구를 넣으면 됩니다.  

 <a href="www.nayoee-naver.tistory.com"><img src="nayoeelogo.png" alt="나요이 블로그 로고"></a>

(3) <a class> 태그의 경우, title="대체텍스트"를 추가합니다. 여기서 대체텍스트는 사용자가 인식해야 하는 문구를 넣으면 됩니다.  

<a class="font-size-up-btn" title="글자 크기 키우기" onclick="changeFontSize('+')"></a>

2. 버튼 코드의 경우, aria-label="대체텍스트"를 추가합니다. 여기서 대체텍스트는 사용자가 인식해야 하는 문구를 넣으면 됩니다.

<button="코드" aria-label="대체텍스트"></button>

3. 이미지의 경우 alt="대체텍스트"를 추가합니다. 여기서 대체텍스트는 사용자가 인식해야 하는 문구를 넣으면 됩니다.  

<img src="파일 이름" alt="대체텍스트">

*이미지 코드의 경우 CASE가 다양하여 예시를 준비했습니다.
 
1) 이미지에 있는 문자 등 그래픽 문자는 이미지에 문자를 설명해 주는 대체 텍스트를 작성합니다. 

<img src="rabbit_img.gif" alt="감사합니다 말하며 춤추는 분홍색 토끼 두마리">

 
 
2) QR코드, 바코드는 연결되는 링크를 대체 텍스트로 제공합니다.

<a href="nayoee-naver.tistory.com"><img src="" alt="nayoee-naver.tistory.com바로가기 QR코드" width="130" height="100"></a>

 
3) 사용자가 버튼의 기능을 정확하게 알 수 있는 대체 텍스트로 작성하세요. 

<input type="image" src="darkmode.img" alt= "다크모드로 변경">

 
4) 동일한 이미지 버튼은 대체 텍스트도 동일하게 작성하여 사용자가 쉽게 이해하도록 합니다. 

 
5) 더 보기, 펼치기와 같은 버튼 요소는 기능을 설명하는 대체텍스트로 작성하고, 상승/하락과 같은 특수문자는 특수문자의 의미를 정확하게 이해할 수 있는 대체텍스트를 작성하세요. 

예) 0.08% 하락 (-0.08%으로 작성하는 경우, 스크린리더에서 빼기 0.08퍼센트로 인식되어 정확하게 의미를 전달하지 못할 수 있습니다.)

6)  배경이미지 등 사용자가 굳이 인식하지 않아도 되는 경우 alt=""를 사용하면 됩니다. 


3. 표의 경우, 첫 번째 <table>에 summary를 추가하고, <caption>을 추가하여 표기합니다.

<table class="" summary="요약입니다">
	<caption"대체텍스트"></cation>

 

4. 사용자가 입력하는 서식의 경우, <label>을 사용하여 표기합니다. 여기서 <label for>의 값은 <input>의 id 값과 동일해야 합니다. 

<dl>
    <dt><label for="emailid">이메일주소</label></dt>
    <dd><input type="text" id="emailid" title="이메일주소 입력" /></dd>
</dl>
<dl>
    <dt><label for="pw">비밀번호</label></dt>
    <dd><input type="password" id="pw" title="비밀번호 입력" /></dd>
</dl>

5. 입력받는 서식이 많은 양식 <form>의 경우, 하나의 양식임을 표기하기 위해, <fieldset>으로 그룹화를 하고, <legend>로 제목을 표기합니다.

<fieldset>
    <legend>로그인하세요</legend>
    <dl>
        <dt><label for="emailid">이메일주소</label></dt>
        <dd><input type="text" id="emailid" title="이메일주소 입력" /></dd>
    </dl>
    <dl>
        <dt><label for="pw">비밀번호</label></dt>
        <dd><input type="password" id="pw" title="비밀번호 입력" /></dd>
    </dl>
</fieldset>

 
질문과 질문의 답변이 라디오버튼이나 체크박스로 오는 경우가 있습니다. 

<fieldset>
<legend>이것은 피자입니까?</legend>
<input type="radio" name"yesno" id="yes"/>
<label for="yes">Yes</label>
<input type="radio" name"yesno" id="no"/>
<label for="yes">No</label>
</fieldset>

6. <iframe> 코드는 title="대체텍스트"를 추가합니다. 여기서 대체텍스트는 사용자가 인식해야 하는 문구를 넣으면 됩니다.  

<iframe src="" title="대체텍스트"></iframe>

 

---

 
대체텍스트를 작성하기 위해 다양한 자료를 찾아보고 정리하였는데, 이외에도 검색엔진최적화를 위해 웹 접근성을 높이는 방법이 많다고 합니다. 이와 관련한 다른 포스팅도 준비하여 소개하겠습니다.