У цій статті ми переглянемо деякі корисні знаряддя, вимоги і рекомендації, які є придатні мати в розумі в універсальному дизайні мережевого контенту.
У статті розглядатимуться такі питання:
- Коефіцієнт контрастності
- Висота рядка, абзац і інтервали
- Використання міток на формах і вхідніх
- Альтернативний текст для зображень і елементів, які не є текстовими
- Розміри і функція
- Провести аналіз доступу за допомогою Axe
- Спробуйте прочитати текст - для глибшого розуміння
- Уникаючи помилок і вад у коді перевірки
Контрастна лункаd
Коли йдеться про дизайн, то легко намалювати нові, як гарні та чисті. Але ми часто забуваємо, що існує частина, яка має проблеми з низькими контрастами. Неспроможність правильно читати та розуміти зміст, якщо співвідношення контрастів надто низький, людям важко читати і писати. Зазвичай, це стосується елементів, зокрема заголовків, абзаців і кнопок. Тому важливо переконатися, що колір фону і переднього плану є в належному протиставленні один з одним. WCAG 2. 0 потребує співвідношення контрастності 4,5: 1 до 4,5: 1, яке слід досягти.
Приклади контрастних стосунків у праці з титулами і абзацами.
Перевірити контрастність з Інструмент розробників Google Chrome
Скористайтеся вбудованим інструментом розробки Google, щоб побачити контрастність між тлом і кольором переднього плану. Відкрити у Windows за допомогою CTRL + Shift + C або на Mac з CMD + Параметр + C і оберіть елемент, який ви бажаєте переглянути докладніше.
Перевірити контрастність зі Старком для Adobe XD
Сильний - це розширення Adobe XD, за допомогою якого ви можете перевіряти контрастність і проводити аналіз дальтонізму. LСлабкі для Adobe XD
Висота рядка, абзац і інтервали
Для людей, які мають поганий зір і дислексію, текст на веб - сайті може створювати проблеми. Тому важливо, щоб ми мали добрий придатний для читання титул і абзац. Згідно з наступною АРМАГ 2.1, то рекомендується мати принаймні:
- Інтервал між рядками до принаймні 15 разів більшого розміру
- Відстань за абзацом до принаймні 2 разів більшого розміру
- Мінімальна відстань у блоках тексту буде 0,12 разів більша за розмір шрифту
- Мінімальний інтервал між словами має бути 0,16 разів більший за розмір шрифту
Використання міток на формах і вхідніх
Люди з поганим зором і люди з проблемами читання та письма можуть використовувати текстові інструменти для того, щоб чути та орієнтуватися навколо змісту. Особливо, коли йдеться про форму. Тому важливо, щоб форми використовували мітки для вхідних полів, щоб інструмент читання тексту правильно сприймав поля.
У процесі форм ми можемо використовувати мітки (мітки). Мітки сприяють правильному розпізнанню полів вхідних даних інструментом, а поле розпізнається і має значення.
У формі теґ HTML можна використовувати: < label >, щоб інструмент правильно сприймав поле. Альтернативний текст для зображень і елементів, які не є текстовими
Для того, щоб інструмент синтезу мовлення міг сприймати зображення, фігури і ілюстрації та інші елементи, які не є текстами, потрібен інший опис елемента.
Зображення мають мати інший підпис, що описує вміст. Це стосується всіх елементів, окрім зображень або фігур для декоративних цілей, у такому випадку альтернативний текст має бути порожнім.
Приклад зображення з альтернативним текстом і декоративним зображенням без альтернативного тексту.
Розміри і функція
Рекомендуємо вам описувати посилання відповідно до вмісту сторінки призначення посилання. Наприклад, ми розробили список принципів маркетингуЦе дає вам краще розуміння маркетингу. Цей зв'язок також слід вважати посиланням на контекст довкола них, щоб не створювати замішання щодо існування посилання або, наприклад, тексту. Щоб пояснити це, під посиланням можна прокласти лінію. У документі CSS можна додавати текстові декорації: підрядок; на теґі якоря.
Провести аналіз доступу за допомогою Axe
Окс надає вам змогу проводити аналіз доступності веб-сторінок і допомагати визначати помилки дизайну. Звантажити Axe для Google Crom
Спробуйте прочитати текст - для глибшого розуміння
Інструмент для читання тексту може дати глибше розуміння того, як вебсайт насправді відбувається з людьми, які засліплені, зменшені зір, дислексія та інші проблеми з когнітивними процесами.
Звантажити голос крима за Google-краме Докладніше про можливість доступу Mac
Уникаючи помилок і вад у коді перевірки
Помилка на веб - сайті може призвести до того, що інструменти доступності і користувачі з особливими інструментами не зможуть правильно пересуватися або сприймати сторінку. Тому важливо перевірити код на сайті і переконатися, що ми виправимо потенційні помилки, які знаходить інструмент перевірки.
Перейти до засобу перевірки HTML W3C Перейти до інструменту перевірки CSS W3C
Джерела: Що говорить інструкція? }Вимірювання для керування і ICT WCAG 2. 0- } } ...визначити для керування і ICT Web }Кертація для керування і ICT Directive і WCAG 2. 1 } ПАСУСУВАВСЯ для керування і ICT Огляд мережевого вмісту W3C