MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

Власне 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,