Как да създавате графики, които работят за всички

Проблемът с графиките

Графиките и диаграмите са по своята същност визуални обекти. Те кодират информация чрез форма, позиция и цвят — три канала, които са или безсмислени, или изкривени за значителна част от вашата аудитория.

Около 8% от мъжете имат някаква форма на нарушено цветно зрение. Потребителите на екранни четци не получават никаква смислена информация от SVG стълбовидна диаграма, освен ако разработчикът не я е предоставил изрично. А потребителите, работещи с клавиатура, често откриват, че интерактивните графики са напълно недостижими.

Резултатът: визуализацията на данни е вероятно областта на уеб дизайна, в която пропастта между това, което виждащите потребители преживяват, и това, което преживяват всички останали, е най-широка. И това е пропаст, която организациите рядко забелязват, защото одитите за достъпност се фокусират върху форми и навигация, преди да стигнат до графиките на страницата с отчети.

Това ръководство разглежда какво всъщност изисква достъпната визуализация на данни — не контролен списък, а разбиране защо графиките се провалят и какво да направите по въпроса.

Защо графиките са особено трудни

Повечето HTML елементи имат нативна роля, име и състояние, които асистиращите технологии разбират. Един <button> е бутон. Една <table> е таблица с редове и колони. Полето във формуляр има етикет.

Графика, изобразена като SVG или canvas, няма нищо от това. Тя е рисунка. Екранните четци виждат изображение (ако имате късмет) или изобщо нищо. Разработчикът трябва да изгради семантичния слой от нулата.

В същото време графиките често са най-важното съдържание на страницата. Стълбовидна диаграма, показваща месечните приходи, линейна графика, проследяваща растежа на потребителите, кръгова диаграма, разбиваща разпределението по категории — това често е причината потребителят да е на страницата. Изключването им за значителна част от посетителите е сериозен проблем, а не дребно неудобство.

Проблемът с цвета: никога не разчитайте само на цвят

Най-честият пропуск в достъпността на графиките е използването на цвета като единствен начин за разграничаване на серии от данни или категории.

Линейна графика с четири линии, различаващи се само по цвят — червена, синя, зелена, оранжева — е нечетима за много потребители с нарушено цветно зрение и напълно безсмислена за всеки, който използва режим на висок контраст или дисплей в сива гама.

Решението е излишъчното кодиране: използвайте цвят плюс поне едно друго визуално свойство.

Линейни графики: използвайте различни шарки на пунктир наред с цветовете (плътна, пунктирана, точкова, тире-точка)
Стълбовидни диаграми: използвайте текстури или шарки наред с цветовете или добавете етикети с данни директно върху стълбовете
Точкови диаграми: използвайте различни форми на маркерите (кръг, квадрат, триъгълник, ромб) наред с цветовете
Кръгови диаграми: добавете текстови етикети вътре във или до всеки сегмент — никога не разчитайте само на легенда

Това попада под WCAG 2.2 1.4.1 Използване на цвят (ниво A): цветът не трябва да бъде единственото средство за предаване на информация.

Контраст при графиките

Нетекстовите визуални елементи като стълбове на диаграми, линии и точки с данни трябва да отговарят на контраст 3:1 спрямо фона си според 1.4.11 Контраст на нетекстово съдържание (ниво AA). Тествайте цветовата палитра на графиките си с инструмент за проверка на контраста — много брандови палитри, които изглеждат добре в големи площи, се провалят на това изискване при по-малки размери.

Текстът в графиките — етикети на осите, етикети с данни, легенди — трябва да отговаря на същите изисквания за контраст като основния текст: 4.5:1 за обикновен текст, 3:1 за едър текст според 1.4.3 Минимален контраст.

Осигуряване на текстови алтернативи

Всяка графика се нуждае от текстова алтернатива, която предава показваните данни. Каква точно форма приема тя зависи от сложността на данните.

Прости графики: описателен алтернативен текст

За стълбовидна диаграма с пет стойности добре написан alt атрибут може да обобщи основната находка:

<img
  src="monthly-revenue.png"
  alt="Monthly revenue Q1 2025: Jan £42k, Feb £38k, Mar £51k,
       Apr £49k, May £56k. Steady upward trend from February onwards."
>

Алтернативният текст тук прави две неща: посочва данните и обобщава основното заключение. Не описвайте графиката само визуално („стълбовидна диаграма, показваща приходи“). Опишете какво съобщава графиката.

Сложни графики: допълнителни таблици с данни

Когато една графика съдържа повече данни, отколкото се побират в alt атрибут, осигурете достъпна таблица с данните наблизо. Тя обслужва и хората, които предпочитат табличен формат пред визуален. Таблицата може да е скрита по подразбиране, но достижима:

<figure>
  <figcaption>Revenue by region, Q1 2025</figcaption>
  <svg aria-labelledby="chart-title" aria-describedby="chart-desc" role="img">
    <title id="chart-title">Revenue by region, Q1 2025</title>
    <desc id="chart-desc">Bar chart showing UK leading with £180k,
    followed by DE at £124k, FR at £98k, and NL at £71k.</desc>
    <!-- chart content -->
  </svg>
  <details>
    <summary>View as table</summary>
    <table>
      <caption>Revenue by region, Q1 2025</caption>
      <thead><tr><th>Region</th><th>Revenue</th></tr></thead>
      <tbody>
        <tr><td>UK</td><td>£180,000</td></tr>
        <tr><td>DE</td><td>£124,000</td></tr>
        <tr><td>FR</td><td>£98,000</td></tr>
        <tr><td>NL</td><td>£71,000</td></tr>
      </tbody>
    </table>
  </details>
</figure>

Специфични модели за SVG

SVG графиките, изобразени инлайн (а не като файлове с изображения), могат да бъдат направени директно достъпни с помощта на ARIA. Основни модели:

Добавете role="img" към елемента <svg>
Осигурете <title> като първо дете на <svg> и го свържете с aria-labelledby
Добавете <desc> за по-дълги описания и го свържете с aria-describedby
Маркирайте декоративните елементи (мрежови линии, деления) с aria-hidden="true", за да намалите шума

За интерактивни графики, в които потребителите могат да избират точки с данни, всеки интерактивен елемент се нуждае от правилна роля, име и поддръжка на клавиатура.

Клавиатурна навигация за интерактивни графики

Ако графиките ви са интерактивни — подсказки при посочване, кликаеми сегменти, избор на области и мащабиране — те трябва да са напълно управляеми с клавиатура според 2.1.1 Клавиатура (ниво A).

За графики с много точки с данни приложете модела roving tabindex: само един елемент от графиката е в tab последователността в даден момент, а клавишите със стрелки местят фокуса между точките с данни в рамките на графиката.

<!-- Each bar is a button, navigable with arrow keys -->
<g role="group" aria-label="Monthly revenue bars">
  <rect
    role="button"
    tabindex="0"
    aria-label="January: £42,000"
    onkeydown="handleChartKey(event)"
    ...
  />
</g>

Подсказките, които се появяват само при посочване с мишката, трябва да се появяват и при клавиатурен фокус. Подсказка, видима само за потребителите с мишка, е нарушение на достъпността.

Избор на правилния тип графика

Някои типове графики са по природа по-достъпни от други. Когато имате избор:

Тип графика	Достъпност	Бележки
Стълбовидна диаграма	Висока	Стойностите лесно се кодират с етикети; възможна е добра клавиатурна поддръжка
Линейна графика	Висока	Използвайте различни шарки на пунктир; анотирайте ключовите точки
Таблица	Най-висока	Най-лесна за правене достъпна; често правилният избор за данни
Точкова диаграма	Средна	Изисква внимателно разграничаване на маркерите; клавиатурната навигация е сложна
Топлинна карта	Ниска	По природа зависима от цвят; винаги осигурявайте таблична алтернатива
Кръгова/пръстеновидна	Ниска	Стойностите се сравняват трудно; избягвайте при повече от 3-4 сегмента

При съмнение добре форматирана таблица почти винаги е по-достъпна от графика — и често по-лесна за четене независимо от увреждането. Не използвайте графика, защото изглежда модерно; използвайте я, когато тя наистина помага на потребителите да разберат тенденция или сравнение по-бързо, отколкото табличните данни биха го направили.

Тестване на вашите графики

Автоматизираните скенери за достъпност могат да проверят за липсващи alt атрибути и някои ARIA модели, но не могат да потвърдят, че данните в графиката са смислени, че клавиатурната навигация работи правилно или че графиката е разбираема за потребител на екранен четец. Тествайте с:

Екранен четец (NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari): навигирайте до графиката и проверете какво се обявява
Само с клавиатура: достигнете графиката с tab и потвърдете, че всички интерактивни елементи са достижими и управляеми с клавиатура
Симулация на далтонизъм: използвайте Chrome DevTools (Rendering > Emulate vision deficiency), за да видите как изглежда графиката при различни видове нарушено цветно зрение
Мащабиране до 200%: проверете дали етикетите и легендите не се припокриват или отрязват

Нашата услуга за оценка с екранен четец тества графики с реални потребители на асистиращи технологии — най-бързият начин да разберете какво всъщност преживяват вашите потребители.