웹접근성 질문 입니다.
본문
아래 두 예제중 어떤게 맞는 표현일까요?
어떤 내용의 셀렉트박스인지 설명을 해줘야 하는 경우 입니다.
aria-label / aria-labelledby 입니다.
<select name="" class="site" aria-label="관련사이트 바로가기">
<option value="">관련사이트 바로가기</option>
<option value="">사이트1</option>
<option value="">사이트2</option>
</select>
<select name="" class="site" aria-labelledby="관련사이트 바로가기">
<option value="">관련사이트 바로가기</option>
<option value="">사이트1</option>
<option value="">사이트2</option>
</select>
답변 2
aria-label 이 맞습니다.
aria-labelledby은 다른 요소의 ID를 참조하여 해당 요소의 텍스트 콘텐츠를 레이블로 사용하는 방식입니다.
아래처럼 쓰려면
<div id="relatedSitesLabel">관련사이트 바로가기</div>
<select name="" class="site" aria-labelledby="relatedSitesLabel">
<option value="">관련사이트 바로가기</option>
<option value="">사이트1</option>
<option value="">사이트2</option>
</select>
이렇게 쓰시면 될것같아요
아 네 감사합니다. 제가 잘못 알고 있는건지 모르겠는데 aria-label 를 쓰면 내부 텍스트는 읽지 않는다고 알고 있는데 셀렉트박스에 쓰면 내부 텍스트를 읽지 않을까 해서요 아닌가요..?
화면 낭독기와 같은 보조 기술에서는 읽힌다고 하내요
답변을 작성하시기 전에 로그인 해주세요.