Доступен для всех (отсутствие барьеров, препятствующих взаимодействию или доступу в Интернет)

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

Согласно данным, предоставленным «Всемирным банком», около 1 миллиарда человек во всем мире имеют ту или иную форму инвалидности, и они вносят в экономику более 8 триллионов дохода от выбытия. Так что это фактор, который мы должны иметь в виду, так как чем больше пользователей, тем больше рост. Даже при создании любого приложения мы должны уделять основное внимание тому, что если у нас есть что-то, что недоступно для людей, то это вызывает беспокойство. Теперь давайте обсудим, как мы можем сделать наши веб-приложения более доступными.

Проблемы или препятствия в использовании веб-приложения для людей с ограниченными возможностями —

  1. Визуальный — может быть много пользователей, которые полностью слепы.
  2. Слуховой нарушение слуха
  3. Мобильность – можно использовать только мышь или клавиатуру или иметь другие проблемы с физической подвижностью.
  4. Познавательный. Легко ли понять созданное вами веб-приложение?

Для решения подобных проблем WCAG предлагает 4 принципа , которых должно придерживаться каждое веб-приложение.

WCAG – это группа лиц и организаций, занимающихся вопросами доступности в Интернете.

Руководство по обеспечению доступности веб-контента (WCAG)
Здесь мы обсудим4 принципа, разработанные WCAG.

  1. Воспринимаемый —пользователи должны иметь возможность воспринимать представляемую информацию.
  2. Рабочий — интерфейс не может требовать действий, которые пользователь не может выполнить.
  3. Понятный —контент или операция не могут быть за пределами их понимания.
  4. Надежность —по мере развития технологий и пользовательских агентов контент должен оставаться доступным.

Советы по устранению проблем или препятствий юзабилити

Частичное/полное (слепые и слабовидящие)-
1. Обеспечьте достаточный контраст, используя цвета и текстуры

2. Используйте заголовки для организации содержимого страницы

3. Предоставьте замещающий текст или описания для нетекстового контента.

4. Описательные метки для ссылок и кнопок

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

6. Доступность клавиатуры (используйте программы чтения с экрана для работы в Интернете)

Частичное/полное (нарушение слуха)
1. Стенограммы для аудио и видео/аудиоконтента

2. Титры и субтитры для видео/аудио

3. Каналы жестового языка для ваших видео/аудио

Частичное/полное (нарушение подвижности)
1. Функция повтора клавиш может быть отключена для тех, кто не может отпустить клавишу достаточно быстро, чтобы избежать множественного выбора.

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

3. Трекболы и специализированные устройства ввода могут заменить мышей.

4. Предоставьте логические и стандартные команды клавиатуры для взаимодействия с продуктом.

5. Убедитесь, что все функции доступны с клавиатуры.

Когнитивность-Думай как пользователь
Думай как пользователь, работающий в режиме реального времени, что любое приложение, которое ты создал, легко работает, легко понимает все потоки. Вы также получите, если есть какие-либо проблемы.

Советы по кодированию-

  1. Всегда старайтесь использовать нативные семантические элементы/теги.
    Всегда старайтесь использовать нативные семантические элементы HTML для достижения желаемого результата. вы можете получить такое же поведение с пользовательскими элементами, но в большинстве случаев вы будете упускать внутреннюю часть этих семантических элементов. Эти внутренние элементы помогают обеспечить доступность в Интернете.
    Ex- Давайте обсудим событие клика.
<div onClick={0}>Link item with div </div>
<button onClick={alertFn}>Link item with button</button>
Note- 1. You can get same visual effect for both
      2. You can get same functionality for normal user
but what about the user who uses screen reader because he is blind. screen reader will skip <div> element as click listner, but button will work great for every kind of user

2. Дайте достаточно времени. Я видел много случаев, есть некоторые страницы/экраны, привязанные ко времени, такие как какая-то форма/банковское приложение. Для таких приложений мы всегда должны учитывать людей с ограниченными возможностями, потому что людям с ограниченными возможностями потребуется больше времени, чем обычно. Если приложению не хватает времени, то в большинстве случаев люди с ограниченными возможностями столкнутся с трудностями в достижении желаемой задачи.

3. Избегать отображения:нет или видимости: скрыто
Эти стили будут скрывать контент от всех пользователей. Содержимое удаляется из визуального потока страницы и игнорируется программами чтения с экрана. Не используйте этот CSS, если хотите, чтобы контент читался программой чтения с экрана.

The following are the recommended styles for visually hiding content that will be read by a screen reader.
.sr-only{
position:absolute; 
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden}
.class {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%); 
height: 1px;
width: 1px; 
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;}

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

<label for="UserEmail">Email</label>
<input type="text" id="UserEmail" /></div>
Here we added label with for attribute and same id, it will provide more information while reading it by screenreader to blind person

5. Используйте атрибут роли Aria, чтобы указать, что общий тег ведет себя как стандартный тег

<div onClick={0}>Link item with div </div>
<button onClick={alertFn}>Link item with button</button>
Note- 1. You can get same visual effect for both
      2. You can get same functionality for normal user
but what about the user who uses screen reader because he is blind. screen reader will skip <div> element as click listner, but button will work great for every kind of user
To get screenreader to catch <div/> as click listner be can add aria roles on it
<div role="button" onClick={0}>Link item with div </div>

6. Доступность клавиатуры. Многие пользователи не используют мышь, поэтому убедитесь, что доступ к вашему приложению возможен только с помощью клавиатуры.Примечание. Избегайте tabIndex:-1;

7. Предоставьте правильный описательный текст для атрибута «alt» для элемента изображения

BAD
<img src="imgPath" />
<img src="imgPath" alt="" />
<img src="imgPath" alt="img" />
Good
<img src="imgPath" alt="tell about your image" />
tell about your image - means add what this image is about

8. Предоставьте правильный текст заголовка для элементов, которые поддерживают этот атрибут

BAD
<abbr>ISRO</abbr>
<abbr title="">ISRO</abbr>
Good 
<abbr title="Indian Space Research Organisation">ISRO</abbr>

9. Коэффициент контрастности. Обеспечьте правильный цвет текста. потому что неправильный цвет или нечитаемый цвет текста сделает ваше приложение недоступным. Вещи на веб-странице должны быть правильно читаемы.

Try to read paragraph text in below image.

Like in this above image, text for paragrapgh looks like bit blurred. Even a normal person needs to put so much focus to read it. so think about partial visualy disbled person.

10. Масштабирование и масштабирование не должны быть отключены — Никогда не исправляйте масштабирование окна просмотра в своем веб-приложении. Предоставьте пользователям возможность увеличивать и уменьшать масштаб вашего приложения.

1. Remove the user-scalable="no" parameter from the content attribute of the <meta name="viewport">
2, he maximum-scale parameter limits the amount the user can zoom. This is problematic for people with low vision

Счастливого обучения…. 👏👏👏