Ошибка аудита доступности, когда у элемента ol есть роль
Когда вы проводите аудит доступности в Google Chrome с такими сайтами, как https://stackoverflow.com, вы заметите ошибку, с которой я сталкиваюсь на своем собственном веб-сайте.
List items (<li>) are not contained within <ul> or <ol> parent elements.
В случае https://stackoverflow.com HTML с ошибкой выглядит так.
<ol class = "list-reset grid gs4" role = "presentation">
<li class = "grid--cell">
...
Когда у меня возникла эта ошибка на моем веб-сайте, я удалил атрибут роли, и ошибка исчезла.
У меня есть один простой вопрос. Почему?
Ответы 1
List items (
<li>) are not contained within<ul>or<ol>parent elements.
Это сообщение об ошибке не является явным.
Неявная роль элементов ol и ul — list. Неявная роль элементов li — listitem.
Authors MUST ensure elements with role
listitemare contained in, or owned by, an element with the rolelistorgroup.
Если вы переопределяете нативную роль элементов ol, вы больше не соблюдаете спецификации ARIA (но все еще соблюдаете спецификации HTML).
Просто удалите роль presentation у элемента ol или не используйте элементы списка.
Да, роли не каскадируются, поэтому, если вы хотите, чтобы список был чисто презентационным, вам нужно поставить role = "presentation" на список и элементы списка.
Я понимаю, что мое замешательство произошло из-за непонимания атрибута роли. Спасибо, что прояснили это