Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

Not trying to put Cory on blast, but I see this often Disabled buttons are accessible If you aren't familiar with how to navigate with a screen reader and rely on tabbing around, it may seem inaccessible. But really you just don't know how to use a screen reader yet

285,891 Aufrufe • vor 2 Jahren •via X (Twitter)

9 Kommentare

Profilbild von Ryan Florence
Ryan Florencevor 2 Jahren

Now, whether or not tooltips are a good design pattern at all I'd say they're pretty much always a bad choice no matter how the user is accessing your UI 🫣

Profilbild von Cory House
Cory Housevor 2 Jahren

Your rebuttal only addresses one problem with disabled. A disabled button disappears for some screen readers and focus jumps which is disorienting. And I can’t discover why a disabled button is disabled. Etc. So my point stands. Being able to “see” it with a screen reader doesn’t fix these.

Profilbild von Ryan Florence
Ryan Florencevor 2 Jahren

Does NVDA or JAWS or both not display disabled buttons? You can label it in various ways to tell them why its disabled, the simplest being aria-label <button disabled aria-label="Save, please enter a title before you can save">

Profilbild von Sandrina Pereira 🦋
Sandrina Pereira 🦋vor 2 Jahren

Although disabled buttons can be findable, accessibility goes beyond that. It's also about usability. Disabled buttons often cause more harm than good when you learn how people interact with them. (i.e. in forms, often SR users use Tab key, not just the arrows to navigate.) Among other reasons, that's why "aria-disabled" is preferable when needed. I've written about it:

Profilbild von Haz
Hazvor 2 Jahren

Actually, it's quite common for screen reader users to use the Tab key, particularly when navigating through form controls. NVDA still focus on disabled buttons when pressing Tab. VoiceOver and JAWS don't.

Profilbild von Devon Govett
Devon Govettvor 2 Jahren

But don’t put tooltips on them. Accessibility isn’t just screen readers. Lots of users use a keyboard only to navigate but aren’t visually impaired. And even for mouse users, if there isn’t enough contrast to see the button at all, how will they find the tooltip?

Profilbild von Kent C. Dodds 🌌
Kent C. Dodds 🌌vor 2 Jahren

TIL!

Profilbild von Autofires
Autofiresvor 2 Jahren

While the screenreader part was misunderstood, claiming they are "accessible" depends on what your definition of accessibility is. Just don’t do it. Keep enabled + validation message on click. Helps with people with cognitive issues (myself included as often stumped by them)

Profilbild von Nicholas Griffin
Nicholas Griffinvor 2 Jahren

The problem is that you don’t explain to the user why it’s disabled more than anything. But it is the accepted consensus that disabled buttons should be used sparingly, it at all.

Ähnliche Videos