В обобщение, атрибутът ARIA:

• Дава или подобрява семантиката на несемантични или семантични елементи,

• Гарантира, че динамичното (живо) съдържание остава достъпно.

• Предоставя ролята за описване на типа на дефинираната „джаджа“ (меню, елемент на дърво, плъзгач, измервателен уред и др.)

• Предоставя ролята за описване на структурата на уеб страницата (заглавия, региони и таблици).

• Осигурява статуса на джаджи (маркиран, има изскачащи прозорци и т.н.).

• Предоставя свойства за плъзгане и пускане, които описват източници на плъзгане и пускане на цели.

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

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

Да предположим, че проектирате потребителски падащ елемент за избор. Ето параметрите, които трябва да се вземат предвид при проектирането на елемента:

• Маркирайте различни състояния: разрешено, деактивирано, само за четене.

• Маркирайте елемента, когато получи статус на фокус / стъпка.

• Проверете всеки елемент от опцията, когато получите състояние на фокус / стъпка.

• Уверете се, че съдържанието все още може да се чете, когато само текстът е увеличен до ниво от 200%

• Уверете се, че има достатъчен контраст между текста и неговия фон. Това помага на хората с умерено слабо зрение или тези, които използват устройства при екстремни условия на осветление, например на пряка слънчева светлина или на екран с ниска яркост, да четат съдържание.

Друг пример може да бъде изборът на цвят за описание на състояние. Ето точките, които трябва да се вземат предвид при проектирането на раздел, в който потребителят ще може да вземе цвят:

• Има хора, които изпитват трудности при различаването на определени цветове. Така че зеленото не означава зелено за всички ваши посетители. За да коригирате това, добавете описание за всеки цвят, което подробно описва целта на цвета.

• Маркирайте всеки елемент, когато получите статус на фокус / стъпка.

• Уверете се, че има достатъчно място между елементите, така че всеки да може лесно да се активира, например на устройства с по-малък зрител.

3. Тестване на достъпността: откъде да започна?

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

Определение на проблемите

Докато работите по проблеми с достъпността, винаги се опитвайте да създавате един билет за проблем с ясно заглавие. Това трябва да опрости разбирането на проблема и да помогне за определянето на приоритет.

Лош пример: Потребителят не може да използва клавиатура на страницата.

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

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

Добрият пример е насочен точно към проблема и се фокусира само върху едно: навигация с клавиатура в главното меню.

Приоритизирайте проблемите с уеб достъпността

Приоритетите са важни, защото те определят кои проблеми трябва да бъдат решени първо. Например WCAG са разделени на три нива на съответствие : A, AA, AAA, което означава, че трябва да започнете от минимално ниво A, но това не означава автоматично, че нивата AA и AAA са изключително „приятни за притежание“. Всички нива са важни и е важно да не се дава приоритет, като се приеме, че ниво А е достатъчно.

Въпреки това, нивата на WCAG (или всяко друго ръководство) понякога могат да бъдат доста трудни за разбиране и да опростите малко, можете също така да вземете предвид следните приоритетни дефиниции:

• Критично - Проблеми, които пречат на потребителите да използват приложение. Няма налични решения.

• По-висок - Проблеми, които възпрепятстват и / или дезориентират използването на приложение, но не блокират възможността на потребителя да завърши операцията.

• По-малко - Проблеми, които са досадни, но не възпрепятстват използването или подобренията, които могат да бъдат направени в приложението.

• Информация - Не се придържа към най-добрите практики. Общи препоръки за подобрения.

Решения

Нито една от насоките - имам предвид това WCAG , Раздел 508 или ИМА —Това ще ви даде директно решение по отношение на техническия код, за да знаете как трябва да бъде решен конкретен проблем. Те само определят очакваното поведение. Въпреки това, WCAG също е дефинирал процедури за тестване, които помагат да се разбере как да се възпроизведе проблемът и има група на общността за автоматизирано наблюдение на WCAG, общност на W3C с фокус върху развитието правила надежден, за тестове за достъпност в мрежата, както автоматизирани, така и полуавтоматизирани.

Пример за техниката WCAG G4 („Позволете на съдържанието да спира и рестартира от мястото, където е спряло“):

Процедура за изпитване

На страница с превъртане или мобилно съдържание,

1. Използвайте механизма, предоставен на уеб страницата или от потребителския агент, за да поставите на пауза съдържанието, докато се движите или превъртате.
2. Проверете дали движението или превъртането е спряло и не се рестартира от само себе си.
3. Използвайте предоставения механизъм, за да рестартирате съдържание в движение.
4. Проверява дали движението или превъртането е възобновено от мястото, където е било спряно.

Очаквани резултати

No2 и No4 са верни.

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

Указания за уеб достъпност и стандарти W3C

Следването на основните уеб стандарти трябва да бъде вашата отправна точка:

• Най-често срещаният е Указания за достъпност за уеб съдържание известен като WCAG. WCAG 2.0 е _ 'стабилен и референтен технически стандарт, който има 12 насоки, организирани под 4 принципа: разбираем, работещ, разбираем и здрав . За всяка насока има проверими критерии за успех, които са в три нива: A, AA и AAA . '_

• Техники за WCAG 2.0 е изчерпателно ръководство за автори на уеб съдържание.

• Потребителски изисквания за достъпност на медиите на W3C - Този документ представя изискванията за достъпност, които потребителите с увреждания могат да имат по отношение на аудио и видео в мрежата.

• Закон за достъпност и достъп до комуникации за XXI век - CVAA е разделен на две заглавия или широки секции. Заглавие I се отнася до достъпа до комуникации, така че продуктите и услугите, които използват широколентов достъп, да са напълно достъпни за хората с увреждания. Дял II от закона за достъпност отваря нови начини за улесняване на хората с увреждания при гледане на видеопрограми по телевизията и в Интернет.

• Раздел 508 - изисквания за достъпност на информационните и комуникационни технологии (ИКТ), които се прилагат за всички федерални агенции, когато разработват, набавят, поддържат или използват електронни и информационни технологии.

• Достъпност на уебсайта по дял II от Закон за американците с увреждания (ADA) - Там ще научите как изискванията за недискриминация от дял II от ADA се прилагат към уебсайтовете на държавата и местното правителство.

Тестване на уеб достъпността: Как да разбера дали съдържанието ми е достъпно или не?

Ето основни и основни контролни точки, които трябва да ви помогнат да направите вашето уеб съдържание по-достъпно от първата стъпка:

• Проверете вашия HTML. Уверете се, че HTML структурата е без грешки, тъй като помощните технологии могат да имат проблеми при интерпретирането на съдържанието на страницата.

• Опитайте само клавиатурата. Уверете се, че всички изпълними елементи са достъпни само с помощта на клавиатурата. Освен това трябва да можете да извършвате всички действия с помощта на клавиатура, например изпращане на формуляр.

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

• Динамично съдържание. Уведомявайте екранните четци за динамични промени, напр. когато резултатите от търсенето се променят.

• Не разчитайте на цветове, за да опишете значението. Използвайте цвета заедно с описанието, напр. Предупреждение от [жълто поле].

Не елиминирайте очертаното на фокус. Това е често премахвана функция, използваща CSS outline: 0; Не правете това, тъй като потребителите на клавиатурата ще загубят ориентация на страницата. Може да помислите за премахване на схемата за фокусиране за потребители, които не са от клавиатурата, но винаги предоставя контур на фокус за потребителите на клавиатурата.

• Съобщения за грешки . Винаги казва на потребителя как да поправи грешка. Не посочвайте само, че данните са невалидни.

• Подреждане на раздели. Уверете се, че навигацията, базирана на таблици, спазва конвенциите, зададени в графичния потребителски интерфейс. Най-малко трябва да следвате посоката на четене на езика по подразбиране на приложението. Например на английски език редът на четене е отгоре надолу, отляво надясно; на арабски е отгоре надолу, отдясно наляво.

• Мащабиране. Уверете се, че съдържанието на страницата остава четимо, докато увеличавате до 200%.

• Деактивирайте изображенията. Можете ли все пак да използвате страницата по удобен начин? Има ли алтернативни текстове за всички изображения?

• Екранен четец Проверете дали можете да четете и да навигирате през съдържанието, като използвате поне един екранен четец, например VoiceOver, Windows Narrator или NVDA.

• Режим с висок контраст. Проверете дали съдържанието все още е четливо, докато превключвате в режим с висок контраст.

• Размер на шрифта. Уверете се, че размерът на шрифта на страницата е не по-малък от 10 пиксела.

4. Често срещани грешки в уеб достъпността

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

Това е списък на някои от най-често срещаните грешки, които разработчиците допускат, когато прилагат достъпност:

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

• Неправилно използване на свойството на схемата CSS В повечето случаи се използва outline: 0;, което означава, че контурът около всеки действащ елемент вече не се вижда. ** Не използвайте outline: 0; или outline: 0! Important; **. Потребителят ще загуби възможността да вижда текущо фокусирания елемент, докато навигира през съдържанието, освен ако няма друга алтернатива, например с помощта на свойството CSS border

• Загуба на фокус на текущия елемент, например, поради DOM манипулации или използването на метода blur() Това често се случва за приложения на една страница.

• Няма известия за потребители на екранен четец че нещо се е променило, например: съдържанието е изтеглено с помощта на XMLHttpRequest API и са обработени нови промени в потребителския интерфейс; но потребителят не е бил уведомен. Това често се случва с приложения на една страница.

• Избор на дата недостъпен. В много случаи се използват недостъпни инструменти за избор на дата. Потребителите не могат да навигират в опциите на календара с клавиатурата.

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

• ** Добавяне към атрибут tabindex елемента с индексно число, по-голямо от 0. ** Целта на използването tabindex с индекс над 0, това е главно за „коригиране“ на навигационния маршрут. Помислете обаче за промяна на HTML структурата доста, за да постигнете естествения път за навигация. Манипулирайте с помощта на tabindex това може да доведе до проблеми с поддръжката, както и непредсказуем маршрут за доставка.

• Лоша йерархия на заглавката. За съжаление, все още се вижда много често, тъй като йерархията на заглавията не е изградена правилно, например

  ,

  и

  . Потребителите на екранен четец използват заглавия за навигация през раздели и неправилната структура е объркваща, тъй като контекстът е труден за разбиране.

• Липсва поддръжка с висок контраст. Има хора, които използват своя софтуер в режим с висок контраст. Уверете се, че съдържанието ви е забележимо.

• Използвайте недостъпно решение CAPTCHA. За съжаление, всички известни CAPTCHA за мен са или недостъпни, или много трудни за използване.

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

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

• Проблеми с мащабирането. Уверете се, че съдържанието ви остава четимо и навигационно, когато е увеличено до 200%.

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

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

Но как мога да подобря уеб достъпността?

Определянето на проблемите е едно. Фиксирането е много различно и много често не е толкова лесно, колкото звучи. Това е така, защото внедряванията на API за достъпност не са постоянни и понякога трябва да намерим решения или дори да приемем факта, че нещо няма да работи, когато се опитаме да отстраним проблема.

По отношение на инструментите няма нито един инструмент, който може да провери всички възможни комбинации, но като добро начало, тези инструменти трябва да помогнат:

• Услуга за валидиране на марката W3C - Само за да сме сигурни, че съдържанието на HTML е без грешки. Ако HTML структурата има грешки, тогава изходът е непредсказуем и не може да бъде обработен правилно, особено от различни помощни технологии .

• https://www.w3.org/WAI/ER/tools/ - Списък на онлайн програми или услуги, които ще ви помогнат да определите дали уеб съдържанието отговаря на указанията за достъпност.

• И моят инструмент, ASLint https://www.aslint.org/ , помага да намерите проблеми с достъпността.

Винаги имайте предвид, че няма инструмент за достъпност може да замени ръчен тест тъй като не всички сценарии могат да бъдат напълно автоматизирани, например проверка на съотношението на контраста на яркостта на елементи с position: fixed;.

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

Защо да направите съдържанието достъпно е важно

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

Като допълнителна полза, положителният ефект е, че достъпно съдържание, което е напълно съвместимо с WCAG 2.0, е по-лесно за обхождане и разбиране на търсачките и може да има значителен ефект върху класирането на сайта. Следователно достъпният дизайн може да генерира допълнителен трафик към уебсайта.

И накрая, ето някои статистически данни, които трябва да вземете предвид:

• Повече от един милиард души по целия свят изпитват някакъв вид увреждания

• Стареене на населението . Между 2015 г. и 2030 г. се очаква броят на възрастните хора на възраст над 60 години да нарасне с 56%, от 901 милиона на повече от 1,4 милиарда.

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

• Видове увреждания: Има пет широки категории увреждания, включително зрителни, мобилни, речеви, познавателни и слухови.

Всички ние се нуждаем от висококачествени услуги. Да ги доставим и ние .