html accessibility: прив'язка тегів з фоновими зображеннями на псевдоелементи - html, image, background, accessibility

Моя компанія досліджує деякі сценарії, які ми часто використовуємо в нашому дизайні і які ми розуміємо, що можуть не бути на 100% сумісними зі стандартами WCAG 2.0.

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

Кращі альтернативи, про які я знаю:

1. Використовуйте a title на посилання

2. Додайте текст до посилання, загорнутого в span з класом "тільки для читання з екрана", наприклад, з цього прикладу eBay Mind Шаблони:

   .clipped {
   border: 0 !important;
   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
   clip: rect(1px, 1px, 1px, 1px);
   height: 1px !important;
   overflow: hidden;
   padding: 0 !important;
   position: absolute !important;
   white-space: nowrap !important;
   width: 1px !important;
   }
   

А щоб бути явним, це приклад стилізації фонового зображення псевдо класу, який ми використовуємо

.pseudo::after {
content: "";
display: block;
width: 64px;
height: 64px;
background-image: url("images/pizza.png");
}

Будь-які ідеї, які з них більш сумісні?

Варіант 1: Заголовок, без тексту всередині

<a title="pizza title" href="http://pizza.com" class="pseudo pizza"></a>

Варіант 2: тільки текст читача екрана у посиланні

<a href="http://pizza.com" class="pseudo pizza">
<span class="clipped">pizza text</span>
</a>

Відповіді:

1 для відповіді № 1

Коротка відповідь: віддайте перевагу другий, якщо це можливо.

The title атрибут трохи складніше, оскільки не всі читачі екрана читають його за замовчуванням. Таким чином, щоб бути на безпечній стороні і 100% охоплені читачами екрану, використовуйте текст всередині <a> і, якщо це необхідно, зробіть це лише для читання з екрана.

---

1 для відповіді № 2

Я також проголосував би за другий варіант, але інший метод полягає в тому, щоб фактично мати текстовий вміст у посиланні, але додати text-indent: -5000px; (або інше аналогічне високе негативне значення) для свого CSS, щоб перемістити текст з екрану.

---

0 для відповіді № 3

Коли це важко вибрати між кращим з двох світів, не намагайтеся.

Найпростіше рішення:

<a href="http://pizza.com" class="pseudo pizza" title="pizza text" aria-label="pizza test">
<span class="clipped">pizza text</span>
</a>

Чому? Тому що title атрибут буде доступний для користувачів, що не використовують екранний читач, як підказка, а екранний читач може використовувати обрізаний текст, коли він не налаштований для його використання.

Використання aria-label Також дуже важливо використовувати візуально CSSприховані елементи можуть призвести до випадкового поведінки в залежності від використовуваної допоміжної технології. Наприклад, деякі допоміжні технології можуть видаляти невидимий текст, а інші зберігають їх.

Найкращим вибором для підтримки всіх читачів є використання трьох варіантів: aria-label для останніх екранних читачів, обрізаний текст для старих і title атрибут для стандартних користувачів.

---