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


Лучшие практики

В этой статье я дам несколько советов, как работать с навигацией между страницами.


Семантический HTML и роль

При создании навигационного меню семантический тег HTML <nav> или его эквивалент роль role="navigation" должен быть использован.

Также убедитесь, что следите за количеством и порядком ссылок в навигационном меню на протяжении всех страниц.


Landmarks

можно иметь несколько навигационных меню на сайте. Вот когда landmarks пригодиться. Отметьте основную навигацию как таковую или боковое меню навигации. Это позволяет пользователям программ чтения с экрана находить меню в списке ориентиров.

Не делайте ориентиром навигации весь набор ссылок на странице, а только самые важные.


Видимость

Чтобы пользователю было легче узнать, будь то видимый или с помощью программы чтения с экрана, какая страница текущая/активная страница то есть вы можете добавить специальный стиль для этой конкретной ссылки или добавить ARIA (например, aria-label, aria-labelledbyили же aria-describedby).

Будущее: ария-ток атрибут, надеюсь, будет официальным в ближайшее время.


Пример

<a href="#hello" aria-label="Current page: Hello, World!">
    Hello, World!
</a>
Войти в полноэкранный режим

Выйти из полноэкранного режима

При назначении aria-label к фокусируемому элементу, например <a>tag здесь, программа чтения с экрана объявит текст в aria-label вместо текста ссылки (который все еще виден пользователю, не использующему программу чтения с экрана).



Подпишитесь на меня, чтобы узнать больше о специальных возможностях:

Веб-сайт — доступностьfirst.xyz
Инстаграм — доступностьfirst.xyz
LinkedIn — доступностьпервый