Как я улучшаю доступность своих моделей Three.js и как вы можете сделать то же самое с помощью a3model
1. Сделайте меши фокусируемыми
Люди с проблемами зрительной и/или двигательной координации используют команды клавиатуры для взаимодействия с веб-элементами. Вот почему важно, чтобы на все интерактивные элементы можно было наводить фокус с помощью команд клавиатуры (например, Tab и Tab-Shift).
На веб-странице элемент, находящийся в фокусе, выделяется светящимся синим кольцом, обычно называемым кольцом фокусировки, которое указывает пользователю, где находится элемент. Интерактивные HTML-элементы (например, ‹button›) доступны для фокуса по умолчанию, в то время как другие элементы (например, ‹div›) можно сделать фокусируемыми, добавив атрибут tabIndex=0.
Интерактивные сетки или объекты Three.js по умолчанию не фокусируются. Подход, который я использую, чтобы сделать сетку фокусируемой, заключается в добавлении CSS2DObject к сетке, а затем добавлении атрибута tabIndex=0 к связанному элементу DOME. Этот элемент размещается и изменяется в размере, чтобы он представлял собой рамку вокруг сетки, так что кольцо фокусировки казалось окружающим сетку.
Чтобы упростить реализацию описанного выше, я написал пакет npm под названием a3model, который позволяет вам добавлять фокус к вашим сеткам, просто вызывая функцию createBox на сетке.
2. Меняйте курсоры при наведении
Еще одним важным визуальным признаком интерактивных элементов являются изменения курсора. Для интерактивных элементов при наведении курсор должен измениться на указатель, чтобы указать, что элемент интерактивен.
Один из способов сделать это с помощью Three.js — использовать raycasting, чтобы определить, наводите ли вы курсор на сетку, а затем изменить курсор документа на «указатель», если это правда, и «по умолчанию», если это не так. При использовании a3model курсор автоматически изменяется при наведении, если вы укажете, что сетка активна.
3. Добавьте роли и описания
ARIA (Accessible Rich Internet Applications) позволяет добавлять роли и описания к элементу HTML, к которому могут обращаться программы чтения с экрана. Для интерактивных элементов обычно используется атрибут role='button', чтобы указать программе чтения с экрана, что элемент является кнопкой. При использовании a3model эта роль добавляется автоматически, если вы укажете, что сетка кликабельна. Кроме того, вы можете указать описание для программы чтения с экрана для каждой сетки.
Я постоянно узнаю больше о веб-доступности. Пожалуйста, не стесняйтесь исправлять меня или обращаться к нам, если вы заинтересованы в улучшении/расширении пакета a3model.
Создавайте приложения с повторно используемыми компонентами, такими как Lego.
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
