Icon Font Accessibility: родительский диапазон с меткой aria или родственный диапазон с sr-only

Question

У меня есть значок, который не является декоративным и не находится непосредственно в интерактивном элементе, хотя в иерархии есть интерактивный элемент.

Примерно так:

<button type="button">
    <div> Some info </div>
    <div> other info </div>
    <i class="material-icons"> icon </i>
</button>

Этот значок отображает информацию о состоянии этого элемента.

Чтобы сделать его более доступным, лучше изменить структуру следующим образом:

<button type="button">
    <div> Some info </div>
    <div> other info </div>
    <span aria-label="the actual status">/
     <i class="material-icons"> icon </i>
    </span>
</button>

ИЛИ:

<button type="button">
    <div> Some info </div>
    <div> other info </div>
    <i class="material-icons"> icon </i>
    <span class="sr-only"> the actual status </span>
</button>

Answer 1

У меня есть значок, который ... не находится непосредственно в интерактивном элементе

Это не то, что показывает ваш пример кода.

<button>
   <i>
</button>

Ваш значокопределенно содержится в интерактивном элементе.Когда пользователь программы чтения с экрана нажимает на кнопку, all текст, содержащийся между элементами , будет считываться как имя кнопки.Таким образом, вы услышите «некоторая информация, другой значок информации, кнопка» .

Вы могли бы поставить на кнопку aria-label, но я не люблюделайте это, потому что он дублирует текст.

<button type="button" aria-label="some info other info actual status">
    <div> Some info </div>
    <div> other info </div>
    <i class="material-icons"> icon </i>
</button>

Если вам случится изменить <div>other info</div> на <div>some other info</div>, вам нужно помнить, чтобы изменить aria-label для соответствия.

Ваше предложение поставить aria-label на <span> может показаться правильным решением, но вы не можете прикрепить aria-label только к любому элементу (хотя aria-label является глобальным атрибутом) потому что элемент также нуждается в «роли».См. « Практическая поддержка: aria-label, aria-labelledby и aria-descriptionby ».

Таким образом, ваше последнее решение, как правило, заключается в том, как обрабатываются шрифты значков, при условии, что вы также «скрываете» значокиз программы чтения с экрана с aria-hidden="true".

<button type="button">
    <div> Some info </div>
    <div> other info </div>
    <i class="material-icons" aria-hidden="true"> icon </i>
    <span class="sr-only"> the actual status </span>
</button>