Керівництво дизайнера до основ дизайну веб-доступності

Веб повинен бути місцем, де кожен може отримати доступ до одного вмісту з будь-якої точки світу. Реагуючі методи пройшли довгий шлях пристрої-агностичні конструкції. Але про що доступність-агностичні конструкції?

Веб-доступність існує вже багато років, але її впровадження вимагає нових досягнень в області технологій і веб-розробки. Багато девелоперів хочуть допомогти, але важко зрозуміти, як розробити доступність, тому що багато рухомих частин. Це включає текст з високою контрастністю, аудіо сторінки для сліпих, оптимізовані засоби масової інформації та недоліки для веб-переглядачів, які не належать до JS / CSS.

У цій посаді я розповім про основи дизайну доступності, що це таке, що він хоче вирішити, і кроки, які можна зробити, щоб розпочати роботу. Зверніть увагу, що це надзвичайно деталізована тема, і для її повного розуміння знадобляться місяці або роки практики. Але переваги стоять зусиль, і всі ваші веб-проекти залишать кожен відвідувач тривалим враженням про доступний контент.

Вступ до доступності

Взагалі кажучи, доступність - це ідея створення змісту вона може споживатися будь-ким. Це можуть включати незрячих, які не можуть читати, і можуть включати людей з фізичними вадами, які не можуть керувати мишею або клавіатурою (або будь-яким іншим).

Але в нього також можуть входити люди незначні недоліки у видінні. Це може включати людей з дислексія або питання читання. По суті, ідея Росії “веб-доступність” включає всі можливі порушення, які можуть вплинути на те, як хтось взаємодіє або споживає веб-сайт.

Можливо, більш важливим є те, що веб-доступність може запропонувати, як описано тут у визначенні Вікіпедії:

Тим не менш, Енн Гібсон стверджує в своїй публікації List Apart, що визначення Вікіпедії занадто розпливчасте, і це не так просто про людей з обмеженими можливостями. Це дійсно кожен в Інтернеті з усього світу може не мати оптимального доступу до Інтернету.

Багато розробників вважають, що доступність для сліпих людей, які не можуть читати. Але насправді є чотири основні категорії доступності веб-сайтів:

1. Візуальний - слабкий зір або поганий / відсутність зору
2. Слуховий - порушення слуху або глухі
3. Пізнавальна - незручності або споживання інформації
4. Двигун - проблеми фізичної доступності, які можуть потребувати спеціальних пристроїв введення, таких як клавіатури або програми голосових команд

Кожна з цих категорій має широкі методики так само швидко, як веб-стандарти. Але існує відчуття стабільності, коли ці стандарти ратифіковані в WCAG (Керівництво з доступності веб-контенту).

Деякі веб-сайти, наприклад Державні установи за законом зобов'язані дотримуватися цих настанов. Вони застосовуються на міжнародному рівні через W3C.

Давайте поглянемо на бюрократію за доступністю веб-сайтів, а потім поринемо в деякі відповідні поради щодо дизайну.

Дизайн W3C та доступний дизайн

Є чимало акроніми, пов'язані з веб-доступністю. Вони можуть бути складними, якщо ви новачок у цій темі, але після спрощення я сподіваюся, що вони матимуть більше сенсу.

• W3C (Всесвітній консорціум) - Міжнародна група, що визначає веб-стандарти для протоколів, мов і правил. Усі офіційні рекомендації щодо доступності підпадають під цю організацію.
• WAI (Ініціатива доступності Інтернету) - Офіційна програма, що охоплює все про доступність. Цей парасольковий термін містить усі правила, керівні принципи та прийоми сучасного доступу.
• WCAG (Правила доступності веб-вмісту) - Група стандартів і правил, які допомагають дизайнерам оцінювати свої веб-сайти на основі рівня доступності.
• ARIA (Доступні багаті Інтернет-програми) - Спеціальний стандарт, що визначає, як створювати доступні багаті додатки, які покладаються на JavaScript / Ajax і подібні технології. Дізнайтеся більше про це в цій пості Анни Монус.

Інші рекомендації існують під парасолькою WAI, в тому числі UAAG для агентів користувачів і ATAG для інструментів створення веб-сторінок. Наразі ви повинні найбільше зацікавитися пропозиціями, зробленими WAI, та рекомендаціями, викладеними набором правил WAI під назвою WCAG.

Великим ресурсом для отримання додаткової інформації є ця посада від W3C щодо інвалідності, обмін історіями про те, як інваліди мають доступ до Інтернету. Це може бути важко зрозуміти всі складні проблеми, не кажучи вже про те, як їх вирішити. Але найкращим джерелом є люди, які щодня стикаються з цими проблемами.

Іншою важливою темою, яку слід розуміти, є відповідність WCAG. Це стосується рівень доступності веб-сайту охоплюють широкий спектр факторів. Рівні засновані на відповідності рейтингова система A, AA та AAA. Перевірте це за допомогою інструмента перевірки доступності веб-сайтів. Найкращий результат - AAA.

Щоб дізнатися більше про ці вказівки, ознайомтеся зі статтею W3C Вступ до розуміння WCAG 2.0. Також ознайомтеся з цими посиланнями для більш докладної інформації:

• Спрощено WCAG 2.0
• Розділ 508 Продуктивність WCAG

Кроки до доступного дизайну

Я настійно рекомендую відвідати веб-сайт проекту A11Y для практичних порад з доступності. A11Y (який також є нумеронімом) є безкоштовним проектом з відкритим кодом, розміщеним на GitHub, пропонування методів для веб-дизайну.

Ви можете переглядати їхні переліки елементів доступності, або навіть купу шаблонів дизайну для елементів, таких як випадаючі списки, вкладки, акордеони, кнопки та модальні вікна (серед інших елементів).

Важко вивчити всі ці речі і реалізувати їх одночасно. Візьміть його крок за кроком, і бути готовими досліджувати більше, якщо ви заплуталися.

Ознайомтеся з тим, як і як працювати A11Y, і швидкими порадами для початку роботи. Ви врізаєтеся в конкретні пропозиції, такі як посилання з переходом до вмісту та кольорові схеми з високою контрастністю. Кожен з цих методів має свій рівень деталізації, тому реалізація в основному стосується тестування, щоб побачити, що працює.

Розгляньте сліпих користувачів, які можуть використовувати автоматичний читання вмісту. Вони також можуть мати аудіотранслятор або навіть спеціальну клавіатуру для навігації по Інтернету за допомогою клавіш, а не миші. Ось чому належний семантичний HTML (подивіться на цю статтю) так важливо з такими властивостями tabindex і accesskey.

Якщо ви хочете зануритися, розгляньте можливість підібрати тему доступності. Ви можете вивчити архітектуру і налаштувати дизайн відповідно до вашого проекту.

Інструменти тестування доступності

Якщо ви хочете розпочати роботу, просто оберіть область доступності та спробуйте її. Потім ви можете використовувати інструменти тестування, щоб оцінити рівень успіху.

Варто зазначити, що цей процес може бути неприємно. Дуже багато чого потрібно розглянути, і керівні принципи WCAG так важко зрозуміти, що у вас може виникнути інформаційне перевантаження.

Важливо просто продовжувати рухатися. Виберіть одну з областей доступності та зробіть її Вашим фокусом. Потім використовуйте ці інструменти, щоб допомогти вам налаштувати і поліпшити свою роботу.

Наприклад, можна спробувати працювати зі специфікаціями контрасту WCAG покращити читабельність. Після того, як ви обираєте свої кольори, просто скористайтеся цим безкоштовним контролером контрастності, щоб побачити, чи працюють вони разом.

На жаль, інструкції WCAG 2.0 настільки заплутані, що вам може бути важко зрозуміти вимоги. Але чим більше ви спробуєте, тим більше ви дізнаєтеся, і більше ви зрозумієте.

Для тестування сайту, який вже є онлайн, перевірте WAVE. Це вільна візуальна перевірка що відображає помилки, сповіщення, проблеми з контрастом та інші особливості веб-сайту. Ви побачите візуальний перегляд і список проблем на бічній панелі.

Там ще один безкоштовний додаток на сайті Cynthia каже, що може перевірити веб-сайти для рейтингів успішності WCAG A, AA, AAA, і розділ 508 щодо дотримання урядом.

А якщо ви в відкритому коді звертаєтеся до них безкоштовні засоби тестування доступності на GitHub.

• HTML CodeSniffer
• Інструмент автоматичного тестування доступності
• Валідатор WCAG

Додатки браузера

Додатки браузера, ймовірно, забезпечують найшвидші та найпростіші методи тестування доступності. Ви можете запустити їх з будь-якого комп'ютера на будь-якому веб-сайті, щоб отримати дійсно корисні результати.

AInspector для Firefox вважається обов'язковим для доступності. Це перевіряє все, і це набагато ретельніше, ніж тестер WAVE.

Користувачам Mozilla також може сподобатися програма контролю контрастності WCAG, яка також є безкоштовним доповненням.

Користувачі Chrome не мають AInspector, але вони мають засоби для розробників спеціальних можливостей, створені офіційно Google. Це додає додаткові інструменти у вікно інспектора для перевірки керівних принципів доступності.

Користувачі Chrome також мають контролери яскравості для кольорового контрасту та деякі інші безкоштовні розширення.

На жаль, я не міг знайти багато для користувачів Safari, але я знайшов одне розширення для Opera, яке перевіряє відповідність WCAG 2.0. Якщо ви готові шукати Google досить жорстко, ви можете знайти більше інструментів.

Подальше читання

Якщо ви серйозно ставитеся до вивчення веб-доступності, тоді будьте готові до довгої дороги. Це нелегко, але це дуже задовольняє.

До теперішнього часу потрібно більше розуміти фактичне визначення веб-доступності, чому вона існує, і дрібні деталі того, що розробники повинні робити для поліпшення своїх веб-сайтів. Наступним кроком є ​​подальші дослідження та практика, щоб укласти ці принципи у ваш робочий процес.

Ознайомтеся з наведеними нижче повідомленнями для отримання додаткової інформації та переконайтеся, що звертайтеся до керівних принципів WCAG, якщо ви хочете отримати знання безпосередньо з джерела.

• Як покращити доступність таблиці HTML з розміткою
• Доступний дизайн для користувачів з обмеженими можливостями
• 6 Поради щодо покращення доступності веб-сайтів
• Переконайтеся, що ваш сайт доступний для людей з порушеннями зору