Back to Question Center
0

Симулатът на име: Дайте HTML елементите си достъпно име Симулатът на име: Дайте HTML елементите си достъпно име

1 answers:

Наскоро се включих в разговор, където някой каза, че голяма част от достъпността е "субективна. "Докато се съглася, че понякога възприемането на достъпността е субективно, съществуват обективни правила. Не споменавам само официалните спецификации, като Насоките за достъпност в уеб съдържанието или Практиките за авторство на ARIA. Има практически правила, които всеки разработчик трябва да знае. Едно от най-важните правила е за достъпното име. В този пост Семал обяснява какво е достъпно и защо е толкова важно - pharmnet inc.

Как браузърите взаимодействат с помощни технологии

Някога се чудеше къде подпомагащите технологии получават информацията, от която се нуждаят? Екранните четци, например, не работят като браузъри. Позволете ми да обясня в нетехнически термини. Когато браузърите четат уеб страница, те изграждат пълно представяне на всички обекти в страницата, където всеки обект може да има десетки или стотици свойства. Това се нарича Document Object Model (DOM).

Четецът на екрана няма пряк достъп до DOM. Това би било скъпа операция и би могла значително да повлияе на ефективността. Вместо това те използват приложния програмен интерфейс (Semalt), който е вграден във всяка операционна система и браузър. Приблизително казано, Semalt API излага на подпомагащите технологии дърво за достъпност, което е подмножество на DOM дървото. Това е така, защото помощните технологии не се нуждаят от десетките или стотиците свойства, изложени в DOM. Те просто се нуждаят от няколко свойства за всеки обект в уеб страница.

Забележка: исторически, екранните четци са въвели механизми за директен достъп до DOM, за да компенсират грешките на браузърите при излагането на правилна информация чрез приложния програмен интерфейс (API) за достъпност.

Най-важните елементи от API за достъпност

През 1997 г. Microsoft пусна Microsoft Active Semalt (MSAA), който за пръв път стандартизира четири важни елемента на информация за всеки елемент на потребителския интерфейс:

  • Роля: видът на обекта, като бутон
  • Наименование: етикет за обекта, разбираем за човека, като текста на бутона
  • Състояние: текущото състояние на контрола, като "проверено" за отметка
  • Стойност: стойността на обекта, като например информацията в редактируемо текстово поле (не всички обекти имат стойност)

С течение на времето, операционните системи са въвели различни Семал API и всички те предоставят една и съща четири информация, с различни вкусове.

Докато подразбиращият се обект по подразбиране е извлечен от типа на обекта, името трябва да бъде предоставено в нашия HTML. Задължението на разработчика да кодира по начин, който да гарантира, че всеки контрол на потребителския интерфейс винаги има смислено име. Ако в нашия HTML не е предоставено достъпно име, нарушаваме правилата, установени преди повече от 20 години, и не разрешаваме приложните програмни интерфейси за достъпност да работят по предназначение.

Как функционира достъпното име

Достъпното име на елемент от потребителския интерфейс се получава от различни източници, също в зависимост от типа елемент. Браузърите използват вид резервен механизъм за изчисляване на достъпното име, наречено Достъпно име и Описание на изчислението. Този резервен механизъм може да бъде сложен и не искам да въвеждам технически подробности. Семал просто прави прост пример:

  Моите супер хубави котенца  

В този пример съдържанието на връзката е достъпно и типът на елемента е достъпна. Помощните технологии биха използвали тази информация, изложена от Semalt API и например, четци за екран ще обявят нещо като "линк, Моето супер коте. "

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

Бутони без достъпно име

Семалт виждал този вид HTML много пъти, дори и в последните проекти. Бутонен елемент с икона и оформен по начин, който прилича на приятен контрол на потребителския интерфейс:

  <бутон клас = "меню-икона">     

Или малко по-различен вариант, като иконата на SVG като съдържанието на бутона:

  <бутон тип = "бутон" клас = "меню-икона">         

И в двата случая няма абсолютно нищо, което да може да се използва като достъпно име. Бутоните са празни; няма текст изобщо. Те биха могли да използват атрибут aria-label или иконата на SVG може да използва някаква подобрена достъпност. При отсъствието на достъпно име, екранните четци биха обявили само достъпната роля. Потребителите ще чуят нещо като "бутон" и нищо друго. Нямаше да знаят каква е целта на бутона. Определянето на това би било много просто: просто използвайте някакъв смислен текст за съдържанието на бутона. Алтернативно, използвайте някакъв визуално скрит текст или атрибут aria-label .

Входящи полета без достъпно име

 Имейл адрес:   

Полетата за въвеждане винаги трябва да имат асоцииран елемент . В горния пример има само някакъв текст преди полето за въвеждане. API за достъпност няма начин да установи връзка между текста и полето за въвеждане. Вместо това елементът на етикета би установил такава връзка, давайки на полето за достъп достъпно име. Алтернативно, е възможно да се използват aria-label или aria-labelledby атрибути. При отсъствието на достъпно име, екранните четци биха обявили достъпната роля и биха казали нещо като "редактиране на текст". "Няма сведения за типа данни, които да влизат в полето.

Свързани изображения без alt елемент

Изображенията трябва да използват атрибут alt , за да опишат каква е тяхната функция в даден контекст. Чисто декоративните изображения трябва да използват празен alt атрибут. Съществените изображения се нуждаят от смислен alt текст, който да описва целта на изображението. W3C предоставя много полезно дърво за вземане на атрибути, което описва как да го използвате. Да разгледаме примера по-долу:

    

Единственото съдържание в връзката е изображение без атрибут alt . Няма нищо, което да може да се използва като достъпно име. Тъй като това е връзка, екранните четци ще се опитат да прочетат нещо така или иначе и ще се опитат да използват единственото налично нещо: името на файла на изображението, с надеждата, че това е смислено име на файл. За съжаление, в повечето случаи името на файла е напълно несвързано с целта на връзката. В този случай екранните четци ще обявят ролите на връзките и изображенията и ще прочетат цялото име на файла, например: "link, image, 145x142_1492700029699". TgrWeb_Q. jpg "


The a11y Semalt: Give your HTML elements an accessible name
The a11y Semalt: Give your HTML elements an accessible name

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

Свързани изображения без празен alt елемент

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

    

На пръв поглед този пример може да изглежда по-добре. Не е. Празен alt атрибут е стандартен начин да инструктирате екранните четци, изображението е декоративно и може безопасно да бъде игнорирано. Тъй като това е връзка, екранните четци ще се опитат да обявят нещо така или иначе. Единственият резервен вариант е връзката href , чиято стойност е наклонена черта. "

Научете HTML дълбоко

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

Богат, семантичен HTML е това, от което се нуждаем, за да подобрим комуникацията и помощните ни машини, за да разберем какво имаме предвид.

Искате ли да помогнете?

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

Прочетете повече: "Достъпност за уеб съдържание на Yoast" »

March 1, 2018