Highcharts доступность: влияние на маркеры данных и решения

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

Содержание

• Влияние модуля доступности Highcharts на маркеры данных
• Почему маркеры активируются после обновления графика
• Способы решения проблемы с маркерами
• Настройка доступности Highcharts без побочных эффектов
• Оптимизация производительности и доступности графиков

Влияние модуля доступности Highcharts на маркеры данных

Модуль доступности Highcharts работает как отдельный механизм, который взаимодействует с основной конфигурацией графиков. При включении этого модуля через accessibility: { enabled: true }, библиотека начинает автоматически управлять отображением элементов для улучшения доступности веб-сайта.

Вот как именно это влияет на маркеры:

// При включенном модуле доступности Highcharts может добавлять:
accessibility: {
 enabled: true,
 point: {
 valueDescriptionFormat: '{point.name}: {point.y}.'
 }
}

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

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

Почему маркеры активируются после обновления графика

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

Вот пошаговый процесс, который приводит к активации маркеров:

1. Перерисовка графика: При обновлении данных Highcharts полностью перерисовывает все элементы графика
2. Пересчет доступности: Модуль доступности заново анализирует все точки данных
3. Применение стандартных правил: Вместо сохранения индивидуальных настроек, модуль применяет общие правила доступности
4. Активация маркеров: Все точки становятся видимыми, чтобы обеспечить доступность информации

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

Пользователи на Stack Overflow также подтверждают эту проблему: “Проблема с маркерами данных при включенном модуле доступности Highcharts известна сообществу. Пользователи отмечают, что после обновления графика маркеры, которые были отключены на уровне точек данных, становятся активными.”

Способы решения проблемы с маркерами

Существует несколько подходов для решения проблемы с маркерами при включенном модуле доступности:

1. Отключение автоматической обработки маркеров

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

accessibility: {
 enabled: true,
 point: {
 valueDescriptionFormat: '{point.name}: {point.y}.',
 ignore: {
 marker: true // Игнорировать маркеры в настройках доступности
 }
 }
}

2. Использование кастомной логики для управления маркерами

Если стандартные настройки не работают, можно добавить кастомную логику:

Highcharts.wrap(Highcharts.Point.prototype, 'drawMarker', function(proceed) {
 if (this.series.chart.options.accessibility && 
 this.series.chart.options.accessibility.enabled) {
 // Проверяем, нужно ли отображать маркер для этой точки
 if (this.shouldShowMarker) {
 proceed.apply(this, Array.prototype.slice.call(arguments, 1));
 }
 } else {
 proceed.apply(this, Array.prototype.slice.call(arguments, 1));
 }
});

3. Условное включение доступности

В некоторых случаях может потребоваться динамическое включение/отключение доступности:

function updateChartAccessibility(showAccessibility) {
 chart.update({
 accessibility: {
 enabled: showAccessibility
 }
 }, true); // true для перерисовки
}

4. Кастомизация ARIA-атрибутов без изменения маркеров

Вы можете оставить доступность включенной, но настроить ARIA-атрибуты по-другому:

accessibility: {
 enabled: true,
 point: {
 valueDescriptionFormat: '{point.category}: {point.value}'
 }
}

Настройка доступности Highcharts без побочных эффектов

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

Оптимальная конфигурация доступности

const chartOptions = {
 accessibility: {
 enabled: true,
 keyboardNavigation: {
 enabled: true,
 skipNullPoints: false
 },
 point: {
 valueDescriptionFormat: '{point.name}: {point.y}'
 },
 screenReaderSection: {
 beforeChartFormat: '',
 afterChartFormat: ''
 }
 },
 series: [{
 data: [{
 y: 10,
 marker: {
 enabled: false // Эта настройка должна сохраняться
 }
 }]
 }]
};

Важные параметры для контроля маркеров

1. accessibility.point.ignore.marker - позволяет игнорировать маркеры в доступности
2. accessibility.keyboardNavigation.skipNullPoints - управление пропуском точек
3. accessibility.screenReaderSection - настройка секций для программ чтения

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

После настройки обязательно проверьте:

• Маркеры остаются отключенными для нужных точек
• Доступность сохраняется для навигации с клавиатуры
• Программы чтения экрана корректно интерпретируют данные

Оптимизация производительности и доступности графиков

При работе с доступностью Highcharts важно найти баланс между функциональностью и производительностью:

Оптимизация для больших наборов данных

accessibility: {
 enabled: true,
 series: {
 description: 'График с {point.count} точками данных'
 },
 point: {
 valueDescriptionFormat: '{point.name}: {point.y}'
 }
}

Кэширование доступности

Для графиков с частыми обновлениями можно реализовать кэширование:

let accessibilityCache = {};

function getAccessibilityInfo(point) {
 const cacheKey = `${point.series.name}-${point.index}`;
 if (accessibilityCache[cacheKey]) {
 return accessibilityCache[cacheKey];
 }
 
 const info = `${point.name}: ${point.y}`;
 accessibilityCache[cacheKey] = info;
 return info;
}

Тестирование доступности

Всегда тестируйте графики с помощью:

• Программ чтения экрана (NVDA, JAWS)
• Инструментов проверки доступности браузера
• Тестирования навигации с клавиатуры

Как отмечено в обсуждениях на Stack Overflow, важно “использовать дополнительные параметры для контроля поведения маркеров” и тестировать конфигурации на разных устройствах и браузерах.

Источники

1. Highcharts Core JS API Reference — Документация по настройке опций доступности: https://api.highcharts.com/highcharts
2. Stack Overflow Discussion on Highcharts Accessibility — Обсуждение проблем с маркерами и доступностью: https://stackoverflow.com/questions/tagged/highcharts accessibility
3. Branko Sabo’s Solution — Подход к решению проблем с доступностью Highcharts: https://stackoverflow.com/users/11633374/branko-sabo
4. Manoj Gandla Sureshbabu’s Insights — Анализ взаимодействия доступности с настройками точек данных: https://stackoverflow.com/users/24388657/manoj-gandla-sureshbabu
5. Rich Finelli’s Experience — Исследование игнорирования опций при активации с клавиатуры: https://stackoverflow.com/users/3089278/rich-finelli
6. Joshua Hewitt’s Research — Анализ ARIA-атрибутов в SVG-графиках Highcharts: https://stackoverflow.com/users/4684673/joshua-hewitt

Заключение

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