Зображення

Зображення, якому встановлено і заповнено атрибут "alt"

Вимога виконується.

<img class="img" alt="Вид збоку на качура з помаранчевими лапами, що летить на фоні блакитного неба." src="duck_1.jpg">

Зображення, якому встановлено пустий атрибут "alt"

Вимога виконується за умови, що це буде зроблено для неінформативного зображення.

<img class="img" alt="" src="duck_1.jpg">

Зображення, в якого відсутній атрибут "alt"

Вимога не виконується.

<img class="img" src="duck_1.jpg">

Зображення, визначене як фон для контейнера (стиль "background-image")

Неправильний підхід

Вимога не виконується. Скрінрідер проігнорує цей контейнер.

<div style="background-image: url('duck_1.jpg'); background-size: contain; width: 240px; height: 180px"></div>

Правильний підхід

Вимога виконується. Буде озвучений текст атрибуту "aria-label".

<div role="img" aria-label="Вид збоку на качура з помаранчевими лапами, що летить на фоні блакитного неба." style="background-image: url('duck_1.jpg'); background-size: contain; width: 240px; height: 180px"></div>

Зображення, оформлене за допомогою тега <svg> (векторна графіка)

Неправильний підхід

Вимога не виконується. Скрінрідер проігнорує цю графіку.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="128" height="128"><defs><style>.path-1{fill:#5f4ee4;}</style></defs><path class="path-1" d="M131.46,98.71c-25.61-11.51-33.67-40.23-21.3-61.85,11.88-20.77,40-29.37,63-13.65,9.43-14.37,22.61-22,40-21.15,12.28.59,22.47,5.92,30.47,15.25C260.31,36.72,257,67.62,232.72,82.74c8.47,12.74,10.53,26.42,5.16,40.87A41.83,41.83,0,0,1,217,146.8a43.49,43.49,0,0,1-59.37-21.32L87.06,196l13.52,13.5c4.72,4.72,4.69,8.24,0,13-2.84,2.87-5.65,5.76-9,9.17-1.21-1.41-2.19-2.69-3.31-3.83q-5.6-5.7-11.3-11.31c-3.41-3.32-7.8-3.41-10.76-.33s-2.73,7.2.58,10.56c4.83,4.89,9.71,9.72,14.3,14.3-3.65,3.89-7,7.83-10.73,11.3-2.72,2.52-6.6,1.92-9.53-.94q-6.55-6.41-12.94-13a14.16,14.16,0,0,1-1.61-2.61c-5.31,5.33-9.91,9.95-14.53,14.57s-8.19,4.63-12.8,0S9.81,241.4,5.26,236.83c-4.36-4.39-4.35-8,0-12.43L128.78,100.92C129.5,100.2,130.36,99.61,131.46,98.71ZM196.17,45.3a14.44,14.44,0,1,0,14.48-14.41A14.49,14.49,0,0,0,196.17,45.3ZM162.25,58.5A14.38,14.38,0,0,0,147.89,44a14.42,14.42,0,1,0-.08,28.84A14.28,14.28,0,0,0,162.25,58.5Zm20.83,49.59a14.42,14.42,0,1,0,14.4-14.4A14.45,14.45,0,0,0,183.08,108.09Z"/></svg>

Правильний підхід

Вимога виконується. Буде озвучений текст атрибуту "aria-label".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="128" height="128" role="img" aria-label="Старовинний ключ синього кольору."><defs><style>.path-1{fill:#5f4ee4;}</style></defs><path class="path-1" d="M131.46,98.71c-25.61-11.51-33.67-40.23-21.3-61.85,11.88-20.77,40-29.37,63-13.65,9.43-14.37,22.61-22,40-21.15,12.28.59,22.47,5.92,30.47,15.25C260.31,36.72,257,67.62,232.72,82.74c8.47,12.74,10.53,26.42,5.16,40.87A41.83,41.83,0,0,1,217,146.8a43.49,43.49,0,0,1-59.37-21.32L87.06,196l13.52,13.5c4.72,4.72,4.69,8.24,0,13-2.84,2.87-5.65,5.76-9,9.17-1.21-1.41-2.19-2.69-3.31-3.83q-5.6-5.7-11.3-11.31c-3.41-3.32-7.8-3.41-10.76-.33s-2.73,7.2.58,10.56c4.83,4.89,9.71,9.72,14.3,14.3-3.65,3.89-7,7.83-10.73,11.3-2.72,2.52-6.6,1.92-9.53-.94q-6.55-6.41-12.94-13a14.16,14.16,0,0,1-1.61-2.61c-5.31,5.33-9.91,9.95-14.53,14.57s-8.19,4.63-12.8,0S9.81,241.4,5.26,236.83c-4.36-4.39-4.35-8,0-12.43L128.78,100.92C129.5,100.2,130.36,99.61,131.46,98.71ZM196.17,45.3a14.44,14.44,0,1,0,14.48-14.41A14.49,14.49,0,0,0,196.17,45.3ZM162.25,58.5A14.38,14.38,0,0,0,147.89,44a14.42,14.42,0,1,0-.08,28.84A14.28,14.28,0,0,0,162.25,58.5Zm20.83,49.59a14.42,14.42,0,1,0,14.4-14.4A14.45,14.45,0,0,0,183.08,108.09Z"/></svg>

Кілька слів про емоджі

Емоджі, яке озвучується скрінрідером за замовчанням

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

<p>Приклад: налаштування необхідно здійснювати вчасно ✨.</p>

Приклад: налаштування необхідно здійснювати вчасно ✨.

Емоджі, яке ігнорується скрінрідером

Так коректно робити за умови, що це емоджі виконує суто декоративну функцію.

<p>Приклад: налаштування необхідно здійснювати вчасно <span aria-hidden="true">✨</span>.</p>

Приклад: налаштування необхідно здійснювати вчасно .

Емоджі, яке озвучується скрінрідером потрібним чином

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

<button id="button-open-settings"><span role="img" aria-label="Відкрити налаштування">⚙️</span></button>