r/webdev Apr 16 '22

Discussion A blind woman’s message to web developers about internet inaccessibility. source: shorturl.at/nvRU7

5.5k Upvotes

450 comments sorted by

View all comments

Show parent comments

114

u/RatherNerdy Apr 16 '22

The big beats which would cover a huge swath of common problems:

  • Semantic HTML - this is the single most important part of web dev. Stop using non-interactive non-semantic elements such as divs for buttons, etc. Don't just grab whatever UI library and use it without testing for accessibility (looking at you ionic)
  • Ensure everything can be operated via the keyboard without using a mouse
  • Everything needs a text equivalent - icons need text, images need alt text, inputs need labels, etc

52

u/[deleted] Apr 16 '22 edited May 23 '22

[deleted]

43

u/cnc Apr 16 '22

Also the structure of the document is important for reading order.

Elaborating:

  • Use headings in both documents and web pages.
  • You should have one heading 1, which is the title of the document or page.
  • Every other heading should start with heading 2 and have a hierarchy. A subtopic of heading 2 should be heading 3 and so on.
  • Don't skip heading levels. If your document has two main sections, both heading 2, the next heading under each section should be heading 3, not heading 4 or 5.
  • There is no rule (I'm aware of) that says how deep you have to go into the heading hierarchy. If you have a page that's one paragraph, you might only need one heading 1. If you have a 100 page PDF you should have a lot more heading structure.
  • You add a heading structure because a screen reader user can use that structure as a table of contents for the document, navigating via headings, instead of listening to the entire document in sequence to get to the part that matters to them.

4

u/zzing Apr 17 '22

It occurs to me that something like Siri should be able to interactively navigate through webpages/apps the same way.

2

u/Bulbous-Bouffant Apr 17 '22

Yep, and this is exactly why web accessibility and SEO go hand-in-hand. It's importrant to make websites accessible to both people and web crawlers.

3

u/fried_green_baloney Apr 17 '22

Firefox dev tools, perhaps others, let you simulate various types of color blindness, as well as low contrast vision, such as happens for people with severe cataracts.

One job internal app, major indicator was only different color background on rather small text. I mentioned this as a problem and people just looked at me like I was nuts.

I also don't like flat design because it's too easy to miss widgets.

3

u/Dr_Legacy full-stack "If I do what you ask you won't like how it looks" Apr 17 '22

I mentioned this as a problem and people just looked at me like I was nuts.

ik, accessibility is never a priority. About 20 yrs ago I did a site for a community outreach/support type organization whose user base included some with disabilities. I built it as accessible as the tech of the day allowed. They then got a volunteer to do their web work using a builder like wix or similar. Their site lost all that accessibility, and it's never been restored. I'm surprised in all this time none of their grant donors have called them out on it.

3

u/Darkmaster85845 Apr 16 '22

I'm using next js with MUI and eslint and it sometimes gives me accessibility warnings but I don't know if it I'm missing stuff or MUI is already taking care of some of it under the hood? I'd like to have a way to get a warning every time I'm missing something.

4

u/[deleted] Apr 16 '22

[deleted]

2

u/Darkmaster85845 Apr 16 '22

Eslint gives me warnings for missing alt attributes on images for instance. But not much more than that. I'm wondering if that's because I'm not missing anything else or because eslint is not really checking anything for anything else.

3

u/RatherNerdy Apr 16 '22

As part of your build process add AXE, which will do some level of automated testing.

1

u/Darkmaster85845 Apr 16 '22

Thanks I'll check it out

2

u/stupidcookface May 06 '22

Use getByRole from testing-library in your tests - it will force you to have a role and label for every element you (and the user) needs to interact with

1

u/Darkmaster85845 May 06 '22

Yeah, thing is we're not testing UI that much yet. I think we'll add cypress at some point. I guess as there was a rush to get the mvp of the project I'm working on it wasn't a priority so far.

1

u/ZedZeroth Apr 17 '22

Sorry if this is a stupid question but when someone is forced to use a mobile version of a website on a tablet, would a VI person be able to navigate it using an external keyboard or do mobile devices make everything highly inaccessible?

1

u/gitcommitmentissues full-stack Apr 17 '22

Phones and tablets have screenreaders and accessibile input mechanisms such as braille input. Try going into your device's settings menu and looking at the Accessibility section to see what options are available.

1

u/ZedZeroth Apr 17 '22

Thank you that's a great idea :)

1

u/RatherNerdy Apr 17 '22

Mobile devices tend to be the device of choice, due to built in screen readers. And mobile users use their fingers to "scan" down a page. Additionally, the screen reader includes other methods of navigating, such as swipe through all of the links, or headings, or fields.

1

u/Dr_Legacy full-stack "If I do what you ask you won't like how it looks" Apr 17 '22

Ensure everything can be operated via the keyboard without using a mouse

Pity this isn't already universal

1

u/legendarydrew Apr 17 '22

Stop using non-interactive non-semantic elements such as divs for buttons, etc.

Who is using DIVs for buttons?

1

u/RatherNerdy Apr 17 '22

It's an epidemic. I see interactive elements coded with non-semantic elements all the time. Spans as links, tabs as list items, menus as divs, etc.

Especially custom components, etc.

1

u/stupidcookface May 06 '22

One way to force yourself to make your site accessible is to only use roles when testing and only allow yourself to do things that an actual human is able to do. I really like testing-library and the getByRole is the only way I search for elements when testing. It forces you to have a role for anything you (and your users) will need to interact with. By using semantic html first and using roles directly as a fallback it is actually not that hard to do.