This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
I am always pleasantly surprised when I find useful skip links. That's why I decided to collect examples here on my blog.
I'll start with ikea.com. The first focusable element on every page is a skip link that allows you to skip the entire header, which makes sense because there are 15 interactive elements in it.
Sidenote: I'm not sure why they set role="button" on the skip link because it's just an anchor link, and there doesn't seem to be any JavaScript involved.
<a href="#hnf-content" role="button" class="hnf-skip-to-content hnf-btn hnf-btn--secondary">
<span class="hnf-btn__inner">
<span class="hnf-btn__label">Skip to main content</span>
</span>
</a>Update 13.10.23: The button role is gone now. Hours after I published this post, someone from the IKEA frontend team contacted me to tell me why they believed it was there. The next day, another person informed me that they'd removed it. Skål! 🔥
There's another skip link right after the header, which allows you to skip anything between the header and the products list. In this case, that's 11 more interactive elements.
<a href="#product-list-skip" class="plp-skip-to-product-list">
Skip to product list
</a>Both skip links are super helpful because people who rely on keyboard accessibility only have to press Tab twice instead of 26 times.
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-10-11T00:00:00+00:00) Skip links on ikea.com. Retrieved from https://www.scien.cx/2023/10/11/skip-links-on-ikea-com/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.