Водич дизајнера за основе дизајна Веб приступачности

Веб треба да буде место где свако може да приступи истом садржају са било ког места на свету. Одговарајуће технике су прошле дуг пут уређај-агностик дизајна. Али шта са приступачност-агностички дизајн?

Веб приступачност постоји већ годинама, али њена имплементација захтијева нове напретке у развоју технологије и веба. Многи програмери желе да помогну, али тешко је разумети како дизајнирати приступачност, јер има толико покретних делова. То укључује текст високог контраста, аудио странице за слијепе, оптимизиране медије и повратне информације за не-ЈС / ЦСС прегледаче.

У овом посту ћу покрити основе дизајна приступачности, шта је то, шта жели да реши и кораке које можете предузети да бисте започели. Имајте на уму, ово је невероватно детаљна тема и требат ће вам мјесеци или године праксе да би се у потпуности разумјело. Али предности су вредне труда, и сви ваши веб пројекти ће оставити сваког посетиоца са трајним утиском доступног садржаја.

Увод у приступачност

Генерално говорећи, приступачност је идеја изградње садржаја тако да може га конзумирати било ко. Ово може укључити слијепе особе које не могу читати, а могу укључивати и особе са физичким инвалидитетом које не могу управљати мишем или типковницом (или било којим од њих).

Али може укључити и људе са незнатни недостаци ин висион. Може укључивати и људе са дислексија или питања читања. У ствари, идеја “веб аццессибилити” укључује свако могуће оштећење које би могло утицати на интеракцију или потрошњу веб локације.

Можда је још важније оно што веб приступачност може понудити, као што је описано у дефиницији на Википедији:

Ипак, Анне Гибсон тврди у свом посту Лист Апарт да је дефиниција Википедије превише нејасна и није само о особама са инвалидитетом. Заиста сви на Интернету из целог света можда нема оптималан приступ Интернету.

Многи стручњаци мисле да је приступачност само за слијепе људе који не знају читати. Међутим, постоје четири основне категорије приступачности веба:

1. Висуал - слабог вида или лошег / без вида
2. Аудитори - оштећени слух или глуви
3. Когнитивни - проблеми који разумију или троше информације
4. Моторни - физички проблеми приступачности који могу захтевати посебне улазне уређаје као што су клавијатуре или програми гласовних команди

Ове категорије имају широке технике које су тако брзо као и веб стандарди. Али постоји осећај стабилности са овим стандардима који су ратификовани у ВЦАГ (Смернице за приступачност Веб садржаја).

Неки сајтови, као владине институције су по закону обавезне да поштују ове смернице. Они се примењују на међународном нивоу преко В3Ц.

Хајде да погледамо бирокрацију иза приступачности веб-а, а затим заронимо у неке примјењиве савјете за дизајн.

В3Ц & Аццессибле Десигн

Има их доста акроними који се односе на веб приступачност. Ово може бити компликовано ако сте потпуно нови у теми, али када се поједностави, надам се да ће имати више смисла.

• В3Ц (Ворлд Виде Веб Цонсортиум) - Међународна група која дефинише веб стандарде за протоколе, језике и прописе. Све званичне смернице за приступачност спадају у ову организацију.
• ВАИ (Иницијатива за приступачност веба) - Званични програм који покрива све о приступачности. Овај кровни термин садржи сва правила, смјернице и технике за модерну приступачност.
• ВЦАГ (Смернице за приступачност Веб садржаја) - Група стандарда и правила која помажу дизајнерима да оцењују своје сајтове на основу нивоа приступачности.
• АРИА (Доступне богате интернетске апликације) - Специфичан стандард који дефинише како да се изграде приступачне богате апликације које се ослањају на ЈаваСцрипт / Ајак и сличне технологије. Прочитај више о овоме у овом посту Анна Монус.

Друге смернице постоје под ВАИ кишобраном, укључујући УААГ за корисничке агенте и АТАГ за алате за израду веб страница. За сада би требало да будете највише заинтересовани за сугестије које је дао ВАИ и смернице које поставља скуп правила ВАИ под именом ВЦАГ.

Велики ресурс за учење више о овој теми је В3Ц о инвалидитету, дијелећи приче о томе како особе са инвалидитетом приступају Интернету. Може бити тешко разумјети све замршене проблеме, а камоли разумјети како их ријешити. Али најбољи извор је од људи који се свакодневно суочавају са овим проблемима.

Још једна важна тема коју треба да разумете је ВЦАГ усклађеност. То се односи на ниво приступачности веб сајта покривају широк спектар фактора. Нивои се заснивају на усаглашености са систем оцењивања А, АА и ААА. Ово можете да проверите помоћу алатке за проверу веб приступачности. Најбољи резултат је ААА.

Да бисте сазнали више о овим смјерницама, погледајте чланак В3Ц Увод у разумијевање ВЦАГ 2.0. Такође погледајте ове повезане линкове за више детаља:

• ВЦАГ 2.0 Симплифиед
• Одељак 508 Перформансе ВЦАГ-а

Кораци за приступачан дизајн

Препоручујем да посетите веб страницу пројекта А11И за практичне савете за приступачност. А11И (који је такође нумероним) је бесплатан опен соурце пројекат хостован на ГитХубу, нуде технике за приступ веб дизајну.

Можете прегледати њихове контролне листе ставки приступачности, или чак хрпу дизајна за елементе као што су падајућа листа, картице, хармонике, дугмад и модални прозори (између осталог).

Тешко је научити све те ствари и имплементирати их у исто вријеме. Узмите га корак по корак, и будите спремни да истражите више ако се збуните.

Погледајте А11И-ове упуте и кратке савјете за почетак. Налетјет ћете на специфичне приједлоге као што су везе са скоком на садржај и схеме боја високог контраста. Свака од ових техника има свој ниво детаља, тако да је имплементација углавном везана за тестирање да би се видело шта ради.

Размислите о слепим корисницима који можда користе аутоматизовани читач садржаја. Могу имати и аудио преводиоца, или чак посебну тастатуру за навигацију веб-ом помоћу тастера, а не миша. Зато правилан семантички ХТМЛ (погледајте овај чланак) је толико важно са својствима као што је табиндек и Тастери.

Ако желите да заронимо онда размислите о преузимању теме спремне за приступачност. Можете проучити архитектуру и прилагодити дизајн тако да одговара вашем пројекту.

Алати за тестирање приступачности

Ако желите да започнете, изаберите област доступности и испробајте је. Тада можете користити алате за тестирање да бисте проценили ниво успеха.

Вреди напоменути да је овај процес може бити фрустрирајуће. Толико тога треба узети у обзир, а ВЦАГ смјернице је тако тешко разумјети да можете завршити са преоптерећењем информација.

Важно је да се само наставите кретати. Изаберите једну област приступачности и учините је фокусираном. Затим користите ове алате да вам помогну да подесите и побољшате свој рад.

На пример, можете покушати да радите са спецификацијама контраста ВЦАГ-а побољшати читљивост. Када изаберете боје, користите овај бесплатни контролер односа контраста да бисте видели да ли раде заједно.

Нажалост, смернице ВЦАГ 2.0 су толико збуњујуће да можда имате потешкоћа да разумете захтеве. Али што више покушавате то ћете више научити и више ћете схватити.

За тестирање сајта који је већ онлине провјерите ВАВЕ. То је фрее висуал цхецкер која приказује грешке, упозорења, проблеме са контрастом и друге специфичности веб локације. На бочној траци ћете добити визуелни приказ и листу проблема.

На сајту Цинтхиа Саис постоји још једна бесплатна апликација која може проверите веб сајтове за ВЦАГ оцену успеха А, АА, ААА, и 508 за владину усаглашеност.

А ако сте у отвореном коду погледајте ове бесплатни алати за тестирање приступачности на ГитХубу.

• ХТМЛ ЦодеСниффер
• Алат за аутоматско тестирање приступачности
• ВЦАГ Валидатор

Додаци прегледача

Додаци за претраживаче вероватно нуде најбрже и најлакше методе тестирања приступачности. Можете их покренути са било ког рачунара на било ком веб сајту да бисте добили заиста корисне резултате.

АИнспецтор за Фирефок се сматра неопходним за приступачност. Ово проверава све, и много је темељније од ВАВЕ тестера.

Мозилла корисници могу волети и ВЦАГ Цонтраст Цхецкер који је такође бесплатан додатак.

Корисници Цхроме-а немају АИнспецтор, али имају алатке за програмере за приступачност које је Гоогле званично оформио. Ово додаје додатне алате у прозор инспектора за проверу смерница за приступачност.

Корисници Цхроме-а имају и контролне лумена за контраст боја и неке друге бесплатне проширења.

Нажалост, нисам могао наћи много за Сафари кориснике, али сам пронашао један екстензију за Опера која провјерава усклађеност са ВЦАГ 2.0. Ако сте вољни да довољно брзо претражујете Гоогле, можда ћете наћи више алата.

Додатна литература

Ако сте озбиљни у учењу веб приступачности, онда се припремите за дугачак пут. Није лако, али веома испуњава.

До сада бисте требали боље разумјети стварну дефиницију веб приступачности, зашто она постоји и мање детаље о томе шта се од развојних инжењера очекује да ураде како би побољшали своје веб странице. Следећи корак је даље истраживање и пракса да се ови принципи усагласе у ваш радни процес.

Погледајте следеће постове за више информација и обавезно проверите смернице ВЦАГ-а ако желите знање директно из извора.

• Како побољшати приступачност ХТМЛ табеле са означавањем
• Приступачан дизајн за кориснике са инвалидитетом
• 6 Савети за побољшање приступачности сајта
• Обезбедите да ваш сајт буде доступан особама оштећеног вида