Доступність: рекомендований текст альтернативного тексту для SVG та MathML?

Огляд

HTML5 тепер дозволяє <svg> і <math>розмічати за допомогою документа HTML, не залежно від зовнішніх просторів імен (гідний огляд тут ). Обидва мають свої altаналоги-атрибути (див. Нижче), які сьогодні ігноруються сучасним програмним забезпеченням для зчитування з екрана. Таким чином, ці елементи недоступні для незрячих користувачів.

Чи планується впровадження стандартної конвенції заміщення тексту для цих нових елементів? Я переглянув документи і вийшов сухим!

Далі подробиці

Щодо SVG: альтернативний текст SVG може розглядатися як вміст кореня titleабо descтегу.

<svg>
  <title>An image title</title>
  <desc>This is the longer image description</desc>
  ...
</svg>

Я знайшов один зчитувач з екрана, який читає його як такий, але це стандарт? Попередні методи вставки SVG також мали проблеми з доступністю, оскільки <object>теги обробляються екранами з непослідовністю.

Щодо MathML: альтернативний текст MathML слід зберігати в alttextатрибуті .

<math alttext="A squared plus B squared equals C squared">
  ...
</math>

Оскільки, схоже, читачі з екрана цього не визнають, бібліотека математичного візуалізації MathJax вставляє текст в aria-labelатрибут під час виконання.

<span aria-label="[alttext contents]">...</span>

На жаль, NVDA, JAWS та інші ще не надійно читають ці ярлики. (Докладніше про WAI-ARIA )

Що стосується обох: не маючи успіху з в основному непідтримуваними атрибутами ARIA, я спробував використовувати titleатрибути. Здається, вони також ігноруються для цих "чужих" елементів HTML.

Підсумовування

Більше, ніж швидкий хак, я шукаю рекомендований спосіб розміщення альтернативного тексту на цих нових елементах HTML. Можливо, є специфікація W3C, яку я не помічаю? Або це ще занадто рано в грі?

Покопавшись, я знайшов кілька офіційних рекомендацій. На жаль, на даний момент більшість з них не працює. Обидва браузерів і читачі екрану є багато реалізувати , перш ніж Math і SVG можна вважати доступними, але все будуть починають дивитися вгору.

Застереження: наведені нижче рекомендації - це те, що я зібрав за останні кілька місяців кодування. Якщо щось мертве не так, будь ласка, дайте мені знати. Я намагатимусь підтримувати це оновлення в міру розвитку браузерів та програмного забезпечення AT.

MathML

Рекомендація

Використовуйте role="math"разом із тегом aria-labelнавколишнього середовища div(див. Документи ). Додавання програми tabindex="0"дозволяє зчитувачам з екрана зосередитись саме на цьому елементі; цей елемент aria-labelможна вимовити за допомогою спеціальної комбінації клавіш (наприклад, NVDA+Tab).

<div role="math" tabindex="0" aria-label="[spoken equivalent]">
  <math xmlns="http://www.w3.org/1998/Math/MathML">
    ...
  </math>
</div>

Обмеження / міркування

• Підтримка схематичного зчитувача з екрана aria-label(і що не менш важливо role="math").
  Оновлення: відповідні квитки NVDA стосовно aria-label тут та тут .
• Обгортання divта spanтеги здаються непотрібними, оскільки mathце першокласний елемент у HTML5.
• Я знайшов дуже мало посилань на alttextтег MathML .
  Оновлення: це , як видається, DAISY -специфічні Крім того, описано тут .

Список літератури

• http://www.w3.org/TR/wai-aria/roles#math
• http://lists.w3.org/Archives/Public/public-pfwg-comments/2008JanMar/0008.html
• http://www.w3.org/TR/wai-aria-practices/#math

SVG

Рекомендація

Використовуйте теги верхнього рівня <title>та <desc>теги разом із кореневим тегом SVG role="img"і aria-labelна ньому.

<svg role="img" aria-label="[title + description]">
  <title>[title]</title>
  <desc>[long description]</desc>
  ...
</svg>

Обмеження / міркування

• Станом на лютий 2011 року IE 9 beta читає всі <title> та <desc>теги, що, мабуть, небажано. Однак NVDA, JAWS та WindowEyes прочитають, aria-labelколи елемент також містить role="img".
• При завантаженні файлу SVG (тобто, не вбудований в HTML), корінь рівня <title>тега буде заголовок сторінки браузера, яка буде зчитуватися для читання з екрану.

Список літератури

• http://lists.w3.org/Archives/Public/www-svg/2010Oct/0029.html
• http://lists.w3.org/Archives/Public/public-html/2010Jun/0127.html
• http://www.w3.org/TR/wai-aria/roles#img
• http://www.w3.org/TR/wai-aria/roles#namecalculation

Взагалі, HTML5 намагається відмовити авторам надавати вміст, прихований від зрячих користувачів, оскільки (а) він часто містить нову інформацію, яка може бути корисною для зрячих користувачів, (б) він часто погано пишеться, оскільки на нього (як правило, мало відгуків) ) зрячий автор, і (в) його не дотримуються настільки ретельно, а тому він може швидко зачепитися.

Отже, замість того, щоб приховувати інформацію в атрибуті, подумайте про те, щоб розмістити її зазвичай на сторінці як заголовок у <p>тезі, що прилягає до розділу svg або math, або помістіть текст у <figcaption>тег і помістіть це та розділ svg / math у <figure>елемент.

Якщо ви дійсно не хочете, щоб візуальні користувачі бачили інформацію, я вважаю, що стандартною технікою є абсолютне розташування підпису з великим негативним значенням "ліворуч", принаймні до тих пір, поки зчитувачі з екрана не наздогнають HTML5.

Що стосується SVG, подібного, але не ідентичного наведеним вище пропозиціям, здається, найкращим поточним підходом може бути використання aria-labelledby, посилаючись на ідентифікатор елемента, що містить "текст заміщення" (а не сам текст заміщення).

<svg aria-labelledby="svg1title">
<title id="svg1title">A wide rectangle</title>
<rect width="70" height="10" fill="black" />
</svg>

Ви також можете використовувати як заголовок, так і елементи desc, встановивши aria-labelledby = "svg1title svg1desc".

Джерело: http://www.sitepoint.com/tips-accessible-svg/

Прикро, якщо ви це зробите, вам потрібно буде (якось) переконатись, що ідентифікатори є унікальними на всій сторінці (іншими словами, якщо ви використовуєте багато SVG, всі вони повинні мати різні ідентифікатори для заголовка). Це також стосується інших ідентифікаторів у SVG і є загальним серйозним роздратуванням для вбудованого SVG.

(Якщо це серйозно проблематично, ви можете розглянути можливість вбудовування SVG за допомогою тегу img - ви все одно можете зробити це «вбудовано» без зовнішнього файлу, якщо використовуєте URL-адресу даних і кодуєте SVG у base64.)

Теоретично зображення svg має бути більш доступним, ніж растрове зображення з тегом alt. З одного боку, текст можна зберігати як текст у svg, цілі фрагменти тексту, а не лише коротке речення. Сумно, якщо читачі екрану ігнорують цю додаткову інформацію. Однак не весь текстовий вміст може бути видимим у будь-який момент часу, як і для html. Багато зображень svg - це статичні зображення, але зростаюча тенденція (заснована на фактичному використанні у відкритому Інтернеті), схоже, полягає у використанні більш динамічних svgs, наприклад для відображення графіків або діаграм, які можна редагувати або складати.

Інша справа, про яку слід пам’ятати - це те, що <title> елементи будуть відображатися як підказки (для прицільних користувачів) у всіх браузерах, що підтримують svg, AFAIK (принаймні останнього покоління), і що ви можете розміщувати їх всередині інших елементів svg (заголовок стосується елемент, до якого він є безпосередньою дитиною).

Не тестував цього, але ви можете спробувати додати alt = "whatever" до контейнера DIV. Так, це неприпустимий атрибут для DIV, але я бачу, що старі зчитувачі екрана не хвилюються, де з'являється alt.

Наприклад:

<div aria-label="Whatever" alt="Whatever" role="math">
    <math>...</math>
</div>

Очевидно, що це припускається, що зчитувачі екрана будуть читати атрибути alt (неправильно) на інших елементах, крім IMG. Не тестував, але це краще, ніж чекати, поки зчитувачі з екрана наздоженуть, якщо це спрацює.