doka-guide · TatianaFokina · Apr 9, 2024 · Apr 4, 2024 · Apr 4, 2024 · Apr 4, 2024
@@ -80,9 +80,9 @@ span[role="mark"]::after {
 }
 ```
 
-Например, в теме «Ночное небо» элементы с ролью `mark` будут выделятся фиолетовым цветом.
+Например, в теме «Ночное небо» элементы с ролью `mark` выделятся фиолетовым цветом.
 
-![Текст с выделенными фрагментами в режиме высокой контартсности.](images/night-sky-example.png)
+![Текст с выделенными фрагментами в режиме высокой контрастности.](images/night-sky-example.png)
 
 ## Как понять
 

@@ -49,7 +49,7 @@ tags:
 
 `marquee` по умолчанию задано свойство [`aria-live="off"`](/a11y/aria-live/). Это значит, что, хоть это и изменяющаяся область, [скринридеры](/a11y/screenreaders/) не расскажут об изменениях без фокуса на ней или на элементе внутри.
 
-Чтобы изменить стандартное поведение `marquee`, замените значение `aria-live` с `off` на `polite`. В этом случае вспомогательные технологии расскажут об изменениях где бы пользователь не находился на странице, но не сразу. Например, сначала они дадут пользователям завершить все действия или расскажут о более важных событиях.
+Чтобы изменить стандартное поведение `marquee`, замените значение `aria-live` с `off` на `polite`. В этом случае вспомогательные технологии расскажут об изменениях, где бы пользователь не находился на странице, но не сразу. Например, сначала они дадут пользователям завершить все действия или расскажут о более важных событиях.
 
 В большинстве случаев лучше не изменять поведение `marquee`. Например, в карусели слайды быстро сменяют друг друга и часто нет возможности остановить автоматическую прокрутку. Пользователям скринридеров будет мучительно это слушать 😫
 

@@ -124,7 +124,7 @@ tags:
 
 Строка меню — составной виджет. Это означает, что у него особая навигация с клавиатуры, над которой придётся немного попотеть 🥵
 
-На строку попадают с помощью клавиши <kbd>Tab</kbd> или сочетания <kbd>Shift Tab</kbd>. Когда оказались на ней в первый раз, фокус должен установиться на первом пункте, а в последующем — на последнем активном элементе. Когда находитесь на пункте и нажали на <kbd>Tab</kbd>, фокус перемещается на следующий интерактивный элемент после строки меню, на <kbd>Tab Shift</kbd> — на предыдущий. Если при этом в строке открыто подменю, оно закрываются.
+На строку попадают с помощью клавиши <kbd>Tab</kbd> или сочетания <kbd>Shift Tab</kbd>. Когда оказались на ней в первый раз, фокус должен установиться на первом пункте, а в последующем — на последнем активном элементе. Когда находитесь на пункте и нажали на <kbd>Tab</kbd>, фокус перемещается на следующий интерактивный элемент после строки меню, на <kbd>Tab Shift</kbd> — на предыдущий. Если в строке открыто подменю, оно закроется.
 
 Между пунктами горизонтальной строки перемещаются клавишами со стрелками влево <kbd>←</kbd> и вправо <kbd>→</kbd>. Если она вертикальная и элементы расположены друг под другом, по ним проходят стрелками вверх <kbd>↑</kbd> и вниз <kbd>↓</kbd>. Также клавиша <kbd>Home</kbd> должна переносить на первый пункт строки, <kbd>End</kbd> — на последний.
 

@@ -132,13 +132,13 @@ tags:
 
 #### Поведение кнопки
 
-Если задаёте роль `menuitem` неинтерактивным тегам вроде `<div>` или `<span>`, не забудьте сделать их кнопками с точки зрения их поведения. Тут не обойтись без JavaScript.
+Если задаёте роль `menuitem` неинтерактивным тегам вроде `<div>` или `<span>`, не забудьте сделать их кнопками с точки зрения поведения. Тут не обойтись без JavaScript.
 
 Настоящие кнопки [`<button>`](/html/button/) срабатывают при нажатии <kbd>Enter</kbd> и пробела, а также при клике и тапе на них. Кнопка нажимается столько, сколько зажимаете и не отпускаете <kbd>Enter</kbd> (событие `keydown`). Если нажали на пробел (событие `keyup`), то действие с кнопкой срабатывает после того, как отпустили клавишу.
 
 #### Управление фокусом
 
-Полностью кастомные пункты `menuitem` также нужно добавить в порядок фокуса с помощью [`tabindex`](/html/global-attrs/#tabindex) со значенем `-1` по умолчанию. Когда пользователь сделал фокус на пункте, меняйте значение на `0`. Имейте в виду, что только у **одного** пункт может быть нулевое значение `tabindex`.
+Полностью кастомные пункты `menuitem` также нужно добавить в порядок фокуса с помощью [`tabindex`](/html/global-attrs/#tabindex) со значением `-1` по умолчанию. Когда пользователь сделал фокус на пункте, меняйте значение на `0`. Имейте в виду, что только у **одного** пункт может быть нулевое значение `tabindex`.
 
 ## Как понять
 

@@ -129,7 +129,7 @@ tags:
 
 </aside>
 
-На практике `presentation` чаще всего встречается в письмах. Тег [`<table>`](/html/tables/) в письмах используют не для хранения данных как обычно, а для визуального выравнивания содержимого. При помощи роли  `presentation` сбросится не только семантика самой таблицы, но и её дочерних элементов — [`<tr>`](/html/tables/#tr), [`<th>`](/html/tables/#th), [`<td>`](/html/tables/#td) и других.
+На практике `presentation` чаще всего встречается в письмах. Тег [`<table>`](/html/tables/) в письмах используют не для хранения данных, как обычно, а для визуального выравнивания содержимого. При помощи роли  `presentation` сбросится не только семантика самой таблицы, но и её дочерних элементов — [`<tr>`](/html/tables/#tr), [`<th>`](/html/tables/#th), [`<td>`](/html/tables/#td) и других.
 
 ```html
 <table

@@ -100,7 +100,7 @@ tags:
 
 Содержимое вкладки тоже должно получать фокус с клавиатуры, как сама вкладка. Поэтому задайте `tabpanel` атрибут [`tabindex`](/html/global-attrs/#tabindex) со значением `0`. В этом случае пользователь попадёт на связанное содержимое активной вкладки, если нажмёт на <kbd>Tab</kbd>.
 
-Когда вкладка неактивна, то нужно скрыть связанное с ней содержимое `tabpanel`. Это можно сделать с помощью атрибута [`hidden`](/html/hidden/) или CSS-свойств [`display: none`](/css/display/) или [`visibility: hidden`](/css/visibility/). Важно выбрать способ, который точно скроет содержимое вкладки не только визуально, но и от скринридера. Больше узнать об этом можно из «[Как скрыть содержимое от скринридеров](/a11y/content-hidden/)».
+Когда вкладка неактивна, то нужно скрыть связанное с ней содержимое `tabpanel`. Это можно сделать с помощью атрибута [`hidden`](/html/hidden/) или CSS-свойств [`display: none`](/css/display/) и [`visibility: hidden`](/css/visibility/). Важно выбрать способ, который точно скроет содержимое вкладки не только визуально, но и от скринридера. Больше узнать об этом можно из «[Как скрыть содержимое от скринридеров](/a11y/content-hidden/)».
 
 Внутри `tabpanel` можно размещать любое содержимое, не только текст.
 

@@ -41,11 +41,11 @@ tags:
 
 По умолчанию у `timer` есть свойство [`aria-live="off"`](/a11y/aria-live/). Так что [скринридеры](/a11y/screenreaders/) не расскажут об изменениях до того, как пользователь сделает на фокус на области с этой ролью.
 
-Чтобы изменить поведение роли, используйте `aria-live` со значением `polite` и [JavaScript](/js/). Переключайте значение c `polite` на `off` или удаляйте весь атрибут через нужные интервалы времени. Например, каждые 60 минут. Так объявления не будут навязчивыми. В большинстве случаев лучше не изменять поведение `timer`. Например, постоянно рассказывать о том, сколько часов, минут и секунд осталось до Чёрной пятницы, — не самая лучшая идея. Пользователям скринридеров будет мучительно это слушать 😫 Другое дело — отсчёт времени до конца теста или на выполнение банковской операции. В этом случае пользователям важно знать, сколько у них осталось времени.
+Чтобы изменить поведение роли, используйте `aria-live` со значением `polite` и [JavaScript](/js/). Переключайте значение с `polite` на `off` или удаляйте весь атрибут через нужные интервалы времени. Например, каждые 60 минут. Так объявления не будут навязчивыми. В большинстве случаев лучше не изменять поведение `timer`. Например, постоянно рассказывать о том, сколько часов, минут и секунд осталось до Чёрной пятницы, — не самая лучшая идея. Пользователям скринридеров будет мучительно это слушать 😫 Другое дело — отсчёт времени до конца теста или на выполнение банковской операции. В этом случае пользователям важно знать, сколько у них осталось времени.
 
 Атрибут [`aria-atomic="true"`](/a11y/aria-busy/) поможет улучшить таймер. Благодаря ему вспомогательные технологии расскажут про всё содержимое таймера, а не только про изменившиеся часы, секунды или минуты. Например, таймер отсчитывает две минуты в обратном направлении. Когда остаётся 59 секунд, без `aria-atomic` скринридер расскажет только о минутах: «Ноль минут». Так что пользователи могут подумать, что время вышло, хотя у них осталась ещё пара секунд. Чтобы объявления не были назойливыми, устанавливайте интервалы между объявлениями. Это удобно делать [функцией `setInterval()`](/js/setinterval/). Так можно добавлять и удалять `aria-live="true"` через нужные промежутки времени.
 
-В примере элементу, в котором отсчитывается время, заданы `role="timer"` и `aria-atomic="true"`. После того, как время вышло, появляется сообщение «Время вышло!». `aria-live` удаляется и добавляется через секунду после начала отсчёта, потом через минуту и затем за 10 секунд до завершения.
+В примере элементу, в котором отсчитывается время, заданы `role="timer"` и `aria-atomic="true"`. После того как время вышло, появляется сообщение «Время вышло!». `aria-live` удаляется и добавляется через секунду после начала отсчёта, потом через минуту и затем за 10 секунд до завершения.
 
 Подсказки про то, минуты это или секунды, добавлены с помощью псевдоэлемента [`::after`](/css/after/) и [`content`](/css/content/). Скринридеры всегда зачитывают текст из этого CSS-свойства.