For the love of all that is holy, can you all please start using `` for navigation and `` for actions, not the other way around?
-
Rachel Wil Singh ~ Moos-a-deereplied to Marijke Luttekes last edited by
@mahryekuh not really relevant for my teacher peers building out their Canvas courses usually, but I'll still read it and use it in a blog post I'm writing oriented towards accessibility in courses! Thank you for the post.
-
@mahryekuh I was working on a codebase last week and someone wrapped an a with a button.
-
@troy Haha, oh dear. I hope you managed to persuade them from this path!
-
Marijke Luttekesreplied to Rachel Wil Singh ~ Moos-a-dee last edited by
@Moosader Thank you! Feel free to send an update once the article is out.
-
@mahryekuh well, technically speaking, "a" does stand for "action", you know. So I'm ok with using them for buttons (although "button" is a perfectly good element... But why would anyone use it for navigation? Seems like extra work. Unnecessary, if you ask me)
-
@GrahamDowns Are you serious?
-
@mahryekuh
<button type="a"> -
@mahryekuh Thanks for the nudge! I double-checked the menu HTML for my in-progress site conversion, and on mobile it uses <button> for expanding menu headings (which are *not* links in their own right) and <ul> <li> <a> for the actual menu content and links; and on desktop it uses just <ul> <li> <a> lists; so I guess I should be OK. Both with styling through CSS.
(My currently-online web site is slightly different because Reasons.)
I'm really *trying* to do the right thing!
-
@mkj I can’t judge your website from here, but I highly recommend this article about disclosure navigations:
Example Disclosure Navigation Menu
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).
Web Accessibility Initiative (WAI) (www.w3.org)
-
@mahryekuh you can do cursors with CSS, too.
I have one more point I may need to get back to, but great article, especially for categorically damning
<a href="#"with good reason. -
@mirabilos Before you get back to that other point; if it’s of the same level as setting cursors in CSS, please spare yourself the effort, I am aware of that.
-
@Optional Perfect. 10/10 no remarks. Ship it!
-
@mahryekuh no, it’s about the
inputs (specifically, checking if their button variants work on text browsers) -
@mirabilos Now that sounds interesting.
-
@mahryekuh You have a typo:
> Be aware that I will use the words "link" and "anchor" to refer to the HTML <a> attribute, ...
"attribute" should be "element".
I'd also suggest hiding the line numbers in code snipets with `aria-hidden`, because they prevent screen readers from conveying indentation properly. A solution that makes the line numbers more accessible would of course be better, but I don't know of one on the web.
-
@mahryekuh I didn't think devs needed a(nother) blog post to understand this quite simple concept 🫠
But experience confirms many web devs still don't understand, it seems. So, thanks for doing your part 🫡
-
@mahryekuh Beyond that, despite my thoughts on the other thread, this is a good article on the topic.
-
@jscholes Thanks. The entire code block is a disaster (visually as well) and I don’t control the output. It’s one of those legacy things I’ve been meaning to fix for longer than I care to admit.
My apologies for the bad experience. Once I have fixed some other style and JS related stuff, this comes next.
-
@maybeanerd I joked a while ago that with the way people treat link versus button, it feels like subject that requires a PhD.
-
@jscholes Thank you. Much appreciated!
