Когда я начинал работать в мире разработки программного обеспечения, я не имел представления о том, что такое доступность. Это была тема, которая казалась очень далекой от моих знаний и моей повседневной жизни, но иногда я сталкивался с чем-то, связанным с этим (Linkedin, Medium или работа).
Каждый раз, когда я задумывался об этом, смысл был один и тот же. Причина заключалась в том, что мы должны внедрить доступность, потому что какая-то часть населения имеет какой-либо вид дефицита или потому что это число растет с каждым годом.
Это не тот подход к количеству, который я хотел бы привнести. Доступность для меня означает, что приложение должно быть ✨ доступным ✨ и точка. Для слабовидящего, для пожилой бабушки, для аутиста, для дальтоника, для студента, работника и безработного. Короче говоря, для каждого. Доступность - это демократизация информации.
Доступность - это способность каждого человека, независимо от его состояния, получить доступ к чему-либо.
Я говорю так, потому что доступность на 100% связана с пользовательским опытом, знаменитым UX. Доступное приложение означает, что оно просто в использовании, прямолинейно в своих намерениях, ясно в идеях и элегантно в реализации.
В конечном счете, удобство использования и доступность - близнецы-сестры.
Если вы не думаете о доступности в своих внедрениях сегодня, начните думать об этом, потому что это определенно поднимет уровень ваших доставок.
Сделать доступный экран - это не такой уж монстр, как может показаться на первый взгляд. Давайте перечислим пункты и поговорим о них:
Это довольно объективная задача. Используйте его более корректно, например, соблюдая семантику элементов и их свойств.
Уважайте понятия, атрибуты и свойства тегов. Программы для чтения с экрана, экранные лупы и другие вспомогательные инструменты в значительной степени полагаются на HTML, чтобы направлять их.
Будьте осторожны с цветами и их контрастами. Постарайтесь определить начало и конец цветов и обеспечить достаточный контраст, чтобы они были хорошо различимы. Это гарантирует, что люди со слабым зрением или дальтоники смогут видеть правильно, и в целом облегчит жизнь всем.
Программы чтения с экрана не читают изображения, поэтому описывайте изображение с помощью атрибута "alt" тега "img".
Если изображение не является важным и просто декоративным, оставьте атрибут "alt" пустым. Таким образом, программа чтения с экрана будет знать, что изображение нужно пропустить.
Вы знаете то действительно классное видео? Не забудьте сделать так, чтобы его можно было смотреть и с субтитрами.
Субтитры очень важны.
В HTML существует иерархия текста, которой необходимо следовать. Соблюдая иерархию, вы дадите понять, что в вашем интерфейсе есть поток чтения, которому необходимо следовать.
Используйте теги заголовка, подзаголовка, абзаца и т.д. соответствующим образом.
Очень важно, чтобы вашим приложением могли пользоваться и те, кто испытывает некоторые двигательные трудности и поэтому использует клавиатуру для навигации.
Соблюдайте иерархическую структуру HTML. Соблюдайте теги HTML, чтобы можно было использовать клавиатуру для навигации по приложению.
Ссылаясь на тему "Навигация по клавиатуре", ссылки должны быть навигационными, чтобы по ним было легко перемещаться с помощью клавиши табуляции.
Кроме того, убедитесь, что ваша ссылка выглядит как ссылка (lol).
Формы эволюционировали в сторону минимализма, что хорошо... но это может быть и плохо. Не прячьте метки и границы.
Поместите метки на поля для их идентификации и используйте визуальные средства (цвета, сообщения, иконки и т.д.) для обозначения состояния формы и уведомления пользователя о требованиях, ошибках и успехах.
Шрифты могут быть сложной темой. При выборе шрифта руководствуйтесь здравым смыслом. Тяжелый и сложный шрифт только затруднит чтение.
Кроме того, обратите внимание на размер шрифта и межстрочный интервал, не нужно делать все мелким.
Идеальным является язык, понятный всем. Избегайте сложных сообщений и сложных слов. Пишите просто! Будьте понятны!
Укажите элемент, который находится в фокусе, сделайте эту информацию видимой с помощью визуальных индикаторов.
ARIA - это спецификация, контролируемая W3C. ARIA - это расширение HTML, определяющее атрибуты, свойства и состояния для помощи и улучшения работы со вспомогательными технологиями.
Эта тема чрезвычайно важна, загляните в документацию .
Ориентиры работают как опорные точки. Их использование заключается в определении важных точек в приложении, чтобы пользователю было легче до них добраться.
Чтобы использовать его, просто включите атрибут "role" в элемент.
Когда это возможно, используйте обработчики событий JavaScript, которые не зависят от устройства.
Примером может служить событие onMouseOver, которое связано с мышью (а кто не пользуется мышью?), в этом случае измените его на onFocus.
Внедряйте инновации. Быть непохожим на других. Можно быть уникальным и при этом оставаться доступным.
Использование цвета - не единственный способ передачи интерактивной информации. Используйте также визуальные индикаторы и вторичный канал коммуникации.
Не располагайте все слишком близко, используйте пробелы для обозначения границ (просто!). Не бойтесь использовать четкие интервалы.
Не у всех есть быстрый интернет.
Цель ARIA - улучшить опыт, а не постоянно исправлять проблемы доступности, вызванные плохо написанным HTML.
Отзывчивость означает обеспечение доступности веб-сайта или приложения на устройствах разного размера. Обязательно протестируйте ее!
Читатели экрана могут не знать, как правильно произнести слово. Кроме того, не все могут знать, как правильно читать эти символы, что делает текст более сложным и трудным для понимания. Существуют техники несексистского письма, которые можно использовать вместо этого.
Если ответ отрицательный, возможно, пришло время подумать о том, почему этого не происходит, и попытаться изменить этот сценарий сейчас! Если "да" - сближайтесь! Сосуществование порождает знания, сочувствие и дружбу.
Но сделайте все возможное!
Проверка доступности для разработчиков в Chrome.
Автоматический инструмент с открытым исходным кодом для улучшения производительности, качества и доступности ваших веб-приложений.
Анализ доступности вашего сайта.
Набор инструментов, который помогает авторам сделать их веб-контент более доступным для людей с ограниченными возможностями.
Бесплатная программа для чтения с экрана.
Я надеюсь, что мне удалось предоставить некоторую информацию, дать некоторое понимание и представить важную тему в хорошем свете.
Конечно, это огромная тема, и цель не в том, чтобы знать все о доступности и как ее реализовать сразу, а в том, чтобы знать, что она существует. Это важно, и это должно присутствовать в приложениях. Остальное вы узнаете постепенно.
Большое спасибо за чтение!