Це третя публікація з невеликої серії, яку ми публікуємо про доступність форм. Якщо ви пропустили 3-й пост, перегляньте Керування фокусом користувача за допомогою :focus-visible. У цій публікації ми розглянемо використання програми зчитування з екрана під час навігації формою, а також деякі практичні поради.

Що таке програма зчитування з екрана?

Пересуваючись Інтернетом, ви, можливо, чули термін «зчитувач з екрана». Можливо, зараз ви навіть використовуєте програму зчитування з екрана, щоб вручну перевірити доступність створюваного вами досвіду. Програма зчитування з екрана – це різновид AT або допоміжної технології.

Програма зчитування з екрана перетворює цифровий текст на синтезоване мовлення або виведення шрифтом Брайля, що зазвичай можна побачити з зчитувачем Брайля.

У цьому прикладі я буду використовувати Mac VO. Mac VO (VoiceOver) вбудовано в усі пристрої Mac; Системи iOS, iPadOS і macOS. Залежно від типу пристрою, на якому ви використовуєте macOS, відкриття VO може відрізнятися. Macbook Pro, який працює під керуванням VO, на якому я пишу це, не має сенсорної панелі, тому я використовуватиму комбінації клавіш відповідно до апаратного забезпечення.

Spinning Up VO на macOS

Якщо ви використовуєте оновлений Macbook Pro, клавіатура на вашому комп’ютері виглядатиме приблизно так, як показано на зображенні нижче.

Ви почнете, утримуючи кнопку cmd і тричі швидко натиснути Touch ID.

Якщо ви використовуєте MBP (MacBook Pro) із сенсорною панеллю, ви скористаєтеся ярликом cmd+fn+f5 щоб увімкнути VO. Якщо ви використовуєте традиційну клавіатуру зі своїм настільним комп’ютером або ноутбуком, клавіші мають бути однаковими, інакше вам доведеться ввімкнути VO в налаштуваннях доступності. Коли VO увімкнено, вас вітатиме це діалогове вікно разом із голосовим написом вступ до ВО.

Якщо ви натиснете кнопку «Використовувати VoiceOver», ви вже на шляху до використання VO для тестування своїх веб-сайтів і програм. Слід пам’ятати, що VO оптимізовано для використання з Safari. З огляду на це, під час тестування програми зчитування з екрана переконайтеся, що браузером, який ви використовуєте, є Safari. Це також стосується iPhone та iPad.

Є два основні способи використання VO з самого початку. Особисто я використовую це, переходячи на веб-сайт і використовуючи комбінацію tab, control, option, shift і клавіші зі стрілками, я можу ефективно переміщатися по досвіду лише за допомогою цих клавіш.

Іншим поширеним способом навігації є використання VoiceOver Ротор. Ротор — це функція, призначена для навігації безпосередньо до місця, де ви хочете бути. Використовуючи Rotor, вам не доведеться проходити весь сайт, сприймайте це як «Виберіть власну пригоду».

Множник Ключі

Клавіші-модифікатори – це спосіб використання різних функцій у VO. Типова клавіша-модифікатор або VO is control + option але ви можете змінити його на Caps Lock або вибрати обидва параметри для використання як взаємозамінні.

Використання ротора

Щоб використовувати Ротор, ви повинні використовувати комбінацію клавіш-модифікаторів і літери «U». Для мене мій ключ-модифікатор caps lock. Я натискаю caps lock + U і ротор обертається для мене. Коли з’явиться ротор, я можу перейти до будь-якої частини, яку хочу, за допомогою стрілок ліворуч і праворуч.

[Вбудоване вміст]

Навігація за рівнем заголовка

Ще один зручний спосіб орієнтуватися в досвіді – за рівнем заголовка. Якщо ви використовуєте комбінацію ваших клавіш-модифікаторів + cmd + H ви можете переглядати структуру документа на основі рівнів заголовків. Ви також можете повернутися до документа, натиснувши shift у такій послідовності, клавіші-модифікатори + shift + cmd + H.

[Вбудоване вміст]

Історія та найкращі практики

Форми — це один із найпотужніших нативних елементів HTML. Незалежно від того, чи шукаєте ви щось на сторінці, надсилаєте форму для покупки або надсилаєте опитування. Форми є наріжним каменем Інтернету та були каталізатором, який привніс інтерактивність у наш досвід.

Історія веб-форми починається з вересня 1995 року, коли вона була представлена ​​в Специфікація HTML 2.0. Дехто каже, що в Інтернеті були старі добрі дні, принаймні я так кажу. Стефані Стімак написала чудову статтю про Smashing Magazine під назвою "Стандартизація Select And Beyond: минуле, сьогодення та майбутнє нативних елементів керування формами HTML".

Нижче наведено 5 найкращих порад, яких слід дотримуватися під час створення доступної форми для Інтернету.

1. Переконайтеся, що ви використовуєте елемент форми. Форми доступні за замовчуванням і повинні завжди використовуватися замість div.

<form>
  <!-- Form controls are nested here. -->
</form>

2. Обов’язково використовуйте for та id атрибути на labelі с inputтак, щоб вони були пов’язані. Таким чином, якщо ви клацнете/торкнетеся мітки, фокус переміститься до введення, і ви зможете почати вводити текст.

<label for="name">Name:</label>
<input type="text" id="name" name="name" required aria-required/>

3. Якщо поле є обов’язковим для того, щоб форма була заповненою, використовуйте обов’язковий атрибут і необхідний атрибут арії. Це обмежить надсилання форми. Атрибут aria-required явно повідомляє допоміжній техніці, що поле є обов’язковим.

<input type="text" id="name" name="name" required aria-required/>

4. Використовувати, :focus, :focus-within та :focus-visible Псевдокласи CSS для керування та налаштування того, як користувач отримує фокус.

form:focus-within {
 background-color: #cfffcf;
}

input:focus-within {
 border: 10px solid #000000;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
 outline: 2px solid crimson;
 border-radius: 3px;
}

5. A button використовується для виклику дії, як-от надсилання форми. Використай це! Не створюйте кнопки за допомогою div's. А div за визначенням є роздільником. Він не має властивостей доступності.

Демонстрація

[Вбудоване вміст]

Якщо ви хочете перевірити код, перейдіть до VoiceOver Demo GitHub repo. Якщо ви хочете спробувати наведену вище демонстрацію за допомогою програми зчитування з екрана, яку ви вибрали, перевірте Навігація веб-формою за допомогою VoiceOver.

Програмне забезпечення для зчитування екрана

Нижче наведено список різних типів програм зчитування з екрана, які можна використовувати у вашій операційній системі. Якщо Mac не є вашим вибором, є варіанти для Windows і Linux, а також для пристроїв Android.

NVDA

NVDA — програма зчитування з екрана від NV Access. Наразі він підтримується лише на комп’ютерах із Microsoft Windows 7 SP1 і пізніших версій. Щоб отримати більше доступу, перегляньте Сторінка завантаження NVDA версії 2024.1 на веб-сайті NV Access!

JAWS

«Нам потрібна краща програма для зчитування екрана»

- Анонімний

Якщо ви зрозуміли посилання вище, ви в хорошій компанії. Згідно з веб-сайтом JAWS, ось що це в двох словах:

«JAWS, Job Access With Speech, є найпопулярнішим у світі програмою зчитування з екрану, розробленим для користувачів комп’ютерів, чия втрата зору заважає їм бачити вміст екрана або навігацію за допомогою миші. JAWS забезпечує мовлення та виведення шрифтом Брайля для найпопулярніших комп’ютерних програм на вашому ПК. Ви зможете переміщатися в Інтернеті, писати документи, читати електронні листи та створювати презентації зі свого офісу, віддаленого робочого столу чи з дому».

Веб-сайт JAWS

Перевірте JAWS самі і якщо це рішення відповідає вашим потребам, обов’язково спробуйте!

Оповідач

Екранний диктор — це вбудоване рішення для зчитування з екрана, яке постачається з WIndows 11. Якщо ви вирішите використовувати його як програму зчитування з екрана, перейдіть за наведеним нижче посиланням, щоб отримати довідкову документацію щодо його використання.

Повний посібник з Оповідача

Orca

Orca — це програма зчитування з екрана, яку можна використовувати в різних дистрибутивах Linux під керуванням GNOME.

«Orca — це безкоштовна програма з відкритим вихідним кодом, гнучка та розширювана програма зчитування з екрана, яка надає доступ до графічного робочого столу через мовлення та оновлюваний шрифт Брайля.

Orca працює з програмами та наборами інструментів, які підтримують інтерфейс постачальника допоміжних технологій (AT-SPI), який є основною інфраструктурою допоміжних технологій для Linux і Solaris. Програми та набори інструментів, що підтримують AT-SPI, включають набір інструментів GNOME Gtk+, набір інструментів Swing платформи Java, LibreOffice, Gecko та WebKitGtk. Триває підтримка AT-SPI для набору інструментів KDE Qt».

Веб-сайт Orca

TalkBack

Google TalkBack – це програма зчитування з екрана, яка використовується на пристроях Android. Щоб отримати додаткові відомості про його ввімкнення та використання, перегляньте цю статтю на сайті підтримки спеціальних можливостей Android.

Підтримка браузера

Якщо вам потрібна фактична підтримка браузером елементів HTML і атрибутів ARIA (Accessible Rich Internet Application), я пропоную caniuse.com для HTML та Підтримка доступності для ARIA щоб отримати останню 4-1-1 щодо підтримки браузера. Пам’ятайте: якщо браузер не підтримує цю технологію, ймовірно, що програма зчитування з екрана також не підтримує.

DigitalA11Y можуть допомогти узагальнити інформацію про веб-переглядач і програму зчитування з екрана за допомогою своєї статті,  Програми зчитування екрана та браузери! Яка найкраща комбінація для перевірки доступності?

зв'язку

https://support.apple.com/guide/voiceover/with-the-voiceover-rotor-mchlp2719/mac

https://www.w3.org/TR/wai-aria/

https://www.w3.org/WAI/standards-guidelines/aria/

https://support.google.com/accessibility/android/answer/6283677?hl=en

https://support.google.com/accessibility/android/answer/6283677?hl=en

• Розповсюдження контенту та PR на основі SEO. Отримайте посилення сьогодні.
• PlatoData.Network Vertical Generative Ai. Додайте собі сили. Доступ тут.
• PlatoAiStream. Web3 Intelligence. Розширення знань. Доступ тут.
• ПлатонЕСГ. вуглець, CleanTech, Енергія, Навколишнє середовище, Сонячна, Поводження з відходами. Доступ тут.
• PlatoHealth. Розвідка про біотехнології та клінічні випробування. Доступ тут.
• джерело: https://css-tricks.com/demystifying-screen-readers-accessible-forms-best-practices/