51–60 of 154 posts
Learn how to create an accessible hamburger button with pure HTML and CSS and why that is important.
Earlier quoted context omitted.
> Screen reader users do not need to open or close menus. Agreed, but you don’t want keyboard accessible menu items available for users that aren’t visually impaired. Offering a “show menu” button to screen readers is not less accessible to them than skipping the navigation section. If you’re building a page that is only meant to be used by screen readers, then you are absolutely right. > Meanwhile, non screen reader…
Offering a show menu button to screenreader users is accessible but poorly usable . They can’t see the menu. ‘Showing’ and ‘hiding’ mean nothing to them. And for your keyboard navigators using the visual interface, perhaps this hints that you could afford them a similar opportunity - where, from being focused on the menu, they could either descend into the menu, expanding it, or skip the menu and move focus to the ne…
On my site we have a "menu" link styled as a button. Before JS loads it'll link to a page we have that lists out all the menu options (literally navigating to oursite.com/menu). After JS kicks in the link gets hidden and an identical button gets shown that does the fancy side menu opening thing. TFA's approach seems nice enough but mine feels way simpler...
Earlier quoted context omitted.
I remember a business manager having zero idea that clicking the logo at the top of a webpage would often take you to the home page. I had assumed this was ubiquitously understood, but clearly not.
It seems people don't explore at all. There's no "I wonder what would happen if" impulse, or there's an "I'd better not just in case" worry.
Except modern HTML actually has a builtin which is accessible, and works far better with screenreaders and other assistant technologies. The details element. Menu Home Thing You may want to add a tiny bit of CSS, like adding a border, and setting the cursor to a pointer, for your sighted users: details { padding: 0.5em; border-style: solid; border-width: 1px; border-radius: 0.25em; cursor: pointer; }
Earlier quoted context omitted.
The only intuitive user interface is a nipple. Everything else has to be learned.
I presume you're being down-voted for the use of the word "nipple," by people who don't know that this is an axiom that has been used in the design industry for a very long time.
FWIW I also used to use that quote, until I had a child and saw firsthand [well, second-hand as it was my wife doing the work] how much effort breastfeeding a newborn could take; I don't really blame anyone for quoting it (it's pithy after all).
Surprisingly good further discussion on the UX SE [1].
0: https://www.npr.org/sections/health-shots/2013/09/23/2253491...
1: https://ux.stackexchange.com/questions/5150/is-it-true-that-...
Proof that accessibility and usability are entirely orthogonal. For screen reader users only , this provides them with the information that activating this link will open or close a menu. Screen reader users do not need to open or close menus. Menus do not take up space or sit in front of other content. Closing a menu offers no usability benefit to a screen reader user. All they need is the options to be present unde…
> Screen reader users do not need to open or close menus. Agreed, but you don’t want keyboard accessible menu items available for users that aren’t visually impaired. Offering a “show menu” button to screen readers is not less accessible to them than skipping the navigation section. If you’re building a page that is only meant to be used by screen readers, then you are absolutely right. > Meanwhile, non screen reader…
So is the ≡ the main navigation menu?
The account options menu?
The preferences menu?
The menu of the application platform that's wrapping the page you're on, rather than the page itself?
The menu showing all the sister companies of the site you're on?
Except modern HTML actually has a builtin which is accessible, and works far better with screenreaders and other assistant technologies. The details element. Menu Home Thing You may want to add a tiny bit of CSS, like adding a border, and setting the cursor to a pointer, for your sighted users: details { padding: 0.5em; border-style: solid; border-width: 1px; border-radius: 0.25em; cursor: pointer; }
Hopefully this will change soon. I’ll amend the article when this will be the case.
> "Over the last few decades hamburger buttons have become the de facto standard to expand larger menus on smaller devices. They are so ubiquitous that every user immediately knows what they are when seen in the top left or right corner, which makes them a good user interface element choice." "Last Few Decades"? Eh? A decade.. perhaps? "Every User Immediately"? This is not at all my experience. Perhaps with younger u…
tl;dr "Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases."