diff --git a/a11y/a11y-html/index.md b/a11y/a11y-html/index.md index 4c266190c7..9ec209001f 100644 --- a/a11y/a11y-html/index.md +++ b/a11y/a11y-html/index.md @@ -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), что противоположно его значению в англоговорящей среде. Поэтому использование иконок может запутать не только пользователей скринридеров, но и других людей. ### Подписи @@ -122,7 +122,7 @@ ARIA позволяет задавать роли, состояния и сво ### Порядок заголовков -Другая популярная ошибка — неправильный порядок заголовков, для которых используют от [`

`](/html/h1-h6/) до `

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

`, а все остальные заголовки располагались в последовательном порядке. Это облегчает навигацию по сайту для пользователей и позволяет передвигаться от заголовка к заголовку с помощью горячих клавиш для скринридеров. +Другая популярная ошибка — неправильный порядок заголовков, для которых используют от [`

`](/html/h1-h6/) до `

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

`, а все остальные заголовки располагались в последовательном порядке. Это облегчает навигацию по сайту для пользователей и позволяет передвигаться от заголовка к заголовку с помощью горячих клавиш для скринридеров. Правильную иерархию заголовков подробнее описывает [правило «Порядок заголовков»](https://dequeuniversity.com/rules/axe/4.4/heading-order) на сайте Deque University. @@ -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/). Эти инструменты помогают выявить большинство, но не все ошибки, связанные с доступностью. К примеру, навигацию с клавиатуры нужно тестировать вручную.