Статьи

Практические советы по доступности с WCAG 2.0

Дерек Фезерстоун недавно написал в блоге статью « Когда подходящее время для доступности? », В которой он рассматривает, когда целесообразно инвестировать в доступность. Лучше ли выпустить свой продукт и добавить доступность позже или встроенную доступность с самого начала?

Что касается создания веб-сайтов, я с Джеймсом Эдвардсом, когда он говорит, что наша работа как веб-разработчиков и дизайнеров — обеспечить доступность контента :

Мы должны приложить усилия для создания доступного контента, потому что это часть нашей работы. И, честно говоря, это не займет много усилий; это не сложно.

Я должен признать, что для меня доступность часто казалась минным полем, где каждое, казалось бы, незначительное решение может привести к катастрофе доступности. Я искал центральный ресурс, который покажет мне практические примеры правильной разметки, чтобы я мог избежать ошибок доступности, которые будет трудно исправить в будущем. Я думаю, что документ « Методы для WCAG 2.0 » является отличной отправной точкой.

Обычно документы W3C утомительны, технически и трудны для понимания — поверьте мне, я много болтал, когда редактировал Ссылку на SitePoint CSS . Но «Техника для WCAG 2.0» совсем не похожа на это; это написано для веб-разработчиков и дизайнеров — вместо производителей браузеров — что делает его очень доступным (ха-ха).

В качестве краткого примера представленных методов, вот несколько советов по построению форм. Вы сразу заметите, что методы часто кажутся базовым здравым смыслом, но это часто имеет место с доступностью.

Используйте стандартные элементы формы HTML

Как описано в H91: Использование элементов управления HTML-форм и ссылок , рекомендуется использовать стандартные элементы управления HTML-форм и ссылок. Стандартные элементы формы имеют установленные сочетания клавиш, предоставляемые пользовательскими агентами, а программное обеспечение вспомогательных технологий использует соответствующие API-интерфейсы специальных возможностей, встроенные в каждую операционную систему. Да, это может быть так просто.

Всегда используйте явные метки

H44: Использование элементов метки для связывания текстовых меток с элементами управления формой рекомендует всегда иметь элемент метки с соответствующим значением атрибута для всех полей формы:

 <label for="fname">First Name:</label> <input type="text" name="fname" id="fname" value=""/> 

Также рекомендуется избегать неявных меток, таких как следующие, из-за проблем совместимости с некоторыми программами чтения с экрана:

 <label>First Name: <input type="text" name="fname" id="fname" value=""/></label> 

Используйте атрибут tabindex

H4: Создание логического порядка табуляции с помощью ссылок, элементов управления формы и объектов подчеркивает важность атрибута tabindex . Добавление атрибута ко всем элементам формы для создания логического порядка табуляции обеспечивает эффективную навигацию клавиатуры по форме:

 <label for="fname">First Name:</label> <input type="text" name="fname" id="fname" value="" tabindex="1"/> 

Указание обязательных полей

H90: Указание необходимых элементов управления формой — мой любимый из немногих, которые я упомянул здесь, и пример практической помощи, которую вы найдете в руководствах. В нем описаны три простых доступных способа указать, что поле является обязательным.

Используйте слово, требуемое в метке поля:

 <label for="fname">First Name (required):</label> <input type="text" name="fname" id="fname" value="" tabindex="1"/> 

Если вы используете звездочку для обозначения обязательных полей (как это делают многие сайты), попробуйте использовать элемент abbr для добавления столь необходимой информации:

 <label for="fname">First Name <abbr title="required">*</abbr>:</label> <input type="text" name="fname" id="fname" value="" tabindex="1"/> 

Если вы используете значок, обязательно используйте атрибут alt :

 <label for="fname">First Name <img src="required.png" alt="Required field"/>:</label> <input type="text" name="fname" id="fname" value="" tabindex="1"/> 

На странице «Методы WCAG 2.0» есть еще много советов, достаточных для прочного знакомства с искусством доступности. Когда вы читаете их, вы понимаете, что доступность — это больше о том, как сделать ваш контент доступным для всех — независимо от агента пользователя, устройства или обстоятельств — а не только для различных программ чтения с экрана. В любом случае, это то, чем занимается Интернет.