How to define a custom li element with respect to accessability requirements?

Meise2000

I would like to build my own list item as a custom element:

<ul>
  <my-li><!-- Advanced stuff in shadow dom will be rendered here --></my-li>
</ul>

However, within an ul tag, only the following elements are allowed (li, script, template). What would be the right approach here?

1.) Definition of an aria-role on the custom element?

<ul>
  <my-li aria-role="listitem"><!-- Advanced stuff in shadow dom will be rendered here --></my-li>
</ul>
  1. Using the li tag inside the shadow-dom?
<ul>
  <my-li><!-- Advanced stuff in shadow dom will be rendered within a li-tag here --></my-li>
</ul>
  1. Something else
QuentinC

You will need to do something else, as your two first are both invalid HTML. You have several options, from best to worst:

Option 1:

<ul>
  <li>
    <your-custom-element/>
  </li>
</ul>

Option 2:
Manage the whole <ul> within the shadow DOM of your custom element, or put the <ul> as the root of it.

Option 3, which you should prefer avoid.

<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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to define custom macros in MathJax

How to define transparent element in colormap

How to limit the size of an '<li>' element

How to derive with respect to a Matrix element with Sympy

Vanilla Custom Element repeater for <option>, <li>, <td>

How do I arrange a button/an element in line / with respect to the element above it?

How to define []= and at() = for a custom collection?

How can I make an input element respect the dimensions of a grid container?

how define a new column with respect of 4 columns?

how to define an indicator with respect of 4 columns?

How to define a custom element method with angular elements

how to group element's of a list with respect of some information in each elements?

How to get the id of a li element

How to define a custom build setting?

Bootstrap 3 custom li element with div designing

How to define a custom name for <li> element in HTML?

How can I define an abstract odd function in mathematica? With respect to derivatives

Symfony Routing: How to define global requirements/constraints for wildcards?

How to define custom routes in theme?

C# : Selenium : How to find an element with respect to the innertext of another element

How to replace array element with respect to Index on another array

how to add a element with href on li element?

How to define custom functions in Maple?

How to define a custom connector in JointJS

define predicate prolog by requirements

How to highlight specific <li> element?

How to find an element with respect to its parent element with Selenium and Python

How to add custom Module in requirements

How to define and invoke optional requirements with tox?