Дмитрий Попов "Неуниверсальный дизайн"
•Als PPTX, PDF herunterladen•
0 gefällt mir•352 views
Ваш новый дизайн выглядит идеально, особенно на больших экранах. Вся информация на сайте доступна по клику мыши. А если у вашего потенциального клиента не очень большой экран? Если у него нет вообще мыши и экрана? Создали специальную версию для незрячих с крупным шрифтом, с отсутствием половины функционала и забыли о ней? Разработчики часто допускают две полярные ошибки: игнорируют вопросы accessibility или тратят средства на специальные версии для людей с нарушением зрения. Хотя правильным выбором мог бы стать универсальный дизайн. Именно о нем и расскажу. А ещё - о скрин-ридерах, стандартах WCAG, WAI-ARIA и "правильном" HTML.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Mehr von Fwdays
Mehr von Fwdays (20)
Дмитрий Попов "Неуниверсальный дизайн"
- 5. WCAG 2.0
- 6. Принципы WCAG 2.0 1.Воспринимаемо сть Управляемость2. Надежность4. Понятность3. shift
- 12. КАААК??!?!
- 15. Разработка2.
- 16. 1. Управляемость с клавиатуры: <a href="http://google.com">element 1</a> <button>element 2</button> <a class="button">element 3</a> <a class="button" tabindex="0">element 4</a> <span class="button">element 5</span> <span class="button" tabindex="0">element 6</span> <div class="button">element 7</div>
- 18. Используем стандартные элементы: <a href="">Ссылка</a> <button>Кнопка</button> <input type="button" value="Кнопка"> Как сделать элементы фокусируемыми? «Изобретаем велосипед»: <a id="1" tabindex="0">Ссылка</a> <a role="button" tabindex="0">Кнопка</a> Идем на крайние меры: <span role="button" tabindex="0">Работает как кнопка</span>
- 20. <button>Кнопка</button> <a href="">Ссылка</a> <a href="" role="button">Кнопка</a> <input value="Кнопка" type="button"> Кнопки 2. Соблюдение семантики разметки
- 22. Таблица <table border = "1"> <caption>Название таблицы</caption> <tr> <th>Ячейка заголовка 1</th> </tr> <tr> <td>Ячейка данных 1 Строка 2</td> </tr> <tr> <td>Ячейка данных 1 Строка 3</td> </tr> </table>
- 23. <h1>The article about pets</h1> <h2>Cats</h2> <p>This is the text about a cats.</p> <h2>Dogs</h2> <h3>Poodle</h3> <p>This is the text about poodle.</p> <h3>Bull terrier</h3> <p>This is the text about bull terrier.</p> 3. Заголовки
- 24. <h2>Привет друзья! Этот длинный текст показывает, как не нужно использовать заголовки, а именно — для оформления длинных текстов</h2> <h2>Иногда разработчики хотят сделать текст заметным и используют для этого теги h1, h2, h3, которые предназначены для заголовков, забывая, что размер текста нужно указывать в стилях, а заголовок должен быть заголовком.</h2> <h2>Никогда не размещайте текст статьи в тегах заголовка. Никогда!</h2>
- 25. Если кнопка или ссылка в виде изображения: <a href="about.html"><img alt="О нас" src="about.jpg"></a> Если элемент дизайна <img alt="" src="redline.jpg"> 4. Дополнительная текстовая информация
- 26. Кнопка и aria-label: <button aria-label="Закрыть" onclick="myDialog.close()">X</button> <label for="name">Ваше имя</label> <input type="text" name="name" id="name" value=""> Текстовое поле и label: Текстовое поле и aria-label (скрытая метка):<input type="text" name="name" id="name" aria-label="Ваше имя">
- 27. Отображение ошибок: <title>Ошибка: не заполнено поле "адрес"! – Интернет-магазин</title> <div role="alert">Ошибка: не заполнено поле "Адрес"!</div>
- 28. <html> <head></head> <body> <header role="banner">Logo and description</header> <nav role="navigation">Menu</nav> <aside role="search">Search form</aside> <main role="main"> <arcticle>Text of arcticle</article </main> <footer role="contentinfo">Copyright</footer> </body> </html> 5. Разметка семантических областей
- 30. Проверяем сайт валидаторами на общую валидность HTML https://validator.w3.org 1.
- 34. Проверка управляемости с клавиатуры без экранных чтецов 3.
- 35. Просмотр сайта в таком виде, как его видят незрячие 4.
- 38. Самые распространенные скринридеры: JAWS, NVDAWindows Voice OverOS X Voice OveriOS TalkbackAndroid
- 40. Reprezent.ua
Hinweis der Redaktion
- Часто разработчики интерфейсов впадают в две крайности: 1. Полностью игнорируют вопросы доступности. если их (людей с нарушением зрения, слуха, моторики) так мало, то зачем что-то делать. Пользователей интеррет-эксплорер 6 тоже мало. Но... 2. другие создают отдельные версии для слабовидящих или незрячих, которые лишины многих функций и выглядят не всегда хорошо. А иногда вообще доходит до абсурда...
- Для справки: шрифт брайля предназначен для тактильного восприятия, т.е. для чтения пальцами. Среди пользователей даже ходила шутка, что это версия сайта для 3d-принтеров. Почему так происходит? Разработчики делают это не со зла, а из-за непонимания того, что именно нужно пользователям. Дело в том, что разработчик и пользователь обычно находятся в разных условиях. Разработчик сидит перед большым экраном за компьютером с мощным железом. Тогда, как пользователь может на ходу одним пальцем пытаться, скажем, заказать пиццу.
- Сегодня поговорим, как сделать интерфейс удобным для всех. Такой интерфейс назовем универсальным дизайном.
- При разработке универсального доступного дизайна можно польностью ориентироваться на стандарт WCAG 2.0.
- Принципы WCAG 2.0: 1. Воспринимаемость: информация и компоненты пользовательского интерфейса должны быть представлены только в том виде, который могут воспринимать пользователи. 2. Управляемость: компоненты пользовательского интерфейса и навигации должны быть управляемыми. 3. Понятность: информация и операции пользовательского интерфейса должны быть понятными. 4. Надежность: контент должен быть надежным в такой степени, которая требуется для его интерпретации широким кругом различных пользовательских приложений, включая ассистивные технологии.
- люди с нарушением моторики. Что для них важно: - альтернатива мышке в виде клавиатуры; - отсутствие мелких и подвижных элементов.
- люди с нарушением моторики. Что для них важно: - альтернатива мышке в виде клавиатуры; - отсутствие мелких и подвижных элементов.
- люди с нарушением моторики. Что для них важно: - альтернатива мышке в виде клавиатуры; - отсутствие мелких и подвижных элементов.
- люди с нарушением моторики. Что для них важно: - альтернатива мышке в виде клавиатуры; - отсутствие мелких и подвижных элементов.
- Даже огромный шрифт незрячий человек не увидет. Почему так происходит? Уверен, что не все себе представляют, как при полном отсутствии зрения можно взаимодействовать с ПК или смартфоном. Работа полностью незрячих людей в интернете немного специфична. Незрячие используют специальные программы экранного доступа (скрин-ридеры), которые при помощи синтезатора речи произносят текст под курсором клавиатуры. При этом использование мышки возможно только в редких случаях, а в основном такие пользователи управляют интерфейсом с клавиатуры. Для лучшего понимания сабджекта, предлагаю посмотреть, как это происходит.
- Видел которое мы отсняли
- Понятно, что для работы скрин-ридера важен текст. Но это не означает, что вам нужно отказаться от графики и оставить только текст. На самом деле, ваш сайт может быть на сколько угодно красивым и современным. Главное, не забывать, что основа веба - это текст, а мультимедиа - дополнение к тексту, а не наоборот. Кстати, текстовая основа - это также жирный плюс в СЕО. В этом и есть суть универсального дизайна: делаем удобно одним - выигрывают все.
- Что нужно учесть при разработке: Пожелания пользователей знаем. Теперь рассмотрим технические моменты реализации универсального дизайна.
- 1. Управляемость с клавиатуры: Все элементы управления и ввода должны быть фокусируемы ? Состояние фокуса должно быть различимо * слайд - поиграем в игру - на каких элементах сфокусируется курсор клавиатуры. Сначала показываем код семи элементов:
- видео
- Как сделать элементы фокусируемыми? 1. Используем встроенные элементы <button> <input type="button>, <a href=""> и т.д. Они поумолчанию будут фокусируемые с клавиатуры. 2. Если не используем встроенные, то добавляем к элементу role="button" (для кнопок) и параметр tabindex="0". С tabindex нужно быть осторожным. Если он равен нулю, то фокус обойдет его в порядке очереди, если меньше, то он будет в приоритете, а если больше, то важно соблюдать порядок 1, 2, 3. Но очень легко запутаться, поэтому лучше не использовать tabindex, отличный от нуля. Рекомендуется также добавление ссылки для пропуска повторяющихся блоков и перехода к блоку role="main". Ссылка должна быть первым фокусируемым элементом на странице. Это ссылка, предназначенная для незрячих пользователей. После загрузки страницы фокус должен попадать на ссылку по первому нажатию TAB, затем по нажатию на ENTER страница должна якориться на элементе с основным содержимым.
- Видео https://www.whitehouse.gov/#content-start
- 2. Соблюдение семантики разметки. В частности, Кнопки рекомендуется оформлять с помощью кликабельных элементов: <button>, <a href… role="button>, <input type=”button”>.
- Разметка списков, перечислений пунктов и пр. тегами <ul>, <ol>, <li>.
- Разметка табличных данных тегами <table>, <tr>, <th>, <td>. Правильное использование заголовков таблицы. Нужно учесть, что заголовками ячейки являются все вышестоящие элементы <th> во всей таблице.
- Разметка табличных данных тегами <table>, <tr>, <th>, <td>. Правильное использование заголовков таблицы. Нужно учесть, что заголовками ячейки являются все вышестоящие элементы <th> во всей таблице.
- 3. Строгая иерархия заголовков начиная с заголовка уровня 1. h1 - загаловок контента, h2, h3... - заголовки вспомогательных блоков.
- При этом не рекомендуется использовать теги h1 - h6 для увеличения размера текста, который логически не является заголовком.
- 4. Предоставление дополнительной текстовой информации: Атрибут alt: пустой у декоративных элементов и осмысленный текст для информативных элементов. Если кнопка или ссылка в виде изображения: <a href="about.html"><img alt="О нас" src="about.jpg"></a> Если элемент дизайна: <img alt="" src="redline.jpg">
- Предоставление меток (label) для элементов ввода: с помощью <label for=”…“>, aria-label, aria-labelledby. Не должно быть элементов управления и ввода без текста или текстовой метки. Кнопка и aria-label: <button aria-label="Закрыть" onclick="myDialog.close()">X</button> Текстовое поле и aria-label (скрытая метка): <input type="text" name="name" id="name" aria-label="Ваше имя">
- В WCAG рекомендуется также создавать невидимые элементы, которые доступны только скрин-ридеру. Например, вынесение текста за край экрана, visual hiden и прочее. Я считаю такие рекомендации неоднозначными и вот почему. Пользователь может не знать, что этот текст не виден на экране и ссылаться на него. Также хочу обратить внимание на такую мелочь, как аттрибут lang. Если вы его заполняете, то заполняйте соответственно языку страницы. Т.е. если язык страницы английский - en, если украинский - ua. Разработчики часто пишут en или en приходит вместе с шаблоном из магазина ))) Даже если вы делаете сайт на купленном шаблоне или какой-то супер дорогой CMS, не забывайте почитать код, который он отдает браузеру.
- 5. Разметка семантических областей с помощью role=main, role=navigation, role=contentinfo, role=complementary, role=banner и др.
- Кажется, всё учли при разработке. Как же теперь убедиться, что наш дизайн универсален.
- 1. Проверяем сайт валидаторами на общую валидность HTML: https://validator.w3.org
- Р-ты валидации сайта
- 2.Проверка сайта специализированными валидаторами: http://wave.webaim.org http://khan.github.io/tota11y/ Нужно помнить, что наличие сообщений об ошибках валидатора само по себе не является формальным критерием несоответствия WCAG. Кроме того, некоторые сообщения носят рекомендательный характер или помечены как потенциальные. Решения по ним должны приниматься исходя из контекста. Верно и обратное: не любая проблема находится валидатором: необходимо ручное тестирование в т.ч. с применением экранных чтецов
- Р-ты валидации сайта
- 2.Проверка сайта специализированными валидаторами: http://wave.webaim.org http://khan.github.io/tota11y/ Нужно помнить, что наличие сообщений об ошибках валидатора само по себе не является формальным критерием несоответствия WCAG. Кроме того, некоторые сообщения носят рекомендательный характер или помечены как потенциальные. Решения по ним должны приниматься исходя из контекста. Верно и обратное: не любая проблема находится валидатором: необходимо ручное тестирование в т.ч. с применением экранных чтецов
- 2.Проверка сайта специализированными валидаторами: http://wave.webaim.org http://khan.github.io/tota11y/ Нужно помнить, что наличие сообщений об ошибках валидатора само по себе не является формальным критерием несоответствия WCAG. Кроме того, некоторые сообщения носят рекомендательный характер или помечены как потенциальные. Решения по ним должны приниматься исходя из контекста. Верно и обратное: не любая проблема находится валидатором: необходимо ручное тестирование в т.ч. с применением экранных чтецов
- * слайд - скрины сайта apple - сначала с графикой, а потом без.
- Проверка в экранных чтецах. Наиболее простой в настройке является комбинация Windows + NVDA. Также широко распространен JAWS (программа платная и дорогая, но поставляется в триал-версии с 40-минутным режимом). Пользователям других ОС тестовое окружение можно настроить в виртуальных машинах. Программы экранного доступа довольно специфичны для тех, кто с ними сталкивается впервые, однако к пользованию ими можно относительно быстро привыкнуть. В программе NVDA, работу которой я сегодня уже демонстрировал, есть также режим "Просмотрщик речи", выводящий в текстовом виде всё, что произносит синтезатор речи. * можно видео или статический скрин просмотрщика речи (т.е. просто текст того, что говорит скринридер). Необходимо проверить восприятие экранными чтецами таблиц, нестандартных элементов, удобство пользования функционалом страницы, правильность и полноту озвучиваемых атрибутов (в основном, role и aria-*. Проверка форм в экранных чтецах требует особого внимания. Нужно проверить корректность всех текстовых меток, ошибок и инструкций, проверить поведение формы при успешной отправке и наличии ошибок, последовательность и полноту предоставления информации в режиме заполнения формы (при переключении между полями с помощью TAB, а не в режиме чтения страницы), корректное перемещение фокуса и т.д.
- Повторюсь, скрин-ридеры - это достаточно специфический софт, поэтому, если вы все четыри шага проверки прошли, а с пятым у вас возникли трудности, я буду рад вам помочь. Добавляйтесь в фейсбук. Кроме того, много интересного скоро должно появиться на сайте accessibility.in.ua
- Повторюсь, скрин-ридеры - это достаточно специфический софт, поэтому, если вы все четыри шага проверки прошли, а с пятым у вас возникли трудности, я буду рад вам помочь. Добавляйтесь в фейсбук. Кроме того, много интересного скоро должно появиться на сайте accessibility.in.ua