Как скрыть ASCII-изображение от программ чтения с экрана и других AT, используя ARIA HTML5?
Мы добавили несколько симпатичных ASCII-иллюстраций на наш веб-сайт. Мы обеспокоены тем, что это может вызвать проблемы для программ чтения с экрана, поэтому я подумывал добавить aria-hidden="true" или role="presentation", поэтому программы чтения с экрана не видят искусство ASCII. Это правильный подход? У меня нет программы для чтения с экрана, и похоже, что она скрыта от арии или роль не полностью скрывает контент.
Это выглядит так:
Я мог бы сделать это как изображение, но было бы здорово сделать это как настоящий текст, который нельзя выбрать с помощью CSS. Мне все равно кажется странным делать персонажей как изображение.
2 ответа
Правильно использовать следующую роль: img с aria-label или aria-laelledby. Вот пример из HTML Living Standard :
Эти функции могут быть использованы для того, чтобы инструменты доступности предоставляли своим пользователям более полезные способы. Например, искусство ASCII, которое на самом деле является изображением, представляется текстом, и при отсутствии соответствующих аннотаций средства чтения с экрана будут в конечном итоге очень болезненным чтением множества знаков препинания. Используя функции, описанные в этом разделе, вместо этого можно заставить AT пропускать искусство ASCII и просто читать заголовок:
<figure role="img" aria-labelledby="fish-caption"> <pre> o .'`/ ' / ( O .-'` ` `'-._ .') _/ (o) '. .' / ) ))) >< < `\ |_\ _.’ ‘. \ ‘-._ _ .-’ ‘.) jgs `\__\ </pre> <figcaption id="fish-caption"> Joan G. Stark, “<cite>fish</cite>“. October 1997. ASCII on electrons. 28×8. </figcaption> </figure>
Спецификация WAI-ARIA дает определение hidden следующим образом:
Указывает, что элемент не виден или воспринимается для любого пользователя. Элемент считается скрытым в DOM, только если он или один из его элементов-предков имеют aria-hidden имеет значение
true.
Итак, в вашем случае просто примените aria-hidden к элементу, который содержит ascii-art и который будет удовлетворительным.