Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update a11y-html index.md #5459

Merged
merged 1 commit into from
Jul 24, 2024
Merged

Update a11y-html index.md #5459

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions a11y/a11y-html/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ ARIA позволяет задавать роли, состояния и сво

Одна из распространённых плохих практик — отсутствие доступных подписей у кнопок, ссылок или элементов форм. Например, часто используют кнопки- и ссылки-иконки, которые визуально отражают значение, но не имеют текстового описания. Спасти ситуацию можно с помощью атрибута `aria-label` или [визуально скрытого элемента](/a11y/content-hidden/#klassy-.visually-hidden-.sr-only-.off-screen).

Некоторые символы в иконках могут по-разному интерпретироваться. Например, [в Швеции и Финляндии значок «галочка» используют в случае неправильного ответа](https://en.wikipedia.org/wiki/Check_mark#:~:text=place%20check%20marks.-,International%20differences,-%5Bedit%5D), что противоположно его значению в англоговорящей среде. Поэтому использование иконок может запутать не только пользователей скринридеров, но других людей.
Некоторые символы в иконках могут по-разному интерпретироваться. Например, [в Швеции и Финляндии значок «галочка» используют в случае неправильного ответа](https://en.wikipedia.org/wiki/Check_mark#:~:text=place%20check%20marks.-,International%20differences,-%5Bedit%5D), что противоположно его значению в англоговорящей среде. Поэтому использование иконок может запутать не только пользователей скринридеров, но и других людей.

### Подписи

Expand All @@ -122,7 +122,7 @@ ARIA позволяет задавать роли, состояния и сво

### Порядок заголовков

Другая популярная ошибка — неправильный порядок заголовков, для которых используют от [`<h1>`](/html/h1-h6/) до `<h6>`. Часто уровень заголовка выбирают на основе его стиля, а не на логическом порядке. В результате, [на 42% сайтов неправильная иерархия заголовков](https://almanac.httparchive.org/en/2022/accessibility#landmarks). Для доступности важно, чтобы на странице был один `<h1>`, а все остальные заголовки располагались в последовательном порядке. Это облегчает навигацию по сайту для пользователей и позволяет передвигаться от заголовка к заголовку с помощью горячих клавиш для скринридеров.
Другая популярная ошибка — неправильный порядок заголовков, для которых используют от [`<h1>`](/html/h1-h6/) до `<h6>`. Часто уровень заголовка выбирают на основе его стиля, а не на логическом порядке. В результате, [на 42% сайтов неправильная иерархия заголовков](https://almanac.httparchive.org/en/2022/accessibility#landmarks). Для доступности важно чтобы на странице был один `<h1>`, а все остальные заголовки располагались в последовательном порядке. Это облегчает навигацию по сайту для пользователей и позволяет передвигаться от заголовка к заголовку с помощью горячих клавиш для скринридеров.

Правильную иерархию заголовков подробнее описывает [правило «Порядок заголовков»](https://dequeuniversity.com/rules/axe/4.4/heading-order) на сайте Deque University.

Expand All @@ -132,6 +132,6 @@ ARIA позволяет задавать роли, состояния и сво

В браузерных инструментах для веб-разработки обязательно найдётся инспектор доступности. Например, [панель доступности в Chrome](https://developer.chrome.com/docs/devtools/accessibility/reference/#explore-tree) и [инспектор доступности в Firefox](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/#accessing-the-accessibility-inspector). В них можно посмотреть на [дерево доступности](/a11y/a11y-tree/) (accessibility tree). В него попадают роли, свойства и состояния HTML-элементов.

Тестировать доступность можно также с помощью [Lighthouse](https://developer.chrome.com/docs/lighthouse/accessibility/scoring/) или [расширения axe](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd). Ещё один хороший инструмент с точки зрения доступности разметки — это [валидатор для HTML](https://validator.w3.org). На сайте W3C представлен полный представлен полный [список разных инструментов для тестирования и отладки доступности](https://www.w3.org/WAI/ER/tools/).
Тестировать доступность можно также с помощью [Lighthouse](https://developer.chrome.com/docs/lighthouse/accessibility/scoring/) или [расширения axe](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd). Ещё один хороший инструмент с точки зрения доступности разметки — это [валидатор для HTML](https://validator.w3.org). На сайте W3C представлен полный [список разных инструментов для тестирования и отладки доступности](https://www.w3.org/WAI/ER/tools/).

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