Как правильно сделать доступными различные элементы HTML?

Question

Какой из приведенных ниже способов является правильным / лучшим для обеспечения доступности ссылки?

<a href="http://example.com" aria-label="Title of post read more">Read More <i class="fas fa-chevron-right" aria-hidden="true"></i></a>

ИЛИ

<a href="http://example.com"><span class="sr-only">Title of post</span> Read More <i class="fas fa-chevron-right" aria-hidden="true"></i></a>

Какой из методов является правильным / лучшим для создания раздел доступен?

<section aria-label="Events"></section>

ИЛИ

<section aria-labelledby="hdng">
<h2 id="hdng">Events</h2>
</section>

ИЛИ

<section>
<h2 class="sr-only">Events</h2>
</section>

Answer 1

Для ссылки она должна иметь смысл вне контекста , поэтому я бы использовал класс sr-only для полезного описания программы чтения с экрана c text.

<a href="http://example.com"><span class="sr-only">Title of post</span> Read More <i class="fas fa-chevron-right" aria-hidden="true"></i></a>

Что касается раздела, тег основного заголовка в самом начале будет хорошо работать. Если вы хотите, чтобы и средство чтения с экрана, и обычные пользователи видели заголовок, используйте тег заголовка с атрибутом aria-labelledby. Если вы хотите, чтобы только пользователи программы чтения с экрана видели заголовок, снова используйте класс sr-only. Обычно вы хотите, чтобы все пользователи видели заголовок раздела, чтобы каждый мог узнать начало новой группы контента.

<section aria-labelledby="hdng">
  <h2 id="hdng">Events</h2>
</section>

Answer 2

Просто вкратце расскажу о замечательном ответе @thenomadicmann. Вот несколько советов по этому вопросу, и почему вещи предлагаются в WCAG / общие рекомендации по доступности.

Как мне включить текст, понятный для чтения с экрана в ссылке?

В двух приведенных вами примерах (один с использованием визуально скрытого текста, а другой с aria-label) вы должны использовать визуально скрытый текст.

Там это хорошая причина для совместимости.

14 комбинации браузер / программа чтения с экрана имеют проблемы с aria-label для ссылок (хотя поддержка очень хорошая)

Однако 100 % комбинаций браузер / программа чтения с экрана будут читать визуально скрытый текст.

По этой причине вам следует использовать

<a href="http://example.com"><span class="sr-only">Title of post</span> Read More <i class="fas fa-chevron-right" aria-hidden="true"></i></a>

Примечание на иконках

Подумайте о том, чтобы заменить ваши потрясающие шрифты иконки на встроенные SVG. Они более удобны для доступа, так как они не исчезнут, если кто-то переопределит шрифты вашего сайта (например, тот, у кого дислексия, предпочитает определенный шрифт, так как им легче читать). Плюс шрифт awesome составляет около 150 КБ CSS, а встроенный SVG - около 1 КБ, поэтому он также ускоряет работу сайта, если у вас всего несколько значков!

Как сделать раздел доступным

По стандартам следующий метод является правильным

<section>
    <h2>section title example<h2>
</section>

Однако для максимальной сопоставимости следует использовать aria-label и role="region".

<section aria-label="section title example" role="region">
    <h2>section title example<h2>
</section>

Существует два точки здесь.

1. aria-label поддержка составляет почти 100% (как обсуждалось ранее), тогда как поддержка aria-labelledby не так хороша
2. Вокруг 2% всех пользователей программы чтения с экрана все еще застряли на IE6-8 . Таким образом, добавление role="region" дает (почти) тот же смысл semanti c для тех пользователей программы чтения с экрана.

Дополнительные примечания по регионам и заголовкам

1 - aria-label приведет к дублированию объявлений в некоторых программах чтения с экрана. Однако это все еще предпочтительнее, так как пользователь может предпочесть навигацию по регионам, и поэтому полезно объявлять имена регионов.

2 - В своих комментариях вы задавались вопросом, почему использовать заголовок sr-only вместо метки.

Я частично рассмотрел это в предыдущем пункте (aria-label немного менее надежен, чем визуально скрытый текст), но есть и другая причина.

В то время как некоторые пользователи программы чтения с экрана перемещаются по регионам, другие предпочитают перемещаться по страницам по заголовкам (т. е. в NVDA вы нажимаете клавишу NVDA + 2 до l oop через все заголовки уровня 2.).

Вот почему заголовки важны, на самом деле они важнее, чем правильное использование <section> элементов, поскольку именно так большинство пользователи программы чтения с экрана изучат вашу страницу.