Доступность и ссылки, которые являются кнопками и наоборот

Question

Может кто-нибудь посоветовать мне, если есть конкретный сбой c WCAG 2.1, когда кнопки используются в качестве ссылок. Тот же вопрос наоборот. Ссылки как кнопки.

У меня есть сайт, над которым я работаю, где по дизайну есть ссылки, которые выглядят так же, как кнопки. Таким образом, у вас могут быть кнопки <button>, такие как: Редактировать детали - это приведет вас на новую страницу, где вы можете редактировать элементы на странице, где находится «Редактировать детали». Продолжить - кнопка, с помощью которой можно перейти на следующую страницу в серии страниц. Но тогда есть ссылки <a>, которые отображаются в виде кнопок, поэтому тот же стиль, но они помечены как select, select и selected, и это тип продукта, поэтому нигде не размещайте ссылки. Другим примером является обратная ссылка - кнопка <button>, но похожая на ссылку (текст с подчеркнутым стилем)!

Я знаю, что это поведение сбивает с толку распознавание голоса, когда пользователь говорит click link или click button и не все объекты помечаются, которые выглядят одинаково.

У меня вопрос, в частности ли это WCAG2.1? Подпадает ли это под 4.1.2 Имя, Роль, Значение?

Answer 1

4.1.2: Имя, Роль, Значение , не понимающие, относятся к случаю элементов, играющих роль, отличную от обычной.

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

Answer 2

Как Адам уже процитировал , «необходимо принять дополнительные меры для обеспечения того, чтобы средства управления предоставляли важную информацию вспомогательным технологиям и позволяли самим себе контролировать вспомогательные технологии». Так что да, это терпит неудачу WCAG 2.1, если вы не примете меры, чтобы убедиться, что ваши кнопки-ссылки и кнопки-ссылки действительно работают так, как они должны , например , что <a role="button" […] может быть вызвано с помощью Пробел ключ.

Если вы действительно имеете в виду доступность, не путайте элементы <button> и <a>. Даже если вы считаете себя умным и добавляете role="button" к ссылке или role="link к кнопке. Вам нужно было бы сделать больше, чтобы заставить их вести себя одинаково (см. MDN о роли кнопки ).
И даже в этом случае вам следует учесть следующее: ссылки предназначены для навигации, кнопки для выполнения действий. , Если у вас есть элемент навигации, который выглядит как кнопка, его поведение может сбивать с толку (даже если у него нет атрибута role="button"). Также обратите внимание, что значением по умолчанию для атрибута type кнопки является submit (" Значение по умолчанию для отсутствующего значения и значение по умолчанию для недопустимого значения - это состояние кнопки" Отправить ". ").

Доступность в Интернете " должно охватывать все ограничения, влияющие на доступ к сети , и существует множество возможных ограничений - и наличие одного ограничения не обязательно означает, что у человека нет других ограничений. Самый простой шаг сделать ваш сайт более доступным - это придерживаться стандартов. Не изменяйте поведение элемента, если вам действительно не нужно (и даже тогда: действительно ли вы * * должны 1029 *?).

Обновление: Общий комментарий о WCAG и доступности:
Доступ в Интернет также не просто соответствует правилам, подобным WCAG. Даже сам WCAG не утверждает, что веб-сайт будет на 100% доступен в соответствии с ним:

Обратите внимание, что даже контент, который соответствует наивысшему уровню (AAA), не будет доступен для людей со всеми типы, степени или комбинации инвалидности, особенно в области когнитивного языка и обучения. Авторам рекомендуется рассмотреть весь спектр методов, в том числе консультативные, а также обратиться за соответствующими советами о текущей наилучшей практике, чтобы обеспечить доступность веб-контента для этого сообщества, насколько это возможно.

Обновление: примеры возможных нарушений WCAG 2.1 (с возможностью интерпретации)
Просто добавьте ссылки в виде кнопок, и ничто не может дать сбой:

• Руководство 3.2 Предсказуемое в целом («Создание веб-страниц и работа предсказуемым образом».)
• Критерий успеха 3.2.4 Последовательная идентификация ( если все ссылки выглядят как кнопки; единственный действительный критерий успеха в этих примерах )
• 4. Надежность в целом («Контент должен быть достаточно устойчивым, чтобы его могли интерпретировать самые разные пользовательские агенты, включая вспомогательные технологии». & Руководство 4.1 Совместимо «Максимальная совместимость с нынешним и будущим пользователем агенты, в том числе вспомогательные технологии. "-> вы уже упоминали о распознавании голоса и о невозможности нацелить ссылку, потому что она выглядит как кнопка)