От человека с нарушением зрения
Кодирование - это уникальное направление работы, если посмотреть на его возможности для включения.
Он не только может помочь сделать цифровой мир и все наше постоянно расширяющееся взаимодействие с ним более доступным и приятным для людей с ограниченными возможностями, но также дает людям с различными формами инвалидности средства работы и независимости. В вашем собственном кодировании есть хорошие практики, которые вы можете использовать, опираясь на эти сильные стороны кодирования, делая ваш код более подходящим для пользователей, взаимодействующих с вашим приложением / веб-сайтом / и т. Д. а также позволяет программистам с ограниченными возможностями более легко читать и работать с вашим кодом.
Существует множество ресурсов и рекомендаций, которые помогут сделать ваш код более доступным с обеих сторон, и я свяжусь с некоторыми из них позже. Но пока я сосредоточусь на нескольких простых советах, о которых вы, возможно, даже не задумывались. Как человек с ограниченными возможностями по зрению, но еще не использующий программу чтения с экрана, мне не хватает осведомленности и практики программирования для обеспечения доступности. Так что не волнуйтесь, если вы впервые думаете об этом! Есть мелочи, которые могут иметь большое значение.
Изображений
Если изображение содержит важную информацию, всегда помещайте описание изображения в его атрибут alt. Если изображение является просто фоном или декоративным изображением, вы можете оставить его пустым. Вы также можете оставить это поле пустым, если соответствующее описание можно найти где-нибудь в другом месте.
img src="cute-puppy-swimming.jpg" alt=""
Никогда не удаляйте атрибут alt, так как некоторые программы чтения с экрана будут читать вслух все имя файла, что во многих случаях не является ни приятным, ни информативным.
2020-04-2916-4704-1680x1116.jpg
HTML
Одна из наиболее распространенных тем для HTML и доступности - важность семантического HTML. Это означает максимально возможное использование правильных элементов HTML по их прямому назначению. Например, вы можете написать кнопку для воспроизведения видео как такового:
<div>Play video</div>Но лучший способ написать это:
<button>Play video</button>К кнопке HTML применяется не только стиль по умолчанию, но и встроенная клавиатура. Это означает, что пользователи могут перемещаться между кнопками с помощью клавиши TAB и отправлять свои данные с помощью ENTER или RETURN.
Читатели экрана
Одно из самых полезных средств для пользователя, имеющего программу чтения с экрана, - это четкая структура контента с соответствующими элементами и организацией.
Написание HTML-кода как такового позволяет пользователям программ чтения с экрана:
- Прочтите каждый заголовок по мере продвижения по содержанию, уведомляя вас, что такое заголовок, что такое абзац и т. Д.
- Останавливайтесь после каждого элемента, позволяя вам двигаться в любом удобном для вас темпе.
- Переход к следующему / предыдущему заголовку во многих программах чтения с экрана.
- Вы также можете вызвать список всех заголовков во многих программах чтения с экрана, что позволит вам использовать их как удобное оглавление для поиска определенного контента.
Язык и размер шрифта
Часто упускается из виду, что установка языка в атрибуте lang элемента HTML может позволить программам чтения с экрана узнать, какой голосовой профиль использовать при обратном чтении содержимого.
<!DOCTYPE html> <!-- Tell the browser this is a HTML5 document -->
<html lang="en"> <!-- This document's language is set to English -->Никогда не устанавливайте абсолютный font-size для корневого элемента HTML. Это лишит пользователя возможности изменять размер шрифта в настройках своего браузера, что может помешать им получить доступ к вашему контенту.
Недоступно:
html {
font-size: 21px;
}Доступно:
html { font-size: 100%; }html { font-size: 1em; }
Формы
Одно из наиболее распространенных взаимодействий с любым приложением, веб-сайтом или программным обеспечением - вы называете это - форма. Мелкие детали в создании форм могут иметь большое значение, чтобы сделать их более доступными.
При создании формы всегда используйте метку (а не только заполнитель) и сделайте так, чтобы метка имела четкую связь с соответствующим входом. Либо привяжите метку явно к входу, либо оберните вход соответствующей меткой.
Не используйте только цвет для передачи информации
Хотя цвет полезен, он не должен быть единственным способом передачи информации. При использовании цвета для различения элементов также обеспечьте дополнительную идентификацию. Например, используйте звездочку в дополнение к цвету, чтобы указать обязательные поля формы, и используйте метки, чтобы различать области на графиках.
Убедитесь, что интерактивные элементы легко идентифицируются
Используйте разные стили для интерактивных элементов, таких как ссылки и кнопки, чтобы их было легко идентифицировать. Например, измените внешний вид ссылок при наведении курсора мыши, фокусе клавиатуры и активации сенсорного экрана. Кроме того, убедитесь, что стили и наименования интерактивных элементов используются единообразно на всем веб-сайте.
Помогите пользователям избежать и исправить ошибки
Когда пользователь заполняет форму, предоставьте ему четкие инструкции, сообщения об ошибках и уведомления. Помогите пользователям найти причину проблемы, дайте конкретные и понятные объяснения и предложите исправления. Будьте максимально снисходительны к формату при обработке пользовательского ввода. Например, примите телефонные номера, содержащие пробелы, и при необходимости удалите пробелы.
Надеюсь, эти советы покажут, как простые дополнения и детали в вашем коде могут сделать работу других проще и плодотворнее, когда они вступят в контакт с кодом, который вы написали.
Вот некоторые отличные ресурсы для дальнейшего чтения и изучения:
