Ръководство на дизайнера за основите на дизайна на уеб достъпността

Мрежата трябва да бъде място, където всеки може да има достъп до едно и също съдържание от всяка точка на света. Отзивчивите техники са направили дълъг път агностични конструкции. Но какво ще кажеш агностични модели за достъпност?

Уеб достъпността съществува от години, но нейното въвеждане изисква нови подобрения в технологиите и уеб разработките. Много разработчици искат да помогнат, но е трудно да се разбере как да се проектира за достъпност, защото има толкова много движещи се части. Това включва текст с висок контраст, аудио страници за слепи, оптимизирани медии и резервни копия за браузъри, които не са JS / CSS.

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

Въведение в достъпността

Като цяло, достъпността е идеята за изграждане на съдържание, така че може да се консумира от всеки. Това може да включва незрящи хора, които не могат да четат, и може да включва хора с физически увреждания, които не могат да управляват мишка или клавиатура (или и двете).

Но може да включва и хора с незначителни недостатъци във видение. Може да включва хора с дислексия или проблеми с четенето. Всъщност, идеята за “уеб достъпност” включва всяко възможно увреждане, което може да повлияе на взаимодействието или потреблението на уебсайт.

Може би по-важно е какво предлага уеб достъпността, както е описано тук в дефиницията на Уикипедия:

И все пак, Ан Гибсън твърди в нейната публикация List Apart, че определението на Уикипедия е твърде неясно и не е така просто за хората с увреждания. Наистина е всеки в мрежата от цял свят може да няма оптимален достъп до интернет.

Много разработчици смятат, че достъпността е само за слепи хора, които не могат да четат. Но всъщност има четири основни категории достъпност в мрежата:

зрителен - ниско зрение или бедни / без поглед
слухов - с увреден слух или глух
познавателен - проблеми, които разбират или консумират информация
Мотор - физически проблеми с достъпността, които могат да изискват специални входни устройства като клавиатури или програми за гласови команди

Всяка от тези категории има обширни техники се променя точно толкова бързо, колкото и уеб стандартите. Но има стабилност с тези стандарти, ратифицирани в WCAG (Ръководство за достъпност на уеб съдържанието).

Някои уебсайтове, като правителствените институции са задължени по закон да спазват тези насоки. Те се прилагат в международен план чрез W3C.

Нека разгледаме бюрокрацията зад уеб достъпността и след това да се потопим в някои приложими съвети за проектиране.

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

Има много съкращения, свързани с уеб достъпността. Те могат да бъдат сложни, ако сте съвсем нови за темата, но след като се опростим, надявам се, че ще имат повече смисъл.

W3C (Консорциум за Световната мрежа) - Международна група, определяща уеб стандартите за протоколи, езици и правила. Всички официални насоки за достъпност попадат в тази организация.
WAI (Инициатива за достъпност в мрежата) - Официална програма, която обхваща всичко за достъпността. Този термин съдържа всички правила, насоки и техники за модерна достъпност.
WCAG (Указания за достъпност на уеб съдържанието) - Група стандарти и правила, които помагат на дизайнерите да оценят своите уебсайтове въз основа на нивото на достъпност.
ARIA (Достъпни богати интернет приложения) - Специфичен стандарт, определящ как да се изграждат достъпни богати приложения, които разчитат на JavaScript / Ajax и подобни технологии. Прочетете повече за това в този пост от Ана Монус.

Други указания съществуват под чадъра WAI, включително UAAG за потребителски агенти и ATAG за уеб инструменти за създаване. Засега трябва да се интересувате най-много от предложенията, направени от WAI, и насоките, изложени от набора от правила на WAI под името WCAG.

Голям ресурс за повече информация е този пост от W3C относно уврежданията, споделяйки истории за това как хората с увреждания имат достъп до интернет. Може да е трудно да се разберат всички сложни проблеми, да не говорим за това как да ги решим. Но най-добрият източник са хората, които се сблъскват с тези проблеми ежедневно.

Друг важен въпрос, който трябва да разберете, е съответствието на WCAG. Това се отнася до ниво на достъпност на уебсайта обхващат широк спектър от фактори. Нивата се основават на съответствие с рейтингова система от A, AA и AAA. Можете да проверите това с инструмент за проверка на уеб достъпността. Най-добрият резултат е ААА.

За да научите повече за тези насоки, разгледайте статията на W3C Въведение в разбирателството WCAG 2.0. За повече подробности разгледайте и тези свързани връзки:

Опростена версия на WCAG 2.0
Раздел 508 Изпълнение на WCAG

Стъпки за достъпен дизайн

Силно препоръчвам да посетите уебсайта на проекта A11Y за практични съвети за достъпност. A11Y (който също е номер) е безплатен проект с отворен код, хостван на GitHub, предлагане на техники за достъпен уеб дизайн.

Можете да прегледате техния списък с елементи за достъпност или дори няколко модели за проектиране за елементи като падащи менюта, табулатори, акордеони, бутони и модални прозорци (освен други елементи).

Трудно е да научите всички тези неща и да ги приложите едновременно. Вземете го стъпка по стъпка и сте готови да изследвате повече, ако се объркате.

Проверете начина на работа на A11Y и бързите съвети за започване. Ще се сблъскате с конкретни предложения, като връзки за прескачане на съдържание и цветни схеми с висок контраст. Тези техники имат свои собствени нива на детайлност, така че изпълнението е предимно за тестване, за да се види какво работи.

Помислете за слепи потребители, които могат да използват автоматичен четец на съдържание. Може да имат и преводач на звук или дори специална клавиатура за навигиране в мрежата с ключове, а не с мишката. Това е причината подходящ семантичен HTML (погледнете тази статия) е толкова важно с подобни свойства tabindex и Код за достъп.

Ако искате да се потопите в тях, помислете дали да изберете тема, която е готова за достъпност. Можете да изучавате архитектурата и да персонализирате дизайна, за да отговаря на вашия проект.

Инструменти за тестване на достъпността

Ако искате да започнете, просто изберете област на достъпност и го изпробвайте. След това можете да използвате инструментите за тестване, за да прецените нивото на успех.

Струва си да споменем, че този процес може да бъде разочароващо. Има толкова много неща, които трябва да се обмислят, и ръководствата на WCAG са толкова трудни за разбиране, че може да получите претоварване с информация.

Важното е просто да продължим да се движим. Изберете една област на достъпност и я направете фокус. След това използвайте тези инструменти, за да ви помогнат да настроите и подобрите работата си.

Например можете да опитате да работите с контрастните спецификации на WCAG подобряване на четливостта. След като изберете цветовете си, използвайте тази безплатна контрола за контрастно съотношение, за да видите дали те работят заедно.

За съжаление насоките на WCAG 2.0 са толкова объркващи, че може да имате трудности при разбирането на изискванията. Но колкото повече се опитвате, толкова повече ще научите и толкова повече ще разберете.

За тестване на сайт, който вече е онлайн, проверете WAVE. Това е безплатна визуална проверка който показва грешки, сигнали, проблеми с контраста и други особености на даден уебсайт. Ще получите визуален изглед и списък с проблеми в страничната лента.

Има още едно безплатно приложение на уебсайта на Синтия, която може проверявайте уебсайтовете за рейтингите за успех на 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 Съвети за подобряване на достъпността на уебсайта
Уверете се, че вашият сайт е достъпен за хората с увредено зрение