search

w3c / wai-website

This repository hosts the WAI Website.
https://www.w3.org/WAI/
Other
60 stars 306 forks source link

Incorrect use of ul tag in carousel tutorial? #624

Open eglazyrin-sqsp opened 3 years ago

eglazyrin-sqsp commented 3 years ago

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?

https://www.w3.org/WAI/tutorials/carousels/working-example/

yatil commented 3 years ago

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>.

eglazyrin-sqsp commented 3 years ago

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?

yatil commented 3 years ago

Yes, then you should use a <ol>, that said, it probably only makes a minimal difference in practice :-)

Abdull commented 2 years ago

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:

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.

yatil commented 2 years ago

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”.