Inclusive design

What is inclusive design?

Inclusive (universal) design is a design method that takes into account the needs and capabilities of maximum number of people. Instead of focusing on a hypothetical user, inclusive design takes care of a wide range of people by creating interfaces for sharing. The concept of  "design for all" is also often used.

The main difference between inclusive design is that it takes into account the specifics of use of sites (and anything else) by people with disabilities.

The history of universal design began in the XX century and is directly related to the consequences of two world wars, which put many people with disabilities.

20 years ago, the independent US Federal Agency ADA created the WCAG (Web Content Accessibility Guidelines). This guide is regularly updated and is an unbreakable set of rules for creating an inclusive design.

4 basic principles of WCAG

1. Perceivable. All users should understand the information on the site and its interface. This means that content should be presented in different ways: text in different languages, audio, video, and so on.

2. Understandable. The user must not only perceive the content, but also understand it. To determine how clear the text is, the US Navy commissioned the F—K test (Flesch–Kincaid). The test shows the approximate level of education that the reader needs to understand a document or instruction. The ideal option is if you need an education at the level of the 5th grade.

3. Operable. People should be able to control the interface in the ways that are available to them: voice, keyboard, eyes, etc. The interface should not be overloaded with unnecessary elements and make it difficult for such users to navigate or cause them to have seizures or other physical reactions. An example of manageability is the Alexa voice assistant, which allows a bedridden hospital patient to call a nurse or change the TV channel.

4. Robust. The interface must remain available when the product or operating system version changes. Users with disabilities are often afraid to update the app or system because the settings they need will simply stop working.

How to determine accessibility of the site?

Site accessibility is determined not by users ' subjective opinions, but by the official WCAG 2.0 success criteria. Websites are rated according to their universality, and they also show you how to improve your site. Here are the main ratings:

A - basic level of conformance. No other rating is possible without meeting at least the criteria for matching the A rating.

AA - all site elements meet the criteria for A and AA ratings.

AAA - all elements satisfy A, AA, and AAA.

13 most important recommendations for site accessibility

1. Create text alternatives for any content that is not text
2. For time-based media content (such as videos with subtitles), add an alternative option for people who can't perceive such content. This can be audio that describes the content of the video or an extended audio description in moments where there were not enough pauses.
3. Make sure that the content can be presented in various ways without losing information and meaning.
4. Help users distinguish content from the background using various visual and audio techniques.
5. Make sure that the site can be managed using the keyboard.
6. Give users enough time to read, listen, and digest the information.
7. The visual and audio elements of your site should be designed so that they do not cause convulsions or other physical reactions from users
8. Make it easy for users to navigate the site and determine where they are when using it.
9. The site should be able to work with various input sources other than the keyboard.
10. Make sure that the entire text is readable and understandable.
11. Make sure that the site works predictably and intuitively to avoid confusion
12. Make it easy for users to avoid and correct data entry errors.
13. Try to ensure that your site is as compatible as possible with users ' assistive technologies.

How to avoid 13 common mistakes?

1. Make the text sufficiently contrasting. It must be 4.5:1 to meet the AA rating criteria.
2. Avoid fast-changing and flashing visuals effects.
3. Don't forget about infographics - this is a great way to make information clear and easy to understand. However, it must also meet point 1.
4. Don't write texts in abstruse language and convey the correct meaning. To do this, it can be estimated by Gunning fog index. This is a test for the readability and clarity of any text information.
5. Use descriptions for links so that the user understands what they will encounter when they click on it.
6. Don't forget to describe error messages. They should explain what the user did wrong and how they can fix the error.
7. Disable auto-playback of video or audio, it may disrupt the operation of auxiliary devices. Allow users to access video and audio as they see fit.
8. Always fill ALT attribute descriptively
9. Allow the user to customize the page style themselves.
10. Explain all captchas and don't forget to create other verification options, such as an audio captcha.
11. Don't forget to mark the content that will be ignored by screen readers (special programs for the blind).
12. For people with dyslexia, it is necessary to simplify the perception of any text information for them. To do this:

• Provide the ability to change the font size up to 200%
• Note that the string length must not exceed 80 characters
• Don't forget the minimum line spacing - 1.5
• Use a sans-serif font. Also avoid italics, long words, hyphenation, and complex sentences.

    13. Do not hide important and valuable information, as well as navigation elements on the site.

Good examples of exclusive sites

- Public services: gov.uk and 18f.gov

- Educational institutions: Australian National University and Michigan State University Department of Theatre.

- Transport companies: EasyJet, JetBlue and Ferry NYC.

This is only a small part of the rules that are used for the convenience of users with disabilities. But even following these rules will make the lives of such people a little better and easier, will help to take a step into the world without restrictions.

Что такое инклюзивный дизайн?

Инклюзивный (универсальный) дизайн — метод проектирования, который считается с потребностями и возможностями максимального количества людей. Вместо того чтобы ориентироваться на гипотетического пользователя, инклюзивный дизайн заботится о широком круге людей, создавая интерфейсы для совместного использования. Часто используется также понятие «дизайн для всех».

Основное отличие инклюзивного дизайна в том, что он учитывает специфику использования сайтов (и чего-либо еще) людьми с ограниченными возможностями.

История универсального дизайна началась в XX веке и напрямую связана с последствиями двух мировых войн, которые ставили множество людей инвалидами.

20 лет назад независимое федеральное американское агентство ADA создало Руководство по обеспечению доступности web-контента (WCAG). Это руководство регулярно обновляется и является нерушимым сводом правил для создания инклюзивного дизайна.

4 основных принципа WCAG

1. Воспринимаемость. Информацию на сайте и его интерфейс должны воспринимать все пользователи. Это означает, что контент следует представлять разными способами: текстом на разных языках, с помощью аудио, видео и т.д.

2. Понятность. Пользователь должен не только воспринимать контент, но и понимать его. Чтобы определить, насколько понятен текст, в США по заказу военно-морских сил разработали тест F—K (Flesch–Kincaid). Тест показывает приблизительный уровень образования, который требуется читателю для понимания документа или инструкции. Идеальный вариант — если требуется образование на уровне 5-го класса.

3. Управляемость. Люди должны иметь возможность управлять интерфейсом теми способами, которые им доступны: голосом, клавиатурой, взглядом и т.д. Интерфейс не должен быть перегружен лишними элементами и затруднять навигацию таким пользователям или вызывать у них судороги или другие физические реакции. Примером управляемость является голосовой помощник Alexa, с помощью которой лежачий пациент больницы может позвать медсестру или переключить канал телевизора.

4. Надежность. Интерфейс должен оставаться доступным при изменении версии продукта или операционной системы. Пользователи с инвалидностью часто боятся обновлять приложение или систему из-за того, что нужные настройки просто перестанут работать.

Как определяют доступность сайта?

Доступность сайта определяется не субъективными мнениями пользователей, а официальными критериями успеха WCAG 2.0. Веб-сайтам присваиваются рейтинги в соответствии с их универсальностью, а также они показывают, как вам улучшить сайт. Вот основные рейтинги:

А - базовый рейтинг соответствия. Ни один другой рейтинг не возможен без удовлетворения хотя бы критериям соответствия рейтинга А.

АА - все элементы сайта удовлетворяют критериям рейтингов А и АА.

ААА - все элементы удовлетворяют А, АА и ААА.

13 самых важных рекомендаций по обеспечению доступности сайта 

1. Создайте текстовые альтернативы для любого контента, который не является текстом
2. К Медиа-контенту, основанному на времени (например, видео с субтитрами), добавьте альтернативный вариант для людей, которые не могут воспринимать такой контент. Это может быть аудио, которое описывает содержание видео или расширенное аудиоописание в моментах, где было недостаточно пауз.
3. Убедитесь, что контент может быть представлен различными способами без потери информации и смысла.
4. Помогите пользователям отличить контент от фона с помощью различных визуальных и звуковых приемов.
5. Убедитесь, что сайтом можно управлять с клавиатуры.
6. Дайте пользователям достаточно времени, чтобы прочитать, прослушать и переварить информацию.
7. Визуальные и звуковые элементы вашего сайта должны быть спроектированы так, чтобы не вызывать судорог или других физических реакций у пользователей
8. Сделайте так, чтобы пользователям было легко перемещаться по сайте и определять, где они находятся при его использовании.
9. Сайт должен иметь возможность работать с различными источниками ввода, помимо клавиатуры.
10. Убедитесь, что весь текст читаем и понятен.
11. Убедитесь, что сайт работает предсказуемо и интуитивно понятно, чтобы избежать путаницы
12. Сделайте так, чтобы пользователям было легко избежать ошибок при вводе данных и исправить их.
13. Постарайтесь обеспечить максимальную совместимость вашего сайта с вспомогательными технологиями пользователей.

Как избежать 13 распространенных ошибок?

1. Сделайте текст достаточно контрастным. Он должен быть 4,5:1, чтобы соответствовать критерию рейтинга АА.
2. Избегайте быстро меняющиеся и мигающие визуальные эффекты. 
3. Не забывайте про инфографику - это отличный способ сделать информацию понятной и легко воспринимаемой. Однако, она должна удовлетворять и пункту 1.
4. Не пишите тексты заумным языком и передавали правильный смысл. Для этого его можно оценить по индексу туманности Ганнинга. Это тест на читаемость и понятность любой текстовой информации.
5. Используйте описания для ссылок, чтобы пользователь понимал, с чем он столкнется, нажав на нее.
6. Не забывайте описывать сообщения об ошибках. Они должны объяснять что пользователь сделал не так, и как он он может исправить ошибку.
7. Запретите автовоспроизведение видео или аудио, это может нарушить работу вспомогательных устройств. Разрешите пользователям получать доступ к видео и аудио по своему усмотрению.
8. Всегда заполняйте атрибуты alt описательно
9. Предоставьте пользователю возможность самому настраивать стиль страницы.
10. Объясняйте все капчи и не забывайте создавать другие варианты проверки, например - аудиокапчу.
11. Не забудьте о том, чтобы обозначить контент, который будут игнорировать скринридеры (специальные программы для слепых).
12. Для людей с дислексией необходимо упростить восприятие любой текстовой информации для них. Для этого следует:

• Предоставить возможность изменять размер шрифта до 200%
• Учитывать, что длина строки не должна превышать 80 символов
• Не забывать минимальный межстрочный интервал - 1,5
• Использовать шрифт без засечек. А также избегать курсива, длинных слов, переноса и сложных предложений. 

     13. Не скрывайте важную и ценную информацию, а также элементы навигации на сайте.

Хорошие примеры инклюзивных сайтов 

- Государственные услуги: gov.uk и 18f.gov

- Образовательные учреждения: Australian National University и Michigan State University Department of Theatre.

- Транспортные компании: Easy Jet, Jet Blue, и Ferry NYC.

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