Контрольний список веб-доступності

Доступність – це практика забезпечення того, щоб веб-сайти були однаково доступними для людей з обмеженими можливостями, щоб вони мали рівний доступ до товарів і послуг, які вони надають. Це невід’ємна частина професійного веб-дизайну та розробки.


Contents

Чому вам слід піклуватися Доступність?

Існує багато причин, чому розробники, дизайнери та їх роботодавці / клієнти повинні гарантувати, що доступність є ранньою та невід’ємною частиною процесу веб-розробки..

  • На багатьох територіях, таких як США, ЄС, Великобританія, Ізраїль та Японія, законодавчо вимагається не дискримінувати людей через їх інвалідність. У США минулого року, Було подано 2235 нових позовів на веб-сайт ADA у федеральному суді. Це одна на годину.
  • Доступні веб-сайти, як правило, краще кодуються, надійніші та добре входять у пошукові системи.
  • Як правило, доступні сайти більш зручна для відвідувачів, які не мають інвалідів, що веде до більшої задоволеності та конверсії.
  • Недоступні сайти погані для бізнесу. У 2019 році а Опитування Великобританії з’ясували, що понад 4 мільйони людей відмовилися від веб-сайту роздрібної торгівлі через встановлені ними бар’єри для доступу. Цей втрачений бізнес, “фунт за клік”, становив 17,1 мільярда фунтів стерлінгів. Це млрд. Тільки у Великобританії.
  • Це поганий бізнес – добровільно відвертати потенційних клієнтів.

Загальні стандарти та проблеми

На щастя, W3C (орган, який виробляє багато стандартів, на які спирається Інтернет), має стандарт про те, як зробити веб-сайти доступними. Це називається Правила доступу до веб-вмісту (WCAG). Існують три рівні відповідності (A, AA, AAA), а “A” – найнижчий рівень доступності. Я рекомендую орієнтуватися на рівень АА.

На жаль, WCAG – це довге, сухе і дуже технічне зчитування, тому давайте подивимось, що можна зробити порівняно легко, і отримаємо найбільший удар за свій долар. Це не все, що потрібно знати; це контрольний список найпоширеніших помилок, а помилки, про які кажуть люди з обмеженими можливостями, є їх основними блокувальниками, з практичними пропозиціями щодо вирішення проблем. Усі зовнішні посилання відкриваються в новій вкладці.

У опитуванні “Click-Away Pound” респондентів з обмеженими можливостями запитали, які основні блоки для них здійснюють покупки. Ось основні бар’єри (дозволено кілька відповідей):

  1. Переповнені сторінки із занадто великим вмістом – 66%
  2. тести reCAPTCHA – 59%
  3. Погана розбірливість (контрастність, макет тексту) 56%
  4. Відволікання рухомих зображень та графіки – 53%
  5. Погана інформація про посилання – 59% (77% для користувачів зчитувачів екрану)
  6. Заповнення форми 56%

Як поліпшити доступність веб-сайтів

По-перше, зауважте, що жоден з перших 5 не є технічними проблемами – це помилки в дизайні чи копірайтері.

1) Занадто багато вмісту

Якщо коротко: розбийте текст на розділи із заголовками та маркованими списками. Використовуйте просту мову.

Загальновідомо, що із збільшенням кількості варіантів зростає і кількість зусилля, необхідні для збору інформації і приймати хороші рішення. Це те саме з занадто великим вмістом – воно скоро стає непосильним. Розбір вмісту до основного – це трудомістке ремесло; як писав Марк Твен (нібито): “Я не встиг написати короткий лист, тож натомість написав довгий”.

Недавня книга Написання – це проектування пропонує

Люди хочуть мати можливість прокручувати довгі текстові блоки незалежно від зору чи звуку, тому вкрай важливо структурувати письмовий текст із заголовками, короткими абзацами та іншими найкращими методами дизайну вмісту.

Тому:

  • Майте лише одну

    на сторінці.

  • Використовуйте підзаголовки вільно; він розбиває “плитку” тексту для прозорливих користувачів, тоді як користувачі допоміжних технологій, таких як зчитувачі екрана, можуть використовувати клавішу швидкого доступу для переходу між заголовками або отримання ментальної карти вмісту із структури заголовка..
  • Не пропускайте рівень заголовків. Наприклад, якщо ви використовуєте

    , переконайтесь, що їй передує а

    .

  • Використовуйте марковані списки (як це!), Позначені правильно в HTML як
      ,
    • . Читачі екрану оголосять “Список 10 предметів” (і дозволять користувачу перестрибувати їх).

    Використовуйте звичайну англійську

    Банк Монцо Посібник «Наш тон голосу» пояснює важливість простої мови:

    У 2010 році адвокат США Шон Фламмер провів експеримент. Він попросив 800 суддів окружних судів сторони або традиційного “легального” аргументу, або того, що він називав “простим англійським”.

    Судді в основному віддавали перевагу звичайній англійській версії (66% до 34%), і ця перевага дотримувалася незалежно від їх віку та походження.

    Фламерові ноти (PDF) простої англійської версії:

    Він коротший майже на сторінці, тому він, очевидно, виключає непотрібні речення та слова. Його речення в середньому становить 17,8 слів на відміну від 25,2 слів.

    Він робить висновок:

    Зараз у нас є 25 років емпіричного дослідження, що призводить до неминучого висновку: якщо ви хочете порадувати і переконати свого читача, пишіть простою англійською мовою.

    2) ReCAPTCHA

    Коротше кажучи: не змушуйте своїх користувачів стрибати через потенційно неможливі обручі, щоб заощадити час розробника.

    Респонденти часто говорили про старе Версія ReCAPTCHA:

    версії reCAPTCHA з хитним текстом, який потрібно повторно ввести

    Я боюся з образами і маю набрати цифри чи букви. У тому випадку, коли мені доводиться клацати, які зображення мають магазин чи інше, я завжди сумую за деякими або плутаюсь та використовую енергію, якої у мене немає …

    Стиль коливаються літер reCAPTCHA тепер застарілий. Набагато частіше бачити нове втілення, яке називається “No CAPTCHA reCAPTCHA” (також відоме як “Я не робот »), що вимагає від користувача встановити прапорець, що підтверджує, що він не робот, і який використовує таємне вуду, щоб оцінити користувача. Якщо вони пройдуть, більше ніякої взаємодії не потрібно. Однак, якщо вони не вдаються, буде показано подальше завдання:

    Частковий скріншот капчу, що вимагає, щоб користувач натискав усі квадрати, де відображаються апельсини

    Майте на увазі, що тип CAPTCHA, який вимагає від користувача натискання всіх квадратів (скажімо), вуличний знак не обов’язково є міжнародним. Як пише Теренс Іден, CAPTCHA не свідчать про те, що ти людина – вони американці.

    Найдоступнішою формою reCAPTCHA є reCAPTCHA v3 яка не вимагає взаємодії з користувачем, але вам потрібно зробити більше роботи, щоб вирішити питання про відвідування, які не завершили тест:

    Це чистий JavaScript API, що повертає бал, що дає вам можливість вживати заходів у контексті вашого веб-сайту: наприклад, вимагати додаткових факторів аутентифікації, надсилати повідомлення в модерацію або перемикання ботів, які можуть скребкувати вміст.

    3) Погана розбірливість

    Якщо коротко: переконайтеся, що текст має адекватний контраст, читабельний і не виправданий.

    • Забезпечте адекватний контраст. Один з найпоширеніших блокаторів доступу в Інтернеті – поганий контраст між текстом і фоном. Вказівки щодо W3C вимагають співвідношення контрастності принаймні 4,5: 1, за винятком масштабного тексту та зображень великомасштабного тексту, які повинні мати коефіцієнт контрасту принаймні 3: 1 (логотипи та “випадковий” текст виключені). Є багато утиліт, які можуть вимірювати коефіцієнти контрасту для вас; мій особистий фаворит – це прекрасна Ада Роуз Кеннон контрастний віджет, яка є корисною закладкою браузера, яка виділяє області недостатньої контрастності на вашій сторінці.
    • Не мають заголовків капіталу. Є докази того, що їх важче читати, оскільки великі літери мають однакову висоту, тому ми не можемо розпізнати форму поширених слів. Крім того, деякі читачі екрана будуть писати групи великих літер так, як якщо б вони були абревіатурами (наприклад, BBC, DOJ тощо). Якщо у вас повинні бути всі заголовки капіталу, запишіть їх у звичайному випадку у свій HTML та перетворіть їх у CSS перетворення тексту: великі літери.
    • Вирівняти текст зліва. (Для сторінок мовами праворуч ліворуч, як арабська чи іврит, текст вирівнювання праворуч.) Не виправдовуйте це, оскільки це ускладнює читання людям з дислексією. The Посібник зі стилів Британської асоціації дислексії також пропонує

      Використовуйте шрифти без засічок, такі як Arial та Comic Sans, оскільки літери можуть здаватися менш переповненими. Альтернативи включають Verdana, Tahoma, Century Gothic, Trebuchet, Calibri, Open Sans.

    4) Відволікаючі зображення та графіки

    Якщо коротко: дозволити користувачам зупиняти будь-який рух; поважати їхні налаштування операційної системи; не відтворюйте відео автоматично.

    Один респондент опитування “Click-Away Pound” написав,

    Сайти, якими я користувався з невеликою кількістю випусків, тепер стають проблемою, оскільки зараз вони починають рухатись і постійно завантажують більше рекламних оголошень під час покупки..

    Самий базовий рівень WCAG вимагає “Для будь-якої інформації про переміщення, миготіння або прокручування, яка (1) починається автоматично, (2) триває більше п’яти секунд, і (3) подається паралельно з іншим вмістом, існує механізм для користувач призупиняє, зупиняє або приховує його, якщо рух, миготіння або прокручування не є частиною діяльності, де це важливо “.

    Відволікання викликає роздратування – особливо для людей із СДУГ чи іншими когнітивними порушеннями. Але рух і миготіння також можуть спричинити судоми, тому вказівки WCAG вимагають, щоб вміст не спалахував більше 3 разів протягом 1 секунди.

    Поважайте вибір користувача для анімації

    Усі основні операційні системи дозволяють користувачеві висловлювати перевагу зменшеному руху на екрані – можливо, тому, що у них порушений рух вестибулярного спектру. Ваш веб-сайт може визначити, чи зробив це користувач із CSS вважає за краще зменшений рух медіа-запит.

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

    @media (вважає за краще зменшений рух: без переваги) {
    кнопка {
    / * `вібрувати 'ключові кадри визначені в інших місцях * /
    анімація: вібрація лінійних нескінченних вікон 0,3 секунди;
    }
    }

    Якщо ви хочете оновити сайт, який містить багато правил анімації, можливо, наступне зупинити всі раніше оголошені анімації CSS:

    @media (вважає за краще зменшений рух: зменшити) {
    *,
    * :: раніше,
    * :: після {
    тривалість анімації: важливо 0,001s;
    тривалість переходу: 0,001s! важливо;
    }
    }

    Що стосується дотримання переваг операційної системи користувача, ви можете розглянути розробка веб-сайту для темного режиму.

    5) Погана інформація про посилання

    Якщо коротко: зробіть посилання ідентифікованими, з унікальним текстом посилання. Попередити користувачів, якщо посилання відкриє нову вкладку чи файл.

    Однією з основних причин поганих посилань часто є погана копірайтинг. Більшість зчитувачів екрану дозволяють користувачеві швидко переглядати список посилань на сторінці (у найбільш використовуваному комерційному читальному екрані – JAWS, клавіатурне скорочення – Ins + F7; в безкоштовний зчитувач екрану NVDA, той самий ярлик клавіатури відображає список елементів, у якому перераховані посилання на сторінки, заголовки та орієнтири).

    Однак якщо на кожному посиланні є текст, що говорить “Натисніть тут” або “Детальніше”, і нічого іншого їх не можна відрізняти, це марно. Найпростіший спосіб вирішити це – просто написати унікальний текст посилання, але якщо це неможливо, ви можете перекрити текст посилання для допоміжної технології, використовуючи унікальний атрибут aria-label на кожному посиланні.

    Ось хороший приклад з Веб-сайт Joomla:

    Веб-сайт Joomla, що показує дві різні історії, кожна з яких однакова

    Видимий текст посилання просто “читати більше”, але Joomla використовує aria-label атрибути, щоб зробити кожен унікальним для допоміжної технології:

    Детальніше
    
    Детальніше

    Через aria-label текст буде використовуватися замість тексту посилання допоміжними технологіями, W3C рекомендує починати текст, який використовується в арії-етикетці, з текстом, який використовується у посиланні, оскільки “це дозволить послідовно спілкуватися між користувачами”.

    Примітка: Деякі погані поради, які я все ще бачу на старих сайтах, – це додавати пояснювальний текст до посилань за допомогою назва атрибут:

    Детальніше>

    Не робіть цього. The назва не піддається більшості читачів екрану (розробники використовували для наповнення його ключовими словами для “SEO” цілей, тому постачальники зчитувачів екрана відключили його за замовчуванням), а браузери представляють атрибути заголовка як “підказки”, які доступні лише користувачам миші на наведення курсору.

    Посилання повинні виглядати як посилання

    За замовчуванням браузери підкреслюють посилання. Краще цього не змінювати, але якщо ви програєте бійку на автостоянці з дизайнером з цього приводу, текст посилання повинен мати коефіцієнт контрастності 3: 1 від навколишнього тексту, що не пов’язує посилання, і повинен дати деяку кольорову позначку “Що вони є ланкою при наближенні або фокусуванні, наприклад:

    a: навести курсор, a: фокус {текст-прикраса: підкреслити;}

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

    “Некольоровий позначувач” (у нашому випадку підкреслення) гарантує, що відвідувачі зі слабким зором або дальтонізмом побачать зміну на курсор або фокус. (Зчитувачі екрану автоматично оголошують “Посилання” перед текстом посилання.)

    Повідомте людям, якщо посилання відкриє нову вкладку / сторінку

    Це може заплутати відвідувача, якщо активація посилання відкриває нову вкладку або нове вікно, особливо якщо це роблять лише деякі посилання на сторінці (наприклад, лише нові зовнішні посилання відкривають нову вкладку). Якщо ви повинні це зробити, ви повинні попередити користувача або в тексті посилання, або використовуючи метод aria-label вище.

    Повідомте людям, якщо посилання на файл

    Якщо посилання на файл (наприклад, PDF або відео), повідомте користувача у тексті посилання. Не ховай його aria-label, оскільки це може бути корисно для багатьох прозорливих користувачів (наприклад, деякі мобільні телефони не можуть відкрити .docx-файл). Якщо це великий файл, розгляньте попередження користувача про приблизний розмір; вони можуть не бажати завантажувати великий відеофайл понад 3G.

    Ви також можете використовувати завантажити атрибут, який змушує браузер відкрити діалог завантаження нативного файлу операційної системи. Збираючи це все разом, код буде виглядати приблизно так:

    Річний звіт (PDF, 240 МБ)

    6) Ще одна помилка дизайну: видалення фокусного кільця

    Якщо коротко: переконайтеся, що користувач клавіатури завжди може бачити, куди вони зосереджені.

    Ми вже згадували : фокус стилі раніше. Вони є неоціненним візуальним індикатором для тих людей, які не можуть користуватися мишею з будь-якої причини: можливо, у них є RSI, Паркінсона або розсіяний склероз. За замовчуванням у веб-переглядачах відображається кільце фокусування на елемент, орієнтований на даний момент. Ось домашня посилання на моєму особистому веб-сайті, зосереджена у веб-переглядачі Chromium:

    Знімок екрана фокусного кільця Chromium за замовчуванням навколо посилання (що також є зображенням)

    Однак деякі вважають це естетично неприємним, коли користуються мишкою, і вимикають його за допомогою CSS, тим самим залишаючи сайт недоступним для користувачів клавіатури.

    Введіть новий стандарт, піонерський Firefox, який називається : фокус видимий. Це застосує кільце фокусування до елемента, якщо воно було досягнуто клавіатурою або не вказуючим мишею пристроєм, але нічого не показує користувачам миші. Оскільки він підтримується лише у Firefox (під час написання), Патрік Лоук пропонує наступний CSS, щоб гарно грати з усіма браузерами:

    кнопка: фокус {/ * деякі захоплюючі стилі фокусування кнопок * /}
    кнопка: фокус: не (: фокус видимий) {
    / * скасувати всі вищезгадані стилі кнопок
    якщо кнопка має фокус, але браузер зазвичай не працює
    показати стилі фокусування за замовчуванням * /
    }
    кнопка: фокус видимий {/ * деякі навіть * більше * захоплюючі стилі фокусування кнопки * /}

    7) Заповнення форми

    Коротше кажучи: дизайнерські поля форм, схожі на поля форми, кожне пов’язане з міткою. Не вимикайте автоматичне заповнення.

    Враховуючи життєво важливе значення форм для сайтів електронної комерції, мене дивує, скільки недоступних форм я бачу. Часто це відбувається через те, що старі веб-переглядачі не дозволяли багато в чому стилізувати елементи форми, тому розробники підробляли їх іншими елементами HTML. Сучасні браузери дозволяють привабливі прапорці, радіо кнопки, користувальницькі компоненти та комбінації, доступні елементи автоматичного заповнення і більше.

    Автозаповнення – ваш друг

    Якщо дозволити веб-переглядачам автоматично заповнювати форми, відвідувачі повинні робити менше, тому вони мають більший шанс заповнити форму та зареєструватися / придбати ваш продукт. Автозаповнення у браузерах: глибоке занурення чудова стаття eBay про це (і вони повинні знати).

    Також автозаповнення є єдиною в даний час достатньою технікою для досягнення відповідності АА Критерій успіху 1.3.5: Визначення мети введення.

    Зробіть, щоб поля форм виглядали як поля форм

    За замовчуванням браузери відображають поля введення у вигляді полів. У будь-якому випадку, стилі їх розміщуйте з полями, прокладками та бордюрами, але зберігайте їх як коробочки. Багато дизайнерів дотримувались моделі Google Material Design до 2017 року, використовуючи один рядок, щоб користувач вводив текст:

    Старий матеріал дизайну, з горизонтальною лінією, а не прямокутною коробкою

    Однак Google виявив, що рядки під старими текстовими полями для деяких користувачів не зрозумілі, їх часто плутають з роздільником і змінили дизайн. В тест на зручність з 600 учасниками вони виявили це

    вкладені текстові поля прямокутної форми (прямокутної форми) виконуються краще, ніж ті, що мають лінійку… Сьогодні ці нові текстові поля відображаються на продуктах Google із сторінок входу в облікові записи до форм Google.

    Якщо ви розглядаєте можливість прийняти повну бібліотеку інтерфейсу користувача Material Design, прочитайте Перестаньте використовувати текстові поля “Дизайн матеріалу”! Мацуко Фрідленд, щоб побачити, чи відповідає він вашим потребам.

    Позначте всі поля форм

    Усі поля форми (текстові введення, прапорці, радіо кнопки, повзунки тощо) повинні бути марковані. Найкращий спосіб зробити це – використовувати HTML ; як каже WCAG, “стандартні елементи керування HTML вже відповідають цьому критерію успіху при використанні відповідно до специфікації”.

    Ось демонстрація, яку я створив незазначене поле форми проти міченого поля форми. Вони виглядають однаково, але верхній не має належної етикетки, тоді як другий. Клацніть на текстовій мітці нижньої, і ви побачите, що вона фокусується на відповідному введенні.

    підробка порівняно з реальним порівнянням етикетки

    Це робить фокусування входу набагато простішим для тих, хто має труднощі з управлінням двигуном – а може, і для вас, намагаючись встановити крихітний прапорець на маленькому екрані в кумедному поїзді. Це також важливо для користувачів зчитувачів екрана, які будуть розміщувати поля у формі (за замовчуванням, лише посилання та поля форми фокусуються за допомогою вкладок); коли вони вкладають у поле введення, екран зчитування повідомляє про вміст пов’язаної мітки.

    Код для цього простий. Поле введення надається унікальний ідентифікатор, а мітка пов’язана з ним за допомогою для атрибут:

    
    

    Приховування міток

    Іноді ви не можете бачити видиму етикетку. Або дизайнер не хоче, і вам не хочеться чергової бійки на автостоянці. У будь-якому випадку, ось приклад, коли мітка із надписом “Пошук” перед входом відчуває себе як надмірна кількість.

    Поле введення, після чого кнопка з написом

    Ми можемо пов’язати поле введення з текстом “Пошук”, який є вмістом кнопки подання за допомогою aria-labelledby:

    
    

    Ми могли використати aria-label (з яким ми зустрічалися раніше, коли говорили про посилання):


    Але завжди краще віддати перевагу видимому тексту на сторінці, оскільки це буде перекладено, якщо сторінка буде запущена через інструмент перекладу, тоді як текст “прихований” у атрибутах HTML не буде. (Капелюх Адріану Розеллі за цією порадою, з його чудової статті Мій пріоритет методів маркування контролю.)

    Найпоширеніші помилки на головних мільйонах головних сторінок

    Ми розглянули основні бар’єри на веб-сайтах електронної комерції, як повідомляють користувачі з деякими формами порушення. Тепер розглянемо значно ширший набір сайтів – домашні сторінки для найпопулярніших 1 000 000 веб-сайтів, автоматично аналізується WebAIM у серпні 2019 р. 98% проаналізованих сторінок мали хоча б одну помилку. Найбільш поширені помилки

    1. Текст із низькою контрастністю (86,1%)
    2. Відсутній альтернативний текст для зображень (67,9%)
    3. Порожні посилання (58,9%)
    4. Мітки введення форми відсутні (53,2%)
    5. Відсутня мова документа (30,5%)

    Ми зверху мали справу з низькою контрастністю, посиланнями та введеннями форм. Тепер давайте розглянемо, як ми можемо уникнути інших дуже поширених помилок.

    8) Надайте текстові альтернативи для всіх зображень, відео та аудіо

    Якщо коротко: будь-яка інформація, передана через зображення чи відео, повинна мати текстовий еквівалент.

    Кожен повинен мати альтернативний текст (“alt text”), який можна повідомляти відвідувачам із порушеннями зору або тим, хто має низьку пропускну здатність / дорогі плани даних, які вимкнули зображення у своїх браузерах. Сюди входять зображення тексту.

    Ось основні правила:

    • Якщо зображення є чисто декоративним, воно повинно містити порожній текст alt: alt = "". (Але, суто, декоративні зображення, мабуть, повинні бути у CSS, все одно.)
    • Якщо зображення описане в тексті тіла, воно повинно мати порожній текст alt (alt = ""), щоб уникнути повторення. Але будьте обережні, якщо це в
      – подивитися Як ти розумієш? для більш.
    • Якщо зображення є єдиним вмістом посилання (наприклад, логотип вашої організації можна натиснути, щоб перейти на домашню сторінку), альтернативний текст повинен описувати призначення посилання. Наприклад, alt = "домашня сторінка".
    • Не використовуйте шрифти значків; вони можуть бути по-справжньому поганими для людей з дислексією. Якщо ви все-таки використовуєте їх, конвертувати їх у SVG.

    Відео та аудіо альтернативний текст

    Не забувайте, що аудіовміст потребує альтернативного тексту для людей з вадами слуху. Це означає стенограми подкастів та субтитрів на відео. І знову: не використовуйте мультимедійні засоби для автоматичного відтворення.

    9) Додати належну мову документа

    Якщо коротко: дозвольте допоміжної технології знати мову, якою є ваш текст.

    30% домашніх сторінок не декларують мову, якою вони написані, що може зробити їх заплутаними для користувачів читачів екрану. Це важливо, оскільки слово “шість” вимовляється дуже по-різному, якщо, наприклад, речення є англійською чи французькою мовами.

    Це легко вирішити, додавши атрибут lang до свого елемента HTML:

    “En” повідомляє читачеві екрану (або програмного забезпечення для перекладу), що ця сторінка є англійською мовою. “Es” – іспанська, “fr” – французька тощо. Для більшості мов мовний тег визначити досить просто. W3C має керівництво по Вибір мовної теги.

    Якщо сторінка містить вміст мовою, відмінною від основної заявленої, додайте атрибут мови до елемента, що оточує цей вміст. Наприклад, на сторінці, оголошеній англійською мовою:

    Якщо ви хочете поговорити матадор, в якомусь круто кабана
    І зустрітися сеньорітас за рахунком, Espana por favor

    10) Допоможіть відвідувачеві обійти ваш вміст

    Якщо коротко: використовуйте елементи орієнтиру HTML, щоб допомогти користувачам допоміжних технологій зрозуміти та перейти до вашого вмісту.

    Коли побачив відвідувач на вашу сторінку, він може легко візуально сканувати її, щоб зрозуміти, де знаходиться навігація та де починається основний контент. Користувач екранного зчитувача не може цього зробити. Однак HTML5 дає нам нові теги для позначення цих областей, а допоміжні технології мають ярлики, які можуть переходити до (або пропускати) орієнтири, наприклад заголовок, колонтитул, навігація тощо.

    Ось шестихвилинне відео, яке я зробив із Леоні Уотсон, веб-розробником та користувачем зчитування екрана, про те, як вона використовує свій читач екранів для вивчення цих семантик для навігації по моєму особистому сайту:

    • Оберніть основний вміст, тобто речі, які не є заголовком, основною навігацією або колонтитулом, у
      елемент. Майже у всіх випадках має бути лише один
      на сторінку. Усі браузери (IE9 +) дозволяють вам стилізувати його, а допоміжні технології знають, що з цим робити.
    • Загорніть заголовок (логотип торгової марки, смужка лінії, заголовок сторінки) в а
      елемент.
    • Оберніть нижній колонтитул (юридичні речі, контактні дані, повідомлення про авторські права тощо) в а
    • Позначте основну навігацію за допомогою
        загорнутий у елемент. Це може бути вкладено всередині
        якщо це відповідає візуальному дизайну сторінки.
      • Рекламний та несуттєвий вміст має бути обгорнуто в
      • Якщо у вас на сторінці є більше одного продукту / відео / новини / публікації блогу, загортайте їх у один
        елемент.

      У своєму опитування користувачів екранного зчитувача, WebAIM встановив, що 26% користувачів читачів екрана часто або завжди використовують ці орієнтири під час навігації по сторінці.

      Крім того, загортаючи дискретні фрагменти вмісту

      допомагає Apple WatchOS відображати вміст оптимально. Дивіться мою статтю Практичне значення семантичного HTML детальніше про це.

      11) Використовуйте HTML належним чином

      Якщо коротко: зрозуміти семантику та поведінку за замовчуванням елементів HTML; використовувати правильний елемент для свого вмісту.

      Поширеною темою у цій статті є використання правильних елементів HTML. Використання a етикетка має вбудовану поведінку браузера, яка фокусує його пов’язане поле введення; використовуючи

      є кращим

      тому що дозволяє користувачам зчитувачів екрана переходити прямо до важливого контенту, при цьому він є абсолютно ненав’язливим для тих, хто не використовує зчитувач екрана.

      Іншим прикладом є використання

      Like this post? Please share to your friends:
Adblock
detector
map