Топ Поради Для Забезпечення Доступності Вашого Веб-сайту

Ще в 1970-х роках у звіті Всесвітньої організації охорони здоров’я було виявлено, що 10% населення світу живе з певними типами інвалідності. Те саме дослідження сьогодні показує, що кількість зростає до 15%.

  • 466 мільйонів людей із глухотою та втратою слуху.
  • 1,3 мільярда сліпих людей або із вадами зору.
  • 2-3% населення світу з когнітивними вадами.

Це деякі неприємні факти, які ніхто не хоче чути.

Оптимізація вашого сайту під різні екрани та електронні пристрої стала звичною практикою у створенні веб-сайтів. Це перший крок. Але ви можете зробити набагато більше!

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

 

Що таке веб-доступність?

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

Тоді все добре, кожна нова сторінка, яка знаходиться в Інтернеті, відповідає потребам такої великої аудиторії, так?

Ні!

Насправді колосальні 70% веб-сайтів не відповідають основним принципам, викладеним у Керівних принципах доступності веб-вмісту (WCAG). Чесно кажучи, ці стандарти були встановлені в лютому 2017 року, не так давно. Але це не повинно служити приводом для нехтування потребами людей, у яких є інвалідність.

Чому саме доступність веб-сайтів?

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

Ось хороша новина:

Оптимізація сторінки компанії для максимальної доступності не вимагає великих зусиль і приносить масу матеріальних та нематеріальних переваг, таких як:

  • Підвищення репутації вашого бренду
  • Покращення взаємодії з клієнтами
  • Розширення вашої частки ринку
  • Зниження юридичного ризику
  • Застосування інноваційних технологій

Ці можливості досить привабливі, щоб пройти повз них.

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

1. Виберіть платформу для створення сайтів, яка підтримує доступність

Швидкий розвиток систем з відкритим кодом забезпечив їх достатню універсальність, щоб відповідати інструкціям щодо веб-доступності. WordPress, як найпопулярніша система управління вмістом, (як не дивно) добре підготовлена ​​до цього завдання. Однак інші конкуренти на ринку, такі як Joomla та Drupal, також прекрасно справляються з роботою.

На відміну від них, популярні платформи із закритим кодом, такі як Squarespace та Blogger, пропонують значно менше з точки зору доступності. Розробники цих інструментів орієнтуються на зовсім іншу аудиторію, і оптимізація сторінок для людей з обмеженими можливостями знаходиться низько у їхньому списку пріоритетів.

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

WordPress співтовариство відіграє активну роль у розвитку та вдосконаленні WP доповнень. Як впровадити веб-доступність , для них важливе питання, і це, безумовно, демонструється усіма новими плагінами та темами, які добре підготовлені для цього завдання. У WordPress також працює окрема “Команда доступності”, яка допомагає розробникам під час роботи над основними оновленнями.

Поговоримо про зобов’язання!

Joomla був королем систем управління вмістом до того, як WordPress взяв правління. І це не тому, що Joomla погіршилася – просто WP розвивався так стрімко, що неможливо було встигнути за їх темпом. Тим не менш, друга за популярністю система управління вмістом добре розбирається, коли мова йде про модифікації доступності. Ви можете легко застосувати доступний код для основних елементів та оптимізації тем. Просто переконайтеся, що ядро ​​шаблону сприйнятливе до таких змін.

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

Будь-яка з трьох платформ цілком підходить для початку, але як щодо всіх веб-майстрів, які вже керують сайтом? Не хвилюйтеся, хлопці, я не забув про вас. Ось декілька інструментів, за допомогою яких ви можете перевірити, наскільки зараз доступний ваш веб-сайт:

  • WAVE (Інструмент оцінки доступності веб-сайтів) – розроблений організацією WebAIM. Включає онлайн-перевірку та розширення Mozilla/Chrome.
  • SortSite – запускає ваш веб-сайт відповідно до рекомендацій WCAG 2.0 та визначає пріоритети можливих проблем. Доступний як настільний комп’ютер або веб-програма.
  • Відповідність A11Y – розроблена Бюро з питань доступу до Інтернету, вона охоплює всі новітні стандарти. Підтримує загальні розмітки веб-сайтів, такі як CSS, HTML, XHTML, SVG, PDF тощо.

2. Використовуйте семантичну розмітку

Коли ви розробляєте сайти для широкої аудиторії, ви завжди повинні пам’ятати про читабельність, забезпечуючи течію тексту та чітке значення. Те саме відбувається, так би мовити, “за лаштунками”. Правильне позначення основних елементів вмісту має вирішальне значення, коли справа доходить до того, щоб зробити їх зрозумілими для читачів, які не можуть покладатися на візуальні сигнали.

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

  • <section> – визначає новий розділ у змісті. Зазвичай починається з нового заголовка.
  • <article> – означає новий незалежний вміст, який ви можете прочитати окремо від решти сайту.
  • <header> – вказує на новий заголовок.
  • <h1, h2 … h6> – окреслює заголовки. Основним заголовком повинен бути єдиний тег H1. Підзаголовки повинні містити теги H2-H6, залежно від вашої структури вмісту.
  • <table> – вказує на таблицю в межах змісту.
  • <form> – вказує на форму.
  • <nav> – визначає навігаційні посилання.
  • <footer> – задає нижній колонтитул сторінки.

Оволодіння використанням семантичної розмітки HTML є одним із найуспішніших прийомів підвищення доступності веб-сторінок .

Майте на увазі, не всі атрибути є зрозумілими. <DIV> або <SPAN> елементи, наприклад, не несуть ясний сенс, так що вам необхідно дати ім’я класу, щоб визначити їх зміст.

3. Зробити розкладку та навігацію, зручну для клавіатури

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

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

Люди з фізичними та когнітивними вадами часто використовують допоміжні технології, коли виходять в Інтернет. Це може включати:

– Адаптивні клавіатури

– Програмне забезпечення для розпізнавання мови

– Зчитувачі екрану

– Ротові палички

– Головні палички

– Трекбол миша

Для багатьох такі допоміжні технології – єдиний спосіб користуватися комп’ютером або бути частиною Мережі. Але навіть найсучасніші рішення виявляються безглуздими для людей з обмеженими можливостями, якщо сайт, на який вони потрапили, не оптимізований для них.

Поради щодо веб-доступності

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

Уявіть, у вашої мишки не було вказівника. Неможливо правильно використовувати його, так?

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

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

4. Дотримуйтесь належних практик ARIA

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

Ці найкращі практики особливо корисні, коли йдеться про обслуговування динамічного вмісту та визначення елементів керування користувацьким інтерфейсом, розроблених за допомогою Javascript, Ajax, HTML та інших.

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

Зчитувачі екрана та інші допоміжні пристрої не можуть взаємодіяти з цими елементами за замовчуванням. Керівні принципи ARIA вирішують ці проблеми досяжності та визначають методи оптимізації сумісності з такими технологіями.

5. Використовуйте альтернативний текст на зображеннях

Я вже піднімав питання про (посилання) важливість альтернативного тексту для оптимізації вашого веб-сайту (посилання) . Роботи пошукової системи не «читають» візуальні зображення; натомість вони покладаються на альтернативний текст (або альтернативний текст), щоб сказати їм, що вони містять.

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

Це все чудово, але є ще одна перевага, яку ви, мабуть, раніше не враховували.

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

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

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

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

6. Уникайте таблиць та складних макетів

Чи слід використовувати таблицю для відображення списку? Ні.

Як щодо складного макета? Забудь про це.

Може, покрокова інструкція? Абсолютно ні.

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

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

Зробіть їх читабельними! Переконайтеся, що елементи вашого макету мають чітку структуру, належне маркування та їх легко ідентифікувати. Доступ до Інтернету такої кількості людей залежить від того, що ви робите (або не робите) за лаштунками.

7. Ретельно вибирайте кольори

Психологія кольорів – моя улюблена тема. Я вже багато років захоплююсь впливом кольорів на наші емоції.

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

  • уникайте яскравих кольорів – занадто велика інтенсивність кольорів вашого макета не тільки знижує читабельність, але й небезпечна для людей з вищою світлочутливістю.
  • дотримуйтесь чіткого контрасту – люди з дальтонізмом можуть важко читати ваш вміст, якщо кольори занадто схожі. Ви можете перевірити поточний коефіцієнт контрастності за допомогою інструменту WebAIM . Співвідношення 5: 1 для стандартного тексту та 3: 1 повинно працювати ідеально для більшості читачів.

Поради щодо доступності веб-сайтів - контраст

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

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

8. Використовуйте субтитри до відео та аудіо

Запустіть випадкове відео на YouTube. Я почекаю.

Тепер вимкніть звук.

Чи можете ви зрозумітите, що відбувається?

Ні? Зрозуміло.

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

80% людей, які віддають перевагу читання субтитрів, не мають вад слуху.

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

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

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

9. Проектуйте форми з урахуванням доступності

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

веб-доступність - форми

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

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

Акуратно марковані та вичерпні форми – лише ще один із тих прикладів доступності в Інтернеті, коли щось, здавалося б, незначне може мати величезне значення.

Висновок

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

Людям з обмеженими можливостями і так досить важко. Тож дуже невтішно це чути, що “71% людей з обмеженими можливостями негайно залишають веб-сторінку, якщо вона не оптимізована для доступу”.

Це 71% із сотень мільйонів!

Потрібно так мало зусиль, щоб широко відкрити ворота свого веб-сайту і впустити всіх.