Специальные возможности: лучшее решение для изменения значка, когда значок является дочерним

Question

Мне нужна кнопка с различными значками для каждого состояния. Кнопка со значком выглядит следующим образом:

<button type="button" role="button" aria-pressed="false">
    <svg class="icon">...</svg>
    <span>Disabled</span>
</button>

Что является лучшим решением с точки зрения доступности , если я хочу изменить значок (<svg>)?

1. , чтобы иметь кнопку с двумя значками svg, в то время как одно отображается: ни один в зависимости от aria-pressed состояния

2. чтобы иметь кнопку с одним значком svg, который будет заменен по клику

3. что-то еще

Answer 1

Самое простое решение этого вопроса - вообще не полагаться на SVG с точки зрения доступности.

Так что для них обоих вы бы использовали aria-hidden="true" и role="presentation" (так как поддержка может быть ненадежной для каждый в старых программах чтения с экрана).

Как вы, вероятно, можете сказать, я предлагаю иметь две иконки и поменять их местами с display:none на одной или другой, или еще лучше, почему бы не получить фантазию и переход между состояниями.

Обратите внимание, что с точки зрения доступности (поскольку мы скрываем их от программ чтения с экрана) не имеет значения, используете ли вы два изображения или одно и меняете их с помощью JavaScript, проще поддерживать, если значки находятся внутри DOM, вместо того, чтобы иметь некрасивую разметку SVG в вашем JavaScript.

У вас уже есть некоторый текст внутри кнопки, который говорит «отключен», который, как я предполагаю, изменится на «включен» в зависимости от состояние кнопки.

На этом этапе все, что вам нужно сделать, это добавить визуально скрытый текст (см. ниже CSS, чтобы скрыть что-то визуально, но все еще Я позволю ему быть доступным для чтения с экрана) объясняя функцию кнопки.

Поэтому, если бы эта кнопка включала темную тему, вы бы добавили визуально скрытый текст, чтобы объяснить назначение кнопки.

Собрав все это вместе, вы получите что-то вроде: -

<button type="button" role="button" aria-pressed="false">
    <svg class="icon active" aria-hidden="true" role="presentation" focusable="false">...</svg>
    <svg class="icon hidden" aria-hidden="true" role="presentation" focusable="false">...</svg>
    <span class="visually-hidden">Dark Theme </span><span class="state-toggle">Disabled</span>
</button>

Скрыто визуально CSS

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}

Вы увидите, что я добавил класс "переключение состояний" к <span>, который вы будете переключать от «отключено» до «включено», просто чтобы прояснить, «визуально скрытый» текст никогда не должен изменяться. Также обратите внимание на пробел после «Темной темы», чтобы убедиться, что он читается правильно.

Я также добавил «активные» и «скрытые» классы к двум SVG-файлам, очевидно, что было бы лучше иметь только один класс «активный» 'или' скрыто 'и используется по умолчанию для состояния, но это было для демонстрационных целей.

Также обратите внимание, что я добавил focusable="false" в SVG, так как в противном случае Inte rnet Explorer может сделать SVG фокусируемым из-за ошибки.

И последнее соображение заключается в том, что aria-pressed также имеет слабую поддержку, и вы, похоже, создаете «тумблер» (хотя и с разными значками вместо переключателя).

То, что вы делаете, совершенно правильно и должно работать, но вы можете вместо этого использовать флажок.

Прочитайте эту подробную статью о различных способах реализации переключателей написано Хайден Пикеринг (Hayden Pickering), так как он предоставляет много полезной информации о поведении программы чтения с экрана и обходных приемах для проблем поддержки WAI-ARIA / откатов WAI-ARIA.