5 ms·

A beginner’s guide to web accessibility

100 points by saranshk 6y ago

indysigners 6y ago
If you prefer reader mode, like I do, any Medium-based platform is a PITA cause all images are blurred. Anyone who is on a crappy connection will have them same. What a fuxxing shame! Can we stop using this crappy platform please?
- loloquwowndueo 6y ago
  Let’s, but really do you care about the images or are you there for the article content :) reader mode is nice to skip the silly “pardon the intrusion” or “sign up to our newsletter spam” modals, and i don’t think I’ve ever missed any photos or images when reading stuff like that. These days I tend to just avoid content on medium.
  - solarmist 6y ago
    It depends. There are plenty of articles where images are material to the discussion.
- oehtXRwMkIs 6y ago
  They also don't use semantic elements at all, just a bunch of divs and spans everywhere.
- brainlessdev 6y ago
  I implemented this extension just to stop myself from clicking on Medium links https://github.com/fnune/nay https://github.com/fnune/nay
Jaygles 6y ago
When I was working on a team with an accessibility requirement. The bulk of the work wasn't coloring work, nor writing alternative texts, but ensuring that the website could be navigated well using a screen reader. We used JAWS[0] and tested every change and new feature with it to ensure users of it could make sense of the website. This was a lengthy process that took a lot of effort and learning on the part of devs to pick up JAWS. The tough part of it was it being a subjective process. No one can tell you if the final experience was "correct" or not. This part of web accessibility isn't mentioned as often, but its just as important. Likely because not many people really know about it. Edit: I think part of it is the high cost of products like JAWS. The current price of a home license is $1,000. A business license is $1,285. [0] https://www.freedomscientific.com/products/software/jaws/ https://www.freedomscientific.com/products/software/jaws/
- steerpike 6y ago
  Most accessibility shops and devs tend to use the free NVDA screenreader[0] for accessibility testing because of the costs associated with JAWS. There are differences between the two (and the other well used screenreader VoiceOver) but NVDA is a damn good product with a decent user base that certainly helps in finding potential hiccups in complex frontend applications. Usually this happens when one of the screenreaders hits something on a webpage that triggers 'interaction mode'[1] Edit: Interestingly the most recent data I found[2] seems to indicate that NVDA has passed JAWS as the most used screenreader, so might be worth using as the default for testing [0] https://www.nvaccess.org/about-nvda/ https://www.nvaccess.org/about-nvda/ [1] https://tink.uk/understanding-screen-reader-interaction-modes/ https://tink.uk/understanding-screen-reader-interaction-mode... [2] https://webaim.org/projects/screenreadersurvey8/ https://webaim.org/projects/screenreadersurvey8/
  - mwcampbell 6y ago
    The Narrator screen reader built into Windows is also not bad these days, with recent versions of Windows 10. You can turn it on with Ctrl+Win+Enter. And while I'm here, if you're on a Mac, you can turn on VoiceOver with Command+F5. Both Narrator and VoiceOver have built-in tutorials. Disclosure: I was a developer on the Windows accessibility team at Microsoft for a little over 3 years, focusing on Narrator.
  - paranorman 6y ago
    This lines up with my experience working on product features for customers that have accessibility requirements. From what I’ve seen, most larger companies that care about accessibility (usually for fear of lawsuits) have internal folks testing with NVDA specifically. This is another great reason to use it for your testing because you can be confident the odds of someone checking your work with NVDA are good.
- loloquwowndueo 6y ago
  How does JAWS compare with Orca, a common screen reader for Linux desktop systems? Does it even show in your radar, compared to JAWS? I need to fix a site to work with Orca and it would be nice if that also made it be friendly to JAWS users, but I know next to nothing about either.
JoeCianflone 6y ago
One problem here: line height should be unit-less. Use just a number and that number will become a multiple of the font value so font-size 2rem line-height:1.3 don’t use units
- approxim8ion 6y ago
  This was a major stumbling block for me until I read about it on MDN. My blog's longish titles were always spilling over into the next line until I removed the em unit. Serves me right for not RTFM-ing and thinking I know enough HTML to cobble together a basic site.
chrismorgan 6y ago
This article isn’t all bad, but it’s not particularly high quality either. <img src=”baby_elephants.png” alt=”A group of two baby elephants walking behind their mom in a open field.”> … followed immediately by a demonstration baby elephant image with empty alt text (which in a case like this is worse than no alt attribute, because it tells accessibility tech that the image is purely decorative and should not be announced). (Note also the use of ” instead of ".) This is not encouraging. > You can add a landmark by using the role attribute. Some examples of landmarks are banner, form, and search. Something to note is that you should only place the role attribute on elements like <div> and <span>, do not place on elements that have semantic meaning like a <ul> or <p>. There is nothing wrong with overriding the role of an element with semantics; it purely comes down to whether you do it correctly. And the thing that they don’t mention here is that the converse applies at least as much: if there’s a built-in element with your desired semantics, you should use that instead of a role, so the example is a bad example: its <div role="navigation"> should be <nav>.
Narishma 6y ago
Something not mentioned that a ton of modern websites fail at is having readable text due to either too-low contrast, too-thin or too-small fonts, or all of those things combined. These days it seems like I have to use reader mode for half the articles or blog posts I read daily.

100 points by saranshk 6y ago

If you prefer reader mode, like I do, any Medium-based platform is a PITA cause all images are blurred. Anyone who is on a crappy connection will have them same. What a fuxxing shame! Can we stop using this crappy platform please?

loloquwowndueo 6y ago
Let’s, but really do you care about the images or are you there for the article content :) reader mode is nice to skip the silly “pardon the intrusion” or “sign up to our newsletter spam” modals, and i don’t think I’ve ever missed any photos or images when reading stuff like that. These days I tend to just avoid content on medium.
- solarmist 6y ago
  It depends. There are plenty of articles where images are material to the discussion.
oehtXRwMkIs 6y ago
They also don't use semantic elements at all, just a bunch of divs and spans everywhere.
brainlessdev 6y ago
I implemented this extension just to stop myself from clicking on Medium links https://github.com/fnune/nay https://github.com/fnune/nay

Jaygles 6y ago

When I was working on a team with an accessibility requirement. The bulk of the work wasn't coloring work, nor writing alternative texts, but ensuring that the website could be navigated well using a screen reader. We used JAWS[0] and tested every change and new feature with it to ensure users of it could make sense of the website. This was a lengthy process that took a lot of effort and learning on the part of devs to pick up JAWS. The tough part of it was it being a subjective process. No one can tell you if the final experience was "correct" or not. This part of web accessibility isn't mentioned as often, but its just as important. Likely because not many people really know about it. Edit: I think part of it is the high cost of products like JAWS. The current price of a home license is $1,000. A business license is $1,285. [0] https://www.freedomscientific.com/products/software/jaws/ https://www.freedomscientific.com/products/software/jaws/

steerpike 6y ago
Most accessibility shops and devs tend to use the free NVDA screenreader[0] for accessibility testing because of the costs associated with JAWS. There are differences between the two (and the other well used screenreader VoiceOver) but NVDA is a damn good product with a decent user base that certainly helps in finding potential hiccups in complex frontend applications. Usually this happens when one of the screenreaders hits something on a webpage that triggers 'interaction mode'[1] Edit: Interestingly the most recent data I found[2] seems to indicate that NVDA has passed JAWS as the most used screenreader, so might be worth using as the default for testing [0] https://www.nvaccess.org/about-nvda/ https://www.nvaccess.org/about-nvda/ [1] https://tink.uk/understanding-screen-reader-interaction-modes/ https://tink.uk/understanding-screen-reader-interaction-mode... [2] https://webaim.org/projects/screenreadersurvey8/ https://webaim.org/projects/screenreadersurvey8/
- mwcampbell 6y ago
  The Narrator screen reader built into Windows is also not bad these days, with recent versions of Windows 10. You can turn it on with Ctrl+Win+Enter. And while I'm here, if you're on a Mac, you can turn on VoiceOver with Command+F5. Both Narrator and VoiceOver have built-in tutorials. Disclosure: I was a developer on the Windows accessibility team at Microsoft for a little over 3 years, focusing on Narrator.
- paranorman 6y ago
  This lines up with my experience working on product features for customers that have accessibility requirements. From what I’ve seen, most larger companies that care about accessibility (usually for fear of lawsuits) have internal folks testing with NVDA specifically. This is another great reason to use it for your testing because you can be confident the odds of someone checking your work with NVDA are good.
loloquwowndueo 6y ago
How does JAWS compare with Orca, a common screen reader for Linux desktop systems? Does it even show in your radar, compared to JAWS? I need to fix a site to work with Orca and it would be nice if that also made it be friendly to JAWS users, but I know next to nothing about either.

JoeCianflone 6y ago

One problem here: line height should be unit-less. Use just a number and that number will become a multiple of the font value so font-size 2rem line-height:1.3 don’t use units

approxim8ion 6y ago
This was a major stumbling block for me until I read about it on MDN. My blog's longish titles were always spilling over into the next line until I removed the em unit. Serves me right for not RTFM-ing and thinking I know enough HTML to cobble together a basic site.

chrismorgan 6y ago

This article isn’t all bad, but it’s not particularly high quality either. <img src=”baby_elephants.png” alt=”A group of two baby elephants walking behind their mom in a open field.”> … followed immediately by a demonstration baby elephant image with empty alt text (which in a case like this is worse than no alt attribute, because it tells accessibility tech that the image is purely decorative and should not be announced). (Note also the use of ” instead of ".) This is not encouraging. > You can add a landmark by using the role attribute. Some examples of landmarks are banner, form, and search. Something to note is that you should only place the role attribute on elements like <div> and <span>, do not place on elements that have semantic meaning like a <ul> or <p>. There is nothing wrong with overriding the role of an element with semantics; it purely comes down to whether you do it correctly. And the thing that they don’t mention here is that the converse applies at least as much: if there’s a built-in element with your desired semantics, you should use that instead of a role, so the example is a bad example: its <div role="navigation"> should be <nav>.

Narishma 6y ago

Something not mentioned that a ton of modern websites fail at is having readable text due to either too-low contrast, too-thin or too-small fonts, or all of those things combined. These days it seems like I have to use reader mode for half the articles or blog posts I read daily.