Как определить пользовательский элемент li с учетом требований доступности?
Я хотел бы создать свой собственный элемент списка в качестве пользовательского элемента:
<ul>
<my-li><!-- Advanced stuff in shadow dom will be rendered here --></my-li>
</ul>
Однако внутри тега ul разрешены только следующие элементы (li, script, template). Какой подход здесь будет правильным?
1.) Определение роли арии на пользовательском элементе?
<ul>
<my-li aria-role = "listitem"><!-- Advanced stuff in shadow dom will be rendered here --></my-li>
</ul>
- Используете тег li внутри теневого дома?
<ul>
<my-li><!-- Advanced stuff in shadow dom will be rendered within a li-tag here --></my-li>
</ul>
- Что-то другое
Ответы 3
это 3)
<div role = "list">
<my-li role = "listitem"></my-li>
</div>
Это не может быть 1) или 2), так как оба нарушают спецификации HTML.
С 3) Спецификации HTML и требования a11y выполнены.
Вам нужно будет сделать что-то еще, так как ваши два первых являются недопустимыми HTML. У вас есть несколько вариантов, от лучшего к худшему:
Опция 1:
<ul>
<li>
<your-custom-element/>
</li>
</ul>
Вариант 2:
Управляйте всем <ul> в теневой DOM вашего пользовательского элемента или поместите <ul> в его корень.
Вариант 3, которого лучше избегать.
<div role = "list">
<your-custom-element role = "list-item"/>
</div>
The best would be my option 1. It works because you can put anything you like inside `<li>`.
You should avoid my option 3 if you can, for several reasons:
- Avoid using ARIA unless it's really necessary
- No ARIA is better than bad ARIA
- It's not very clear if specifying the role on a custom element will work as expected, or if you have to report it yourself to the top element of your shadow DOM. It depends on what the browser / accessibility tree pass to assistive tools, and, as far as I know, it isn't very well defined, since custom elements are pretty new
Учтите, что если вы реализуете пользовательский компонент (с настраиваемыми визуальными маркерами), эти графические компоненты (маркированные маркеры) должны соответствовать требованиям к контрастности WCAG 1.4.11 (контрастность не менее 3:1), если они единственный способ, которым визуальный пользователь может определить, что это список.