숨겨진 양식 요소가 JAWS에서 읽는 이유는 무엇입니까?

Question

상황

내가 ("쇼/고급 검색 옵션을 숨길"같은)를 표시하고 자바 스크립트를 통해 숨겨 질 수있는 화면의 영역을 가지고있다. 이 영역에는 폼 요소 (선택, 체크 상자 등)가 있습니다. 화면 판독기 (이 경우 JAWS)와 같은 보조 기술을 사용하는 사용자는 이러한 양식 요소를 레이블과 연결하거나 "title"속성을 사용하여 각 요소의 목적을 설명해야합니다. 나는 레이블을위한 공간이 충분하지 않기 때문에 title 속성을 사용하고 있으며, 스크린 팁을 사용하지 않는 사용자에게 유용한 툴팁을 제공한다.

코드는 다음과 같이 보입니다 : 글쎄, 그들은이 숨겨져 있기 때문에

<div id="placeholder" style="display:none;"> 
    <select title="Month"> 
    <option>January</option> 
    <option>February</option> 
    ... 
    </select> 
</div> 

문제점

일반적으로는, JAWS는 ... 숨겨진 요소를 읽지 않습니다를 그리고 그것을 알고있다. 그러나 요소에 제목 집합이있는 것처럼 JAWS는 내용을 읽는 것처럼 보입니다. 제목을 제거하면 JAWS는 아무 것도 읽지 않지만 분명히 액세스 할 수있는 마크 업입니다.

가능한 해결책

내 첫번째 생각은 다음과 같이 제목 대신 숨겨진 라벨을 사용하는 것이었다 :

<div id="placeholder" style="display:none;"> 
    <label for="month" style="display:none">Month</label> 
    <select id="month">...</select> 
</div> 

이 동일한 행동 결과, 이제 우리는 도구를 잃을 스크린 리더가 아닌 사용자를위한 팁. 또한 우리는 두 배의 HTML을 생성합니다.

두 번째 옵션은 레이블을 계속 사용하여 화면 밖으로 배치하는 것입니다. 그 방법은 화면 판독기로 읽을 수 있습니다,하지만 시각적 인 사용자가 볼 수 없습니다 :

<div id="placeholder" style="display:none;"> 
    <label for="month" style="position:absolute;left:-5000px:width:1px;">Month</label> 
    <select id="month">...</select> 
</div> 

이 실제로 작동하지만, 다시 우리는 추가 HTML을 생성 여전히 도구 팁을 잃고.

제 3의 가능한 해결책은 자바 스크립트에서 DOM을 반복적으로 통과하고 숨겨진 제목을 제거하고 영역이 표시 될 때 다시 추가하는 것입니다. 이것은 또한 작동하지만 ... 명백한 이유 때문에 꽤 추악하고 좀 더 일반적인 경우에는 잘 확장되지 않습니다.

다른 어떤 아이디어? JAWS가 왜 이런 식으로 행동합니까?

Answer 1

이것은 JAWS의 버그처럼 보입니다. 스펙에서는 명확하게 디스플레이가 명시되어 있기 때문에 : none을 지정하면 요소 및 해당 하위 항목이 어떤 미디어에도 표시되지 않아야합니다.

그러나 speak : aural 속성으로 재생하는 것이 유용 할 수 있습니까? JAWS를 사용할 수 없기 때문에 나는 모른다.

http://www.w3.org/TR/CSS2/aural.html#speaking-props

Answer 2

당신이 시도 했습니까?

<div id="placeholder" style="display:none;"> 
    <select title="Month" style="speak:none;"> 
    <option>January</option> 
    <option>February</option> 
    ... 
    </select> 
</div> 

JAWS가 한 가지를 읽고 정상적으로 읽히는 내용을 건너 뛰고 싶었던 과거에는 저에게 효과적이었습니다.

Answer 3

aria-hidden = "true"속성을 지정하고 화면 판독기에서 숨겨야합니다.