SPA и доступные полнофункциональные интернет-приложения (ARIA)

У меня есть одностраничное веб-приложение (SPA), созданное с использованием AngularJS с поддержкой преобразования текста в речь (TTS). При начальной загрузке приложения TTS работает должным образом. Элемент DOM выделяется, и воспроизводится звук, описывающий элемент DOM.

Проблема в том, что как только новое представление загружается через ng-view, TTS больше не работает, а выделение из предыдущих элементов ng-view остается на экране.

Я подозреваю, что это из-за того, как SPA обрабатывает навигацию, это делается путем частичной перезагрузки (замена ng-view).

Есть идеи, как заставить ARIA и TTS хорошо играть в СПА?

Пример представления 1:

<a href = "some_link/videos">videos</a>
<a href = "some_link/ratings">ratings</a>

Пример представления 2:

<a href = "some_link/subscriptions">subscriptions</a>
<a href = "some_link/playlist">playlist<

Загрузка представления 1 побудит TTS ответить следующим образом:

// videos , link
// ratings, link

Загрузка представления 2 должна побудить TTS ответить следующим образом:

// subscriptions, link
// playlist, link

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

georgeawg 20.03.2018 01:45

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

georgeawg 20.03.2018 01:48

@georgeawg Конечно. Я добавил очень простой html-код, я проверю ссылку angular aria, которую вы предоставили.

Fabii 20.03.2018 16:18
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
3
123
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы обновляете DOM новым текстом, обратите внимание на атрибут aria-live.

https://www.w3.org/TR/wai-aria/#aria-live

Например, если у вас есть

<a href = "some_link/videos">videos</a>

и вы используете JS для замены "видео" на "подписки", тогда все, что вам нужно, это aria-live = "polite" по ссылке:

<a href = "some_link/videos" aria-live = "polite">videos</a>

Теперь, если вы измените текст, программа чтения с экрана прочитает новый текст.

Другие вопросы по теме