Виджет раскрытия является собственным HTML . Если вы прочтете мой пост Навигация по виджетам со ссылками + раскрытие то это будет более подробно, чем я здесь.
Как и в этом примере, доступное имя объединяется из его собственного значения aria-label и текстового значения в соответствующей ячейке, чтобы обеспечить более естественное имя (например: [n] больше элементов из ). Значение aria-extended сообщает вспомогательным технологиям, была ли кнопка расширена или нет, а также является крючком, который мы используем для стилизации.
[…]
Мэри Шелли
[…]
[…]
Значение aria-controls представляет собой разделенный пробелами список идентификаторов id строк, на которые вы воздействуете. Если поддерживается aria-controls подтвердите, что его объявление в программах чтения с экрана (только сегодня JAWS) не слишком многословно для ваших пользователей. Если это так, вы можете удалить его полностью. Его отсутствие не приведет к возникновению барьера, но может сделать виджет более удобным для использования некоторыми пользователями, когда начнет появляться полезная поддержка программы чтения с экрана.
CSS
Самый простой способ убедиться, что программное состояние кнопки соответствует визуальным стилям, — это использовать селекторы атрибутов, такие как кнопка кнопка [aria-expanded="true|false"]. Стили для обеих таблиц примеров меняют только SVG.
Функция ничего особенного. Он берет список id и передает их в селектор запросов, а также берет id кнопки. Он проверяет, затем переворачивает значение aria-extended на кнопке, одновременно меняя значение класса между показанными и скрытыми .
Если бы я мог использовать соседние селекторы братьев и сестер (отключив значение aria-extended ), я бы переключил видимость строк. Структура таблицы HTML исключает это, и это единственная причина, по которой я использую класс для этой работы.
Это не готовый к работе сценарий. Однако он учитывает Internet Explorer, не используя classList.replace который IE не поддерживает.
функция переключения (btnID, eIDs) {
// Подача списка идентификаторов в качестве селектора
var theRows = document.querySelectorAll (eIDs);
// Получить кнопку, которая сработала
var theButton = document.getElementById (btnID);
// Если кнопка не развернута ...
if (theButton.getAttribute ("aria-extended") == "false") {
// Перебираем строки и показываем их
для (var i = 0; i
При загрузке страницы строки в моем примере не скрыты с помощью встроенного CSS. Вы скрываете или отображаете их при начальной загрузке от имени Progressive Enhancement, зависит от вас и вашего варианта использования. Любой из них может быть верным подходом, но учитывайте его и в своей функции.
Столы
Я сделал две таблицы, чтобы вы могли увидеть, как это может работать. Виджет раскрытия полной строки показывает текст, который также объявлен для программ чтения с экрана, и обеспечивает гораздо большую область попадания. Как ячейка, охватывающая столбцы, она может усложнить навигацию по таблицам для начинающих пользователей программ чтения с экрана, но ее гораздо проще найти - вы можете наткнуться на нее из любого столбца.
Другой пример имеет виджет раскрытия в своем собственном столбце, что, вероятно, облегчает его избежание. Это также гарантирует свой собственный заголовок столбца. Это значение Toggle и я использую хорошо проверенную технику, чтобы визуально скрыть его (частично потому, что NVDA не поддерживает атрибут abbr в
). См. визуально скрытый класс чтобы украсть стили.
HTML-код для строки не является сложным. Просто id и class причем последний переключается с помощью скрипта.
Эмма Дороти Элиза Невитт Саутворт
Неизвестный; или Тайна вороньих скал
1889
CSS
CSS для двух классов, которые настраивают отображение строки имеет решающее значение. Если вы используете display: block вместо display: table-row то браузер удаляет всю семантику для строки, и вспомогательная технология не может перемещаться по ней. См. Мой пост Таблицы, CSS Display Properties и ARIA для более подробной информации.
Обратите внимание, что, хотя программа чтения с экрана не объявляет, сколько новых строк добавлено (отсюда и доступное имя для управления этим ожиданием), как только новые строки становятся видимыми, программа чтения с экрана учитывает их в общем количестве строк и позиции пользователя в таблице.
Также важно обеспечить, чтобы все добавляемые вами новые строки поступали после элемента управления, который заставляет их отображаться в исходном порядке. В противном случае использование программы чтения с экрана не позволит узнать, где они появились, не говоря уже о том, чтобы искать их за столом.
Я добавил несколько видео, показывающих, как пользователь программы чтения с экрана может перемещаться по функции расширения.
JAWS / IE11
Использование JAWS 2018 и Internet Explorer 11 для навигации по таблице с помощью виджета раскрытия, который находится в одной ячейке. Обратите внимание, что JAWS визуально выделяет первую ячейку в строке с содержимым, а не пустые ячейки. Также не выделяются кнопки.
NVDA / Firefox
Использование бета-версий NVDA 2019 и Firefox 69 для навигации по таблице с виджетом раскрытия, который находится в ячейке, охватывающей все столбцы. NVDA только визуально выделяет интерактивные элементы управления (красная рамка вокруг кнопки перехода).
VoiceOver / Safari
Использование VoiceOver и Safari в macOS 10.14.5 для навигации по таблице с виджетом раскрытия, который находится в одной ячейке. Вы можете заметить, что
исчезает, когда раскрытие раскрыто (оно перемещается ниже таблицы); Я понятия не имею, почему, и я не потратил время, чтобы погрузиться в него.
Загрузка...
