Каждый разработчик должен узнавать что-то новое каждый день, по крайней мере, тех, кто хочет быть хорошим. Это может быть что-то такое же простое, как новое свойство CSS, или такое же сложное, как библиотека. Что бы это ни было, все это приветствуется, пока вы чему-то учитесь.
Пытаясь следовать этому принципу, я недавно решил сосредоточиться на теме, которая меня действительно волнует, и до сих пор у меня не было времени углубить свои знания: Доступность. Доступность (часто сокращенно a11y ) определяется как практика устранения барьеров, препятствующих доступу к веб-сайтам людей с ограниченными возможностями.
В этой статье я поделюсь с вами некоторыми советами и рекомендациями по улучшению доступности сайта. Я узнал об этом недавно, посещая связанные мероприятия (такие как InclusiveDesign24 и майская встреча Лондонских веб-стандартов ).
1. Не используйте атрибут accesskey
Несколько лет назад я обнаружил существование атрибута HTML, называемого accesskey . Он может быть связан с любым элементом HTML, и его значение устанавливается автором веб-страницы. Его цель состоит в том, чтобы предоставить пользователю способ активировать или сфокусировать определенный элемент с помощью клавиши или комбинации клавиш. Чтобы дать вам представление, давайте представим, что у нас есть следующее меню, которое использует атрибут accesskey :
<nav> <ul> <li><a href="/" accesskey="h">Home</a></li> <li><a href="/blog" accesskey="b">Blog</a></li> <li><a href="/about" accesskey="a">About</a></li> </ul> </nav>
На первый взгляд это кажется большим улучшением доступности, так как мы даем пользователям доступ к данной странице с помощью одной команды. Но это не так. Фактически, один из ключей, которые мы установили в разметке, может использоваться вспомогательным устройством пользователя (например, программой чтения с экрана) или браузером, используемым пользователем, или даже самим пользователем. Как будто этого было недостаточно, мы также не можем предсказать коллизии, потому что у каждого браузера может быть своя комбинация клавиш, чтобы использовать указанную клавишу accesskey .
Например, пользователь Chrome, который хочет получить доступ к блогу, используя значение, определенное в атрибуте accesskey должен нажать ALT + SHIFT + b . Хорошо, не правда ли? Да, это так… пока вы не обнаружите, что Chrome использует ту же комбинацию для фокусировки на панели закладок. Думаете об изменении значения? Возможно, это лучший выбор. Нет. Комбинация ALT + SHIFT + t используется в Chrome для фокусировки панели инструментов. Мы можем продолжить это обсуждение некоторое время, но я уверен, что вы поняли суть.
Использование атрибута accesskey может создать больше проблем, чем решить. Поэтому лучше избегать его использования и сосредоточиться на написании семантической разметки для наших страниц. Вспомогательная технология пользователя (AT) сделает (надеюсь) все остальное.
2. Используйте .visuallyhidden чтобы добавить контекст в ссылки
Сколько раз вы видели статью или страницу с якорным текстом типа «читать дальше» или «продолжить чтение». Я часто их вижу (приветствует WordPress, Joomla и т. Д.), И я уверен, что это я делал много раз сам. Я узнал, что этого недостаточно для пользователя AT.
Одной из особенностей AT является отображение списка ссылок, содержащихся на странице. Поэтому, если на странице есть ссылки с якорным текстом, подобным описанным выше, когда пользователь использует эту функцию, все, что он / она получает от своего АТ, представляет собой список бессмысленных «Продолжить чтение», «Читать дальше» и тому подобное.
Как мы можем решить эту проблему? Чтобы создать волшебное зелье, чтобы исправить это, нам нужно немного HTML и CSS. В частности, нам нужен класс, который реализует метод визуального скрытия элемента. Код CSS, который реализует такую технику, взятый из исходного кода HTML5 , показан ниже:
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
С помощью этого класса в нашем CSS мы можем изменить разметку следующим образом:
<a href="path/to/somewhere/over/the/rainbow">Click here</a>
в
<a href="path/to/somewhere/over/the/rainbow">Click here <span class="visuallyhidden">to go far away from Kansas</span></a>
С этим простым изменением люди, которые не используют AT, будут продолжать видеть ссылки, как они были раньше. С другой стороны, пользователи AT (особенно те, которые используют программу чтения с экрана) будут иметь список программного обеспечения (или чтение) «Нажмите здесь, чтобы уйти далеко от Канзаса». Это даст им гораздо больше информации о ссылке.
3. Используйте атрибут tabindex
При разработке веб-сайта может быть несколько элементов, указывающих на один и тот же URL. Давайте возьмем в качестве примера домашнюю страницу интернет-магазина по продаже книг, где у нас есть список из нескольких книг. Для каждого из них у нас есть название, обложка, описание с остатком от названия книги и призыв к действию (обычно кнопка «Купить сейчас»). Обычно каждый из этих элементов ссылается на страницу книги в магазине.
Для пользователя, который использует клавишу TAB для навигации по веб-страницам, как это имеет место для многих людей с ограниченными возможностями, эта ситуация может быть очень неприятной. Фактически, для каждой из книг на домашней странице пользователю необходимо четыре раза перейти к следующей книге. А что если покупатель заинтересован в десятой книге? Наш дорогой клиент должен нажать клавишу табуляции 37 раз! Этот расчет также предполагает, что нет других ссылок перед списком. Вы можете видеть, почему это будет раздражать.
Чтобы решить эту проблему, мы можем использовать атрибут tabindex . Когда значение этого атрибута установлено в -1 , элемент удаляется из потока навигации по умолчанию. Это означает, что элемент не может быть сфокусирован с помощью клавиши табуляции, но он может быть сфокусирован программно.
Итак, допустим, у нас есть разметка, подобная следующей:
<article> <a href="/book-page"><h2>jQuery in Action, Third Edition</h2></a> <a href="/book-page"><img src="book-cover.jpg" alt="" /></a> <p> <a href="/book-page">jQuery in Action, Third Edition</a> is a fast-paced complete guide to jQuery. <a href="/book-page">Buy now!</a> </p> </article>
Мы можем улучшить tabindex пользователями клавиш Tab, используя атрибут tabindex , как показано ниже:
<article> <a href="/book-page" tabindex="-1"><h2>jQuery in Action, Third Edition</h2></a> <a href="/book-page" tabindex="-1"><img src="book-cover.jpg" alt="" /></a> <p> <a href="/book-page" tabindex="-1">jQuery in Action, Third Edition</a> is a fast-paced complete guide to jQuery. <a href="/book-page">Buy now <span class="visuallyhidden">jQuery in Action, Third Edition</span>!</a> </p> </article>
В приведенном выше коде мы установили атрибут tabindex для всех ссылок, кроме ссылки «Купить сейчас». При этом пользователи AT будут фокусировать ссылку только один раз для каждой книги, тогда как пользователи, не являющиеся пользователями AT, по-прежнему смогут попасть на страницу книги, щелкнув любую из ссылок.
Кроме того, пользователи AT по-прежнему могут переходить непосредственно к интересующему разделу, поскольку заголовок остается доступным с помощью клавиши табуляции для навигации по заголовкам ( <h1> — <h6> ). О, и вы заметили, что мы также улучшили текст ссылки, используя технику, описанную в предыдущем пункте?
4. Доступность не означает, что JavaScript отключен
Я не знаю, откуда взялась эта информация или когда она возникла, но многие думают, что у людей, использующих AT, отключен JavaScript. Я тоже знал это утверждение и какое-то время думал, что это правда. Из-за этого предположения для многих разработчиков создание веб-сайта, доступного для доступа, эквивалентно разработке для людей, у которых отключен JavaScript. Оказалось, что это ложный миф, как показывает эта статистика WebAIM, детализирующая количество людей с включенным и отключенным JavaScript.
Графическое представление тех же статистических данных показано ниже:
5. Тест как пользователь AT
Это может быть удивительно, но, честно говоря, это лучший урок, которым я могу поделиться с вами. Независимо от того, сколько уловок или приемов вы можете освоить, нет ничего лучше, чем использовать AT для проверки доступности вашего проекта. Притворись пользователем программы чтения с экрана, пользователем вкладок, слепым пользователем, пользователем без руки и попробуй перемещаться по своему собственному сайту. Всего за несколько секунд вы узнаете, как веб может разочаровать человека с ограниченными возможностями, и насколько сильна потребность в более доступной сети.
Если вам нужно несколько советов по использованию программы для чтения с экрана, чтобы начать тестирование своего сайта, вы можете попробовать NVDA (NonVisual Desktop Access) или JAWS в Windows или VoiceOver в OS X.
Вывод
В этой статье я обсудил некоторые концепции и методы, которые я изучил за последние несколько месяцев. Надеюсь, вам понравились эти советы и вы нашли их информативными. Еще более важно, я надеюсь, что эта статья немного открыла вам разум, чтобы вы могли по-другому взглянуть на ваш следующий проект.
Теперь твоя очередь. Знаете ли вы какие-либо или все методы, которыми я поделился в этой статье? Есть ли у вас какие-либо собственные советы по доступности? Вы пробовали программу для чтения с экрана? Поделитесь своими мыслями в обсуждении ниже.