For the love of all that is holy, can you all please start using `` for navigation and `` for actions, not the other way around?
-
@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!
-
Kystof Beuermannreplied to Marijke Luttekes last edited by
> One of my top annoyances with websites is when I want to open a link in a new tab and find out that I can't.
This! Exactly this! Even large websites break this pattern regularly. Makes me mad everytime!
-
Dave Heinemann 🇦🇺replied to Marijke Luttekes last edited by
@mahryekuh My pet peeve is JavaScript anchor tag links:
<a href="#" onclick="window.location.href = 'https://example.com'">Example</a>
Completely insufferable.
-
what about <a class="btn"> ?
-
12 Freya it/its𒀭𒈹𒍠𒊩replied to Marijke Luttekes last edited by
@mahryekuh y'konw what's worse? <a>s with aria-role=button so the screenreader's mega confused
-
Marijke Luttekesreplied to 12 Freya it/its𒀭𒈹𒍠𒊩 last edited by [email protected]
@12 Some people just want to see the world burn.
-
12 Freya it/its𒀭𒈹𒍠𒊩replied to Marijke Luttekes last edited by
@mahryekuh fucking mood
