Приступачност

Комплетан водич кроз веб приступачност

Аутор Тим AsasWeb 5 мин читања

Веб приступачност значи изградњу сајта који свако може да користи, укључујући људе који се ослањају на тастатуру, читач екрана, титлове или јак контраст. Међународни стандард је WCAG 2.2 на нивоу AA, а почива на четири идеје, да странице морају бити опажљиве, употребљиве, разумљиве и робусне. Већина посла је темељна, а не козметичка, прави HTML елементи, видљив редослед фокуса, довољан контраст боја, стварне текстуалне алтернативе и јасни обрасци. Урађена од почетка кошта мало, шири вашу публику, смањује правни ризик и истовремено побољшава SEO.

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

Шта приступачност заправо значи

Међународна референца су Смернице за приступачност веб садржаја, познате као WCAG. Актуелна верзија је WCAG 2.2, а већина организација циља ниво AA, ниво на који се позивају закони попут Европског акта о приступачности. Не морате да учите смернице напамет, али помаже да знате четири принципа на којима почивају. Страница треба да буде:

  • Опажљива. Људи могу да приме садржај, било да га виде, чују или опипају. Слике имају текстуалне алтернативе, видео има титлове, а текст има довољан контраст.
  • Употребљива. Људи могу да користе страницу оним што имају, мишем, само тастатуром, прекидачем или гласом. Ништа их не заробљава и ништа не зависи од чула или радње коју не могу да изведу.
  • Разумљива. Садржај се чита јасно и интерфејс се понаша предвидљиво, па људи нису ни изненађени ни збуњени.
  • Робусна. Страница је изграђена тако да прегледачи и помоћне технологије, сада и убудуће, могу поуздано да је протумаче.

Готово све практично у овом водичу враћа се на једну од те четири идеје.

Коме је намењена

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

Темељи који највише значе

Добра вест је да је посао са највећим учинком структуран, а не декоративан. Поставите ове темеље како треба и већим делом пута сте стигли до нивоа AA.

Користите прави HTML елемент

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

Нека све ради са тастатуре

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

Бирајте боје које свако може да прочита

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

Пишите стварне текстуалне алтернативе

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

Градите обрасце које људи могу да заврше

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

Зашто је добра за ваше пословање

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

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

Напомена о е-трговини

Онлајн продавнице имају посебне тачке притиска: галерије производа, филтере, бираче варијанти и наплату која не сме никога да изгуби. Неприступачна наплата је напуштена куповина. Ако продајете онлајн, контролна листа приступачности за онлајн продавнице покрива делове који највише значе.

Како тестирати

За почетак вам није потребна лабораторија. Кратка рутина која се понавља хвата већину проблема:

  1. Склоните миш и прођите кроз целу страницу Tab тастером. Можете ли да досегнете и користите све, и да ли увек видите где сте?
  2. Покрените аутоматизовану проверу као што су axe или Lighthouse. Неће ухватити све, али брзо означава очигледне пропусте.
  3. Проверите контраст боја према циљним вредностима нивоа AA.
  4. Пробајте читач екрана десет минута. На већини система један је већ уграђен.

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

Одакле почети

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

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

Желите овај стандард на свом сајту?

Реците нам нешто о вашем пројекту и одговорићемо искреним, практичним следећим корацима.