Часто веб-разработчики пытающиеся создать доступные сайты делают одни и те же ошибки. Несмотря на их старания, чрезмерное желание обеспечить доступность приводит к совершенно противоположным результатам.
Эти 10 советов помогут вам избежать типичные ошибки при обеспечении доступности на сайте.
1. Не используйте многословные атрибуты ALT
Разработчики часто вставляют много текста в атрибут alt в надежде на то, что это поможет устройствам для чтения с экрана. Содержание атрибута должно быть коротким и лаконичным и содержать не больше и не меньше информации, чем на изображении.
Изображения, использующиеся как элемент дизайна должны содержать пустой alt, чтобы специальные устройства игнорировали его. Такие изображения не несут никакого реального смысла и затрудняют пользователям с ограниченными возможностями работу со страницей.
2. Не используйте различные символы для разделения ссылок
Существует одно старое правило которое говорит о том, что смежные ссылки должны быть разделены текстом, т.к. у некторых очень старых браузеров возникают ошибка со смежными ссылками, при которой все ссылки ведут на одну страницу.
Это правило уже не актуально, но веб-разработчики часто вставляют между ссылками различные символы (обычно вертикальные разделители). К сожалению, такие разделители воспринимаются специальными устройствами и лишь затрудняют взаимодействие со страницей.
3. Не вставляйте текст в пустые элементы формы
Еще одно старое правило гласит, что пустые элементы формы должны содержать текст, т.к. некторые старые устройства для чтения с экрана не могли нормально обрабатывать такие элементы.
Сейчас все основные устройства нормально справляются с этой задачей, поэтому можно смело игнорировать это правило.
4. Не делайте много «горячих» клавиш
Вы можете назначить «горячую» клавишу каждой ссылке и элементу формы на странице. В теории это должно обеспечивать супердоступность для пользователей, т.к. есть доступ к любому элементу страницы.
Несмотря на это, «горячие» клавиши должны быть использованы в разумных количествах, т.к. они могут переназначить аналогичные клавиши использующиеся для некоторых функций специальных устройств, делая работу с ними непригодной. Другая проблема заключается в том, что нет единого стандарта использования «горячих» клавиш и разные сайты могут использовать разные способы. Сомневаюсь, что пользователи будут тратить время изучая ваш оригинальный подход к ним.
5. Не используйте аннотацию (summary) у таблиц, если это не добавляет реального смысла.
Аннотация содержит информацию о содержимом этой таблицы. Устройства чтения с экрана в первую очередь воспроизводят аннотацию, а потом переходят к содержимому таблицы.
Аннотация таблицы не должна быть привязана к таблице. Сайты использующие табличную разметку иногда имеют аннотации у таблиц, использующихся в качестве структуры сайта, которые кончено же не имеют никакого смысла.
Даже у нормальных таблиц аннотация нужна только в том случае, если на самой странице не хватает информации об этой таблице (что редко бывает).
6. Не забывайте о содержимом
То каким образом структурировано содержимое на сайте является важной частью в обеспечении доступности. У вас может быть великолепный код, удовлетворяющий всем стандартам, но если его содержимое плохо структурировано, это сделает трудной или невозможной реализацию определенных целей пользователей.
Вот некоторые важные факты о доступном содержимом:
- каждый параграф начинается с заключения
- содержимое разбито на несколько блоков с наглядными подзаголовками
- в соответствующих местах использованы списки
- содержимое изложено простым и понятным языком
7. Не акцентируйте слишком много внимания на руководстве по доступности на сайте
Многие веб-сайты пытаются предложить большую доступность создавая длинные и как они считают полезные страницы о доступности. Как правило, эти страницы содержат информацию об особенностях сайта, касающихся доступности, таких как размер текста и т.д.
В действительности пользователи с ограниченными возможностями редко заходят на такие страницы. Как веб-пользователи мы не склонны обращаться к руководству. Обычно, постоянно спотыкаясь, мы пытаемся самостоятельно решить наши задачи. Однако нет ничего плохого в создании отдельной страницы посвященной доступности на текущем сайте.
8. Не мучайтесь с акронимами и сокращениями
Объявить что-либо в качестве акронима или сокращения очень просто, используя теги <acronym> или <abbr>.
Однако устройства для чтения с экрана не поддерживают эти теги, таким образом в этом нет никакой пользы для пользователей, использующих эти устройства. В первую очередь это удобно обычным пользователям, которые работают с мышкой. Эта возможность может служить небольшим увеличением удобства пользования, но к сожалению не является таковой в области доступности.
9. Не изменяйте последовательность перехода между элементами если у вас нет на то веской причины
Атрибут tabindex может быть использован для изменения последовательности перехода между элементами на странице, но это редко бывает необходимо. Последовательность установленная по умолчанию, как правило, вполне логична поэтому обычно не нуждается в изменении.
10. Не забывайте протестировать страницу специальным устройством
По мере того как вы создаете доступные сайты, не забывайте тестировать их. В частности тестируйте сайты с помощью устройств для чтения с экрана, чтобы убедиться, что все работает как вы задумали.
Например если вы вставили невидимый текст используя display:none, вы обнаружите, что устройство не прочитает этот текст. Такие устройства не воспроизводят текст с этим свойством. Лучше реализуйте это изменив положение текста.




Впринципе прописные истины, но за систематизацию респект))
Хорошая статья для новичков.
1. Изображений, использующихся как элементы дизайна вообще быть не должно. как и их атрибутов alt. Всё надо делать через background в CSS.
2. Опять таки, лучше реализовать через графику в background.
6. >каждый параграф начинается с заключения
что имеется в виду?
8. Акронимы и абревиатуры должны быть обязательно, и соответствующе оформлены в CSS и должны содержать атрибут title, чтобы при наведении на абревиатуру пользователь смог узнать как она расшифровывается. Или предлагаете пользователю каждый раз лезть в Википедию?
9. Согласен, с оговоркой: если правильно, последовательно размечена форма.
6. Думаю имелось введу, что параграф должен начинаться с небольшого вступления отражающего конечную мысль, а дальше идет расшифровка.
8. Это относилось к тем разработчикам, которые пытаясь обеспечить доступность слишком много внимания уделяют этим тегам. Это не в коем случае не значит, что их не надо использовать вообще.
Сначала background-color для body пропиши, потом может быть поговорим.
moo, вы о чем?