Тестирование озвучки фразы "по щелчку" и role="presentation"

onclick на кнопках и контейнерах

Кнопки и псевдокнопки на span

span.button[onclick]>svg:

button[onclick]>svg:

span.button[onclick]>текст:

button[onclick]>текст:

onclick на контейнере-обёртке

div[onclick]>button>текст:

div[onclick]>p>текст:

div[onclick]>div[onclick]>p>текст:

onclick c добавлением role="presentation"

div[onclick][role="presentation"]>button>текст:

button[role="presentation"][onclick]>текст:

button[role="presentation"]>текст:

role="presentation" на остальных тегах

Картинка img с альтом

Картинка img с альтом и role="presentation"

Списки

Нормальный список ul>li

Неявные нативные роли у всех элементов

• Манго
• Арбуз
• Киви
• Кокос

ul[role="presentation"]>li

Явная роль presentation у родителя, неявная унаследованная роль у потомков

• Манго
• Арбуз
• Киви
• Кокос

Список с role="presentation", но для li заданы роли

Явная роль presentation у родителя. У первого потомка неявная унаследованная роль, но внутри него ссылка - с неявной нативной ролью (ссылка). У остальных потомков заданы явные роли через атрибут role.

• Манго
• Арбуз
• Киви
• Кокос

Таблицы

Очень семантичная таблица table>(thead>tr>th*3)+tbody>tr*3>th+td*2

Эта же семантичная таблица с role="presentation" на table

Менее семантичная таблица table>tr*4>td*3

Эта же не очень семантичная таблица с role="presentation" на table