diff options
Diffstat (limited to 'files/ru/learn/accessibility/html/index.html')
| -rw-r--r-- | files/ru/learn/accessibility/html/index.html | 38 |
1 files changed, 19 insertions, 19 deletions
diff --git a/files/ru/learn/accessibility/html/index.html b/files/ru/learn/accessibility/html/index.html index 2528edf2f3..36f8497f68 100644 --- a/files/ru/learn/accessibility/html/index.html +++ b/files/ru/learn/accessibility/html/index.html @@ -10,7 +10,7 @@ tags: - Семантика - Ссылки - Формы - - вспомагательные технологии + - вспомогательные технологии - доступность translation_of: Learn/Accessibility/HTML original_slug: Learn/Доступность/HTML @@ -54,7 +54,7 @@ original_slug: Learn/Доступность/HTML <ol> <li><strong>Легче разрабатывать</strong> — как сказано выше, вы получаете функционал «из коробки», плюс проще для восприятия.</li> - <li><strong>Лучше для мобильных</strong> — семантический HTML легче по размеру, чем не семантический спаггети-код, и его легче сделать адаптивным.</li> + <li><strong>Лучше для мобильных</strong> — семантический HTML легче по размеру, чем не семантический спагетти-код, и его легче сделать адаптивным.</li> <li><strong>Хорошо для SEO</strong> — поисковики уделяют больше внимания ключевым словам внутри заголовков, ссылок и т.д., чем ключевым словам, помещённым в не семантический <code><div></code> и т.д., поэтому клиентам будет проще найти ваш сайт.</li> </ol> @@ -252,7 +252,7 @@ original_slug: Learn/Доступность/HTML <!-- здесь содержимое подвала --> </footer></pre> -<p>Если вы попробуете нашу более современную структуру с помощью скринридера, вы увидите, что разметка больше не сбивает с толку скринридер. Она также более компактная с точки зрения размера кода, что означает, его легче поддерживать, а пользователям меньше скачивать (особенно для тех, у кого медленный интенет).</p> +<p>Если вы попробуете нашу более современную структуру с помощью скринридера, вы увидите, что разметка больше не сбивает с толку скринридер. Она также более компактная с точки зрения размера кода, что означает, его легче поддерживать, а пользователям меньше скачивать (особенно для тех, у кого медленный интернет).</p> <p>На что ещё стоит обратить внимание при вёрстке — это использование семантических HTML5 элементов, которые можно увидеть в примере выше (смотрите <a href="/ru/docs/Web/HTML/Element#Секционирование_содержания">секционирование содержания)</a>: вы можно верстать, используя только вложенные {{htmlelement("div")}} элементы, но лучше использовать соответствующие секционные элементы, чтобы обернуть вашу основную навигацию ({{htmlelement("nav")}}), футер ({{htmlelement("footer")}}), повторяющийся контент ({{htmlelement("article")}}) и т.д. Эти элементы предоставляют дополнительную семантику для скринридеров (и других инструментов), чтобы давать пользователю дополнительную информацию о контенте, по которому они перемещаются (смотрите статью <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Screen Reader Support for new HTML5 Section Elements</a> для представления поддержки этих элементов с помощью скринридеров).</p> @@ -264,7 +264,7 @@ original_slug: Learn/Доступность/HTML <p>Под элементами интерфейса мы подразумеваем основные элементы веб-страниц, с которыми взаимодействует пользователь, в основном это кнопки, ссылки и элементы форм. В этом разделе мы рассмотрим основные проблемы доступности, которые стоит учитывать при создании таких элементов. В следующих статьях про WAI-ARIA и мультимедиа мы рассмотрим другие аспекты доступности пользовательского интерфейса.</p> -<p>Одним из ключевых аспектов доступуности элементов интерфейса является то, что браузеры по умолчанию позволяют управлять ими с помощью клавиатуры. Вы можете проверить это, открыв в новой вкладке <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html </a>(смотрите <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">исходный код</a>). Попробуйте понажимать клавишу <kbd>Tab</kbd>, после нескольких нажатий вы заметите, что фокус перемещается по всем фокусируемым элементам. Сфокусированные элеметы подсвечиваются браузерными стилями по умолчанию (в зависимости от браузера они немного разные), чтобы можно было понять, какой элемент в фокусе.</p> +<p>Одним из ключевых аспектов доступности элементов интерфейса является то, что браузеры по умолчанию позволяют управлять ими с помощью клавиатуры. Вы можете проверить это, открыв в новой вкладке <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html </a>(смотрите <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">исходный код</a>). Попробуйте понажимать клавишу <kbd>Tab</kbd>, после нескольких нажатий вы заметите, что фокус перемещается по всем фокусируемым элементам. Сфокусированные элементы подсвечиваются браузерными стилями по умолчанию (в зависимости от браузера они немного разные), чтобы можно было понять, какой элемент в фокусе.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p> @@ -324,16 +324,16 @@ original_slug: Learn/Доступность/HTML <h4 id="Добавление_доступности_с_клавиатуры">Добавление доступности с клавиатуры</h4> -<p>Для добавления доступности с клавиатуры несоответствующим элементам придётся немного поработать (вы можете посмотреть пример, открыв <a class="external external-icon" href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a>, а также <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">исходный код</a>). Мы дали нашим поддельным <code><div></code>-кнопкам возможность фокусироваться (в том числе через <kbd>Tab</kbd>), указав аттрибут <code>tabindex="0"</code>:</p> +<p>Для добавления доступности с клавиатуры несоответствующим элементам придётся немного поработать (вы можете посмотреть пример, открыв <a class="external external-icon" href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a>, а также <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">исходный код</a>). Мы дали нашим поддельным <code><div></code>-кнопкам возможность фокусироваться (в том числе через <kbd>Tab</kbd>), указав атрибут <code>tabindex="0"</code>:</p> <pre class="brush: html"><div data-message="Это из первой кнопки" tabindex="0">Кликни меня!</div> <div data-message="Это из второй кнопки" tabindex="0">Меня тоже кликни!</div> <div data-message="Это из третьей кнопки" tabindex="0">И меня!</div></pre> -<p>Аттрибут {{htmlattrxref("tabindex")}} в первую очередь предназначен для того, чтобы менять порядок фокусируемых элементов в последовательной навигации (указанный в виде положительного целого числа). Это почти всегда — плохая идея, которая может вызвать большую путаницу. Используйте его, если он правда необходим, например, если визуальный порядок сильно отличается от исходного, и вы хотите более логичную последовательную навигацию. Есть два варианта значений <code>tabindex</code>:</p> +<p>Атрибут {{htmlattrxref("tabindex")}} в первую очередь предназначен для того, чтобы менять порядок фокусируемых элементов в последовательной навигации (указанный в виде положительного целого числа). Это почти всегда — плохая идея, которая может вызвать большую путаницу. Используйте его, если он правда необходим, например, если визуальный порядок сильно отличается от исходного, и вы хотите более логичную последовательную навигацию. Есть два варианта значений <code>tabindex</code>:</p> <ul> - <li><code>tabindex="0"</code> — как указано выше, это значение позовляет элементу быть выделеным и достигнутым с помощью последовательной навигации. Это самое полезное значение <code>tabindex</code>.</li> + <li><code>tabindex="0"</code> — как указано выше, это значение позволяет элементу быть выделенным и достигнутым с помощью последовательной навигации. Это самое полезное значение <code>tabindex</code>.</li> <li><code>tabindex="-1"</code> — позволяет элементам, которые обычно не принимают фокусное выделение, получать его программно, например, с помощью JavaScript, или как цель якорной ссылки.</li> </ul> @@ -424,8 +424,8 @@ original_slug: Learn/Доступность/HTML <p>Теперь посмотрим на <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">пример таблицы с панк-группами</a>, где можно увидеть несколько вспомогательных средств:</p> <ul> - <li>Заголовки таблиц определены, используя элементы {{htmlelement("th")}}; можно также указать являются ли они заголовками для строк или столбцов с помощью аттрибута <code>scope</code>. Это даёт нам полные группы данных, которые скринридер обработает как отдельные блоки.</li> - <li>Элемент {{htmlelement("caption")}} и аттрибут <code>summary</code> у элемента {{htmlelement("table")}} выполняют похожую работу — они выступают в качестве альтернативного текста для таблицы, предоставляя пользователям скринридера краткое содержание. Элемент <code><caption></code> обычно предпочтительнее, так как контент становится доступнее и для зрячих пользователей, которые могут посчитать это полезным. На самом деле необязательно ни то, ни другое.</li> + <li>Заголовки таблиц определены, используя элементы {{htmlelement("th")}}; можно также указать являются ли они заголовками для строк или столбцов с помощью атрибута <code>scope</code>. Это даёт нам полные группы данных, которые скринридер обработает как отдельные блоки.</li> + <li>Элемент {{htmlelement("caption")}} и атрибут <code>summary</code> у элемента {{htmlelement("table")}} выполняют похожую работу — они выступают в качестве альтернативного текста для таблицы, предоставляя пользователям скринридера краткое содержание. Элемент <code><caption></code> обычно предпочтительнее, так как контент становится доступнее и для зрячих пользователей, которые могут посчитать это полезным. На самом деле необязательно ни то, ни другое.</li> </ul> <div class="note"> @@ -459,17 +459,17 @@ original_slug: Learn/Доступность/HTML <p><strong>Примечание</strong>: Вот почему вы никогда не должны включать текстовое содержимое в изображение — скринридеры просто не могут получить к нему доступ.Есть и другие недостатки — вы не можете выбрать его и скопировать/вставить. Просто не делайте этого!</p> </div> -<p>Когда скринридер встретит второе изображение, он озвучит аттрибут <code>alt</code> полностью: «Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов».</p> +<p>Когда скринридер встретит второе изображение, он озвучит атрибут <code>alt</code> полностью: «Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов».</p> -<p>Это подчёркивает важность не только использования содержательных файловых имён в случаях отсутствия, так называемого, <strong>альтернативного текста</strong>, но также важность предоставления альтернативного текста в аттрибуте <code>alt</code>, где это возможно. Заметьте, что содержание аттрибута <code>alt</code> должно всегда предоставлять прямое представление изображения и то, что оно визуально передаёт. Любые личные знания или дополнительное описание не должны быть включены, так как это не принесёт пользы людям, которые не видели изображение ранее.</p> +<p>Это подчёркивает важность не только использования содержательных файловых имён в случаях отсутствия, так называемого, <strong>альтернативного текста</strong>, но также важность предоставления альтернативного текста в атрибуте <code>alt</code>, где это возможно. Заметьте, что содержание атрибута <code>alt</code> должно всегда предоставлять прямое представление изображения и то, что оно визуально передаёт. Любые личные знания или дополнительное описание не должны быть включены, так как это не принесёт пользы людям, которые не видели изображение ранее.</p> -<p>Также стоит учитывать, имеют ли изображения значение внутри вашего контента, или они исключительно для украшения без смысла. Если они декоративные, лучше оставить значение аттрибута <code>alt</code> пустым (смотрите «<a href="#Пустые_аттрибуты_alt">Пустые аттрибуты alt</a>») или просто вставить их как фон с помощью CSS.</p> +<p>Также стоит учитывать, имеют ли изображения значение внутри вашего контента, или они исключительно для украшения без смысла. Если они декоративные, лучше оставить значение атрибута <code>alt</code> пустым (смотрите «<a href="#Пустые_атрибуты_alt">Пустые атрибуты alt</a>») или просто вставить их как фон с помощью CSS.</p> <div class="note"> <p><strong>Примечание</strong>: Для более подробной информации об изображениях и лучших практиках читайте «<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML">Изображения в HTML»</a> и «<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>».</p> </div> -<p>Если вы всё же хотите предоставить дополнительную контекстуальную информацию, поместите её в тексте рядом с изображением или внутри аттрибута <code>title</code>, как показано ниже. В этом случае большинство скринридеров озвучат альтернативный текст, аттрибут <code>title</code> и имя файла. Дополнительно, при наведении мышкой браузеры отобразят текст из аттрибута <code>title</code> как всплывающую подсказку.</p> +<p>Если вы всё же хотите предоставить дополнительную контекстуальную информацию, поместите её в тексте рядом с изображением или внутри атрибута <code>title</code>, как показано ниже. В этом случае большинство скринридеров озвучат альтернативный текст, атрибут <code>title</code> и имя файла. Дополнительно, при наведении мышкой браузеры отобразят текст из атрибута <code>title</code> как всплывающую подсказку.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></p> @@ -479,7 +479,7 @@ original_slug: Learn/Доступность/HTML <p id="dino-label">Красный тираннозавр Mozilla ... </p></pre> -<p>В этом случае мы вообще не используем аттрибут <code>alt</code>. Вместо этого мы представили наше описание изображения как обычный параграф, указали <code>id</code>, и потом использовали аттрибут <code>aria-labelledby</code>, сославшись на тот <code>id</code>. Это вынуждает скринридеры использовать параграф как альтернативный текст/описание изображения. Это особенно удобно, если вы хотите использовать один текст как описание для нескольких изображений, что невозомжно с помощью аттрибута <code>alt</code>.</p> +<p>В этом случае мы вообще не используем атрибут <code>alt</code>. Вместо этого мы представили наше описание изображения как обычный параграф, указали <code>id</code>, и потом использовали атрибут <code>aria-labelledby</code>, сославшись на тот <code>id</code>. Это вынуждает скринридеры использовать параграф как альтернативный текст/описание изображения. Это особенно удобно, если вы хотите использовать один текст как описание для нескольких изображений, что невозможно с помощью атрибута <code>alt</code>.</p> <div class="note"> <p><strong>Примечание</strong>: <code>aria-labelledby</code> — часть спецификации <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a>, которая позволяет разработчиками добавлять, где требуется, дополнительную семантику разметке для улучшения доступности при использовании скринридеров. Чтобы узнать больше о том, как это работает, читайте статью <a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">«Основы WAI-ARIA».</a></p> @@ -487,7 +487,7 @@ original_slug: Learn/Доступность/HTML <h3 id="Другие_механизмы_альтернативного_текста">Другие механизмы альтернативного текста</h3> -<p>У изображений есть ещё один механизм для предоставления описательного текста. Например, есть аттрибут <code>longdesc</code>, который предназначен для указания отдельной веб-страницы, содержащей расширенное описание изображения:</p> +<p>У изображений есть ещё один механизм для предоставления описательного текста. Например, есть атрибут <code>longdesc</code>, который предназначен для указания отдельной веб-страницы, содержащей расширенное описание изображения:</p> <pre class="brush: html"><img src="dinosaur.png" longdesc="dino-info.html"></pre> @@ -502,16 +502,16 @@ original_slug: Learn/Доступность/HTML <p>К сожалению, большинство скринридеров, кажется, пока ещё не умеют связывать заголовки фигур с самими фигурами, но такая структура элементов удобна для CSS стилизации, к тому же, она предоставляет способ расположить описание рядом с изображением в исходнике.</p> -<h3 id="Пустые_аттрибуты_alt">Пустые аттрибуты alt</h3> +<h3 id="Пустые_атрибуты_alt">Пустые атрибуты alt</h3> <pre class="brush: html"><h3> <img src="article-icon.png" alt=""> Тираннозавр Рекс: король динозвров </h3></pre> -<p>Бывает, что в дизайне страницы присутствуют изображения, но они исполняют декоративную роль. В примере выше вы можете заметить, что у изображения пустой аттрибут <code>alt</code> — это сделано, чтобы скринридер опознал изображение, но не стал озвучивать её описание (вместо этого, он бы озвучил её как «изображение», или аналогично).</p> +<p>Бывает, что в дизайне страницы присутствуют изображения, но они исполняют декоративную роль. В примере выше вы можете заметить, что у изображения пустой атрибут <code>alt</code> — это сделано, чтобы скринридер опознал изображение, но не стал озвучивать её описание (вместо этого, он бы озвучил её как «изображение», или аналогично).</p> -<p>Причина, по которой стоит использовать пустой аттрибут <code>alt</code>, вместо того, чтобы просто его не указывать в том, что большинство скринридеров объявят весь URL-адрес изображения, если не указан <code>alt</code>. В пример выше изображение используется как украшение для связанного с ним заголовка. В таких случаях и случаях, когда изображение является украшением и не имеет ценное содержание, вы должны использовать пустой аттрибут <code>alt</code>. Другой вариант — использовать aria роль role="presentation". Это также предотвратит озвучивание скринридером альтернативного текста.</p> +<p>Причина, по которой стоит использовать пустой атрибут <code>alt</code>, вместо того, чтобы просто его не указывать в том, что большинство скринридеров объявят весь URL-адрес изображения, если не указан <code>alt</code>. В пример выше изображение используется как украшение для связанного с ним заголовка. В таких случаях и случаях, когда изображение является украшением и не имеет ценное содержание, вы должны использовать пустой атрибут <code>alt</code>. Другой вариант — использовать aria роль role="presentation". Это также предотвратит озвучивание скринридером альтернативного текста.</p> <div class="note"> <p><strong>Примечание</strong>: По возможности для отображения декоративных изображений вы должны использовать CSS.</p> @@ -519,7 +519,7 @@ original_slug: Learn/Доступность/HTML <h2 id="Заключение">Заключение</h2> -<p>Теперь вы должны хорошо разбираться в написании доступного HTML для большинства случаев. Наша статья про основы WAI-ARIA также заполнит пробелы в знаниях, но эта статья посвящена основам. Далее мы рассмотрим CSS и JavaScript, и как хорошое или плохое их использование влияет на доступность. </p> +<p>Теперь вы должны хорошо разбираться в написании доступного HTML для большинства случаев. Наша статья про основы WAI-ARIA также заполнит пробелы в знаниях, но эта статья посвящена основам. Далее мы рассмотрим CSS и JavaScript, и как хорошо или плохое их использование влияет на доступность. </p> <p>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p> |