ARIA — нужно ли использовать ARIA-EXPANDED с ARIA-HIDDEN?

Я новичок в ролях ARIA. Если у меня есть функциональность типа всплывающей подсказки, т.е. если кто-то нажимает кнопку со знаком вопроса, отображается дополнительный текст с подробными инструкциями о том, как заполнить поле формы, должен ли я использовать атрибут aria-expanded, атрибут aria-hidden или оба?

<div class="login-form-field tt-highlight">
    <div class="error-message error-style">
        <p>Sorry you have not entered anything in the field above.</p>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-10"> 
        <label for="inputTxtCustomerPostcode" class="login" />Postcode:</label>
        <input id="inputTxtCustomerPostcode" type="text" />
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2">
        <a title="Please enter a valid case reference tooltip" class="login-tooltip" data-toggle="collapse" data-parent="#accordion" href="#collapseTxtCustomerPostcode" role="button" aria-pressed="false"></a>
    </div>

    <div id="collapseTxtCustomerPostcode" class="panel-collapse collapse" role="tree tooltip">
        <div class="panel-body" role="treeitem" aria-expanded="false" aria-hidden="true">
            <p>some text goes here for the tooltip</p>
        </div>
    </div>
</div>

wai-aria
person MarkP    schedule 17.02.2014    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Используйте схему RDF-модели, чтобы помочь:

Диаграмма модели данных RDF

aria-expanded определяется для роли treeitem через наследование.

aria-hidden определено для всех ролей, но имеет одну оговорку:

Примечание. Авторам рекомендуется избегать использования aria-hidden="false" со стилями или атрибутами, которые исторически препятствовали отображению во всех модальностях, таких как display:none или visible:hidden в CSS или атрибут hidden в HTML 5. На момент написания этой статьи известно, что aria-hidden="false" работает непоследовательно при использовании в сочетании с такими функциями. По мере улучшения будущих реализаций будьте осторожны и тщательно тестируйте, прежде чем полагаться на этот подход.

В результате одного aria-expanded должно быть достаточно.

Ссылки

person Paul Sweatte    schedule 24.04.2014
comment
Ни одна из референсов больше не работает. Он является удобной ссылкой на лучшие практики w3.org/TR/wai-aria-practices. - person AlexMorley-Finch; 17.01.2019
comment
@AlexMorley-Finch Исправлено. Спасибо! - person Paul Sweatte; 17.01.2019