Итак, доступность. Больше половины ответило, что не слышали о таком термине и давайте я вам наглядно расскажу зачем его нужно знать.
Ребята в комментариях уже скинули офигенный доклад Макеева, который и я вам хотел показать 🙂 Он тут: https://youtu.be/KAK-WAb9vow
❗️ Абсолютно всем советую посмотреть, но тем, кто не слышал об этом термине, нужно сначала подготовиться к этому ролику. Это нужно для понимания сути доклада.
Давайте на секунду вспомним, что большинство из нас счастливые обладатели двух рук, глаз, всех пальцев, слуха и остальных правильно работающих органов. Но не все. Поверьте, за все годы работы в больнице, особенно в травматологии, я видел много людей, которые в чем-то ограничены. Но каждому из нас хочется пользоваться благами цивилизации, заказывать вещи в интернете, смотреть ролики на ютубе, пользоваться картами и тд. И вы, как разработчики, можете сделать интернет немного добрее и доступнее для людей с ограниченными возможностями.
Давайте сразу наглядный пример. Откройте один из ваших любимых сайтов, либо ресурс, который вы разработали. Уберите руку с мышки или тачпада. Сможете ли вы совершить все необходимые действия только при помощи клавиатуры? Для справки, вы можете переходить между интерактивными элементами при помощи клавиши Tab вперед и Shift+Tab назад. Активировать их через Enter или Пробел и использовать стрелки.
Ну как, все получилось? Все активные элементы видны и работают? Кнопки нажимаются? У некоторых людей просто нет возможности использовать мышку, они могут нажимать лишь несколько кнопок и тоже хотят воспользоваться вашим ресурсом. Или вдруг у вас сломалась мышка и вы хотите заказать себе новую в интернет магазине 🤷♂️
Теперь другая ситуация. Люди с проблемами зрения.
Дальтонизм - это еще самый простой вариант, но при этом, кстати, очень распространенный. 8% мужчин и 0,5% женщин по гуглу. Поэтому ваше сообщение «НАЖМИТЕ НА КРАСНУЮ КНОПКУ» может ввести в недоумение. Обязательно подписывайте элементы и не рассчитывайте полностью на цвет.
Для людей, которые совсем не видят ваш сайт, есть специальные программы, которые называются screenreader’ы (в народе - читалки). Они буквально зачитывают содержимое вашего сайта и от того, насколько правильным будет его построение, будет зависеть и производительность читалки. В ролике очень много таких примеров.
На что нужно обращать внимание и что использовать для создание доступности:
1. Семантика. Про семантику я кидал доклад выше в канале, тоже советую.
Правильно используйте тэги, разделяйте страницу логически правильно, используйте нужные заголовки, прописывайте alt атрибуты. Причем последние не просто от балды, а именно содержимое картинки. Ведь читалка озвучит именно его
2. Используйте встроенные элементы в html. Различного рода input’ы, кнопки, ссылки. На заре канала я костил такие плюшки 😅
3. Следите за фокусом элементов и свойством outline. Чтобы можно было адекватно использовать только клавиатуру. Сюда же входит и ручная установка фокуса, например, когда вы через скрипт открываете модальное окно с формой
4. В дополнение к предыдущему, следите за тем, чтобы любые окна, выпадали, раскрывали можно было бы закрыть с клавиатуры. Часто бывает, что привязывают только к действиям мыши
5. Пользуйтесь атрибутом tabindex для создания ручного фокуса там, где его не бывает
6. Используйте свойства и состояния aria
http://prgssr.ru/development/ispolzovanie-aria-v-html5.html
https://developer.mozilla.org/ru/docs/Web/Accessibility/ARIA
Это дополнительные атрибуты, которые позволяют указывать что за элемент и в чем его роль
7. И не важно, что вы разрабатываете, обычный сайт или суперсложное SPA - правила в браузере везде одинаковы.
Спросите меня, как часто разработчики следуют всему этому? Даже семантику применяют не все 😁 Не говоря уже об остальном. Часто это связано со сроками и спешкой, иногда с квалификацией разработчиков или ленью. Но в больших, качественных и дорогих продуктах это все должно соблюдаться на всех уровнях: от прототипа и дизайна, до тестирования.
Ребята в комментариях уже скинули офигенный доклад Макеева, который и я вам хотел показать 🙂 Он тут: https://youtu.be/KAK-WAb9vow
❗️ Абсолютно всем советую посмотреть, но тем, кто не слышал об этом термине, нужно сначала подготовиться к этому ролику. Это нужно для понимания сути доклада.
Давайте на секунду вспомним, что большинство из нас счастливые обладатели двух рук, глаз, всех пальцев, слуха и остальных правильно работающих органов. Но не все. Поверьте, за все годы работы в больнице, особенно в травматологии, я видел много людей, которые в чем-то ограничены. Но каждому из нас хочется пользоваться благами цивилизации, заказывать вещи в интернете, смотреть ролики на ютубе, пользоваться картами и тд. И вы, как разработчики, можете сделать интернет немного добрее и доступнее для людей с ограниченными возможностями.
Давайте сразу наглядный пример. Откройте один из ваших любимых сайтов, либо ресурс, который вы разработали. Уберите руку с мышки или тачпада. Сможете ли вы совершить все необходимые действия только при помощи клавиатуры? Для справки, вы можете переходить между интерактивными элементами при помощи клавиши Tab вперед и Shift+Tab назад. Активировать их через Enter или Пробел и использовать стрелки.
Ну как, все получилось? Все активные элементы видны и работают? Кнопки нажимаются? У некоторых людей просто нет возможности использовать мышку, они могут нажимать лишь несколько кнопок и тоже хотят воспользоваться вашим ресурсом. Или вдруг у вас сломалась мышка и вы хотите заказать себе новую в интернет магазине 🤷♂️
Теперь другая ситуация. Люди с проблемами зрения.
Дальтонизм - это еще самый простой вариант, но при этом, кстати, очень распространенный. 8% мужчин и 0,5% женщин по гуглу. Поэтому ваше сообщение «НАЖМИТЕ НА КРАСНУЮ КНОПКУ» может ввести в недоумение. Обязательно подписывайте элементы и не рассчитывайте полностью на цвет.
Для людей, которые совсем не видят ваш сайт, есть специальные программы, которые называются screenreader’ы (в народе - читалки). Они буквально зачитывают содержимое вашего сайта и от того, насколько правильным будет его построение, будет зависеть и производительность читалки. В ролике очень много таких примеров.
На что нужно обращать внимание и что использовать для создание доступности:
1. Семантика. Про семантику я кидал доклад выше в канале, тоже советую.
Правильно используйте тэги, разделяйте страницу логически правильно, используйте нужные заголовки, прописывайте alt атрибуты. Причем последние не просто от балды, а именно содержимое картинки. Ведь читалка озвучит именно его
2. Используйте встроенные элементы в html. Различного рода input’ы, кнопки, ссылки. На заре канала я костил такие плюшки 😅
3. Следите за фокусом элементов и свойством outline. Чтобы можно было адекватно использовать только клавиатуру. Сюда же входит и ручная установка фокуса, например, когда вы через скрипт открываете модальное окно с формой
4. В дополнение к предыдущему, следите за тем, чтобы любые окна, выпадали, раскрывали можно было бы закрыть с клавиатуры. Часто бывает, что привязывают только к действиям мыши
5. Пользуйтесь атрибутом tabindex для создания ручного фокуса там, где его не бывает
6. Используйте свойства и состояния aria
http://prgssr.ru/development/ispolzovanie-aria-v-html5.html
https://developer.mozilla.org/ru/docs/Web/Accessibility/ARIA
Это дополнительные атрибуты, которые позволяют указывать что за элемент и в чем его роль
7. И не важно, что вы разрабатываете, обычный сайт или суперсложное SPA - правила в браузере везде одинаковы.
Спросите меня, как часто разработчики следуют всему этому? Даже семантику применяют не все 😁 Не говоря уже об остальном. Часто это связано со сроками и спешкой, иногда с квалификацией разработчиков или ленью. Но в больших, качественных и дорогих продуктах это все должно соблюдаться на всех уровнях: от прототипа и дизайна, до тестирования.