Веб локације треба да буду доступне свима. Ево шта треба да знате.

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

Зашто би програмери требало да буду забринути за доступност веба?

Приступачност веба се врти око идеје да сви треба да имају једнак приступ вебу, без обзира на инвалидитет или инвалидитет. Поседовање приступачне веб странице олакшава допирање до веће публике (око 16% света пати од једног или другог инвалидитета).

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

instagram viewer

Веб приступачност са ХТМЛ-ом

У ХТМЛ-у постоје правила која обезбеђују развој приступачних веб локација. Овај одељак ће објаснити нека од тих правила.

Користите семантичке елементе

Семантички елементи у ХТМЛ-у су елементи који имају значење. У ХТМЛ5 постоји око 100 елемената. Неки елементи, као нпр и, нису семантички, док остале ХТМЛ ознаке су семантичке. Иако је можда немогуће престати да користите ове несемантичке елементе, важно је да у свој рад укључите што више семантичких елемената. Ево листе популарних семантичких елемената:

Размотрите овај пример из Тааскли:

Поглед на слику изнад откриће следеће елементе:

  • Наслов
  • Слика
  • Параграф
  • Три дугмета

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

<одељак>
<имгсрц="/херо.пнг"алт="јунак">
<чланак>
<х1>Пронађите праве производе и услуге у право време.х1>
<стр>
 Ручно рађена обућа, реновирање фризуре, менаџер друштвених медија, слање обавеза, извор приходаб>— само име, Тааскли је схватио. Пронађите сваки производ или услугу која вам је потребна данас када се пријавите и користите Тааскли. 
стр>
<ахреф="/маин/хоме">Извршите задатака>
<ахреф="/маин/сервицес"> Пронађите услугуа>
<ахреф="/маин/маркетплаце" >Пронађите продавницуа>
чланак>
одељак>

Из ХТМЛ исечка можете приметити следеће:

  1. Слике, текст и дугмад су унутар а елемент.
  2. Тхе елемент подједнако дели и елемената.
  3. Тхе елемент држи, , и елемената.
  4. Дугмад су кодирана као елементи; дакле, то су везе, а не дугмад. Као опште правило, увек користите везе да бисте усмерили корисника на другу страницу или приказ и користите дугмад када желите да корисник изврши радњу само у истом приказу. Видите Страница Ангулар'с Буттон за више информација о овоме.

Користите оријентире да бисте обезбедили јасну структуру странице

Оријентири су семантичке ознаке које помажу слепим корисницима да се крећу веб страницом помоћу читача екрана. Са оријентирима, лако је дефинисати различите делове веб странице. Аппле-ов веб-сајт користи знаменитости.

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

На слици можемо закључити а на врху, а који садржи а, и а елемент. Приметно, слика показује "навигација", "регион", и “цонтентинфо”. Оне су познате као улоге, које ћемо касније погледати.

Кад год морате да користите више оријентира за страницу, увек их разликујете по налепници. На пример, ако користите више елементе какве Аппле има, морате их означити. Требало би да их означите са арија-ознака атрибут. Дакле, можете написати нешто попут било којег од ових:

<наварија-ознака = "глобални">
<наварија-ознака = "локална навигација">
<наварија-ознака = "аппле дирецтори">

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

Користите атрибуте улоге, имена и вредности

Понекад је можда немогуће користити ХТМЛ елементе са уграђеним функцијама приступачности. Такви случајеви могу бити било који од ова два:

  1. Не постоји изворни ХТМЛ елемент за оно што желите да постигнете. На пример, ако морате да користите а јер изгледа да ниједан други елемент не одговара тој улози.
  2. Не можете да користите семантичке елементе због техничких проблема. Ако користите оквир који користи када би било боље користити, биће ваша дужност да дефинишете прилагођену контролу.

Да бисте дефинисали прилагођену контролу, потребна вам је улога, име и вредност (понекад) за ваш елемент.

Улога

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

<заглављеулога = "навигација">
<навулога = "банер">
<дивулога = "навигација">

Име

Име је описни текст или ознака повезана са ХТМЛ елементом. Најлакши облик имена је текст елемента. Ево примера:

<дивулога = "дугме">Кликни ме!див>

У горњем исечку, "Кликни ме!“ је назив за елемент. Познато је и као приступачно име.

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

<навулога = "навигација"арија-ознака = "глобална навигација">...нав>

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

 атрибут имена 
<навулога = "навигација"име = "глобална навигација">...нав>
 доступно име 
<навулога = "навигација"арија-ознака = "глобална навигација">...нав>

Видите Чланак ТГПи-а о доступним именима да бисте дубље разумели ово.

Валуе

У ХТМЛ-у, атрибут валуе може пружити додатне информације о елементу. Вредности пружају информације о стању компоненте за прилагођене компоненте као што су хармонике. На пример, хармоника се може отворити или затворити.

Својим елементима можете додати вредност на неколико начина. Овај исечак показује неке од начина на које то можете да урадите:

 ариа-валуенов 
вредност
<улазнитип="поље за потврду"име="производ[]"вредност="1">

Одређивање приоритета приступачности веба за инклузивно онлајн искуство

Веб приступачност је ван поштовања правила; такође се ради о томе да сви имају једнак приступ вашој веб страници. Укључивање семантичких елемената, оријентира и атрибута попут улоге, имена и вредности у ваш ХТМЛ може учинити вашу веб локацију доступнијом особама са инвалидитетом. Немојте размишљати о веб приступачности као опцији; сматрати то неопходношћу.