테스트 사이트 - 개발 중인 베타 버전입니다

웹접근성 질문 입니다. 채택완료

웹프리죤 11개월 전 조회 1,107

아래 두 예제중 어떤게 맞는 표현일까요?

어떤 내용의 셀렉트박스인지 설명을 해줘야 하는 경우 입니다.

aria-label / aria-labelledby 입니다.

 

</p>

<p><select name="" class="site" aria-label="관련사이트 바로가기"></p>

<p>            <option value="">관련사이트 바로가기</option></p>

<p>            <option value="">사이트1</option></p>

<p>            <option value="">사이트2</option></p>

<p>        </select></p>

<p> </p>

<p><select name="" class="site" aria-labelledby="관련사이트 바로가기"></p>

<p>            <option value="">관련사이트 바로가기</option></p>

<p>            <option value="">사이트1</option></p>

<p>            <option value="">사이트2</option></p>

<p>        </select></p>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
11개월 전

aria-label 이 맞습니다.

aria-labelledby은 다른 요소의 ID를 참조하여 해당 요소의 텍스트 콘텐츠를 레이블로 사용하는 방식입니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 2개

삐도리
11개월 전
아래처럼 쓰려면
<div id="relatedSitesLabel">관련사이트 바로가기</div>
<select name="" class="site" aria-labelledby="relatedSitesLabel">
<option value="">관련사이트 바로가기</option>
<option value="">사이트1</option>
<option value="">사이트2</option>
</select>
이렇게 쓰시면 될것같아요
웹프리죤
11개월 전
아 네 감사합니다. 제가 잘못 알고 있는건지 모르겠는데 aria-label 를 쓰면 내부 텍스트는 읽지 않는다고 알고 있는데 셀렉트박스에 쓰면 내부 텍스트를 읽지 않을까 해서요 아닌가요..?

댓글을 작성하려면 로그인이 필요합니다.

11개월 전

화면 낭독기와 같은 보조 기술에서는 읽힌다고 하내요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인