Достъпни компоненти на потребителския интерфейс за мрежата

За да бъдат достъпни, UI компонентите трябва да работят на множество устройства с различна големина на екрана и различни видове вход. Освен това компонентите трябва да се използват от най-широката група потребители, включително тези с увреждания.

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

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

  • Уверете се, че минималният праг на контрастно съотношение е спазен за текстово съдържание.
  • Избягвайте да комуникирате информация, използвайки единствено цвят и се уверете, че целият текст може да бъде променен с промяна.
  • Уверете се, че всички компоненти на потребителския интерфейс могат да се използват с помощни технологии като екранни четци, лупи и брайлови дисплеи. Това означава да се гарантира, че компонентите на потребителския интерфейс са маркирани така, че API-тата за достъпност да могат програмно да определят ролята, състоянието, стойността и заглавието на всеки елемент.

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

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

Проблемите с мобилността могат да включват невъзможността за работа с мишка, клавиатура или сензорен екран.

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

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

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

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

Достъпен ли е вашият потребителски интерфейс?

Обобщение (tl; dr)

Когато проверявате приложението си за достъпност, попитайте:

  • Можете ли да използвате вашия потребителски интерфейс компонент само с клавиатурата? Успява ли да се фокусира и избягва капаните за фокусиране? Може ли да реагира на подходящите клавиатурни събития?
  • Можете ли да използвате вашия потребителски интерфейс с екранен четец? Предоставили ли сте текстови алтернативи за всяка информация, която се представя визуално? Добавихте ли семантична информация с помощта на ARIA?
  • Може ли вашият потребителски интерфейс да работи без звук? Изключете високоговорителите си и преминете през случаите на употреба.
  • Може ли да работи без цвят? Уверете се, че вашият потребителски интерфейс може да се използва от човек, който не може да вижда цветове. Полезен инструмент за симулиране на цветна слепота е разширение за Chrome, наречено SEE (опитайте и всичките четири форми на симулация на цветна слепота). Може да се интересувате и от разширението Daltonize, което е подобно полезно.
  • Може ли вашият потребителски интерфейс да работи с активиран режим с висок контраст? Всички съвременни операционни системи поддържат режим с висок контраст. Високият контраст е налично разширение за Chrome, което може да помогне тук.

Нативните контроли (като <бутон> и <избор>) имат вградена достъпност от браузъра. Те са съсредоточени с помощта на клавиша tab, реагират на клавиатурни събития (като Enter, интервал и клавиши със стрелки) и имат семантични роли, състояния и свойства, използвани от инструменти за достъпност. Стайлингът по подразбиране също трябва да отговаря на посочените по-горе изисквания за достъпност.

Компонентите на потребителски интерфейс (с изключение на компоненти, които разширяват родните елементи като <бутон>) нямат вградена функционалност, включително достъпност, така че това трябва да бъде осигурено от вас. Добро място за начало при внедряване на достъпност е сравняването на вашите компоненти с аналогичен естествен елемент (или комбинация от няколко естествени елемента, в зависимост от това колко сложен е вашият компонент).

Следва списък с въпроси, които можете да си зададете, когато се опитвате да направите вашите потребителски интерфейсни компоненти по-достъпни.

Може ли вашият потребителски интерфейс да се използва само с клавиатурата?

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

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

Управление на фокуса в сложен елемент

Използване на tabindex

Атрибутът tabindex позволява да се фокусират елементи / UI компоненти с помощта на клавиатурата. Потребителите само на клавиатурата и на помощните технологии трябва да могат да поставят фокус върху клавиатурата върху елементи, за да взаимодействат с тях. Вътрешните интерактивни елементи са фокусирани неявно, така че не се нуждаят от атрибут tabindex, освен ако не желаем да променим позицията им в реда на раздела.

Има три типа стойности на tabindex:

  • tabindex = "0" е най-често срещаният и ще постави елемента в ред "естествен" раздел (определен от DOM поръчката).
  • стойност на tabindex по-голяма от 0 ще постави елемента в ръчен ред на раздела - всички елементи в страницата с положителна стойност на tabindex ще бъдат посетени в числов ред, преди елементи от естествения ред на раздела.
  • стойност на tabindex, равна на -1, ще доведе до програмно фокусиране на елемента, но не в реда на раздела.

За персонализираните потребителски интерфейси винаги използвайте стойности на tabindex от 0 или -1, тъй като няма да можете да определите реда на елементите на дадена страница предварително - дори и да го направим, те може да подлежат на промяна. Стойността на tabindex от -1 е особено полезна за управление на фокуса в сложни компоненти, както е описано по-горе.

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

Може да се заинтересувате и от подвижните подходи на табиндекс или ария-активни потомци, обхванати в MDN.

Използване на автофокус

Атрибутът за автоматично фокусиране на HTML позволява на автора да определи, че определен елемент трябва автоматично да фокусира, когато страницата е заредена. Той вече се поддържа във всички контроли на уеб формата, включително <вход>. За да фокусирате елементи във вашите собствени персонализирани компоненти на потребителския интерфейс, извикайте метода focus (), поддържан за всички HTML елементи, които могат да бъдат фокусирани (например document.getElementById ("myButton"). Focus ()).

Добавяне на взаимодействие с клавиатура

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

И накрая, уверете се, че клавишните комбинации са откриваеми. Например, често срещана практика е да има легенда за клавишни комбинации (текст на екрана), за да информира потребителя, че съществуват преки пътища. Например „Натиснете? за клавишни комбинации “. Като алтернатива може да се използва такъв подсказка, за да се информира потребителят за съществуващия пряк път.

Важността на управлението на фокуса не може да бъде занижена. Един пример е чекмедже за навигация. Ако добавяте UI компонент към страницата, трябва да насочите фокуса към елемент вътре в нея, в противен случай може да се наложи потребителите да преглеждат цялата страница, за да стигнат до нея. Това може да бъде смущаващо изживяване, така че не забравяйте да тествате фокуса за всички компоненти за навигация с клавиатура на вашата страница.

Можете ли да използвате вашия потребителски интерфейс с екранен четец?

Около 1–2% от потребителите ще използват екранен четец. В края на тази статия ние изброяваме някои екранни четци, които са свободни за използване: опитайте се да използвате своя компонент с поне един от тези четци на екрани. Можете ли да определите цялата важна информация и да взаимодействате с компонента, като използвате само екранния четец и клавиатура?

Следните въпроси трябва да ви помогнат да се справите с достъпността на четеца на екрана:

Всички компоненти и изображения имат ли смислени алтернативи за текст?

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

Например, ако вашият потребителски интерфейс показва само икона като ..

Икона на менюто за настройки

за да се посочи, че това е меню за настройки, то се нуждае от достъпна текстова алтернатива като „настройки“, която предава същата информация. В зависимост от контекста това може да използва атрибут alt, атрибут aria-label, атрибут aria-labelledby или обикновен текст в DOM на Shadow. Можете да намерите общи технически съвети в бърза справка за WebAIM.

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

Предоставят ли вашите компоненти семантична информация?

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

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

Например, потребителски потребителски интерфейс може да играе ролята на плъзгач ARIA, който има някои свързани атрибути на ARIA: aria-valuenow, aria-valuemin и aria-valuemax. Свързвайки тези атрибути със съответните свойства на вашия персонализиран компонент, можете да разрешите на потребителите на помощни технологии да взаимодействат с елемента и да променят неговата стойност и дори да накарат съответно визуалното представяне на елемента.

Компонент за слайд на диапазон
 

Могат ли потребителите да разберат всичко, без да разчитат на цвета?

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

Има ли достатъчен контраст между текста / изображенията и фона?

Всяко текстово съдържание, показано във вашия компонент, трябва да отговаря на минималната (AA) контрастна лента. Помислете за предоставяне на тема с висок контраст, която отговаря на по-високата лента (AAA) и също така гарантирайте, че таблиците със стилове на потребителски агент могат да се прилагат, ако потребителите се нуждаят от изключителен контраст или различни цветове. Можете да използвате тази проверка за контраст на цветовете като помощно средство, когато правите дизайн.

Дали подвижното или мигащото съдържание във вашите компоненти е стопиращо и безопасно?

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

Инструменти за достъпност

Налични са редица инструменти, които могат да помогнат при отстраняване на грешки в достъпността на вашите визуални компоненти. Те включват:

  • ax - автоматизирано тестване за достъпност за вашата рамка или браузър по ваш избор
  • Одитите за достъпност на Lighthouse за Chrome предоставят полезна информация за откриване на проблеми с достъпността.
Родна инспекция за достъпност в DevTools
  • Tenon.io - полезен за тестване на често срещани проблеми с достъпността. Tenon има силна интеграционна поддръжка в инструменти за изграждане, браузъри (чрез разширения) и дори текстови редактори.
  • Можете да разгледате начина, по който помощните технологии виждат уеб съдържание, като използвате инспектор за достъпност (Mac) или инструменти за тестване на API за автоматизация на Windows и AccProbe (Windows). Освен това можете да видите дървото с пълна достъпност, което Chrome създава, като преминете към chrome: // accessibility.
  • Най-добрият начин за тестване за поддръжка на четец на екрани на Mac е използването на помощната програма VoiceOver. Можете да използвате ⌘F5, за да активирате / деактивирате, Ctrl + Option ← →, за да се придвижите през страницата и Ctrl + Shift + Option + ↑ ↓, за да се движите нагоре / надолу. За по-подробни инструкции вижте пълния списък на VoiceOver команди и списъка на VoiceOver Web команди.
  • tota11y е полезен визуализатор за проблеми с помощните технологии, изградени от Академия Хан. Това е скрипт, който добавя бутон към вашия документ, който задейства няколко приставки за анотиране на неща като недостатъчно съотношение на контраст и други a11y нарушения
  • ally.js (от Родни Рем) е библиотека, която се опитва да опрости добавянето на няколко функции за достъпност към приложението ви. Той помага да се запитва DOM за всички фокусируеми или разделими елементи, улавя фокуса към специфични DOM под-дървета, помага да се определи как фокусът се е променил и идва с няколко други помощници.
  • В Windows NVDA е безплатен четец на екрани с отворен код, който е напълно представен и бързо набира популярност. Имайте предвид обаче, че той има много по-стръмна крива на обучение за зрящите потребители, отколкото VoiceOver.
  • ChromeLens помага да се развие за хора със зрителни увреждания. Освен това има страхотна поддръжка за визуализиране на навигационни пътеки за клавиатура http://chromelens.xyz/
Разширение за ChromeLens DevTools, с множество опции за емулиране на различни форми на слепота, проследяване на раздели и одит на достъпността.
  • ChromeVox е четец на екрана, който се предлага като разширение за Chrome и е вграден в устройства с ChromeOS.

Забележка: Големите благодарности отиват на Алис Бокхол и Роб Додсън за съдействието на статията.

PS: Ако се интересувате да научите повече, можете да научите за основите на достъпността в този безплатен курс Udacity https://bit.ly/web-a11y