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.
Article No Longer Available
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.
Top comments (2)
Accessibility-wise, if the breadcrumbs are links to pages in the site (which they usually are), they should be wrapped in a
navelement to indicate they are navigationThey should also be formed of an ordered list (since the order is important)
You can find a nice simple accessible example over on W3
Don't forget the
aria-currentattribute 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:
aria-current: accessibility-developer-guide.com/...