Лучшие методы доступности для разработки мобильных приложений

1655996904 luchshie metody dostupnosti dlya razrabotki mobilnyh prilozhenij

По оценкам Бюро переписи населения США, более 12% населения Соединенных Штатов живут с инвалидностью. Инвалиды могут включать проблемы со зрением, слухом, передвижением и многое другое.

А инвалидом человек может оказаться на любом этапе своей жизни.

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

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

Добавьте полезные описания к каждому элементу

Инициатива здоровья зрения Центра контроля и профилактики заболеваний утверждает, что,

В 2015 году в общей сложности 1,02 миллиона человек были слепыми, и примерно 3,22 миллиона человек в Соединенных Штатах имели нарушение зрения (VI), определяемое наилучшим образом скорректированной остротой зрения в лучше видящем глазе.

Кроме того, 8,2 миллиона человек имели ВИ из-за неисправленной аномалии рефракции. По прогнозам, к 2050 году количество этих состояний удвоится до примерно 2,01 миллиона человек, которые являются слепыми или имеют VI 20/200 или хуже, 6,95 миллиона человек с VI и 16,4 миллиона человек с VI из-за неисправленной ошибки рефракции. (Varma 2015)

Одним из полезных инструментов доступности для слабовидящих или совсем отсутствующим видением является голосовой инструмент. Это позволяет пользователю прослушивать содержимое веб-страницы на своем телефоне.

Я хотел бы поставить вас на место человека, возможно, использующего голосовую связь на своем телефоне.

Ниже представлены списки Facebook Marketplace со «сниженной ценой». Просто прослушайте 22 секунды этого голоса за кадром, чтобы услышать, как этот раздел звучит для тех, кто использует этот инструмент.

Закадровый голос говорит «Сниженная цена, кнопка», чтобы указать пользователю, что этот раздел предназначен для товаров с пониженной ценой и что он может выполнить действие нажатия в данном конкретном фокусе.

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

Далее фокусируется кнопка «Показать все». Это означает, что они могут выполнить действие на этот элемент, чтобы увидеть все элементы в категории.

На следующем фокусе мы слышим: «Нет описания фотографии, кнопка, изображения». Каким может быть этот предмет? Сейчас мы не знаем.

И для следующего сфокусированного элемента мы слышим то же самое: «Нет описания фотографии, кнопка, изображения». Теперь два элемента в этом списке не содержат содержимого для описания.

Следующий сфокусированный элемент говорит: «Возможно, изображение украшения, пуговицы, изображение». Слово «возможно» перед предложением указывает на то, что инструмент закадрового голоса не уверен в том, каким может быть элемент.

«Изображение ювелирных изделий» — это широкое описание, особенно если вы находитесь на веб-сайте, чтобы делать покупки. Это ожерелье? Это кольцо? Это серьга? Это набор украшений? Какой это материал? На что это похоже? Сколько стоит это украшение для начала?

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

Вот как пользователи со слабым зрением или без него должны перемещаться в приложениях. Здесь было четыре кнопки, ни одна из них с описанием. Если бы вы использовали это приложение, которое бы вы нажали?

Теперь я хочу показать вам видеозапись той же страницы, которую вы можете увидеть ниже:

Первый элемент, который в озвучке упоминается как «Нет описания фотографии, кнопка, изображения», действительно был изображением старинного стола 1960-х годов, и он бесплатный.

Второй предмет – это наклейка стоимостью 3 доллара с надписью «Я всегда с тобой» с красной птицей рядом.

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

Наконец, четвертый элемент с надписью «Нет описания фотографии, кнопки, изображения» – это карта Покемана Пикачу, которая стоит 9,50 долларов США.

Вы ожидали этого после первого аудиоклипа? Наверное, нет. Если бы вы не видели или не читали названия, вы бы не знали, что продается на Facebook Marketplace.

Один из способов решить эту проблему – убедиться, что у каждого элемента есть accessibilityLabel с основной информацией, которая вам необходима, чтобы узнать, что это такое, не видя ее. Документы React Native говорят вам, что,

«Чтобы использовать, установите accessibilityLabel свойство специальной строки на вашем просмотре, тексте или сенсорном».

An accessibilityLabel это простой, но эффективный способ описать элемент для пользователей программы считывания с экрана.

Чтобы показать вам, как это будет работать, давайте вместе напишем более простой пример.

К примеру, мы можем создать таблицу Facebook Marketplace, добавив accessibilityLabel до TouchableOpacity элемент.

Пример кода:

<TouchableOpacity
  accessible={true}
  accessibilityLabel="Free, vintage table from the 1960s"
  >
....
</TouchableOpacity>

Код выше добавляет accessibilityLabel к элементу, содержащему всю кнопку. Мы добавили «Бесплатный старинный стол 1960-х годов» как метку доступности.

Когда программа считывания с экрана наведет курсор на элемент с этим атрибутом, он будет читать: «Бесплатный старинный стол с 1960-х, кнопка». Это позволит пользователю знать цену, краткое описание и тот факт, что это кнопка, которую они могут нажать.

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

Обязательно опишите состояние элемента

В некоторых элементах нужно будет описать пользователю текущее состояние компонента.

Например, если у вас есть флажок, вы должны сообщить пользователю, поставлен флажок или нет.

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

На странице публикации LinkedIn ниже есть пример выключенной кнопки. Кнопка не активна, если пользователь не введет что-либо в тексте публикации:

пример:

IMG-0748
Страница публикации LinkedIn с фокусом на затемненной кнопке публикации.

На изображении выше фокус сосредоточен на выключенной кнопке «Опубликовать». Когда голос за кадром сосредоточен на этом разделе, он говорит: «Опубликовать, затемнено, кнопка». Это позволяет пользователю знать, что это кнопка, но он не может нажать на нее, поскольку она затемнена.

Пример кода:

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

<Button accessibilityState={disabled ? {disabled: true} : {disabled: false}}>

Ниже приведены несколько других способов уведомить пользователя о состоянии элемента. Программа считывания с экрана скажет «Элемент меню выбрано» или «Флажок, выбрано», если выбран пункт меню или флажок.

//Menu Item
<Button accessibilityRole={"menuitem"} accessibilityState={selected ? { selected: true } : { selected: false }} />

//Checkbox
<Checkbox label="Checkbox" selected={checked} accessibilityState={checked ? { checked: true } : { checked: false }} />

Контекст важен

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

Это означает, что иногда целесообразнее сгруппировать определенные элементы вместе. Если существует несколько действий, которые пользователь может выполнить в определенной ситуации, мы должны добавить accessibilityActions к нему.

Неполезный пример:

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

Снимок экрана-2021-09-24-4.56.25-PM
Сообщение LinkedIn, которое говорит: «Действительно ли степень бакалавра того стоит? Вот что оказалось недавним опросом». На первом изображении сосредоточено в тексте заголовка. На втором изображении фокус сосредоточен на «6h», находящемся рядом с заголовком.

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

Сбивает с толку, когда программа считывания с экрана говорит «6 ч» – что это значит? Пользователи, которые видят элемент, могут понять, что он был опубликован 6 часов назад. Но программа считывания с экрана просто говорит смущающий «6 ч».

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

Что было бы лучше для доступности, так это если бы этот компонент был сгруппирован вместе и читал: «Действительно ли степень бакалавра того стоит? Вот что показал недавний опрос, опубликованный 6 часов назад, доступны действия». Следовательно, будет лучший контекст для всего элемента.

Лучший пример:

Снимок экрана-2021-09-24-4.55.38-PM
Сосредоточенный компонент с надписью «Front-End Engineer, AWS Data Wrangler, Amazon Web Services (AWS), Нью-Йорк, Нью-Йорк», с кнопкой закладки в правом углу.

Выше приведен пример другого раздела приложения LinkedIn. В этом разделе написано: «Инженер-технолог, AWS Data Wrangler, компания, Amazon Web Services (AWS), местонахождение, Нью-Йорк, Нью-Йорк, доступные действия».

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

Пример кода:

<View
  accessible={true}
  accessibilityActions={[
    { name: 'navigate', label: 'navigate' },
    { name: 'bookmark', label: 'bookmark' },
  ]}
  onAccessibilityAction={(event) => {
    switch (event.nativeEvent.actionName) {
      case 'navigate':
        Alert.alert('Alert', 'Navigated to another page');
        break;
      case 'bookmark':
        Alert.alert('Alert', 'Bookmarked this link');
        break;
    }
  }}
/>

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

Когда пользователь проведет пальцем вверх, он услышит «навигацию». А потом, когда они проведут еще раз, услышат «закладка». Если пользователь хочет выбрать любой вариант, он может дважды коснуться, когда услышит нужную опцию. Следовательно, действия имеют лучший контекст.

Подведению

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

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

Обязанность каждого – убедиться, что технологии доступны для всех. Спасибо за прочтение!

Добавить комментарий

Ваш адрес email не будет опубликован.