Когда мы создаем приложение, мы хотим, чтобы оно было доступно всем. Нам нужны хорошие отзывы и обзоры. Затем мы начинаем работать над другими функциями. Но как сделать так, чтобы наше приложение было доступно для людей с ограниченными возможностями? Общие нарушения, которые влияют на использование человеком приложения, включают слепоту или слабое зрение, дальтонизм, глухоту или нарушение слуха, а также ограниченную моторику. В проекте Primero мы решили настроить пользовательский интерфейс для каждого пользователя. Но как мы это делаем. Насколько доступно такое большое приложение, как Primero. Что ж, позвольте мне рассказать вам о некоторых методах, которые мы использовали до сих пор.

  • Удобная навигация
  • Использование четкого, адаптируемого макета и дизайна
  • Описательные метки элементов пользовательского интерфейса
  • Альтернативный текст или описания для СМИ
  • Управление с клавиатуры

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

  • Простая навигация: это означает, что навигация должна быть простой. Он должен иметь четкие и короткие потоки задач. Люди с нарушением зрения, трудности с чтением или временно не умеющие читать могут использовать программу чтения с экрана. В нашем приложении должна быть удобная навигация, по которой пользователи могут перемещаться, используя метод «изучения касанием» или «линейной навигации».
  • Использование четкого, адаптируемого макета и дизайна: полная и правильная разметка заголовков, списков и таблиц. Правильная разметка помогает адаптивным технологиям читать ваш контент вслух, увеличивать его, изменять контрастность или иным образом адаптировать его.
  • Описательные метки элементов пользовательского интерфейса: нам нужно добавить метки, с помощью которых программы чтения с экрана могут читать метку, что позволит пользователю понять, что этот конкретный элемент делает на странице.
<form>
<label for="fname">First name</label>
<input name="" type="text" id="fname" aria-describedby="int2">
<p id="int2">A bit of instructions for this field linked with aria-describedby. </p>
</form>
  • Альтернативный текст или описания для мультимедиа: для изображений мы должны добавить атрибуты alt, которые добавят описание к любому файлу изображения, который мы использовали в нашем приложении.
<img src="logo.png" alt=" Logo of the app " />
  • Управление с помощью клавиатуры: организуйте приложение так, чтобы пользователи могли перемещаться по нему и использовать его только с помощью клавиатуры (обычно с помощью Tab или клавиш со стрелками). Фокус клавиатуры должен быть видимым и следовать интуитивно понятной последовательности действий на странице. Не теряйте фокус, когда пользователь закрывает диалоговое окно или отправляет форму.

Для тестирования этих функций мы использовали несколько инструментов тестирования. Вы можете прочитать об этом здесь". Добавление специальных возможностей не требует дополнительных усилий. Вместо этого нам просто нужно убедиться, что в нашем приложении есть все функции, которые мы хотели, а также чтобы оно было настроено для особых пользователей. Надеюсь, вам понравился этот блог. Прокомментируйте, если у вас есть предложения или вопросы :)