We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Чутливі ділянки та доступність

Власне HTML-елемент <canvas> являє собою лише множину кольорових точок і не містить жодних відомостей про намальовані об'єкти. Вміст полотна жодним чином не розкривається інструментам доступності, як це передбачено для семантичного HTML. Тож загалом, слід уникати використання полотен в застосунках або сайтах, від яких вимагається підтримка доступності. Проте наведені нижче настанови допоможуть все ж дещо уприступнити вміст полотен.

Запасний вміст

Вміст між тегами <canvas> … </canvas> може відігравати роль запасного варіанту для тих переглядачів, що не мають підтримки полотен. Він також вельми корисний тоді, коли користувач потребує допоміжних засобів (як-от екранний диктор), які можуть читати дерево DOM всередині. Чудовий приклад з html5accessibility.com показує, як це можна здійснити:

<canvas> 
  <h2>Shapes</h2> 
  <p>A rectangle with a black border. 
   In the background is a pink circle. 
   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>. 
   Partially overlaying the circle is a green 
   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a> 
   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
   both of which are semi-opaque, so the full circle can be seen underneath.</p> 
</canvas> 

Перегляньте відео від Стіва Фолкнера про те, як екранний диктор NVDA читає цей приклад.

Правила ARIA

Accessible Rich Internet Applications (ARIA) визначає способи того, як зробити веб-застосунки та вміст доступнішими для людей з певними вадами. Можна вжити ARIA-атрибути для описання поведінки й призначення HTML-елемента полотна:

<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>

Дивіться ARIA та Використання ARIA, щоб дізнатись більше.

Чутливі ділянки

Однією з поширених задач є з'ясування того, чи належать координати миші до певної ділянки на полотні. Відповідний API уможливлює створення певних чутливих ділянок на полотні та дає інші можливості розкрити взаємодіяльний вміст полотна інструментам доступності. Він дозволяє полегшити виявлення влучень (належності координат миші певній ділянці) та доправити відповідні події до елементів DOM. Цей API має такі три методи (досі лишаються дослідними в сучасних переглядачах, тож перевіряйте таблиці сумісності):

CanvasRenderingContext2D.addHitRegion()
Створює чутливу ділянку на полотні.
CanvasRenderingContext2D.removeHitRegion()
Видаляє з полотна чутливу ділянку із зазначеним id .
CanvasRenderingContext2D.clearHitRegions()
Видаляє з полотна всі чутливі ділянки.

Створюючи новий контур з допомогою CanvasRenderingContext2D.beginPath() можна перетворити його на чутливу ділянку, а тоді, перевіряючи значення властивості MouseEvent.region, з'ясовувати, чи влучає миша у вказану область:

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
ctx.fill();
ctx.addHitRegion({id: 'circle'});

canvas.addEventListener('mousemove', function(event) {
  if (event.region) {
    console.log('Влучив у ділянку: ' + event.region);  // Влучив у ділянку: circle
  }
});

Крім того, метод addHitRegion() може також приймати параметр control, що вказує елемент (має бути нащадком елемента canvas), до якого доправлятимуться події:

ctx.addHitRegion({control: element});

Наприклад, це може стати в нагоді для доправлення подій до елементів <input>.

Облямівки фокуса

Для роботи з клавіатури, облямівки фокуса є зручними індикаторами, що полегшують пересування сторінкою. Щоб намалювати облямівку фокуса навколо малюнка (контура) на полотні, можна скористатися методом drawFocusIfNeeded().

CanvasRenderingContext2D.drawFocusIfNeeded()
Якщо відповідний елемент перебуває у фокусі, цей метод намалює облямівку навколо контура.

Крім того, можна використати метод scrollPathIntoView(), щоб зробити елемент видимим на екрані, якщо він перебуває у фокусі, наприклад.

CanvasRenderingContext2D.scrollPathIntoView()
Гортає поточний чи вказаний контур до видимої області.

Див. також

Мітки документа й учасники

Зробили внесок у цю сторінку: asmforce
Востаннє оновлена: asmforce,