스크린 리더 : 선택 박스

Question

으로 화면 판독기에 대한 추가 텍스트를 추가하는 방법은 각각

Volvo selected, Saab selected, Mercedes selected, Audi selected 

대신

Volvo, Saab, Mercedes, Audi 

의 발음 만 때문에 화면 판독기에 대한 텍스트 을 추가합니다.

<select> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

에

<span class="sr-only">selected</span> 

를 추가하는 것은 도움이되지 않습니다.

아이디어가 있으십니까? 고맙습니다.

Answer 1

ARIA 텍스트 및 레이블은이를 해결하고 화면 판독기에 정보를 제공 할 수 있습니다. 예를 들어 다음은 문자 'x'를 닫기 버튼으로 표시합니다.

<button aria-label="Close" onclick="myDialog.close()">X</button> 

위의 예는 여기에서 온다 : Aria Label Attribute

다른 ARIA roles, attributes, and techniques에 대해 자세히 알아보십시오.

Answer 2

아리아 레이블이 해결책입니다, 그렇습니다. 그러나 어떤 방식 으로든 이것을해서는 안됩니다.
화면 판독기 자체에서 제공되는 정보와 선택되지 않은 정보를 제공합니다. 당신의 (a multiple 속성 즉,) 다중 선택 목록 상자를 디자인하고 사용자가 상자를 입력하고 Shift+F8을 누를 때보다 더 많은, 그/그녀는 다음과 같이 뭔가를 듣게 될 것입니다 :

볼보 사브 을 선택 선택 선택된 것을 선택했습니다.

이것은 정말로 정말로 성가신 일입니다. 그러니 신경 쓰지 말고 표준 접근 가능 (다중 선택, 필요한 경우) 목록 상자를 제공하십시오.