Доступность в DHTMLX Spreadsheet

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

Spreadsheet выводит в разметке роли и состояния WAI-ARIA. Фокус клавиатуры остается на активной ячейке, а панель инструментов, строка меню и вкладки листов представляют собой по одной точке табуляции. Изменения, у которых нет собственного элемента, например отклоненное редактирование или результат поиска, попадают в live-область, которую скринридеры зачитывают вслух.

Целевое соответствие

DHTMLX Spreadsheet разработан в соответствии с WCAG 2.2 Level AA, Section 508 закона США Rehabilitation Act и EN 301 549 (техническая основа European Accessibility Act).

Соответствие отражено по каждому критерию для DHTMLX Spreadsheet 6.0.4. Доступен подробный Отчет о соответствии требованиям доступности (VPAT® 2.5): Accessibility Conformance Report.

Возможности

Область	Поддержка
Работа с клавиатуры	У каждой команды для ячеек есть клавиша. Панель инструментов, строка меню и вкладки листов представляют собой единые точки табуляции, навигация по ним выполняется стрелками. Для ширины столбца, высоты строки и фильтра столбца есть команды контекстного меню, поэтому перетаскивание или щелчок по иконке не требуются
Семантика WAI-ARIA	Ячейки образуют grid с элементами columnheader, rowheader и gridcell. Роли выводятся всегда
Модель фокуса	Фокус клавиатуры находится на активной ячейке. Tab входит в лист на активную ячейку и покидает его с последней и первой ячейки. Ctrl + F6 перемещает фокус между меню, панелью инструментов, листом и вкладками листов
Модель выделения	Активная ячейка, диапазон и несколько диапазонов передаются через aria-selected, а размер диапазона озвучивается. Выделение можно отключить с помощью опции selection
Режим только для чтения	По листу можно перемещаться, выделять, копировать и искать; редактирование отклоняется и озвучивается, контекстное меню недоступно
Скринридеры	Протестировано с NVDA, JAWS и VoiceOver
Визуальная доступность	Темы contrast-light и contrast-dark, видимый индикатор фокуса в каждой теме и признаки, не зависящие от цвета
Масштабирование текста и страницы	Интерфейс остается работоспособным при масштабе 200% и 400% и при переопределении межстрочных и межбуквенных интервалов
Настройка	Публичный метод announce() для собственных сообщений и переводимые строки локали aria_* для каждого встроенного имени и уведомления
Стандарты	WCAG 2.2 AA, Section 508, EN 301 549

Охватываемые области

Это руководство охватывает виджет Spreadsheet:

• ячейки, заголовки столбцов и строк, объединенные ячейки и закрепленные строки и столбцы
• выделение: активная ячейка, диапазоны и несколько диапазонов
• строка формул и редакторы ячеек, включая редактор ячейки со списком значений
• панель инструментов с popup-окнами выбора цвета и границ, строка меню и контекстные меню
• вкладки листов
• сортировка, фильтрация, поиск, валидация данных, ссылки в ячейках, импорт и экспорт
• темы и индикатор фокуса

Доступность итоговой страницы также зависит от приложения-хоста. См. Ответственность страницы-хоста.

Поддержка WAI-ARIA

Spreadsheet автоматически добавляет в разметку роли и атрибуты WAI-ARIA, отключить их нельзя. У каждой части виджета есть своя роль и имя, а имена берутся из локали.

Контейнер Spreadsheet

Части Spreadsheet представляют собой отдельные именованные элементы управления:

Часть	Роль / атрибут	Доступное имя
Строка меню	role="menubar" + aria-label	"Main"
Панель инструментов	role="toolbar" + aria-label	"Formatting"
Строка формул	aria-label на поле ввода	"Formula bar, B7", с адресом активной ячейки
Ячейки	role="grid" + aria-label	"Spreadsheet"
Вкладки листов	role="toolbar" + aria-label	"Sheets"
Live-область	role="status", aria-live="polite", aria-atomic="true"	визуально скрыта, расположена рядом с гридом вне role="grid"

У корневого элемента Spreadsheet нет роли ориентира (landmark), поэтому вы можете поместить его в подходящий для вашей страницы ориентир.

Поверхность ячеек

Следующие атрибуты описывают ячейки в целом. Их содержит элемент .dhx_grid-content:

Селектор	Роль / атрибут	Назначение
.dhx_grid-content	role="grid"	Интерактивный грид ячеек
.dhx_grid-content	aria-label	"Spreadsheet", из ключа локали aria_grid
.dhx_grid-content	aria-rowcount	Количество строк листа плюс строка заголовка
.dhx_grid-content	aria-colcount	Количество видимых столбцов плюс столбец с номерами строк
.dhx_grid-content	aria-readonly	"true" в режиме только для чтения и пока выделение отключено
.dhx_grid-content	aria-multiselectable	"true"; "false", пока выделение отключено

Строки и ячейки

В следующей таблице перечислены роли, а также атрибуты позиции и состояния строк и ячеек:

Селектор	Роль / атрибут	Назначение
Строка	role="row" + aria-rowindex	Строка листа. У строки 1 листа aria-rowindex="2", так как заголовок столбцов является первой строкой
Ячейка	role="gridcell" + aria-colindex	Ячейка. У столбца A aria-colindex="2", так как номера строк являются первым столбцом
Номер строки	role="rowheader"	Заголовок строки
Ячейка	aria-selected	"true" на активной ячейке и на каждой ячейке выделенных диапазонов
Ячейка	aria-readonly	"true" в режиме только для чтения, пока выделение отключено, и на заблокированных ячейках
Ячейка	tabindex	"0" на активной ячейке и "-1" на остальных, поэтому ячейки представляют собой одну точку табуляции
Активная ячейка	DOM-фокус	Фокус клавиатуры находится на самой активной ячейке, а не на отдельном поле ввода. Пока ячейка редактируется, фокус находится на редакторе ячейки
Объединенная ячейка	aria-colspan / aria-rowspan	Количество столбцов или строк, которые занимает объединенная ячейка. Покрытые ею ячейки скрыты с помощью aria-hidden="true"
Ссылка в ячейке	<a href> с target="_blank" и rel="noopener noreferrer"	Ссылка со схемой http, https, mailto, ftp или tel

Ячейка также содержит визуально скрытый текст, который скринридеры зачитывают вместе со значением:

Скрытый текст	Когда
Адрес ячейки, например "B7"	На активной ячейке и на каждой ячейке выделенного диапазона. Скринридеры зачитывают адрес перед значением
"link"	На выделенной ячейке со ссылкой. Alt + Enter открывает ссылку
"locked"	На выделенной заблокированной ячейке
Описание ошибки формулы, например "Reference error. Check the cell references"	На ячейке с ошибкой формулы
"Invalid value. Choose a value from the list"	На ячейке, значения которой нет в ее списке значений
"Filter" / "Filter applied"	На ячейке с иконкой фильтра

Заголовки столбцов и строк

Селектор	Роль / атрибут	Назначение
Буква столбца	role="columnheader" + aria-colindex	Заголовок столбца
Угол выделения всего листа	role="columnheader"	Имя "Select all"
Номер строки	role="rowheader"	Заголовок строки
Иконка меню столбца, иконки скрытых строк и столбцов	aria-hidden="true"	Декоративные. Команды находятся в контекстном меню

Заголовки не являются точками табуляции. Щелчок по букве столбца, номеру строки или углу выделяет строки или столбцы и возвращает фокус на активную ячейку.

Строка формул и редакторы

Селектор	Роль / атрибут	Назначение
Поле ввода строки формул	aria-label	"Formula bar, B7", с адресом активной ячейки. На заблокированной ячейке поле ввода имеет атрибут readonly, поэтому его значение по-прежнему можно прочитать. Пока выделение отключено, строка формул пуста и заблокирована
Поле ввода редактора ячейки	aria-label	"Cell editor, B7"
Редактор ячейки со списком значений	role="combobox", aria-controls, aria-expanded, aria-activedescendant	Список значений представляет собой listbox из элементов option, а у выделенной опции есть aria-selected
Редактор с недопустимым значением	aria-invalid="true"	Сохраненного значения ячейки нет в ее списке значений. Атрибут обновляется после сохранения значения, а не во время ввода
Иконка закрытия справки по формуле	role="button" + aria-label	"Close formula help"

Панель инструментов и меню

Селектор	Роль / атрибут	Назначение
Панель инструментов	role="toolbar" + aria-label	"Formatting"; панели инструментов popup-окна границ, строки поиска и popup-окна ссылки называются "Borders", "Search" и "Link"
Кнопка панели инструментов	aria-label	Значение кнопки. Кнопка с иконкой получает имя из подсказки, например "Bold (ctrl+b)". Иконки скрыты с помощью aria-hidden="true"
Bold, Italic, Underline, Strikethrough, Lock, Filter	aria-pressed	Включено ли форматирование или фильтр
Кнопка, открывающая выпадающий список	aria-haspopup="menu", aria-expanded	Выпадающий список представляет собой menu, названное по своей кнопке
Выравнивание, перенос текста, числовые форматы	role="menuitemradio" + aria-checked	Один вариант из взаимоисключающего набора
Text color, Background color, Border color	aria-label	Название элемента управления и текущего цвета, например "Text color: dark gray"
Цветовая палитра	role="grid" из элементов gridcell	Грид называется "Color palette". Каждая цветовая ячейка названа по своему цвету, а у выбранной есть aria-selected="true"
Список стилей границ	role="listbox" из элементов option	Опции называются "Thin line", "Medium line", "Thick line", "Dashed line", "Dotted line", "Double line"
Строка меню	role="menubar" + aria-label	"Main". Ее пункты открывают popup-окна с role="menu". В popup-окнах у пунктов форматирования role="menuitemcheckbox", а у пунктов выравнивания, переноса текста и числовых форматов role="menuitemradio". Оба вида сообщают свое состояние через aria-checked
Контекстные меню	role="menu" + aria-label	"Cell" для ячеек и "Sheet" для вкладок листов

Вкладки листов

Селектор	Роль / атрибут	Назначение
Панель вкладок листов	role="toolbar" + aria-label	"Sheets"
Вкладка листа	button + aria-pressed	Вкладка названа по своему листу. У вкладки активного листа aria-pressed="true"
Кнопка добавления листа	aria-label	"Add sheet"

Диалоги

Селектор	Роль / атрибут	Назначение
Диалоги Column width и Row height	role="dialog", aria-modal="true", aria-label	Названы по заголовку диалога. Поле ввода имеет метку "Width in pixels" / "Height in pixels"
Строка поиска	role="dialog" + aria-label	Называется "Search". Поле поиска имеет метку "Search", а кнопки называются "Previous match", "Next match" и "Close search"
Insert link, Data validation	role="dialog" + aria-label	Названы по заголовку диалога
Предупреждения	role="alertdialog", aria-modal="true", aria-labelledby, aria-describedby	Названы по заголовку предупреждения и описаны его текстом

Скрытые и декоративные элементы

Spreadsheet скрывает декоративные части от вспомогательных технологий с помощью aria-hidden="true". Это иконки блокировки, фильтра и меню столбца, иконки скрытых строк и столбцов и иконка выделения всего листа. Слой, который рисует выделение, подсветку копирования и поиска и маркер заполнения, также скрыт. Скрыты и цветная копия формулы в строке формул, и ячейки, покрытые объединенной ячейкой. У оберток разметки есть role="presentation". Фокусные ограничители до и после грида лишь передают фокус активной ячейке.

Модель выделения и редактирования

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

Ситуация	Что получает скринридер
Активная ячейка перемещается	Ячейка с ее адресом, значением и описаниями, например "B7, 120, locked"
Выделяется диапазон	"B2 to D7, 18 cells"
С помощью Ctrl выделяется несколько диапазонов	"B2 to B4, D2 to D4, 6 cells"
Редактор открывается клавишей Enter, F2 или вводом текста	Поле ввода редактора с именем "Cell editor, B7"
Открывается редактор ячейки со списком значений	Развернутый combobox. После ↑ или ↓ зачитывается выделенная опция списка
Редактирование сохраняется	Озвучиваются новые ошибки формул в отредактированных ячейках и в зависящих от них ячейках, а также недопустимые значения в отредактированных ячейках
Редактирование заблокированной ячейки отклонено	"The cell is locked"
В режиме только для чтения нажата клавиша редактирования	"The sheet is read-only"

Enter, F2 или ввод текста открывает редактор. Enter сохраняет значение и переходит вниз, Tab сохраняет его и переходит вправо, а Esc отменяет редактирование.

Навигация с клавиатуры

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

Ячейки

Клавиши	Действие
Стрелки	Перемещают активную ячейку. Активная ячейка останавливается на первой и последней видимой строке и столбце
Shift + стрелки	Расширяют выделенный диапазон
Home / End	Переход к первой или последней видимой ячейке строки
Ctrl + стрелки, Ctrl + Home / End	Переход к краю листа
Tab / Shift + Tab	Переход вправо или влево внутри строки. С последней или первой ячейки листа фокус выходит из ячеек к следующей или предыдущей части страницы, например к вкладкам листов или строке формул
Enter, F2	Открыть редактор
Esc	Закрыть редактор без сохранения
Ctrl + Space / Shift + Space	Выделить столбец или строку
Ctrl + Shift + 9 / 0	Показать скрытые строки или столбцы внутри выделенного диапазона
Alt + Enter	Открыть ссылку активной ячейки
Shift + F10 или клавиша Menu	Открыть контекстное меню с командами для ячейки или для столбца после Ctrl + Space
Alt + ↑ / ↓, Ctrl + Alt + Page Down / Page Up	Переключиться на следующий или предыдущий лист

Переход между частями

Клавиши	Действие
Ctrl + F6 / Ctrl + Shift + F6	Переместить фокус на следующую или предыдущую часть: меню, панель инструментов, лист, вкладки листов. Строка формул и скрытые части пропускаются. Открытое редактирование предварительно сохраняется
Tab / Shift + Tab	Переместить фокус на следующую или предыдущую часть в порядке табуляции страницы. Каждая панель представляет собой одну точку табуляции, а фокус попадает на элемент управления, использованный последним

Панель инструментов, строка меню и вкладки листов

Клавиши	Действие
← / →, Home / End	Переход между элементами управления панели
Enter / Space	Нажать элемент управления: выполнить команду, открыть выпадающий список или переключиться на лист
↓	Открыть выпадающий список и переместить фокус на его первый пункт
↑ / ↓	Переход между пунктами открытого выпадающего списка или меню
→ / ←	Открыть или закрыть подменю
Esc	Закрыть выпадающий список или меню и вернуть фокус на его элемент управления

Popup-окна и диалоги

Клавиши	Действие
Стрелки, Home / End	Переход между цветами цветовой палитры
Enter	Применить цвет, границу или размер в диалогах Column width и Row height
Esc	Закрыть popup-окно, диалог или строку поиска и вернуть фокус на элемент управления или ячейку, которые их открыли. В режиме пользовательского цвета вернуться к палитре. В popup-окне цвета или стиля, открытом из popup-окна границ, закрыть его и вернуть фокус на его кнопку в popup-окне границ
Tab / Shift + Tab	Переход между элементами управления диалога или режима пользовательского цвета. В popup-окне цвета или popup-окне границ закрыть его и вернуть фокус на его кнопку панели инструментов
↑ / ↓, Enter	Перемещение по списку значений ячейки и выбор значения

Примечание

У действий, рассчитанных только на указатель, есть клавиатурные альтернативы. Команды Column width и Row height контекстного меню задают точный размер без перетаскивания, а команда Open filter открывает фильтр без щелчка по его иконке.

Вспомогательные технологии

Команда DHTMLX тестирует Spreadsheet со следующими скринридерами:

Скринридер	Браузер	Платформа
NVDA	Firefox	Windows
JAWS	Chrome	Windows
VoiceOver	Safari	macOS

Скринридеры получают каждое состояние от элемента, к которому оно относится:

Состояние	Передается через	Зачитывается на
Позиция	aria-rowindex, aria-colindex и адрес ячейки в тексте ячейки	Каждой ячейке. Адрес находится в тексте активной ячейки и ячеек выделенных диапазонов
Выделение	aria-selected	Активной ячейке и ячейках выделенных диапазонов
Возможность редактирования	aria-readonly	Гриде и ячейках в режиме только для чтения и пока выделение отключено, а также заблокированных ячейках
Объединенные ячейки	aria-colspan, aria-rowspan	Объединенной ячейке
Заголовки строк	role="rowheader"	Номерах строк
Состояние переключателя	aria-pressed	Кнопках Bold, Italic, Underline, Strikethrough, Lock и Filter и вкладках листов
Состояние отметки	aria-checked	Пунктах форматирования строки меню, а также пунктах выравнивания, переноса текста и числовых форматов
Ошибки и недопустимые значения	Скрытый текст в ячейке, aria-invalid	Ячейке и ее редакторе
Ссылки	<a href> и скрытый текст "link"	Ячейке со ссылкой

Высокий контраст и фокус

Темы

В Spreadsheet есть четыре встроенные темы: light (по умолчанию), dark, contrast-light и contrast-dark. Темы contrast-light и contrast-dark соответствуют требованиям WCAG AA к контрасту текста. Переключайте тему методом dhx.setTheme() или атрибутом data-dhx-theme:

dhx.setTheme("contrast-light"); // or "contrast-dark"

Подробности см. в статье Встроенные темы.

В светлых темах цвета, которыми выделяются ссылки на ячейки в формуле, имеют контраст не менее 4.5:1.

Тема contrast-light рисует темный текст и границы на белом фоне. В показанном ниже Spreadsheet с клавиатуры открыто контекстное меню ячейки с иконкой фильтра. Его команда в фокусе, Open filter, отмечена штриховой рамкой, а активная ячейка отмечена сплошной границей основного цвета темы:

Тема contrast-dark рисует светлый текст и границы на темном фоне. Когда фокус находится на элементе управления панели инструментов, он отмечается кольцом фокуса цвета --dhx-spreadsheet-focus-color, который в темных темах светлее основного цвета границы активной ячейки:

Индикатор фокуса

Фокус клавиатуры отображается в каждой теме:

• у активной ячейки сплошная граница 2px основного цвета темы
• ячейка и редактор ячейки, находящиеся в фокусе клавиатуры, получают рамку 2px основного цвета темы
• строка формул и элементы управления панели инструментов, строки меню, вкладок листов, popup-окна границ, popup-окна ссылки и строки поиска получают рамку 2px цвета переменной --dhx-spreadsheet-focus-color
• в цветовой палитре, списке стилей границ, выпадающих списках панели инструментов и строки меню и контекстных меню пункт в фокусе получает штриховую рамку 1px цвета --dhx-color-focused
• в редакторе ячейки со списком фокус остается в редакторе, а текущий пункт списка подсвечивается цветом фона

Переменная --dhx-spreadsheet-focus-color в темных темах светлее основного цвета и может быть переопределена в пользовательской теме. Контраст каждого индикатора в каждой теме приведен в Accessibility Conformance Report.

Цвет и масштаб

• Цвет не является единственным сигналом. У активной ячейки и выделения есть граница и заливка, у недопустимого значения есть маркер и скрытое описание, а кнопки форматирования сообщают свое состояние через aria-pressed. В доступное имя цветовых кнопок входит название цвета.
• Масштаб и перестроение. Spreadsheet остается работоспособным при масштабе 200% и 400%. Ячейки прокручиваются в двух направлениях, а панель инструментов, строка меню и вкладки листов умещаются в ширину 320 CSS px.
• Интервалы текста. При переопределении интервалов текста по WCAG подписи элементов управления не обрезаются, а панель вкладок листов прокручивается, когда вкладки разрастаются.
• Прокрутка в область видимости. Активная ячейка прокручивается в область видимости рядом с закрепленными строками и столбцами.

Уведомления о состоянии

Spreadsheet озвучивает изменения, у которых нет собственного элемента, через вежливую (polite) live-область, поэтому скринридер сначала дочитывает текущее предложение:

Событие	Озвучиваемый текст	Ключ локали
Выделен диапазон	"B2 to D7, 18 cells"	aria_selectedRange, aria_rangeExtent, aria_rangeSeparator
Редактирование вызывает ошибку формулы или недопустимое значение	"B7: Reference error. Check the cell references"	aria_cellMessage
Редактирование вызывает несколько ошибок / недопустимых значений	"3 new errors. B7: ..." / "3 invalid values. B7: ..."	aria_newErrors, aria_invalidValues
Редактирование заблокированной ячейки / диапазона отклонено	"The cell is locked" / "Locked cells were not changed"	aria_lockedCell, aria_lockedCells
В режиме только для чтения нажата клавиша редактирования	"The sheet is read-only"	aria_readonlySheet
Введен текст поиска	"Results: 5. 1 of 5, B2" или "No results"	aria_searchResults, aria_searchMatch, aria_searchNoResults
Показано следующее или предыдущее совпадение	"2 of 5, B7"	aria_searchMatch
Выполнен экспорт Excel-файла	"Exporting the file", "The file is exported"	aria_exportStarted, aria_exportDone
Импортирован файл, выбранный в диалоге выбора файла	"Importing the file", "The file is imported"	aria_importStarted, aria_importDone
Применена команда Column width / Row height	"Column width set to 120 pixels"	aria_columnWidthSet, aria_rowHeightSet
Ctrl + Shift + 9 / 0 не находит, что показать	"No hidden rows in the selection"	aria_noHiddenRows, aria_noHiddenCols

Чтобы озвучить результат собственной команды, вызовите метод announce():

spreadsheet.announce("The report is saved");

Локализация

Доступные имена, описания ячеек и уведомления хранятся в локали spreadsheet в виде ключей с префиксом aria_, рядом с подписями интерфейса. Переведите их методом dhx.i18n.setLocale() до инициализации Spreadsheet:

dhx.i18n.setLocale("spreadsheet", {
    // other keys of the locale
    aria_grid: "Tabelle",
    aria_cellEditor: "Zelleneditor, {cell}",
    aria_readonlySheet: "Das Blatt ist schreibgeschützt",
    aria_selectedRange: "{range}, {count} Zellen",
    aria_rangeExtent: "{start} bis {end}"
});

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container");

Части в фигурных скобках, например {cell} или {count}, заменяются значениями и должны сохраняться в переведенных строках. Названия цветов и кнопок предупреждений берутся из локалей colorpicker и message. Полный список ключей см. в статье Локализация, а остальные локали описаны в разделе Локализация встроенных виджетов.

Примеры конфигурации

Доступная настройка по умолчанию

Для работы с клавиатуры и вывода WAI-ARIA Spreadsheet не требует настройки. Чтобы соответствовать требованиям WCAG AA к контрасту текста, выберите контрастную тему. Другие способы задать тему см. в статье Встроенные темы:

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    // the keyboard navigation and the WAI-ARIA output need no configuration
});
spreadsheet.parse(data);

dhx.setTheme("contrast-light"); // or "contrast-dark"

Настройка режима только для чтения

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

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
    readonly: true
});
spreadsheet.parse(data);

Чтобы показать данные без активной ячейки и без выделения, добавьте selection: false. Тогда грид станет одной точкой табуляции, которую клавиатура проходит насквозь.

Переведенные строки доступности

Скринридеры читают строки доступности из четырех локалей: spreadsheet содержит имена, описания ячеек и уведомления, colorpicker содержит названия цветов, message содержит названия кнопок предупреждений, а grid содержит уведомление о количестве загруженных строк. Задайте все четыре до создания Spreadsheet. Ключи см. в разделе Локализация встроенных виджетов:

const deSpreadsheet = {
    // other keys of the locale
    aria_grid: "Tabelle",
    aria_readonlySheet: "Das Blatt ist schreibgeschützt"
};
const deColorpicker = {
    aria_palette: "Farbpalette",
    aria_colorRed: "rot"
};
const deMessage = {
    aria_confirm: "Bestätigen"
};
const deGrid = {
    aria_rowsLoaded: "{count} Zeilen geladen"
};

dhx.i18n.setLocale("spreadsheet", deSpreadsheet);
dhx.i18n.setLocale("colorpicker", deColorpicker);
dhx.i18n.setLocale("message", deMessage);
dhx.i18n.setLocale("grid", deGrid);

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container");

Озвучивание пользовательской команды

Когда ваша собственная команда меняет данные, сообщите пользователям скринридеров о результате с помощью метода announce(). В примере в меню добавляется команда, очищающая активный лист:

const spreadsheet = new dhx.Spreadsheet("spreadsheet_container");

spreadsheet.menu.data.add({ id: "clear-sheet", value: "Clear sheet" });

spreadsheet.menu.events.on("click", function (id) {
    if (id === "clear-sheet") {
        spreadsheet.sheets.clear();
        spreadsheet.announce("The sheet is cleared");
    }
});

Ответственность страницы-хоста

Ряд требований относится к уровню страницы, а не компонента. Убедитесь, что страница-хост:

• задает язык документа, например <html lang="en">, и заголовок страницы
• помещает заголовок над Spreadsheet и размещает его внутри ориентира, например <main>
• предоставляет ссылку для пропуска навигации (skip link), если перед Spreadsheet стоит длинная навигация
• дает второй сигнал, например текст или иконку, любому состоянию, которое вы помечаете цветом ячейки, так как цвета стилей ячеек являются частью ваших данных
• проверяет контраст цветов, которые вы задаете в стилях ячеек и в пользовательской теме

Тестирование и методология

Команда DHTMLX проверяет доступность Spreadsheet 6.0.4 по исходному коду компонента и в браузере:

1. Автоматизированное тестирование с помощью axe-core в темах light, dark, contrast-light и contrast-dark с открытыми строкой поиска, редактором списка, диалогами и предупреждением.
2. Ручной анализ исходного кода: роли, состояния и имена каждой части, обработчики клавиатуры и области фокуса, а также токены тем с их коэффициентами контраста.
3. Ручное тестирование: прохождение сценариев только с клавиатуры по ячейкам, панелям, меню и диалогам, проверки скринридерами NVDA, JAWS и VoiceOver, масштаб 200% и 400%, перестроение при 320 CSS px и переопределение интервалов текста по WCAG.
4. Отчет о соответствии: результаты публикуются по каждому критерию в Accessibility Conformance Report, включая критерии, которые Spreadsheet поддерживает частично.

Ресурсы

• Accessibility Conformance Report (VPAT 2.5)
• Список горячих клавиш
• readonly
• selection
• announce()
• Локализация
• Встроенные темы
• WCAG 2.2
• WAI-ARIA 1.2
• WAI-ARIA Authoring Practices: Grid pattern
• WAI-ARIA Authoring Practices: Toolbar pattern