diff --git a/files/ru/web/accessibility/aria/roles/checkbox_role/index.md b/files/ru/web/accessibility/aria/roles/checkbox_role/index.md index 2bd744923b7ccb..0602b9654c4496 100644 --- a/files/ru/web/accessibility/aria/roles/checkbox_role/index.md +++ b/files/ru/web/accessibility/aria/roles/checkbox_role/index.md @@ -122,7 +122,7 @@ function changeCheckbox(event) { {{EmbedLiveSample("Примеры", 230, 250)}} -## Проблемы доступности +## Доступность Когда `checkbox` роль добавлена к элементу, юзер агент должен сделать следующее: diff --git a/files/ru/web/css/_colon_focus/index.md b/files/ru/web/css/_colon_focus/index.md index ec2161bc994c4d..966048efba5f4d 100644 --- a/files/ru/web/css/_colon_focus/index.md +++ b/files/ru/web/css/_colon_focus/index.md @@ -46,7 +46,7 @@ input:focus { {{EmbedLiveSample('Пример', '100%', 40)}} -## Проблемы доступности +## Доступность Убедитесь что визуальный индикатор фокусировки хорошо виден людям с плохим зрением. Это также поможет любым другим людям, которые используют экран в ярко освещённом месте (например, на солнце). [WCAG 2.1 SC 1.4.11 Non-Text Contrast](https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html) (_WCAG 2.1 SC 1.4.11 Нетекстовой контраст_) требует, чтобы контраст визуального индикатора фокуса должен быть не менее 3 к 1. diff --git a/files/ru/web/css/_doublecolon_placeholder/index.md b/files/ru/web/css/_doublecolon_placeholder/index.md index 75983631550185..bf753989aed68d 100644 --- a/files/ru/web/css/_doublecolon_placeholder/index.md +++ b/files/ru/web/css/_doublecolon_placeholder/index.md @@ -67,7 +67,7 @@ input::placeholder { {{EmbedLiveSample("Зелёный_текст", 200, 60)}} -## Проблемы доступности +## Доступность ### Цветовой контраст diff --git a/files/ru/web/css/background-color/index.md b/files/ru/web/css/background-color/index.md index e648284aad03a3..275a5e53da1570 100644 --- a/files/ru/web/css/background-color/index.md +++ b/files/ru/web/css/background-color/index.md @@ -89,7 +89,7 @@ background-color: unset; {{EmbedLiveSample("Примеры","200","150")}} -## Проблемы доступности +## Доступность Важно обеспечить достаточный цветовой контраст между цветом текста и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их. diff --git a/files/ru/web/css/content/index.md b/files/ru/web/css/content/index.md index 6a6aafd5de8046..c72a82fd148472 100644 --- a/files/ru/web/css/content/index.md +++ b/files/ru/web/css/content/index.md @@ -263,7 +263,7 @@ li { {{EmbedLiveSample('Замена_элемента', '100%', 160)}} -## Проблемы доступности +## Доступность Сгенерированный CSS контент не включён в [DOM](/ru/docs/Web/API/Document_Object_Model/Introduction). Из-за этого он не будет представлен в [accessibility tree](/ru/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs) и некоторые комбинации вспомогательных технологий/браузеров не будут его объявлять. Если контент содержит информацию, которая имеет решающее значение для понимания цели страницы, лучше включить её в основной документ. diff --git a/files/ru/web/css/flex-direction/index.md b/files/ru/web/css/flex-direction/index.md index a51dec3ddca4ec..fdeff0abfebec2 100644 --- a/files/ru/web/css/flex-direction/index.md +++ b/files/ru/web/css/flex-direction/index.md @@ -49,7 +49,7 @@ flex-direction: unset; - `column-reverse` - : Ведёт себя как `column`, но точки **main-start** и **main-end** переставлены местами. -## Проблемы доступности +## Доступность Использование свойства `flex-direction` со значениями `row-reverse` и `column-reverse` создаст различие между визуальным представлением содержимого и его порядком в DOM. Это отрицательно влияет на пользователей с плохим зрением, использующих навигацию с помощью вспомогательных технологий, таких как программы чтения с экрана. Если визуальный порядок важен, пользователи программ чтения с экрана не будут иметь доступа к правильному порядку. diff --git a/files/ru/web/css/height/index.md b/files/ru/web/css/height/index.md index c69d7e597b616f..0b0c9ad5673e3d 100644 --- a/files/ru/web/css/height/index.md +++ b/files/ru/web/css/height/index.md @@ -102,7 +102,7 @@ div { {{EmbedLiveSample('Пример', 'auto', 240)}} -## Проблемы доступности +## Доступность Убедитесь, что элементы с `height` не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста. diff --git a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.md b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.md index d9cb706df294db..09bb809e7d8fe1 100644 --- a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.md +++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.md @@ -36,7 +36,7 @@ slug: Web/CSS/Layout_cookbook/Breadcrumb_Navigation Этот шаблон построен с использованием простого гибкого макета, демонстрирующего, как строка CSS может дать нам нашу навигацию. Разделители добавляются с использованием содержимого, созданного CSS. Вы можете изменить их на любой разделитель, который вам нравится. -## Проблемы доступности +## Доступность Я использовал атрибуты `aria-label` и `aria-current`, чтобы помочь пользователям понять, что это за навигация и где в структуре находится текущая страница. Смотреть связанные ссылки для получения дополнительной информации. diff --git a/files/ru/web/css/letter-spacing/index.md b/files/ru/web/css/letter-spacing/index.md index 74d9a0be90a480..af2b51b36c5659 100644 --- a/files/ru/web/css/letter-spacing/index.md +++ b/files/ru/web/css/letter-spacing/index.md @@ -73,7 +73,7 @@ letter-spacing: unset; {{ EmbedLiveSample('Примеры', 440, 185) }} -## Проблемы доступности +## Доступность Большие положительные или отрицательные значения свойства `letter-spacing` могут сделать текст, к которому применяется форматирование, нечитаемым. При очень больших положительных значениях этого свойства, буквы в тексте будут настолько далеко друг от друга, что не будут восприниматься как цельные слова. При очень больших отрицательных значениях буквы будут перекрываться друг другом до такой степени, что слова могут стать неразличимы. diff --git a/files/ru/web/css/max-height/index.md b/files/ru/web/css/max-height/index.md index 2325ae48c18cb7..7eecaac365cc0d 100644 --- a/files/ru/web/css/max-height/index.md +++ b/files/ru/web/css/max-height/index.md @@ -69,7 +69,7 @@ form { } ``` -## Проблемы доступности +## Доступность Убедитесь, что элементы с `max-height` не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста. diff --git a/files/ru/web/css/max-width/index.md b/files/ru/web/css/max-width/index.md index b8381e8b370d2c..44ed1eb53963a4 100644 --- a/files/ru/web/css/max-width/index.md +++ b/files/ru/web/css/max-width/index.md @@ -108,7 +108,7 @@ max-width: unset; {{EmbedLiveSample("fit-content-demo", 400, 100)}} -## Проблемы доступности +## Доступность Убедитесь, что элементы с `max-width` не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста. diff --git a/files/ru/web/css/opacity/index.md b/files/ru/web/css/opacity/index.md index 272880b3627ba7..1665be29122201 100644 --- a/files/ru/web/css/opacity/index.md +++ b/files/ru/web/css/opacity/index.md @@ -91,7 +91,7 @@ img.opacity:hover { {{EmbedLiveSample('Различная_непрозрачность_с_hover', '150', '175')}} -## Проблемы доступности +## Доступность Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещён текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы. diff --git a/files/ru/web/css/width/index.md b/files/ru/web/css/width/index.md index 37efcf9b9bf6c8..bf875625634c9d 100644 --- a/files/ru/web/css/width/index.md +++ b/files/ru/web/css/width/index.md @@ -160,7 +160,7 @@ p.minblue { {{EmbedLiveSample('min-content_2', '500px', '155px')}} -## Проблемы доступности +## Доступность Убедитесь, что элементы с `width` не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста. diff --git a/files/ru/web/css/word-spacing/index.md b/files/ru/web/css/word-spacing/index.md index 3c5b5dfff22636..017040ab1f3654 100644 --- a/files/ru/web/css/word-spacing/index.md +++ b/files/ru/web/css/word-spacing/index.md @@ -65,7 +65,7 @@ word-spacing: unset; {{ EmbedLiveSample('Example') }} -## Проблемы доступности +## Доступность Большое положительное или отрицательное значение `word-spacing` может сделать предложения, к которым применяется стиль, нечитаемыми. Для текста, стилизованного с очень большими положительными значениями, слова будут так далеки друг от друга, что он больше не будет казаться предложением. Для текста, стилизованного с очень большими отрицательными значениями, слова будут перекрывать друг от друга до точки, где начало и конец каждого слова будут неразличимы. diff --git a/files/ru/web/html/element/audio/index.md b/files/ru/web/html/element/audio/index.md index e2620437265112..e6cbd501ecd22a 100644 --- a/files/ru/web/html/element/audio/index.md +++ b/files/ru/web/html/element/audio/index.md @@ -122,7 +122,7 @@ slug: Web/HTML/Element/audio ``` -## Проблемы доступности +## Доступность Audio with spoken dialog should provide both captions and transcripts that accurately describe its content. Captions allow people who are experiencing hearing loss to understand an audio recording's content as the recording is being played, while transcripts allow people who need additional time to be able to review the recording's content at a pace and format that is comfortable for them. diff --git a/files/ru/web/html/element/br/index.md b/files/ru/web/html/element/br/index.md index 77cacc0bf41106..f77d3b826099d3 100644 --- a/files/ru/web/html/element/br/index.md +++ b/files/ru/web/html/element/br/index.md @@ -48,7 +48,7 @@ USA
{{ EmbedLiveSample('Простой_br', '100%', '90') }} -## Проблемы доступности +## Доступность Разделять абзацы в тексте, используя `
` не только плохая практика, но и проблема для людей, которые используют программы чтения с экрана. Программы чтения могут сообщать о наличии элемента, но не содержимом в `
`. Это может привести к путанице и разочарованию для человека, использующего программу чтения с экрана. diff --git a/files/ru/web/html/element/del/index.md b/files/ru/web/html/element/del/index.md index fc107094d4bb5c..eba7985ad784eb 100644 --- a/files/ru/web/html/element/del/index.md +++ b/files/ru/web/html/element/del/index.md @@ -41,7 +41,7 @@ slug: Web/HTML/Element/del ~~This paragraph has been deleted.~~ -## Проблемы доступности +## Доступность Присутствие элемента `del` не определено в конфигурации по умолчанию большинством технологий чтения с экрана. Его можно задать, используя свойство CSS {{cssxref("content")}}, а также {{cssxref("::before")}} и с помощью псевдоэлемента {{cssxref("::after")}}. diff --git a/files/ru/web/html/element/dl/index.md b/files/ru/web/html/element/dl/index.md index b6d516e7963fee..8b67831fcd85a2 100644 --- a/files/ru/web/html/element/dl/index.md +++ b/files/ru/web/html/element/dl/index.md @@ -137,7 +137,7 @@ dt:after { Чтобы изменить отступ определений терминов, воспользуйтесь [CSS](/ru/docs/Web/CSS) - свойством {{cssxref("margin")}}. -## Проблемы доступности +## Доступность Каждый скринридер произносит содержимое элемента `
` по-разному. Некоторые скринридеры, такие как VoiceOver на iOS, не будут озвучивать, что содержимое `
` это список. В связи с этим, убедитесь, что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношении с другими элементами списка в списке группы. diff --git a/files/ru/web/html/element/footer/index.md b/files/ru/web/html/element/footer/index.md index f381ddf6c4b704..689f4bc8d693cf 100644 --- a/files/ru/web/html/element/footer/index.md +++ b/files/ru/web/html/element/footer/index.md @@ -34,7 +34,7 @@ slug: Web/HTML/Element/footer ``` -## Проблемы доступности +## Доступность У программа чтения с экрана [VoiceOver](https://help.apple.com/voiceover/info/guide/) есть проблема, при которой она не читает элемент `