Использование промежутков в качестве «кнопок» - плохая практика? W3Schools делает это

Question

Рассмотрим этот модальный пример (и множество других примеров из них): https://www.w3schools.com/howto/howto_css_modals.asp

Они используют тег span, который действует как кнопка закрытия для модального окна. . Разве это не семантически неверно? Или есть какое-то легитимность для этого?

Странно, что «консорциум веб-стандартизации» публикует подобные примеры. Но, возможно, я что-то здесь упускаю.

Answer 1

Это плохая практика - использовать промежутки в качестве «кнопок»?

Да. По умолчанию они:

• Не объявляются интерактивными программами чтения с экрана
• Не в порядке табуляции, поэтому недоступны для пользователей клавиатуры

Это Можно обойти это, используя tabindex и ARIA, но использование настоящего <button> намного проще и лучше поддерживается.

Вы можете гораздо глубже погрузиться в эту тему из Inclusive Components by Heydon Pickering .

W3 C делает это

Нет, это не так.

W3Schools - это низкая качественный обучающий сайт, наполненный рекламой, у которого есть хорошее SEO, потому что они существуют вечно.

Они выбрали название, которое позволяет спутать их с Консорциумом W3. Однако учтите, что «Консорциум» и «школы» - это разные слова!

Answer 2

Это неплохая практика, если вы добавите туда хотя бы атрибут tabindex. Пользователи также должны нажимать кнопку с помощью клавиатуры:

<span tabindex="0">Button</span>

Также рекомендуется добавить ARIA - атрибуты :

<span tabindex="0" role="button" aria-pressed="false">Button</span>