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

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

Защо разработчиците трябва да се тревожат за уеб достъпността?

Уеб достъпността се върти около идеята, че всеки трябва да има равен достъп до мрежата, независимо от някакво увреждане или увреждания. Наличието на достъпен уебсайт улеснява достигането до по-голяма аудитория (около 16% от света страда от едно или друго увреждане).

Цифровата достъпност не трябва да бъде опция за разработчици. Това е необходимост за всяка професионална марка. Това се приема сериозно: както съобщава Разнообразие, някой съди The Pokémon Company през 2019 г. заради недостъпен уебсайт.

Уеб достъпност с HTML

В HTML има правила за осигуряване на разработването на достъпни уебсайтове. Този раздел ще обясни някои от тези правила.

Използвайте семантични елементи

Семантичните елементи в HTML са елементи, които имат значения. В HTML5 има около 100 елемента. Някои елементи, като напр и, са несемантични, докато други HTML тагове са семантични. Въпреки че може да е невъзможно да спрете да използвате тези несемантични елементи, важно е да включите колкото се може повече семантични елементи в работата си. Ето списък с популярни семантични елементи:

Помислете за този пример от Taaskly:

Един поглед към изображението по-горе ще разкрие следните елементи:

• Заглавие
• Изображение
• Параграф
• Три бутона

Лесно е да се предположи, че разработчиците са използвали тагове за подреждане на елементите на екрана. При по-внимателно разглеждане на кодовете ще забележите, че вместо това са използвали шест семантични етикета. Опростеният код изглежда така:

<раздел>
<imgsrc="/hero.png"алт="герой">
<статия>
<h1>Намерете точните продукти и услуги в точното време.h1>
<стр>
 Ръчно изработени обувки, ремонт на прическа, мениджър на социални медии, изпращане на поръчки, източник на доходиb>— каквото и да е, Taaskly го разбра. Намерете всеки продукт или услуга, от които се нуждаете днес, когато се регистрирате и използвате Taaskly. 
стр>
<аhref="/основен/начало">Изнесете задачаа>
<аhref="/основни/услуги"> Намерете услугаа>
<аhref="/основен/пазар" >Намерете магазина>
статия>
раздел>

От HTML фрагмента можете да наблюдавате следното:

1. Изображенията, текстът и бутоните са вътре в a елемент.
2. The елемент разделя по равно и елементи.
3. The елемент държи, , и елементи.
4. Бутоните са кодирани като елементи; следователно те са връзки, а не бутони. Като общо правило винаги използвайте връзки, за да насочите потребителя към друга страница или изглед, и използвайте бутони само когато искате потребителят да извърши действие в същия изглед. Вижте Страница с бутон на Angular за повече информация за това.

Използвайте ориентири, за да осигурите ясна структура на страницата

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

Изображението по-горе показва четири различни забележителности. Можете да използвате Прозрения за достъпността разширение за визуализиране на тези ориентири.

В изображението можем да изведем a на върха, a съдържащи a и а елемент. Забележимо, изображението показва "навигация", „регион“, и „информация за съдържание“. Те са известни като ролите, които ще разгледаме по-късно.

Винаги, когато трябва да използвате няколко ориентира за една страница, винаги ги разграничавайте по етикет. Например, ако използвате няколко елементи, каквито има Apple, трябва да ги етикетирате. Трябва да ги обозначите с ария-етикет атрибут. Така че можете да напишете нещо като някое от тези:

<навария-етикет = "глобален">
<навария-етикет = "локална навигация">
<навария-етикет = "ябълка директория">

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

Използвайте атрибути за роля, име и стойност

Понякога може да е невъзможно да използвате HTML елементи с вградени функции за достъпност. Такива случаи могат да бъдат един от следните два:

1. Няма естествен HTML елемент за това, което искате да постигнете. Например, ако трябва да използвате a защото никой друг елемент не изглежда подходящ за ролята.
2. Не можете да използвате семантични елементи поради технически проблеми. Ако използвате рамка, която използва когато би било по-добре да се използва, ще бъде ваше задължение да дефинирате персонализиран контрол.

За да дефинирате персонализирана контрола, имате нужда от роля, име и стойност (понякога) за вашия елемент.

Роля

По подразбиране a елементът има навигационна роля, докато a елементът има ролята на банер. Трябва да използвате тези елементи само по предназначение, за да помогнете на помощните технологии да разберат структурата на дадена уеб страница. Ако трябва да използвате едното вместо другото, трябва да посочите ролята по следния начин:

<заглавкароля = "навигация">
<навроля = "банер">
<дивроля = "навигация">

Име

Името е описателен текст или етикет, свързан с HTML елемент. Най-лесната форма на име е текстът на елемент. Ето един пример:

<дивроля = "бутон">Щракни ме!див>

В горния фрагмент, "Щракни ме!“ е името на елемент. Известно е още като достъпното име.

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

<навроля = "навигация"ария-етикет = "глобална навигация">...нав>

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

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

Вижте Статията на TGPi за достъпните имена за да получите по-дълбоко разбиране на това.

Стойност

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

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

 ария-valuenow 
клас="бутон за възпроизвеждане" ария-етикет=„Пусни аудио“ aria-valuenow="0"></button>
<аудиоsrc="аудио-файл.mp3">аудио>
ария-разг
<дивроля="бутон"ария-разг="фалшив">ЧЗВ 1див>
стойност
<входТип="кутия за отметка"име="продукт[]"стойност="1">

Приоритет на уеб достъпността за приобщаващо онлайн изживяване

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