Доступные SVG: идеальные шаблоны для пользователей программ чтения с экрана

Хотя масштабируемая векторная графика (SVG) была впервые представлена ​​в конце 90-х годов, в последнее десятилетие ее популярность резко возросла благодаря ее чрезвычайной гибкости, высокой точности и относительной легкости в мире, где пропускная способность и производительность имеют большее значение, чем когда-либо. . Достижения в JavaScript и введение медиа-запросов CSS, таких как @prefers-color-scheme и @prefers-reduced-motion, расширили функциональность SVG далеко за пределы их первоначального варианта использования простого отображения векторных изображений на веб-сайте.

По мере развития технологии SVG наше понимание того, как мы проектируем и разрабатываем SVG, также должно улучшаться. Частью этого прогресса является рассмотрение влияния такого дизайна и кода на реальных людей, то есть на наших конечных пользователей.

В этой статье описываются двенадцать различных шаблонов SVG, найденных «в дикой природе», и каждое альтернативное описание объявляется при доступе к нему с помощью различных комбинаций операционных систем, браузеров и программ чтения с экрана.

Конечно, следующие примеры не являются исчерпывающим списком всех возможных шаблонов, используемых в цифровой сфере, но они выделяют некоторые из наиболее популярных или распространенных шаблонов SVG, с которыми вы можете столкнуться. Продолжайте читать, чтобы узнать, каких шаблонов SVG вам следует избегать, а какие шаблоны являются наиболее инклюзивными!

Основные альтернативные описания с использованием <img>

Первая группа из четырех шаблонов использует <img> для ссылки на файл SVG. Это хороший выбор для простых, несложных изображений на вашем веб-сайте, в приложении или другом цифровом продукте. Хотя недостатком использования этого шаблона является то, что вы не можете легко управлять многими визуальными элементами или анимацией как встроенным SVG, этот шаблон должен отображать более легкие и быстрые изображения в целом и облегчать обслуживание SVG, которые вы используете в нескольких местах.

Шаблон №1: <img> + alt="[words]"

 <img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Шаблон №2: <img> + role="img" + alt="[words]"

 <img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Шаблон №3: <img> + role="img" + aria-label="[words]"

 <img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Шаблон № 4: <img> + role="img" + aria-labelledby="[ID]"

 <p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg">

Основные альтернативные описания с использованием <svg>

Вторая группа из четырех шаблонов использует <svg> со встроенным файлом SVG. Хотя добавление кода SVG непосредственно в разметку потенциально может немного замедлить загрузку страницы, эта незначительная неэффективность будет компенсирована за счет большего контроля над визуальными элементами или анимацией ваших изображений. Добавляя свой SVG непосредственно в HTML, вы также получаете больше возможностей, когда дело доходит до предоставления информации об изображении пользователям программы чтения с экрана.

Шаблон №5: <svg> + role="img" + <title>

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

Шаблон №6: <svg> + role="img" + <text>

 <svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg>

Шаблон №7: <svg> + role="img" + <title> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> [design code] </svg>

Шаблон № 8: <svg> + role="img" + <title> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg>

Расширенные альтернативные описания с использованием <svg>

Последняя группа из четырех шаблонов использует <svg> со встроенным файлом SVG, как и вторая группа. Однако в этом случае мы расширяем простые альтернативные описания дополнительной информацией из-за сложности изображения.

Это был бы хороший выбор шаблона для более сложных изображений, которые нуждаются в дополнительных пояснениях. Тем не менее, важно иметь в виду, что есть люди с ограниченными возможностями (например, с когнитивными расстройствами), которым было бы полезно иметь эту дополнительную информацию об изображении, доступную на экране, а не скрытую в коде SVG.

В зависимости от типа и объема информации, которую вам нужно добавить в SVG, вы можете рассмотреть возможность использования другого подхода.

Шаблон №9: <svg> + role="img" + <title> + <text>

 <svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg>

Шаблон №10: <svg> + role="img" + <title> + <desc>

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

Шаблон №11: <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

 <svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg>

Шаблон №12: <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

 <svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> 

Победители и проигравшие шаблоны SVG

Запуская различные программы для чтения с экрана в различных комбинациях операционных систем и браузеров, мы видим определенные закономерности, возникающие в итоговой таблице результатов. Есть несколько явных победителей и проигравших шаблонов SVG , а также несколько шаблонов где-то посередине, которые вы можете реализовать, если знаете о них и можете принять их ограничения. Глядя на таблицу результатов, мы можем сделать следующие выводы:

Основные альтернативные описания с использованием <img> (группа 1)

Лучший на шоу

• Шаблон 2 : <img> + role="img" + alt="[words]"
• Шаблон 3 : <img> + role="img" + aria-label="[words]"

Будьте осторожны

• Шаблон 4 : <img> + role="img" + aria-labelledby="[ID]"

Не рекомендуется

• Шаблон 1 : <img> + alt="[words]"

Основные альтернативные описания с использованием <svg> (группа 2)

Лучший на шоу

• Шаблон 5 : <svg> + role="img" + <title>
• Шаблон 8 : <svg> + role="img" + <title> + aria-labelledby="[ID]"

Будьте осторожны

• Шаблон 7 : <svg> + role="img" + <title> + aria-describedby="[ID]"

Не рекомендуется

• Шаблон 6 : <svg> + role="img" + <text>

Расширенные альтернативные описания с использованием <svg> (группа 3)

Лучший на шоу

• Шаблон 11 : <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"

Примечание . Хотя этот шаблон не идеален, поскольку он повторяет альтернативные описания, он не игнорировал ни один из элементов тестирования, в отличие от шаблонов «соблюдайте осторожность».

Будьте осторожны

• Шаблон 9 : <svg> + role="img" + <title> + <text>
• Шаблон 10 : <svg> + role="img" + <title> + <desc>
• Шаблон 12 : <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"

Не рекомендуется

• Ни один из шаблонов в этой группе полностью не прошел тесты.

Результаты тестирования

Подведение итогов

Важно отметить, что частью интерпретации результатов тестов шаблонов SVG является понимание того, что у создателей каждого средства чтения с экрана есть рекомендуемые браузеры , которые они полностью поддерживают. Это не означает, что вы не должны или не можете использовать программу чтения с экрана в другом браузере, это просто означает, что если вы это сделаете, результаты могут быть не такими точными, как если бы вы использовали рекомендуемые.

Тестирование шаблонов для этой статьи действительно включало некоторые комбинации браузеров и программ чтения с экрана , которые могут попасть в категорию «второстепенных», но есть также примечания о том, какие комбинации операционных систем, браузеров и программ чтения с экрана рекомендуются для вашего собственного тестирования. Результаты этих тестов должны помочь вам принять наилучшее возможное решение по шаблону SVG, исходя из ваших потребностей и ограничений шаблона.

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

Если вам нужна дополнительная помощь в выборе шаблона для вашей среды, ознакомьтесь со статьей Good, Better, Best: Untangling The Complex World Of Accessible Patterns, которая поможет вам ориентироваться в сложных водах доступных шаблонов. Вооружившись всей этой информацией и приложив немного усилий, ваши SVG уже на пути к тому, чтобы стать более инклюзивными для всех.

Примечание редактора . Вы можете ознакомиться с передовыми методами обеспечения специальных возможностей вместе с Кэри на ее предстоящем онлайн-семинаре по доступным клиентским шаблонам — с рекомендациями, инструментами тестирования, вспомогательными технологиями и инклюзивными шаблонами проектирования. Онлайн и вживую.