Практика оптимизации доступности на домашней странице мини-программы Jingxi

предисловие

Ссылка в этой статьеWCAG 2.1,WAI-ARIAа такжеВеб-доступность и рекомендации по доступности, в разработке оптимизации доступности на домашней странице Jingxi Mini Programs, обобщил некоторые методы «безбарьерной оптимизации» в Mini Programs, надеясь повысить доступность в Mini Programs.

Доступность

Что такое доступность?

Прежде чем мы перейдем к доступности, давайте посмотрим на некоторые данные:

• Согласно последним данным Китайской ассоциации слепых, в настоящее время в Китае насчитывается более 17 миллионов людей с нарушениями зрения.
• В Китае существует огромная группа людей с ограниченными возможностями информации, в том числе: более 85 миллионов человек с инвалидностью, более 200 миллионов пожилых людей и большое количество людей с когнитивными нарушениями.
• …

Доступность

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

Доступность информации

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

Приведенное выше определение взято из энциклопедии Baidu.

Конференц-залы

Как мы можем жить, не видя и не слыша?

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

Текущее состояние доступности информации

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

Еще в феврале 1997 года, чтобы улучшить доступность Интернета, Консорциум Всемирной паутины (W3C) учредил группу Инициативы по обеспечению доступности Интернета (WAI) и сформулировал ряд стандартов, спецификаций, тестовых таблиц, технологий барьеров и работая рука об руку с организациями по всему миру, чтобы продвигать доступное веб-движение во всем мире.

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

исследование группы инвалидов

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

В момент, когда уровень потребления снижается, дешевые товары популярны в каждом уголке Интернета, а группа препятствий – одна из групп с наибольшим спросом. Jingxi, как платформа электронной коммерции в рамках JD.com, как и специальные выпуски Pinduoduo и Taobao, имеет множество дискуссий на форумах и QQ, где собираются люди с ограниченными возможностями. Пользователи выразили сожаление по поводу того, что Jingxi не сделала безбарьерную оптимизацию, а также надеются, что Jingxi сможет как можно скорее провести безбарьерную оптимизацию и получить удовольствие от недорогих покупок.

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

1. Кнопки не помечены, что затрудняет понимание пользователями того, какие функции запускаются при нажатии соответствующей кнопки.
2. Упрощенное состояние не подсказывает или подсказка не соответствует привычкам понимания затрудненного пользователя, так что пользователь не может понять правильную информацию, например, была ли она добавлена ​​в корзину.
3. Сбивается логика фокусировки или не соблюдается правильный режим чтения экрана, поэтому пользователь не может легко и четко понять информацию интерфейса, что серьезно влияет на эффективность работы.
4. Для таких страниц, как информация о событиях или всплывающие окна, пользователи не могут легко участвовать в маркетинговой деятельности платформы из-за использования большого количества архитектур каллиграфии и отсутствия встроенных функций доступности.

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

Разработка оптимизации доступности

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

Программное обеспечение для чтения с экрана

Ключевые точки доступности -Используйте считыватель экрана.

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

• iOS:设置 -> 通用 -> 辅助功能 -> 旁白（VoiceOver）.
• Андроид:设置 -> 辅助功能 -> 无障碍 -> TalkBack(Путь может отличаться для разных моделей)

Вот некоторые из основных жестов VoiceOver:

• Коснитесь: выберите и произнесите элемент.
• Двойное нажатие: активировать выбранный элемент.
• Проведите пальцем влево или вправо: выберите следующий или предыдущий элемент.
• Проведите вверх или вниз тремя пальцами: проведите пальцем по списку или области на экране.
• Смахивание двумя пальцами: трижды быстро переместите два пальца вперед и назад (образуя букву «z»), чтобы закрыть напоминание или вернуться к предыдущему экрану.
• Другие жесты можно посмотреть:VoiceOver — Руководство пользователя iPhone.

Жесты Android TalkBack имеют некоторые отличия от VoiceOver, о которых будет сказано позже...

WAI-ARIA

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

WAI-ARIA ( Accessible Rich Internet Applications (WAI-ARIA) 1.1) — это технология, которая может помочь нам в дальнейшем идентифицировать и реализовать семантику с помощью браузеров и некоторых вспомогательных технологий, которые могут помочь нам решить проблемы и позволить пользователям понять, что происходит. WAI-ARIA — это спецификация, написанная W3C, которая определяет набор функций HTML, которые можно использовать в других элементах для обеспечения дополнительной семантики и улучшения доступности, которой не хватает.

Вот три основных особенности спецификации:

• Роль- Определите, что делает элемент. Такие какrole='button'Указывает, что элемент является кнопкой, и программа чтения с экрана будет читать его как «кнопку».role='searchbox'Указывает, что элемент используется для поиска, и программы чтения с экрана будут читать его как «поиск».
• Атрибуты- Сделайте элементы более значимыми. Такие какaria-required='true'Указывает, что элемент является обязательным в форме,aria-label='描述文字'Он используется для добавления описания к текущей метке элемента, добавления метки к элементу невидимым образом, принятия строки в качестве параметра, а программа чтения с экрана будет читать текст описания вслух.
• условие- Специальные свойства для выражения текущего состояния элементов. Такие какaria-disabled='true'

Указывает, что форма запрещает ввод,aria-hidden='true'Указывает, что этот элемент будет игнорироваться средствами чтения с экрана.

Дополнительные свойства могут относиться кUsing AriaСостояния и свойства в апплете, некоторые свойства могут не действовать в настройках апплета.

Другие роли могут относиться кUsing AriaВиджет Роли в , некоторые роли могут не действовать в настройках апплета.

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

Мини-программа Jingxi Оптимизация доступности домашней страницы

задний план

Раньше апплет Jingxi не был оптимизирован для обеспечения доступности, и группы с ограниченными возможностями практически не могли использовать его с помощью программного обеспечения для чтения с экрана. Это приводит к тому, что платформа теряет рынок для группы инвалидов, и группа инвалидов также теряет возможность пользоваться услугами платформы мини-программы Jingxi. Таким образом, есть надежда, что платформа будет оптимизирована для обеспечения доступности, повышения удобства использования и простоты использования платформы, а также позволит группам с ограниченными возможностями наслаждаться более удобными покупками.

Оптимизация

Продукт предоставляет правила разделения фокуса, правила чтения, порядок чтения и индивидуальные решения по оптимизации доступности для домашней страницы апплета Jingxi. Внутренний план здесь раскрываться не будет. (Если вы хотите знать,Приходите присылать резюме.~)

Разработка и внедрение

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

Правила разработки

Порядок DOM имеет значение

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

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

Нетекстовые элементы добавляют атрибуты описания и роли.

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

• Изображение может использовать атрибут alt для описания содержимого изображения, и программное обеспечение для чтения с экрана будет считывать его в соответствии с содержимым в alt.“描述图像内容 图像”.
• Само представление не имеет семантики и может быть добавлено к элементуaria-roleа такжеaria-labelАтрибуты. Программное обеспечение для чтения с экрана будет читать“label 描述内容 + role 类型”.

чтение блочного элемента

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

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

прочитать скрытый элемент

Если вы не хотите, чтобы части содержимого читались, вы можете использовать aria-hidden='true' для объявления, чтобы эти элементы игнорировались при чтении экрана.

 <Text aria-hidden='true'>读屏时会忽略这行文本</Text>

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

реализация сцены

Чтение нетекстовых элементов

Логотип Jingxi и текст в шапке главной страницы — это единая картина. После фокусировки программное обеспечение для чтения с экрана будет читать изображение как изображение по умолчанию и не может читать текст на изображении вслух. Такой опыт доступности очень плохой.

В этом сценарии, предоставив изображение логотипа增加描述для оптимизации доступности.

 <View className='index__main'>
    <View className='index__logo' aria-role='text' aria-label='京喜' />
    <View className='index__title'>京东旗下社交电商平台</View>
 </View>

Аналогично кнопке закрытия, кнопке возврата наверх, кнопке строки меню...

<View
   className='back-top'
   aria-role='button'
   aria-label='返回顶部'
/>

окно поиска читать

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

В этом случае, указав поле поиска增加角色属性для оптимизации доступности.

<View aria-role='searchbox'>
    <SearchBar />
</View>

Карусельное чтение изображений

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

В таком сценарии每一个子元素标签增加描述, программа чтения с экрана может распознать дочерний элемент.

<View className='banner'>
    <Swiper>
        <SwiperItem aria-role='text' aria-label='活动推荐1'>活动1</SwiperItem>
        <SwiperItem aria-role='text' aria-label='活动推荐2'>活动2</SwiperItem>
        <SwiperItem aria-role='text' aria-label='活动推荐3'>活动3</SwiperItem>
        <SwiperItem aria-role='text' aria-label='活动推荐4'>活动4</SwiperItem>
    </Swiper>
</View>

Но такая оптимизация доступности неудобна для телефонов Android.

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

В таком случае рекомендуется использовать最外层增加描述, рассматривайте весь фрагмент контента как кнопку и дайте пользователю с ограниченными возможностями знать, что это кнопка, на которую нажал весь контент.

<View className='banner' aria-role='button' aria-label='活动推荐，共4个'>
    <Swiper>
        <SwiperItem>活动1</SwiperItem>
        <SwiperItem>活动2</SwiperItem>
        <SwiperItem>活动3</SwiperItem>
        <SwiperItem>活动4</SwiperItem>
    </Swiper>
</View>

Чтение товарных карт

Карточка продукта состоит из нескольких подэлементов, а программное обеспечение для чтения экрана будет прочитать фокусированные подэлементы (изображение продукта, название, цену, точку интереса и т. Д.) Один за другим.

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

В таком сценарии карточку товара можно рассматривать как одну кнопку. Добавить к самой внешней метке карточки товараaria-role='button', также черезaria-labelЭтикетки объединяют информацию о продукте, упрощают описания, сокращают время чтения названий продуктов и позволяют пользователям с ограниченными возможностями получить лучший опыт.

прочитать скрытый элемент

Оптимизация доступности для карточек товаров, упомянутых выше, может быть выполнена черезaria-role='button'а такжеaria-labelреализовать. В идеале, когда пользователь с ограниченными возможностями фокусируется на карточке продукта, программное обеспечение для чтения с экрана считывает интегрированную информацию о продукте и подсказывает тип кнопки.

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

Во избежание повторного считывания информации о товаре можно добавить к элементу текстовую меткуaria-hidden='true', скройте текстовое описание подэлементов, чтобы пользователи с ограниченными возможностями могли получить четкую и краткую информацию о продукте.

<View aria-role='button' aria-label='商品整合信息'>
    <View aria-hidden='true'>
        <Image className='goods__img' src='https://img20.360buyimg.com/ling/jfs/t1/129045/25/12798/233574/5f61ffdbE248117d0/52fd1d1ee42b4443.png' lazyLoad />
        <View className='goods__info'>商品信息…</View>
    </View>
</View>

Различия между iOS и Android

Различия жестов смахивания

Android: скольжение двумя пальцами, адаптивное скольжение по жестам;

iOS: пролистывание тремя пальцами, одноэкранное пролистывание, одноэкранное пролистывание.

Разница фокуса карусели

Android: положение фокуса будет следовать за дочерним элементом, чтобы скользить и исчезать;

iOS: положение фокуса фиксировано и не исчезнет при скольжении дочернего элемента.

Разница в цене

Текст цены реализован с несколькими метками из-за разных размеров шрифта для целой части и дробной части.

<View>
    &yen;
    <Text>259</Text>
    <Text>.2</Text>
</View>

Android: читать "259.2 юаней" в полном объеме;

iOS: отдельно, целое число, десятичное число и будет читать «¥» как «символ доллара».

aria-role='button' прочитать разницу

Android: читается как «описание + кнопка + текстовое описание подэлемента», с помощьюaria-hidden='true'Скрыть текстовое описание подэлементов, чтобы избежать повторного прочтения информации.

iOS: Есть два случая.

• Если метка также установленаaria-label, читается как «кнопка описания», а текст подэлемента не повторяется.
• Если метка установлена ​​толькоaria-role='button', продолжит распознавать текст подэлемента, который читается как «описание + кнопка + описание текста подэлемента». Во избежание повторного чтения необходимо также добавлять подэлементыaria-hidden='true'.

Обзор доступности мини-программы

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

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

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

Безбарьерный опыт

Включите режим чтения с экрана на мобильном телефоне и отсканируйте QR-код, чтобы испытать:

Эпилог

После того, как была запущена оптимизация доступности домашней страницы мини-программы Jingxi, мы повторно посетили опрошенные группы инвалидов и получили положительные отзывы.

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

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