Въведение в WAI ARIA

Въведение в WAI ARIA

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

Въведение

Hypertext Markup Language (HTML) не е била първоначално проектирана за създаване на уеб приложения. HTML има ограничен набор от интерфейс контрол, и се основава около последователен модел клиент-сървър комуникация. Уеб разработчици на приложения са придобили около тези ограничения чрез създаването на свои собствени компоненти (джаджи), използване на JavaScript, за да добавите поведението на джаджи.
За съжаление, на техниките, използвани за преодоляване на тези ограничения не са били достъпни. Въпреки че потребителски джаджи могат да изглеждат и се държат като редовни джаджи за десктоп приложение, като изгледа на дървото джаджи, роля (какво прави джаджи), държавни (уникална конфигурация, като проверява), както и други важни свойства не са на разположение на помощни технологии , като екранни четци. Това е същото като оформяне на обикновен текст, за да изглежда като заглавие, а не с помощта на позиция елемент — обикновен текст прилича на една позиция, но не се разкрива като заглавие на помощните технологии.
Актуализациите се често се пропуска от хората, които използват помощни технологии. Помощни технологии се очаква обикновено уеб съдържание, за да се променят в отговор на един навигация събитие, като след връзка или подаване на формуляра. Уеб приложения използват техники, като AJAX, за да актуализирате съдържанието тихо във фонов режим, което понякога се пропуска от помощните технологии. Дори ако помощните технологии е наясно с актуализации, потребителят все още не може да бъде наясно, че съдържанието е актуализиран, или как да намерите актуализирано съдържание.
WAI-ARIA е спецификация, която осигурява средство, описващи роли, щати и свойства за потребителски джаджи, така че те да са разпознаваеми и използваема от помощни технологични потребители. WAI-ARIA също така предоставя механизъм за гарантиране, че потребителите на помощните технологии са наясно с актуализации в заявлението.

Кратка история на HTML

HTML е била първоначално проектирана да бъде система на хипертекстова за структуриране и споделяне на свързаните документи. Рано HTML изготвя определени тагове, като например заглавия, параграфи, списъци, и анкери, да се добави структура на текстово-базирани документи. Първото предложение за спецификацията на HTML от IETF също са включени IMG елемент, за да позволи на графиците да бъдат показани в линията. Първото официално спецификация на HTML HTML 2, въз основа на ранните чернови на HTML. Тази спецификация, въведена форми, и определено малък набор от интерфейсни компоненти за създаване на редактиране кутии, бутони, отметки, радио бутони и падащи списъци. Малък набор от интерфейсни компоненти, определени в HTML 2 не се е променил в сравнение с набор, ние в момента използва с HTML 4.01.
Комуникационен модел за HTML е на базата на клиент-сървър модела. В модела клиент-сървър, клиентът изпраща искания и могат да получат отговори на сървъра слуша за заявки, обработва исканията на сървъра, и изпраща отговори обратно на клиента. Както HTML не е имал слой поведение, комуникацията е бил предназначен да бъде последователно — клиентски заявки страница от сървъра, сървърът обработва заявката и изпраща на клиента.

Web приложения

Уеб приложения се опитват да подражават на редовни десктоп приложения, с изключение на уеб приложенията да работят в друга редовна заявка за настолен компютър — браузър. Има две основни различия между HTML и комуникационната си модел, а редовното прилагане на работния плот:
Редовни десктоп приложения имат поведение слой, който не е зависим от заявки към сървъра.
Редовни десктоп приложения имат далеч по-богат набор от интерфейсни компоненти.

Подражавайки Редовни десктоп приложения

Искания за Информационни сървър

За да подражават на редовни десктоп приложения, уеб приложения използват JavaScript, за да добавите поведение. Например, JavaScript може да се използва, за да се позволи на елемент от менюто, за да се разшири и да се разпадне, когато потребителят взаимодейства с него. От време на време, данните може да се изисква от сървъра. Например, заявлението може да донесе на записи от базата данни на сървъра за актуализиране на информацията на текущата страница. При подаване на заявление трябва да си взаимодействат със сървъра, уеб приложения използват техники, като например AJAX или скрити елементи IFrame да комуникират с сървъра тихо във фонов режим.

Подражавайки Богати компоненти

Тъй като HTML има много малко компоненти интерфейс, уеб приложения, понякога трябва да създадете по-сложни джаджи, като Tri-State отметка или плъзгача за контрол. Вид и усещане на тези джаджи е обикновено се създават чрез съставяне на джаджи като графичен и добавяне на скриптове, за да ги държат като родния компонент.

Фигура 1 — диалог с Tri-State отметката.

Фигура 2 — слайдер уиджет, който може да се използва за обозначаване на качеството на услугата.

Достъпност Проблеми с поглед и Почувствайте Емулация

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

WAI-ARIA Спасяването

За щастие, всичко на проблемите, описани по-горе се решават чрез достъпни за Инициативата за достъпност на уеб-богати интернет приложения (WAI-ARIA) спецификация (съкратен до ARIA за останалата част на тази статия). ARIA е положителна, технологията, която осигурява по-скоро, отколкото казва на разработчиците, това, което те не могат да направят, ARIA позволява на разработчиците да създават богати уеб приложения. Aria е много лесна за изпълнение.

Клавиатура навигация

Наред с осигуряване на алтернативен текст за текстови обекти, които са в състояние да взаимодействат с интерфейсни елементи, които сами с помощта на клавиатурата е един от най-основните разпоредби за достъпност. Разработчиците, които разбират достъпност, може да се изгради потребителски програмки, използвайки компоненти, които могат да получават фокус, като входното елемент със стойност на атрибут на типа изображение. За съжаление, повечето джаджи не са изградени с компоненти, които са достъпни от клавиатурата, но вместо това се използват елементи, като например на IMG елемент, или може да се състои от съставни елементи, които трябва да бъдат в контейнер елемент, като DIV, който не е могъл да получи клавиатура съсредоточи.
HTML 4 се въведе tabindex атрибут, област, бутон, вход, обект, изберете и елементи на текстовото поле. Атрибут на tabindex, HTML 4 приема положителна стойност между 0 и 32767. Навигацията започва елементи с най-малък брой, и продължава на елемента с най-голям брой. Елементи със стойност 0 се посещават в реда, в който те се появяват в маркиране. Ако маркиране има логическа структура, tabindex атрибут не се изисква за интерфейс елементи, които са вече в раздела за клавиатура.
ARIA простира на tabindex, атрибут, така че тя да може да се използва на всички видими елементи. ARIA също така позволява на отрицателна стойност, да бъдат определени за елементи, които не трябва да се появи в раздела за клавиатура, но може да бъде програмно фокусирани (да фокусирате върху даден елемент с скриптове). , Като действителната стойност на отрицателно число не е от значение (елемент никога не получава фокусът на клавиатурата), стойността -1 се използват обикновено за елементи, които не трябва да бъдат включени в раздела ред, но може да се наложи да бъде в състояние да получават програмата, която разработваме. Например, бихте могли да се изгради джаджа меню, когато самото меню е в раздела за и получава фокуса, tabbing към него, но елементите на менюто не са в раздела за клавиатура. Вместо това, елементите от менюто може да бъде програмиран така че те могат да се навигира с клавишите със стрелки. По този начин, потребителите не трябва да раздела през всички елементи в менюто и могат по-добре да се движите в документа. Това е вярно за всички джаджи, които имат поредица от компоненти, които се нуждаят от достъп на клавиатурата, като например дърво.

Като прибавим към естествения ред Tab

Следващият пример използва стойност tabindex атрибут на 0, за да се сложи DIV елемент в раздела за така че потребителят клавиатура може да отидете до елемента.

...

Отрицателна tabindex

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

...

В този пример, DIV елемент не е поставен в раздела ред, но като един стойност tabindex, атрибут от -1 означава, че могат да получават програмата, която разработваме. Следния откъс от JavaScript избира елемент, дефинирани по-горе, и използва метода фокусът да се постави акцент върху елемента.

var objDiv = document.getElementById('progaccess');

// Focus on the element
objDiv.focus();

Какво съм аз?

ARIA въвежда ролята атрибут, за да помогне за определяне на уиджети, като плъзгач, и определят структурата на страницата, като например раздел за навигация. Един от основните проблеми с уеб приложенията е, че всеки елемент може да бъде използвана за направата на джаджа. На HTML елементи, които вече имат предварително определени роли. Ролята на един елемент е това, което го прави — ​​тази част, която тя играе в структурата. Например, ролята на заглавие се разбира добре от помощните технологии. Когато Програмките са изградени със съществуващите елементи, ролята на елемент е това, което се разкрива на помощните технологии, а не това, което визуално представя в джаджа. Например, ако палеца за плъзгача контрол е създаден с помощта на един графичен елемент с подходящ алтернативен текст, след което екранен четец, най-вероятно ще обявим контрол, тъй като «Графичен палеца», в противовес на нещо по-смислено, като например «плъзгач, стойност 16% «.


Фигура 3 — палец на типичен контрол плъзгача.
Ролята, отредена от коз ролята на присъди за ролята на родния елемент. В следващия пример, вход елемент има своята роля атрибут на плъзгача (ние ще разгледаме някои от другите свойства, ARIA по-късно в тази статия) — роля, изложени на помощните технологии е слайдер, а не на вложени.


Когато този елемент получава фокуса екранен четец, потребителят разбира ролята на тази джаджа играе. Спецификацията на ARIA поддържа списък на ролите.

Роли на документи забележителност

Както и роли, за да определят джаджи, има роли, които могат да помогнат за определяне на структурата на документа. Забележителности на документи са подмножество на редовни роли, които помагат на потребителите на екранен четец разберат ролята на секция и да се ориентират в рамките на документа.

Фигура 4 — Типичен страница с хедър, страничната лента и основното съдържание.

ARIA определя следните документи знакови роли.
article -> Съдържание, което има смисъл в себе си, като пълна блог пост, коментар в блог, пост във форум, и така нататък.
banner -> Сайт-ориентирано съдържание, като заглавието на страницата и логото.
complementary -> Подкрепа на съдържание за основното съдържание, но значим сам по себе си, когато то е отделено от основното съдържание. Например, времето, в списъка на портал.
contentinfo -> За деца съдържание, като например бележки под линия, авторски права, връзки към декларацията за поверителност, връзки към предпочитания, и така нататък.
main -> Съдържание, което е пряко свързано или се разширява върху централната съдържанието на документа.
navigation -> Съдържание, което съдържа връзки към навигация този документ и / или свързаните с него документи.
search -> Този раздел съдържа формата за търсене, за да търсите в сайта.
Следващият пример определя знакови роли на банер, навигация и предимно за създаване на структурата на страницата, показана на фигура 4.

...
...
...

ARIA членки и имоти

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

aria-valuemin -> Съхранява най-ниската стойност диапазон може да има.
aria-valuemax -> Съхранява най-високата стойност диапазон може да има.
aria-valuenow -> Магазини текущата стойност в диапазон.
aria-valuetext -> Магазини за четене текст, за да помогне на потребителя да разбере контекста. Например «30 долара».
aria-labelledby -> Съхранява лична атрибут на етикет, съдържащ текст, подходящ ред за тази джаджа.

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

// Set the ARIA property values when the thumb is 
// moved on the slider
objThumb.setAttribute('aria-valuenow', iValue);
objThumb.setAttribute('aria-valuetext', iValue + ' %');

Добавяне на на ARIA роли и атрибути не ще валидира с HTML 4.01 или XHTML 1.0, но това е добре, ARIA се добавя важна информация за спецификациите, които са написани преди много време. Работата е в ход определянето на DTD, които може да се използва с модулен XML, като XHTML 1.1. Има пълния списък на държави и свойства, за да помогне за определяне на достъпни джаджи в спецификацията на ARIA.

Живо регионите

Живи региони позволяват елементи в документа, за да бъдат обявени, ако има промени, без потребителят да може да се съсредоточи върху текущата им дейност. Това означава, потребителите могат да се информират за новости, без да губи своето място в рамките на съдържанието. Например, прилагането на чат може да обяви отговора от лицето на потребителя е да чатите с, без преместване на фокуса от полето за въвеждане на текст, за да добавите линия на чат.

aria-live

Откриваемост на актуализирано съдържание е един от най-големите пречки за потребителите с екранни четци. ARIA осигурява ария-Live собственост, която има стойност, показваща нивото на многословието за региона. По-долу са на многословието ценности, които могат да бъдат използвани с ария-Live собственост.

off -> Това е стойността по подразбиране, и показва, че районът не е на живо.

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

assertive -> Тази стойност е по-висок приоритет от нормалното, но не непременно прекъсне потребителят незабавно.

 

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

Ария атомно свойство

Ария атомно свойство е незадължителна собственост на живи региони, които могат да имат стойности — истина или лъжа (по подразбиране, ако това имущество не е посочено). Когато се актуализира региона, ария атомно свойство се използва за обозначаване ако помощни технологии трябва да представят всички или част от промяната в региона на потребителя. Ако това свойство е настроено на истина, помощни технологии трябва да представи целия регион като цяло, в противен случай част от района, че промени може да бъдат обявени по себе си.
В следващия пример, всички елементи в рамките на неподредените списъци ще бъдат обявени в тяхната цялост, когато районът се говори, освен ако друг елемент, по-нататък по веригата отменя ария атомно свойство.

 

Ария по-натоварения собственост

Ария по-натоварения собственост е незадължителна собственост на живи региони, които могат да имат стойности — истина или лъжа (по подразбиране, ако това имущество не е посочено). Ако няколко части на живо регион трябва да бъдат заредени преди промени се съобщава на потребителя, ария по-натоварения собственост може да бъде зададен да е истина, докато последната част е заредена, и след това ЛЪЖА, когато актуализациите са пълни. Този имот предотвратява помощни технологии, обявява промени, преди актуализациите са пълни.

aria-relevant собственост

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

additions -> Възли са добавени към DOM в региона.
removals -> Възли се отстранява от DOM в региона.
text -> Текст се добавя или премахнати от DOM.
all -> Всички по-горе (допълнения, преместване, текст), се прилагат към този регион.

При липса на изрично ария съответната собственост, по подразбиране е да предположим, че съществуват текстови изменения и допълнения (ария на съответните = «текст допълнения»). Следващият пример ще обяви промени само ако възли са добавени към DOM в рамките на региона. Ако има текстови промени, или възли са отстранени в рамките на региона, потребителят ще бъде уведомен.

Кога може да се използва ARIA?

Има няма негативни странични ефекти от използването на ARIA, така че можете да започнете да го използвате веднага. Всички четири от най-големите браузъри са приложили подкрепа за ARIA, или имат планове за прилагане на подкрепа за ARIA. Opera 9.5 и Firefox 1.5 + вече включват подкрепа за ARIA. Internet Explorer 8 Beta има ARIA подкрепа, и отворен код рамка зад Safari, WebKit, обявиха, че са започнали да добавят поддръжка за ARIA.
Aria е също така широко се подкрепя от помощните технологии. JAWS 7.1 +, Window-Eyes 5.5 +, NVDA, Zoomtext 9 +, и други, имат основна подкрепа за ARIA и положението да се подобри.

Бъдете ранен осиновяващ

Тъй като има никакви негативни странични ефекти от използването на ARIA и подкрепа е вече налице, има какво да губи, като се превърне ранен осиновяващ, но много да спечелят. Дори ако имате най-простият на уеб сайтове, може да включва знакови роли на документи, за да помогнат на потребителите по-добре се движите и да се ориентират в съдържанието.

Използвайте документи знакови роли

От моя личен сайт, включват роли на документ за ориентир за основен, навигация, търсене и вторична. Помислете за следната структура на документа.

...
...

Ние би могъл да напише на атрибута роля за нашия документ забележителности директно в маркиране.



...

Като алтернатива, тъй като повечето страници са структурирани, така че те могат да бъдат оформена с CSS, е вероятно, че страницата ще бъде структуриран с лични качества, които биха могли да бъдат предадени на JavaScript функция. По-долу е пример за проста функция на JavaScript, който приема ID атрибут на един елемент, както и ролята на стойност, и определя ролята на атрибута на съответния елемент.

function addARIARole(strID, strRole)
{
    // Find the element to add a role property to
    var objElement = document.getElementById(strID);

    if (objElement)
    {
        // Add the role property to the element
        objElement.setAttribute('role', strRole);
    }
}

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

function setupARIA()
{
    // Add ARIA roles to the document
    addARIARole('content', 'main');
    addARIARole('nav', 'navigation');
    addARIARole('searchform', 'search');
    addARIARole('ads', 'banner');
}

window.onload = setupARIA;

Посочете задължителни полета

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



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

Добавяне на други съответни свойства

Има много ARIA свойства, които могат да бъдат използвани по най-простият на уеб сайтове, като например ария-labelledby и ария-describedby,. Арии labelledby собственост на един или повече елементи, които се считат за етикета за един елемент, както и ария-describedby собственост върху един или елементи, които се считат описание за елемент.

Paragliding

A long description of our paragliding trip ...

Getting ready to take off

Предимство на маркиране

ARIA маркиране има предимство пред маркирането на местния език. Това означава, че ако ария-labelledby се използва, заедно с етикета = «», ария-labelledby ще да имат предимство. Етикетът елемент е все още насърчават за по-стари браузъри, които не разбират ARIA. Една проста техника, за да се избегнат сблъсъци е да използвате ария labelledby атрибут за позоваване на етикета — това гарантира, че на етикета е на разположение, независимо на ARIA подкрепа.




Погледни през пълния списък на държави и свойства, за да видите как на ARIA да ви помогне да се гарантира вашето съдържание е по-достъпна.

Всички заедно сега

HTML не е била първоначално предназначена за създаване на уеб приложения, но разработчиците са ги създали чрез изготвянето на своите собствени уиджети, и добавяне на поведение с JavaScript. Проблемът е, че ролята, държавата и свойства на джаджи и обновено съдържание на тези страници не са превозени правилно помощните технологии. Спецификацията на ARIA решава тези проблеми, като позволява на разработчиците да се опише джунджурии в подробности, да определят структурата на документа, и определяне на региони на страницата, която ще се промени.
Независимо дали се развиват пълен разцвет уеб приложения със сложни графични обекти и живи секции, или дали имате най-простият на уеб сайтове, можете да започнете да използвате ARIA сега, за да се възползват потребители с увреждания.

Originally at http://dev.opera.com/articles/view/introduction-to-wai-aria/. Translated by Goscience

Комментарии и размещение ссылок запрещено.

Комментарии закрыты.