Принципы доступности WCAG (Web Content Accessibility Guidelines)
В дополнение к этому посту, интересное про принципы доступности — международные рекомендации, опираясь на которые проектируются интерфейсы доступные для всех, в том числе для людей с инвалидностью.
Основу WCAG составляют 4 принципа, которые можно запомнить по аббревиатуре POUR:
1. P — Perceivable (Воспринимаемость)
Информация в интерфейсе должна быть представлена так, чтобы её могли легко воспринять все пользователи.
Примеры:
• Возможность настраивать размер текста
• Субтитры для видео
• Хороший контраст между текстом и фоном
2. O — Operable (Управляемость)
Навигация должна быть удобно спроектирована.
Примеры:
• Возможность навигации с клавиатуры
• Выделять элементы в момент взаимодействия с ними на экране (подсвечивать, обводить и т.п)
• Отсутствие мерцающих элементов, вызывающих судороги
3. U — Understandable (Понятность)
Интерфейс и информация должны быть понятны и предсказуемы.
Примеры:
• Одинаковые элементы взаимодействия, чтобы добавление в избранное, например, не выглядело в разных местах по разному в одном продукте
• Ясный и простой язык в текстах
• Подсказки при вводе данных в формы
4. R — Robust (Надёжность)
Контент должен корректно отображаться в разных браузерах.
Примеры:
• Корректная разметка HTML
• Использование тегов, которые позволяют сохранять высокое качество изображения в разных браузерах
❤️ — полезно
🔥 — не знал(а)
⭐️ — знал(а)
В дополнение к этому посту, интересное про принципы доступности — международные рекомендации, опираясь на которые проектируются интерфейсы доступные для всех, в том числе для людей с инвалидностью.
Основу WCAG составляют 4 принципа, которые можно запомнить по аббревиатуре POUR:
1. P — Perceivable (Воспринимаемость)
Информация в интерфейсе должна быть представлена так, чтобы её могли легко воспринять все пользователи.
Примеры:
• Возможность настраивать размер текста
• Субтитры для видео
• Хороший контраст между текстом и фоном
2. O — Operable (Управляемость)
Навигация должна быть удобно спроектирована.
Примеры:
• Возможность навигации с клавиатуры
• Выделять элементы в момент взаимодействия с ними на экране (подсвечивать, обводить и т.п)
• Отсутствие мерцающих элементов, вызывающих судороги
3. U — Understandable (Понятность)
Интерфейс и информация должны быть понятны и предсказуемы.
Примеры:
• Одинаковые элементы взаимодействия, чтобы добавление в избранное, например, не выглядело в разных местах по разному в одном продукте
• Ясный и простой язык в текстах
• Подсказки при вводе данных в формы
4. R — Robust (Надёжность)
Контент должен корректно отображаться в разных браузерах.
Примеры:
• Корректная разметка HTML
• Использование тегов, которые позволяют сохранять высокое качество изображения в разных браузерах
❤️ — полезно
🔥 — не знал(а)
⭐️ — знал(а)