Другая форма доступных данных — 3d
топографическая карта Девентера, Нидерланды.
Фото: Рональд Ругенбринк
Масштабируемая векторная графика (SVG) существует в квантовом состоянии доступности. То есть SVG одновременно доступен и недоступен.
К счастью, в SVG нет принципа неопределенности.
Мы знаем, какие аспекты SVG кому доступны, а какие нет, и что мы можем сделать, чтобы улучшить оба.
Напомним, что SVG 1.0 был выпущен W3C в 2001 году. SVG 1.1 появился в 2003 году, а SVG 1.1 — второе издание в 2011 году. SVG 2.0 в настоящее время является рабочим проектом W3C.
SVG 1.1 включает в себя несколько функций, обеспечивающих доступность, но SVG 2.0 выведет доступ на другой уровень. В то время как SVG 1.1 имеет хорошую межбраузерную поддержку, SVG 2.0 все еще находится на раннем этапе своего жизненного цикла для браузеров, чтобы реализовать поддержку.
В этой статье рассматриваются способы сделать контент SVG 1.1 как можно более доступным с проблеском возможностей пространства доступности SVG 2.0.
Совет № 1: Используйте SVG
Это может показаться странным, но не в последнюю очередь в статье, посвященной SVG.
Дело в том, что одна из самых привлекательных характеристик SVG также является одной из самых доступных. SVG-контент является масштабируемым, и более того, он масштабируется без какого-либо снижения визуального качества.
Это делает его чрезвычайно универсальным с точки зрения разработки, но это также означает, что люди со зрением менее 20/20 могут наслаждаться четкими и четкими изображениями независимо от того, какой размер экрана и разрешение они используют.
Совет № 2: Используйте встроенный SVG
Лучший способ сделать SVG доступным для таких вспомогательных технологий (AT), как программы чтения с экрана и средства распознавания речи, — это вставить его прямо в HTML. Гораздо чище (в терминах кода) делать это с HTML5, чем с HTML4.x, потому что анализатор HTML автоматически переключает режим и помещает элементы и атрибуты SVG в правильное пространство имен.
Другими словами, если ваш HTML использует тип документа HTML5, вам не нужно включать объявление пространства имен в тег <svg>.
<svg version="1.1" width="300" height="200">...</svg> Использование других методов для включения SVG дает менее надежные результаты доступности или ограничивает информацию, доступную для AT.
Например, SVG-контент, извлекаемый через элементы <embed> или <object>, не так хорошо поддерживается браузерами, как встроенный SVG, а SVG, извлекаемый через элемент <img>, ограничен в информации, которая может быть представлена В.
SVG 1.1 поддерживает DOM 2 , поэтому информация о SVG может быть программно исследована и обработана. Очистка DOM не является эффективным способом для AT получать информацию. Это гораздо эффективнее, когда информация о DOM предоставляется API доступа браузера. Все современные браузеры имеют API доступа, предоставляющий свойства и методы, которые могут запрашиваться AT.
Для целей этой статьи мы сосредоточимся на следующих комбинациях браузера и программы чтения с экрана: Internet Explorer 11, Firefox 28 и Chrome 30 для Windows с Jaws 15 и NVDA 2014.1. Safari 6 для iOS / OSX с VoiceOver и Chrome 30 для Android с TalkBack.
Из этих браузеров только IE и Firefox раскрывают роль элемента <svg> через их API доступа в настоящее время. IE идентифицирует его как графику, а Firefox как диаграмму. Из программ чтения с экрана, используемых в этих браузерах, только Jaws с IE использует эту информацию, чтобы указать, что на странице есть графический контент.
Хорошей новостью является то, что мы можем с этим что-то сделать. Держите эту мысль, мы вернемся к ней позже.
Совет № 3: укажите название
Элемент SVG <title> предоставляет удобочитаемое имя для содержимого SVG или компонента внутри него. Элемент <title> должен быть первым дочерним элементом его родительского элемента, который может быть одним из элементов контейнера SVG или графических элементов или самого элемента <svg>. Спецификация SVG 1.1 специально упоминает важность предоставления заголовка для элемента <svg>.
<svg version="1.1" width="300" height="200"> <title>Green rectangle</title> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> </svg><svg version="1.1" width="300" height="200"> <title>Green rectangle</title> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> </svg>
Содержимое элемента <title> не отображается визуально по умолчанию (хотя это можно стилизовать для этого). Он должен быть доступен через API специальных возможностей браузера, особенно для того, чтобы дать его родительскому элементу доступное имя.
В предыдущем примере содержимое элемента <title> дает элементу <svg> доступное имя, что позволяет программам чтения с экрана отличать этот фрагмент содержимого SVG от любого другого на странице.
Проще говоря, элемент <title> предоставляет альтернативное текстовое описание содержимого SVG. Подумайте об этом так же, как и атрибут alt в HTML-элементе <img>.
На данный момент только IE и Firefox правильно предоставляют эту информацию, и только Jaws в IE использует ее. Мы можем улучшить эти шансы, хотя.
Когда ARIA 1.0 присутствует в HTML-коде, это заставляет браузер обновлять информацию, которую он делает доступным через его API доступа. ARIA имеет хорошую поддержку для браузеров и программ чтения с экрана (хотя в настоящее время нет других AT), поэтому она может помочь улучшить доступность SVG-контента для слепых и слабовидящих людей.
Поддержка ARIA официально представлена в спецификации SVG 2.0, но все еще можно использовать ARIA с содержимым SVG 1.1. Некоторые примеры в этой статье поднимают флаг, когда вы проверяете ваш HTML, но это разумное исключение.
<svg version="1.1" width="300" height="200" aria-labelledby="title"> <title id="title">Green rectangle</title> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> </svg><svg version="1.1" width="300" height="200" aria-labelledby="title"> <title id="title">Green rectangle</title> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> </svg>
Атрибут aria-labelledby в этом примере усиливает взаимосвязь между элементами <svg> и <title>.
Другими словами, он обеспечивает распознавание содержимого элемента <title> как доступного имени для содержимого SVG.
Эффект заключается в том, что теперь Chrome и Safari также представляют «Зеленый прямоугольник» в качестве доступного имени для содержимого SVG, и программы чтения с экрана, включая VoiceOver, TalkBack, Jaws и NVDA, используют его как минимум в одном браузере.
Совет № 4: предоставьте описание
Элемент SVG <desc> во многом похож на элемент <title>. По умолчанию визуализация не выполняется, но она предназначена для потребления человеком. Вместо предоставления имени для его родительского элемента, он предоставляет описание. В терминах доступности, элемент <desc> — это место, где вы предоставляете более подробную информацию о содержимом SVG, чем позволяет <title>.
<svg version="1.1" width="300" height="200"> <title>Green rectangle</title> <desc>A light green rectangle with rounded corners and a dark green border</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> </svg><svg version="1.1" width="300" height="200"> <title>Green rectangle</title> <desc>A light green rectangle with rounded corners and a dark green border</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> </svg>
Поддержка специальных возможностей браузера для элемента <desc> примерно такая же, как и для элемента <title>. Содержимое элемента <desc> должно быть представлено как доступное описание для содержащего элемента, но опять-таки только IE и Firefox делают почести.
Ария приходит на помощь и здесь, но не так, как вы думаете. Очевидное решение должно состоять в том, чтобы использовать атрибут aria-описано by для -re-принудительного применения взаимосвязи между элементами <svg> и <desc>.
<svg version="1.1" width="300" height="200" aria-labelledby="title" aria-describedby="desc"> <title id="title">Green rectangle</title> <desc id="desc">A light green rectangle with rounded corners and a dark green border</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> </svg><svg version="1.1" width="300" height="200" aria-labelledby="title" aria-describedby="desc"> <title id="title">Green rectangle</title> <desc id="desc">A light green rectangle with rounded corners and a dark green border</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> </svg>
Хотя браузер теперь предоставляет правильную информацию через API специальных возможностей, поддержка программы чтения с экрана гораздо менее последовательна. Jaws и NVDA с IE, VoiceOver с Safari и TalkBack с Chrome используют доступное описание, а Jaws и NVDA с Chrome и Firefox — нет.
В настоящее время обходной путь — заставить атрибут aria-labelledby работать немного сложнее.
<svg version="1.1" width="300" height="200" aria-labelledby="title desc"> <title id="title">Green rectangle</title> <desc id="desc">A light green rectangle with rounded corners and a dark green border</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> </svg><svg version="1.1" width="300" height="200" aria-labelledby="title desc"> <title id="title">Green rectangle</title> <desc id="desc">A light green rectangle with rounded corners and a dark green border</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> </svg>
Это не идеально, потому что имя и описание являются концептуально разными вещами и служат разным целям. В интересах обеспечения как можно более широкого доступа к соответствующей информации, этот подход, однако, помогает, хотя и через слегка стиснутые зубы.
Совет № 5: Используйте текст
Текст обычно доступен, однако он представлен, за исключением растровых изображений (png, jpg и т. Д.). Текст на этих изображениях не может быть обнаружен программами чтения с экрана (или поисковыми системами) и не может быть изменен для удобства чтения. Даже при увеличении качество текста на изображениях заметно снижается, и UX для людей с плохим зрением ухудшается вместе с ним.
<svg version="1.1" width="300" height="200" aria-labelledby="title desc"> <title id="title">Green rectangle</title> <desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> <text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text> </svg><svg version="1.1" width="300" height="200" aria-labelledby="title desc"> <title id="title">Green rectangle</title> <desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> <text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text> </svg>
Элемент SVG <text> делает текст в графическом контенте очень доступным. Содержимое элемента <text> отображается в виде обычного текста браузером, поэтому оно доступно для программ чтения с экрана, и, поскольку оно SVG, оно может быть пропорционально изменено по размеру с графическим содержимым для пользы любого, у кого меньше 20/20.
Вы по-прежнему хотите сделать размер текста по умолчанию удобным для чтения, но помимо этого люди могут настроить SVG под себя.
Совет № 6: сделать его фокусируемым
Если ваш SVG содержит интерактивный контент, вам необходимо убедиться, что он может фокусироваться на клавиатуре. Как и в случае с HTML, лучший способ сделать это — использовать элемент, изначально разработанный для фокусировки в первую очередь.
<svg version="1.1" width="300" height="200" aria-labelledby="title desc"> <title id="title">Green rectangle</title> <desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc> <a xlink:href=" http://example.com "> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> <text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text> </a> </svg>
Элемент SVG <a> должен означать, что пользователи клавиатуры могут ориентироваться на ссылку при использовании клавиши табуляции для перемещения по контенту. Все комбинации браузера и программы чтения с экрана, упомянутые в этой статье, поддерживают такое поведение.
Совет № 7: Дайте ему роль
Помните ту мысль, которую вы держали? Мы подошли к тому моменту, когда можем решить проблему, связанную с тем, что роль элемента <svg> не отображается корректно всеми браузерами.
Все элементы играют роль — он определяет цель, которую выполняет элемент. Роль элемента должна быть раскрыта через API доступности браузера, но вы помните, что только IE и Firefox правильно выставили элемент <svg> для AT, и только Jaws с IE использовали эту информацию.
Атрибут роли ARIA можно использовать для принудительного отображения правильной роли для программ чтения с экрана. В случае элемента <svg> мы можем применить роль img .
<svg version="1.1" width="300" height="200" aria-labelledby="title desc" role="img"> <title id="title">Green rectangle</title> <desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> </svg><svg version="1.1" width="300" height="200" aria-labelledby="title desc" role="img"> <title id="title">Green rectangle</title> <desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> </svg>
Это значительно повышает шансы браузера, так как IE, Firefox, Chrome и Safari правильно раскрывают роль. Поддержка программ чтения с экрана все еще немного противоречива, но она также улучшается, за исключением Jaws и NVDA в Chrome и Jaws в Firefox. VoiceOver с Safari, TalkBack с Chrome и Jaws и NVDA с IE теперь все признают, что на странице есть графический контент.
Однако не всегда целесообразно использовать роль img для элемента <svg>. Хорошо, если ваш SVG-контент является чисто графическим, но если он содержит интерактивный контент, может потребоваться другой подход.
<svg version="1.1" width="300" height="200" aria-labelledby="title desc"> <title id="title">Green rectangle</title> <desc id="desc">A light green rectangle with rounded corners and a dark green border.</desc> <a xlink:href=" http://example.com " tabindex="0" role="link"> <rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" /> <text x="35" y="30" font-size="1em" text-anchor="middle" fill="#000000">Website</text> </a> </svg>
В этом примере роль ссылки была применена к элементу SVG <a>. Теперь все комбинации браузеров и программ чтения с экрана, которые мы рассмотрели в этой статье, распознают, что ссылка является ссылкой, за исключением NVDA в IE.
Совет № 8: Создайте альтернативу
Несмотря на то, что вы можете многое сделать для поддержки доступности SVG с помощью ARIA, встроенная поддержка специальных возможностей для SVG среди браузеров и AT все еще развивается. SVG 2.0 изменит это, но сейчас мы должны быть реалистами в отношении текущего положения дел.
Когда вы создаете что-то в SVG, хорошей идеей будет предоставить ту же информацию и / или функциональность в формате, обеспечивающем лучшую поддержку специальных возможностей. Если ваш SVG-контент носит чисто графический характер, используйте ARIA для улучшения элементов <title> и <desc>.
Если ваш SVG содержит что-то более сложное или интерактивное, вам нужно подумать о том, чтобы представить его по-разному. Например, информация, представленная в графике SVG, также может быть представлена в таблице HTML, возможно, с выбором представлений, предлагаемых через интерфейс с вкладками .
В некоторых отношениях SVG — это забытая веб-технология. Тем не менее, он обладает огромным практическим и творческим потенциалом, и его потенциал доступности такой же сильный. В этой статье предлагаются шаги, которые вы можете предпринять, чтобы сделать ваш контент SVG 1.1 более доступным, но с SVG 2.0 появятся действительно интересные вещи.
Если вы хотите помочь нам в этом, вы можете присоединиться к сообществу W3C Accessible SVG или присоединиться к рабочей группе W3C SVG .