search

mdn / sprints

Archived: MDN Web Docs issues are tracked in the content repository.
https://github.com/mdn/content
Creative Commons Zero v1.0 Universal
150 stars 142 forks source link

Remove ul and ol from the recipe #3963

Closed ghost closed 3 years ago

ghost commented 3 years ago

URL(s)

https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Pagination

Request type

Details

leave only 

nav.pagination {}
nav.pagination a {}

Screenshot_20201212-224022.png

Bonus

Unset hrefs

rachelandrew commented 3 years ago

@mattiapontonio it would be invalid HTML to have a li without an ul, ol or menu (https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element). Marking up navigation using a list is seen as good practice (https://www.w3.org/WAI/tutorials/menus/structure/)

ghost commented 3 years ago

I believe the nav is horizontal and the list is vertical with dots. That's what got me thinking. I see many examples with lists but maybe in fact the nav is meant to be horizontal and maybe it's not the menu that could be called index like in books if it were vertical and stay in index.html if we wanted to go further.

ghost commented 3 years ago

Even more strange is to use a bulleted list and then remove the fact of being a list and the dots, it seems a contradiction to me.

ghost commented 3 years ago

Besides this recipe then in the end wants a horizontal nav so you could just use a nav and some a.

rachelandrew commented 3 years ago

The HTML elements only have bullets and so on because this is the default styling for a list in HTML. You then use CSS to make it look the way you would like it to look by changing those styles.

As explained in the second of the articles I linked, a list is a sensible choice for navigation as it gives the links some structure. This is needed if your visitor is using a screenreader for example and therefore cannot see the design to help them understand that this is navigation.

I don't think that there is anything to change here, the recipe uses a list in a manner that is semantically correct and then uses CSS to make it look as the design intends.

ghost commented 3 years ago

At least you should color it (the code) and format it better. Then you see what there is to remove if there is to remove. I honestly don't know how screenreaders would work with my solution. However, I have seen that a relevant URL proposes the list.