Принудительное изменение Aria-hidden вступает в силу немедленно в Mobile Safari. - PullRequest
Новая
       29

Принудительное изменение Aria-hidden вступает в силу немедленно в Mobile Safari.

3 голосов
/ 13 февраля 2012

Я создаю основное меню в HTML с CSS3. Когда вы нажимаете 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".

Проблема, с которой я сталкиваюсь, заключается в том, что Mobile Safari не очень хорошо играет со смежными элементами, меняющими их скрытое значение арии. Из некоторых экспериментов это работает лучше всего, если изменяющийся элемент находится на расстоянии не менее 2 фокусируемых элементов и происходит изменение 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 уже сделал выбор в отношении того, какой элемент будет воспроизводиться следующим, когда он впервые выбирает элемент.

Кто-нибудь был успешен с такой доступной функциональностью?

1 Ответ

0 голосов
/ 27 июля 2012

После работы над этой проблемой появятся оттенки серого.Правильный элемент будет добавлен, если вы дождетесь окончания чтения VoiceOver.Когда происходит изменение, первым ответом VoiceOver является перечитывание текущего элемента, а затем переоценка того, куда идти дальше.

Решение состоит в том, чтобы просто сделать текст максимально коротким, не теряя смысла.Мой фактический текст был намного длиннее, но я уменьшил его до <div role="link">Expand</div>, поэтому все, что читатель должен сказать, это Expand Link или Collapse Link.

...