4 ms·

> The biggest headache when coming across these menus on the web is the complete disregard for accessibility. Just because most websites / frontend frameworks

by Eduard 3y ago

> The biggest headache when coming across these menus on the web is the complete disregard for accessibility. Just because most websites / frontend frameworks fail to implement hamburger menus in an accessible way (including Bootstrap 5), does not mean that hamburger menus in general are bad when it comes to accessibility. With that logic, images / img elements are a core problem per se and should be prohibited, because most pages don't use them correctly from an accessibility standpoint (e.g. forgetting to provide an explicit "alt" attribute). WCAG / WAI has pretty good recommendations in how to achieve it. Here is their hamburger menu pattern example: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links/ https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/example...

chrismorgan 3y ago
My natural inclination was to say “so hamburger menus can be implemented badly, but they can also be implemented properly so this is no reason to advise against hamburger menus as a whole”. But I think it’s also worth remembering that patterns matter, and if almost everyone gets something wrong, it’s small consolation that it was an unforced error. If a different pattern is similarly acceptable and done badly far less often, pragmatism suggests pushing the alternative, because the average result will be better. When I use hamburger menus on regular web pages, I implement them so that they’re entirely adequately accessible, and work with no JavaScript. (Depending on the situation, I’ll either use <details> or a checkbox hack with reasonable labels and such, and I may enhance things with a small snippet of JavaScript.) But I lack faith in almost anyone else’s implementations. I would note also that the ARIA example you link to fails one of the criteria of this article: JavaScript-free operation. It’s also only suitable for some sorts of hamburger menus; it’s unlikely to be a suitable pattern for website header navigation menus, which are really more a navigation palette than a menu (to use very fuzzy terms!), and which are the main focus of this article.
joshspankit 3y ago
I genuinely hope someone makes an Accessibility AI gets used by companies worldwide to fix their sites and webapps. There are so many great properties waiting to be implemented properly.
- sebzim4500 3y ago
  I think it's far more likely screenreaders with AI become good enough that disabled people can browse the web as normal.
  - ikiris 3y ago
    Or we rediscover regulation and people pay out enough in settlements that insurance decides its important again.
    - sebzim4500 3y ago
      I guess I could see that happening if big tech decides that accessibility regulation would hurt startups more than them.
- anonymouskimmer 3y ago
  Accessibility features can be bonuses for people who don't have any problems, too.
  - joshspankit 3y ago
    Yes! Accessibly features don’t enough credit at all

by Eduard 3y ago

chrismorgan 3y ago

My natural inclination was to say “so hamburger menus can be implemented badly, but they can also be implemented properly so this is no reason to advise against hamburger menus as a whole”. But I think it’s also worth remembering that patterns matter, and if almost everyone gets something wrong, it’s small consolation that it was an unforced error. If a different pattern is similarly acceptable and done badly far less often, pragmatism suggests pushing the alternative, because the average result will be better. When I use hamburger menus on regular web pages, I implement them so that they’re entirely adequately accessible, and work with no JavaScript. (Depending on the situation, I’ll either use <details> or a checkbox hack with reasonable labels and such, and I may enhance things with a small snippet of JavaScript.) But I lack faith in almost anyone else’s implementations. I would note also that the ARIA example you link to fails one of the criteria of this article: JavaScript-free operation. It’s also only suitable for some sorts of hamburger menus; it’s unlikely to be a suitable pattern for website header navigation menus, which are really more a navigation palette than a menu (to use very fuzzy terms!), and which are the main focus of this article.

joshspankit 3y ago

I genuinely hope someone makes an Accessibility AI gets used by companies worldwide to fix their sites and webapps. There are so many great properties waiting to be implemented properly.

sebzim4500 3y ago
I think it's far more likely screenreaders with AI become good enough that disabled people can browse the web as normal.
- ikiris 3y ago
  Or we rediscover regulation and people pay out enough in settlements that insurance decides its important again.
  - sebzim4500 3y ago
    I guess I could see that happening if big tech decides that accessibility regulation would hurt startups more than them.
anonymouskimmer 3y ago
Accessibility features can be bonuses for people who don't have any problems, too.
- joshspankit 3y ago
  Yes! Accessibly features don’t enough credit at all