Некоторые приемы обеспечения доступности, о которых всегда следует помнить при создании веб-сайтов.
Специальные возможности
Доступность, также известная как A11y, позволяет всем использовать веб-сайты. Да всем, а не только инвалидам. Например, человеку, использующему свое мобильное устройство на солнце, также понадобится доступный веб-сайт, как и тому, чьи способности меняются из-за старения. Доступность позволяет нам создавать инклюзивную сеть, которая работает для всех. Без дальнейших церемоний, давайте обсудим некоторые методы обеспечения доступности, которые мы всегда должны помнить при создании веб-сайтов, которые будут работать для всех.
Цветовой контраст
Важен достаточный цветовой контраст между текстом и фоном. Хорошее соотношение контраста цвета текста и фона позволяет легко читать содержимое веб-страницы. Людям с плохим зрением, дальтонизмом и другими дефектами зрения будет трудно отличить текст от фона веб-страницы с плохим цветовым контрастом. Чтобы обеспечить хороший контраст, вы должны следовать рекомендациям WCAG AA, в которых указывается минимальный коэффициент контрастности 3:1 для крупного текста и 4,5:1 для мелкого текста.
Ссылки
Ссылки не должны быть пустыми, так как это затрудняет их понимание программами чтения с экрана. Когда программа чтения с экрана переходит по этой ссылке, она ничего не говорит. Например, если у вас есть ссылка или кнопка со значком шрифта, но без текста, вы можете исправить ссылку или кнопку, добавив скрытый диапазон, указывающий, что это такое, изменив значок на SVG с заголовком или изменив значок к изображению с замещающим текстом.
❌
<a href="#">
<i class="fa fa-search"></i>
</a>✅
<!-- visually hidden --> <a href="#"> <span class="hidden_span">search for recipes</span> <i class="fa fa-search"></i> </a><!-- SVG with title --> <a href="#"> <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 490 490" style="enable-background:new 0 0 490 490;" xml:space="preserve"> <title>Search for recipes</title> <path d="M437.588,202.053C437.588,90.634,344.307,0,229.643,0S21.683,90.634,21.683,202.053s93.296,202.068,207.96,202.068 c43.421,0,83.744-13.04,117.128-35.243L456.982,490l11.335-10.318L359.242,359.809C406.918,322.749,437.588,265.857,437.588,202.053 z M229.643,388.809c-106.23,0-192.647-83.785-192.647-186.756S123.412,15.313,229.643,15.313c106.216,0,192.633,83.77,192.633,186.741S335.858,388.809,229.643,388.809z"/><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g><g></g> </svg> </a><!-- Image with alt --> <button> <img src="search.svg" alt="Search for recipes"> </button>
Ярлыки
Метка — важная часть формы, она облегчает чтение с экрана. Многие люди думают, что заполнитель может заменить метку, нет, заполнитель предназначен только для предоставления примерных данных для ввода. Вот несколько способов маркировки вашего ввода:
❌
<!--- no label --->
<input id="name" name="name" type="text" />✅
<label for="name">Name</label>
<input id="name" name="name" type="text" />✅
<label>
Name:
<input name="name" type="text" />
</label>✅
<!-- visually hidden label -->
<label for="name" class="hidden_label">Name</label>
<input id="name" name="name" type="text" />Состояние фокусировки
Состояние «Фокус» показывает элемент, находящийся в данный момент в фокусе, и это требование для того, чтобы сайт считался доступным в соответствии с Руководством по доступности веб-контента (WCAG). Однако большинство разработчиков в тот или иной момент использовали :focus{outline:none} для удаления фокуса с элемента, что является плохой практикой доступности. Чтобы соответствовать требованиям специальных возможностей, мы можем заменить контур по умолчанию нашим собственным индикатором фокуса, например, добавив стиль границы в фокусе.
❌
:focus{
outline:none;
}✅
:focus{
outline: none;
border: 2px solid black;
}Замещающий текст
Согласно рекомендациям WCAG, весь нетекстовый контент, представляемый пользователю, должен иметь текстовую альтернативу, которая служит той же цели. Альтернативный текст — это невидимый текст, описывающий изображение, он делает изображения на веб-сайте доступными для людей с нарушениями зрения, использующих программу чтения с экрана, и пользователей, которые не могут загрузить изображение из-за медленного интернета или пользовательских настроек. Изображения без замещающего текста считываются программой чтения с экрана только как «изображение», поэтому замещающий текст должен быть точным и кратким в описании изображения.
❌
<img src="cat.png" alt="A cat" />✅
<img src="cat.png" alt="A brown cat laying on a rug" />Заголовки
Заголовки — это способ структурирования веб-контента, они не просто отображают текст в зависимости от размера, они также важны для доступности. Они позволяют пользователям программ чтения с экрана и других вспомогательных технологий переходить от заголовка к заголовку. Веб-страница должна содержать только один тег h1, не используйте заголовки там, где они не нужны, например, чтобы подчеркнуть или выделить текст, вместо этого используйте классы CSS и не пропускайте заголовки, например, от <h2> до <h4›.
Неоднозначные ссылки
Текст ссылки, такой как «читать дальше», «щелкнуть здесь», «больше» и т. д., может быть двусмысленным, если программа чтения с экрана читает его вне контекста. Вы можете исправить это, используя более информативный текст.
❌
<a src="files.html">Click here</a> to view all files.✅
<a src="files.html">View all files</a>