Skip to content

Commit

Permalink
Исправляет опечатки в статье про a11y и HTML (#5459)
Browse files Browse the repository at this point in the history
  • Loading branch information
bambrillo authored Jul 24, 2024
1 parent 366be1a commit 6c67ce8
Showing 1 changed file with 3 additions and 3 deletions.
6 changes: 3 additions & 3 deletions a11y/a11y-html/index.md
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/).

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

0 comments on commit 6c67ce8

Please sign in to comment.