모바일 사파리에서 아리아 숨김 변경 사항을 즉시 적용하도록 변경

Question

CSS3를 사용하여 HTML로 기본 메뉴를 만듭니다. div을 클릭하면 인접한 목록이 CSS 전환을 사용하여 확장되거나 축소됩니다. 예를 들어

<style> 
    ul { 
     -webkit-transition: height 200ms linear; 
     overflow: hidden; 
    } 
</style> 
<div>Tap to expand</div> 
<ul style="height: 0" aria-hidden="true"> 
    .... 
</ul> 

div 도청에서 ul 높이는 어린이 '오프셋 높이의 합 업데이트되며 aria-hidden는 false 대해 설정 또는 제거된다. 다시 누르면 높이가 0으로 설정되고 aria-hidden="true"으로 설정됩니다.

내가 직면 한 문제는 모바일 사파리가 아리아 숨겨진 값을 변경하는 인접 요소와 너무 잘 어울리지 않는다는 것입니다. 어떤 실험에서, 변화하는 요소가 최소한 포커스가있는 요소 이상이고 DOM이 변경되면 가장 잘 작동합니다. 문서 끝에 <div>을 추가하면서 다음과 같이 실험했습니다.

<div>Tap to expand</div> 
<div>x</div> 
<div>x</div> 
<ul><!-- This works --> 


<div>Tap to expand</div> 
<div>x</div> 
<ul><!-- This doesn't --> 

<div>Tap to expand</div> 
<div></div> 
<div></div> 
<ul><!-- Nor does this --> 

별도의 div에서 래핑하거나 대상 앞에서 두 div를 삽입 및 제거하는 등의 다른 트릭도 작동하지 않습니다. VoiceOver가 이미 요소를 선택할 때 다음에 재생할 요소를 VoiceOver에서 이미 선택했기 때문입니다.

이러한 종류의 접근성이 뛰어난 기능을 가진 사람이 있습니까?

Answer 1

이 문제를 해결하기 위해 몇 가지 회색 음영이 있습니다. VoiceOver가 읽기를 기다릴 때까지 올바른 요소가 앞으로 이동합니다. 변경이 발생하면 VoiceOver의 첫 번째 응답은 현재 요소를 다시 읽은 후 다음으로 갈 위치를 재평가하는 것입니다.

해결책은 의미를 잃지 않고 가능한 한 텍스트를 짧게 유지하는 것입니다. 내 실제 텍스트는 훨씬 길었지 만 모든 독자가 Expand Link 또는 Collapse Link이라고해야하므로 <div role="link">Expand</div>으로 줄였습니다.