2.4: Речі, за якими слід спостерігати
- Page ID
- 103585
Для Лулу та її команди важливо усвідомити, що бар'єри, які існують у їхньому веб-контенті, не обов'язково є унікальними, і що одна річ, яка спрощує роботу аудитора доступності Інтернету, полягає в тому, що існує відносно невелика кількість проблем, які виникають знову і знову. знову. Усвідомлення цих загальних бар'єрів означає, що часто можна швидко сканувати вміст та визначити більшість проблем доступності. Лулу та її веб-майстер повинні ознайомитися з наступним списком десяти потенційних бар'єрів, за якими слід спостерігати, і ви теж повинні! Це аж ніяк не повний список, але являє собою найпоширеніші проблеми доступності.
1. Зображення без текстового опису
Зображення без текстового опису будуть недоступні для тих, хто сліпий. Текстові описи зазвичай додаються за допомогою атрибута «alt» з елементом HTML img. Зверніть увагу, що довжина тексту alt повинна бути не більше 125 символів. Читачі з екрана зазвичай припиняють читати текст на цьому етапі. Якщо потрібен більш довгий опис, існує безліч способів подальшого опису зображення, або в навколишньому тексті, у підписі до малюнка, або за допомогою атрибута ARIA aria-describedby. ARIA буде розглянуто далі в розділі 8. У кожному випадку alt все одно використовуватиметься для надання короткого опису та посилання на довший опис в іншому місці.
Технічні: Використання атрибута alt для посилання на довший опис <img src=» abelincoln.jpg "alt="Abraham Lincoln at his desk, see description below»/>
На зображенні вище Авраам Лінкольн готує текст для проголошення про емансипацію. Кілька інших сидять навколо столу, консультуючись з Лінкольном щодо документа.
Зображення тексту також будуть недоступні для сліпих користувачів, а також потенційно недоступні для людей зі слабким зором, які можуть спробувати збільшити зображення, в результаті чого текст часто принижується до того, що він стає нечитабельним. Люди з обмеженими можливостями читання, які використовують програмне забезпечення для читання, також можуть мати проблеми з зображеннями тексту, оскільки вони не можуть бути прочитані програмним забезпеченням.
Бувають випадки, коли зображення носять строго декоративний характер або не містять корисної інформації. У таких випадках слід ще використовувати атрибут alt, але його значення залишають порожнім (тобто alt= "»). Це змушує програму читання з екрана ігнорувати зображення. Якщо порожній атрибут alt не включений, екранні читачі прочитають ім'я файлу зображення, що може заважати осмисленню навколишньої інформації, або залишити користувачеві екранної читалки цікаво, чи не вистачає їм чогось на зображенні.
2. Функціональні елементи, які працюють лише за допомогою миші
Люди, які є сліпими, навряд чи використовуватимуть мишу під час роботи з комп'ютером (хоча є такі, які роблять). Більшість покладаються виключно на клавіатуру для навігації по функціях сторінки. Будь-який елемент, який працює лише за допомогою миші, не буде доступний для сліпих користувачів. Люди з обмеженою рухливістю можуть покластися на клавіатуру. Люди зі слабким зором також можуть розраховувати на доступ до клавіатури. «Потужні користувачі» також, як правило, використовують клавіатуру для навігації більше, ніж середні користувачі. Юзабіліті буде впливати на всіх цих людей, коли доступ до клавіатури відсутній.
Малюнок: Елементи перетягування слід керувати за допомогою клавіатури або еквівалентної альтернативи
3. Текст, який виглядає як заголовок, але не є
Люди, які є сліпими і використовують програму читання з екрана для навігації по веб-вмісту, матимуть можливість в програмі читання з екрана перерахувати заголовки на сторінці, тому вони потенційно можуть перейти до будь-якого з цих заголовків і почати читати. Список заголовків також забезпечує хороший огляд вмісту на сторінці, що полегшує пошук конкретної інформації. Коли використовується «заголовок» презентації тексту (наприклад, роблячи текст жирним і великим), структура, надана відповідними заголовками, буде відсутньою, що вимагатиме від цих користувачів переміщатися по всій сторінці, щоб виявити її вміст. Це значно збільшує зусилля, необхідні для переміщення веб-контенту. Завжди переконайтеся, що належні заголовки HTML використовуються для представлення розділів сторінки замість стилізованого тексту.
Технічні: Використання належних заголовків:
Доступно:
<h1>Остання глава</h1>
Недоступні:
<p style="font-size:22pt; font-weight:bold;">Остання глава</p>
Так само заголовки не слід використовувати для стилізації великого жирного тексту, де текст не є заголовком або заголовком розділу. Це створює плутанину під час прослуховування списку заголовків за допомогою програми читання з екрана.
4. Посилання, які не описують призначення або функцію
Як і заголовки, екранні читачі можуть перераховувати всі посилання на сторінці, щоб зібрати резюме ресурсів, які ведуть з неї. Якщо список посилань складається з безглуздих фраз на кшталт «натисніть тут» або «це посилання» або «більше», користувачеві екранної програми надається мало корисної інформації або зовсім не надається. Для більшості користувачів такі безглузді посилання ускладнюють використання вмісту. Якщо ви можете побачити, уявіть, що ви стикаєтеся з цими посиланнями і повинні читати навколишній текст, щоб з'ясувати, куди веде посилання, або вам потрібно натиснути посилання, щоб виявити його призначення.
5. Списки, які виглядають як списки, але не є
Екранні читачі розпізнають належним чином відформатований список, використовуючи впорядковану або невпорядковану розмітку списку HTML (OL або UL), оголошуючи список та кількість елементів списку та вказуючи свою позицію в списку під час навігації по ньому. Ця інформація допомагає з пам'яттю і розумінням. Без належної розмітки списку часто потрібно більше зусиль, щоб осягнути список пунктів.
6. Відсутня навігація «всередині сторінки»
Ви вже ознайомилися з двома потенційними способами навігації по сторінках, використовуючи заголовки та посилання. Існує безліч інших способів переміщення по сторінках, наприклад, надання «обхідних посилань», часто створених для того, щоб користувачі допоміжних технологій могли пропускати повторювані елементи, такі як навігаційні меню, і перейти до якоря далі вниз по сторінці. ARIA орієнтири також можуть бути використані для цієї мети, призначаючи конкретні ролі елементам (наприклад, банер, навігація, головний), які можуть бути перераховані читачами екрана і безпосередньо стрибнув до (наприклад, <div role="main">... </div>). Без способів навігації по сторінці користувачам екранного читання може знадобитися послідовно переміщатися по вмісту від початку до кінця, щоб знайти інформацію, яку вони шукають, що вимагає багато зайвих зусиль.
7. Погана видимість, контраст або використання кольору самостійно
Забезпечення хорошого контрасту між текстом і фоном, на якому він з'являється, важливо з різних причин. Для тих, хто має низький зір, або для старших читачів текст може стати нечитабельним, якщо він погано контрастує з фоном. Використання зображення в якості фону також може бути проблематичним, особливо коли вміст змінює розмір і текст переміщається по різних відтінках темного і світлого, що ускладнює читання частини тексту.
Видимість індикатора фокусування курсора також важлива під час навігації за допомогою клавіатури. Хтось із слабким зором, у кого екран збільшений у кілька разів, може бути легше орієнтуватися за допомогою клавіатури, ніж мишею. Якщо вони не можуть побачити, де знаходиться фокус клавіатури, навігація клавіатурою стає важкою або непридатною для використання.
Як приклад, ви можете натрапити на функцію, яка використовує зелену кнопку запуску і червону кнопку зупинки. Деякі користувачі дальтоніків або ті, хто має низький зір, можуть не бути в змозі відрізнити кнопки. Додавання слів «Пуск» до зеленої кнопки та «Стоп» до червоної кнопки забезпечує додатковий індикатор на додаток до кольору.
8. Відео без підписів (або автоматичних підписів)
В даний час організації досить часто розміщують свої колекції відео за допомогою таких сервісів, як YouTube або Vimeo. Важливо, щоб будь-який змістовний розмовний діалог у відео був підписаний таким чином, щоб вміст звукової доріжки був доступний для тих, хто її не чує. Очевидно, це буде включати людей, які є глухими, але це також може включати людей, які дивляться відео в галасливому середовищі, або дивитися зі звуком вимкненим там, де тиша необхідна.
Тепер YouTube надає автоматичне субтитри. Він бере звукову доріжку з відео і використовує технологію розпізнавання голосу для перетворення звуку в текст. Це може бути зручною функцією для швидкого підпису відео, але виробники відео не повинні покладатися на автоматичні підписи, щоб надавати підписи для своїх відео. Рівень точності у багатьох випадках буде досить низьким, аж до того, що підписи не мають сенсу.
Автоматизовані підписи можуть використовуватися як відправна точка для заголовків, створених вручну, але не вважаються прийнятною альтернативою звуковій доріжці у відео для цілей доступності. Зараз доступні різноманітні безкоштовні інструменти, такі як редактор підписів YouTube або редактор підписів Amara, які дозволяють відносно легко створювати підписи.
Ось приклад того, що може статися з автоматичними підписами.
Відео: Коли автоматичне закрите субтитри YouTube йде не так
Елемент YouTube був виключений з цієї версії тексту. Ви можете переглянути його онлайн тут: https://pressbooks.library.ryerson.ca/pwaa/?p=1196
© Бібліотеки Макмастера. Випущено на умовах Стандартної ліцензії YouTube. Всі права захищені.
9. Інформація, яка оновлюється без перезавантаження сторінки
Сьогодні дуже часто частини веб-сторінок автоматично оновлюються новою інформацією, наприклад, новинними стрічками або каналами Twitter. Зчитувачі екрана зазвичай роблять статичний знімок веб-сторінки перед початком читання, тому будь-яка нова інформація, яка може бути додана на сторінку після завантаження, зазвичай залишатиметься непоміченою. Коли оновлений контент представлений на сайті, він повинен бути відформатований таким чином, щоб користувачі читачів з екрану були проінформовані про зміни.
На щастя, з появою ARIA надання оновлень екранним читалкам порівняно просто. Розробники повинні додати «живий регіон», де присутня інформація про оновлення, використовуючи атрибут «aria-live» в елементі, що містить інформацію про оновлення.
Жива область додана до div.
<div aria-live="polite">оновлення інформації йде тут</div>Зауважте, що значення aria-live визначає, коли буде оголошено вміст регіону. Значення «ввічливе» в прикладі означає, що оновлення оголошуються, коли програма читання з екрану не читає щось інше. Ви також можете використовувати значення «assertive», яке перериває читання з екрана для читання інформації про оновлення. Розробники також можуть додати арія-релевантні та арія-атомні атрибути, щоб визначити, що читається, коли оновлюється живий регіон: арія-релевантний набір на «доповнення» для нового вмісту, «видалення» для видалених елементів та «все», щоб оголосити обидва, та aria-atomic встановити на «false», щоб оголосити лише про зміни, або «true» оголосити живий регіон в цілому.
10. Таблиці, що представляють дані, які не мають заголовків рядків або стовпців
Під час навігації по таблицях, що містять дані за допомогою екранного зчитувача, користувачам екранного читання часто необхідно знати заголовки стовпців або рядків, щоб визначити значення даних у комірці даних таблиці, особливо для великих таблиць, де важко відстежувати місце розташування в таблиці. Щоб клітинки заголовків таблиці були доступні для читання з осередку даних (TD), вони повинні бути позначені як належну комірку заголовка таблиці (TH).
Для отримання більш детальної інформації та подальшого читання ви можете переглянути:
Читання та довідки:
✅ Повернутися до початку