DEV Community

loading...

Breadcrumbs - Semantics and Accessibility

Milan Radojević
Minimalist, an aspiring web dev, comp-sci student, hacker, gamer and a linux enthusiast. I like meeting other nerdy people and seeing what they're doing.
・1 min read

I started a new weekly series called CSS Challenges, where every Monday there is a different feature or element to implement. The goal is to encourage people to practice their css by doing and to also discuss different ways to achieve the task. This week's topic is Breadcrumbs.

At the end of each week I'll be posting a separate post giving examples of different implementations from submissions and trying my best to explain how they work and the logic behind.

Now, even though it is a css challenge, we can't just ignore other aspects of web development. I am somewhat familiar with html semantics, but far from expert, and a total newbie when it comes to accessibility.

The plan is to include in the post with solutions, some general tips and things to watch out for when it comes to semantics and accessibility. So, alongside my own research that I'll be doing, I wanted call everyone to pitch in and give their tips, dos and do-nots when it comes to Breadcrumbs. Things like recommended html structure, what tags to use, what attributes should be included or not, etc. are welcome.

Also it'd be nice if you could provide references to official specs and documentation that's related to your arguments, but it's optional.

Discussion (2)

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her)

Accessibility-wise, if the breadcrumbs are links to pages in the site (which they usually are), they should be wrapped in a nav element to indicate they are navigation

They should also be formed of an ordered list (since the order is important)

You can find a nice simple accessible example over on W3

Collapse
kyleoliveiro profile image
Kyle Oliveiro

Don't forget the aria-current attribute to mark the last breadcrumbs item as the current location/page! Here's my implementation: codepen.io/kyle-o/pen/vYYEbdq.

Here are a few useful references:

Forem Open with the Forem app