Incorrect use of ul tag in carousel tutorial?
eglazyrin-sqsp opened this issue · 5 comments
The carousel page in the Web Accessibility Tutorial uses ul tag (unordered list) for both the slideshow and navigation buttons. However, the definition of ul is "a list of items, where the order of the items is not important."
I wonder if ol tag would be more appropriate?
No, the meaning of the page does not change when the list items are in a different order, so this is not a place for an <ol>.
Interesting. While the order is irrelevant for this specific example, what if you had a slideshow with a cooking recipe? Or some kind of instruction that you had to follow in a specific order?
Yes, then you should use a <ol>, that said, it probably only makes a minimal difference in practice :-)
I agree that the use of ul and li elements as suggested in the Carousels Tutorial is outdated, problematic - if not even wrong.
The following Carousels Tutorial pages show or use ul and li elements:
- https://www.w3.org/WAI/tutorials/carousels/structure/
- https://www.w3.org/WAI/tutorials/carousels/full-code/
- https://www.w3.org/WAI/tutorials/carousels/working-example/
So what's wrong?
https://www.w3.org/WAI/ARIA/apg/patterns/carousel/ seems to be a more up-to-date recommendation for carousels. There, several types of carousels are discussed, with the Auto-Rotating Image Carousel with Tabs for Slide Control Example being the carousel type as used in the Carousels Tutorial under discussion here.
Tabbed Carousel prescribes to put on each slide the following (English-localized) attributes <$SLIDE_ELEMENT role="tabpanel" aria-roledescription="slide" aria-label="X of Y">...</$SLIDE_ELEMENT>, with <div> used as <$SLIDE_ELEMENT>.
But the Carousels Tutorial uses <li> for <$SLIDE_ELEMENT>. <li> results in "Error: Bad value tabpanel for attribute role on element li" when checking the processed/live HTML syntax ("Check serialized DOM of current page" bookmarklet) with the Nu Html Checker.
No, they are not wrong. The tutorial deliberately is not using tab panels and hence does not change the role of the <li>. There is zero need to use tab panels there, although it is another way to do it. The existence of two ways to implement something does not make one way “outdated – if not even wrong”.