aria-labelledby에 클래스 선택기를 사용하는 방법은 무엇입니까?

Question

그래서 같은 접근 입력 필드를 만들려고 해요 :

<input type="text" role="textbox" aria-labelledby="helper-msg-value"> 
<p id="helper-msg-value">You must enter a value</p> 

대신 ID의 aria-labelledby 속성에 대한 선택과 같은 클래스를 사용하려면 어떤 방법이 있나요? 그래서 이런 식으로 :

<input type="text" role="textbox" aria-labelledby=".helper-msg-value"> 
<p class="helper-msg-value">You must enter a value</p> 

Answer 1

정상적인 레이블을 사용하고 정상적으로 부착하지 않는 이유는 무엇입니까? 이

<div class="field"> 
    <label for="qty" class="required"><abbr title="Quantity">Qty</abbr></label> 
    <input type="text" name="qty" aria-required="true" id="qty" class="required"> 
</div> 

그래서 이것으로 우리가 올바른 라벨 및 입력 일치하도록 습관 자동화 ​​실패 체커가 ... 모든 브라우저 및 스크린 리더에서 작동합니다. 문맥 상 레이블을 읽습니다. 사용자에게 필드가 무엇인지 알려서 입력 할 내용을 알립니다 (사용자가 입력 한 내용을 사용자에게 알리지 않습니다). 그리고 사용자에게 "필수"로 핑 소리를내는 사용자 aria-required가 있습니다. 표준은 추가 텍스트 및 레이블을 추가 할 필요가 없습니다.

는 스타일 수 * 필수 또는 무엇 그것은 아리아 - labelledby 또는 아리아 - describedby와 클래스를 사용하는 것은 불가능에 필요한 CLA를

Answer 2

을 기반으로하지. aria-labelledby를 사용하여 여러 레이블을 요소에 첨부 할 수는 있지만 작동하는 값은 ID뿐입니다. 나는이 레이블이이 목적을 위해 유일 할 것이라고 기대하기 때문에 이런 경우라고 생각합니다. 한 가지 가능한 해결책은 'aria-label'을 실제로 읽고 자하는 텍스트로 입력에 첨부하는 것입니다. 예를 들어,

<label for="textfield">Q.T.Y.</label> <input type="text" id="textfield" aria-label="Quantity">

는 스크린 리더가 표시된 라벨과 다른 텍스트를 읽을 수 있도록 할 필요. aria-label이 입력에 사용 된 경우 많은 (대부분의?) 스크린 리더는 <label> 요소를 읽지 않습니다.

편집 : 클래스는 페이지에있는 요소의 여러 인스턴스에 사용하기위한 것입니다. 요소에 중점을두면 스크린 리더는 어떤 요소가 aria 속성을 나타내는 지 정확히 알아야합니다. 이것이 ID가 사용되는 이유입니다. 즉, ID는 페이지에 고유해야합니다. 즉, 특정 ID는 하나의 요소에만 속할 수 있습니다. 이를 통해 브라우저 (및 보조 기술)가 aria 속성에 대한 올바른 요소를 빠르고 정확하게 얻을 수 있습니다. 페이지에 같은 클래스이지만 내용이 다른 세 가지 요소가있는 경우 무엇을 읽을 것으로 예상됩니까?