DEV Community

Cover image for 13 ways to level up your site's accessibility ✨

13 ways to level up your site's accessibility ✨

hannah 🐙 on July 23, 2020

I recently posted a thread on twitter on making your site more accessible. It turned out to be super helpful for a lot of people, so I wanted to co...
Collapse
 
lennythedev profile image
Lenmor Ld

I remember seeing code like that for a hidden input to display a nicer input and hide the old-looking one
left: -9999px 😳 I definitely didn't think of the a11y implications of that to screen readers. Thanks!

Great summary!

Collapse
 
jessicastrachan profile image
Jessica Strachan

Great list!

Something that helps me with button resetting and hiding but not removing content is making sass mixins or helper classes that can be reused. If they're included in a project boilerplate then it makes these features much easier to incorporate and you can focus on making your buttons etc look pretty.

I definitely need to get better at adding aria labels 🙈

Collapse
 
atyborska93 profile image
Angelika Cathor

My experience with text-transform: uppercase is that it does make the screen reader read out the word as if it was written in uppercase, even if the actual text in the element is not. At least that's the case when using Apple's VoiceOver. I haven't found a way to have visually uppercase text that is read out as lowercase with VoiceOver.

Collapse
 
erhannah profile image
hannah 🐙

Interesting to know!

Collapse
 
mfranzke profile image
Maximilian Franzke

Great article, thanks a lot. And with the link target at "A repo of a11y css stylesheets for your project: a11." you probably meant github.com/mike-engel/a11y-css-reset, as it's returning a 404 on the current link to github.com/mike-engel/a11

Collapse
 
erhannah profile image
hannah 🐙

Appreciate the heads up Maximilian! Edited :)

Collapse
 
ashleyjsheridan profile image
Ashley Sheridan

I'd like to add another: keyboard access. Besides people with disabilities, power users often rely on keyboard a lot. It also ties in a lot with your point about link styles, and is a great reminder why focus styles are really important.

One thing with this, screen readers sometimes add their own keyboard event handlers where only mouse ones exist (e.g. they capture pressing Enter as if it were an onclick). For that reason, I always end up recommending testing keyboards without and then with a screen reader running.

Collapse
 
iainfreestone profile image
Iain Freestone

Some fantastic tips, thank you

Collapse
 
alexiaint profile image
Alexandra Titova

That's a great list, thank you for sharing.

Collapse
 
dominicduffin1 profile image
Dominic Duffin • Edited

Does anyone know how to try out using a screenreader on a Windows machine?

Collapse
 
aut0poietic profile image
Jer

Cool thing: Windows Narrator is built into current version of Windows. From what I've learned recently, the Edge (Chromium) + Narrator is the most accurate browser/AT combination at the moment, especially where ARIA is concerned. Safari+VO has some issues and has fallen behind.

Collapse
 
erhannah profile image
hannah 🐙 • Edited

Great question. It’s not as simple as OS X VoiceOver, but you can use either NVDA on Windows, a free screen reader, or on Google Chrome there’s an extension caller ChromeVox which is a screen reader specifically for Chrome users. I personally haven’t used either but please let me know what you think of them if you do!

Collapse
 
dominicduffin1 profile image
Dominic Duffin

Thank you! I'll check them out and let you know!

Collapse
 
ruannawrites profile image
Ruanna

Love this! Thanks for sharing!

Collapse
 
manish profile image
Manish Sinha

An excellent article. Learnt quite a lot of things which I have never known before. Thank you very much for writing this article.

Collapse
 
lauragift21 profile image
Gift Egwuenu

Honestly, these are great tips! Trying my best to do Number 1 as well.

Collapse
 
franciscocobas profile image
Francisco Cobas

Thank you very much, I need to build an accessible website and this article came to me in the right moment!

Collapse
 
umaar profile image
Umar Hansa

These are some great tips, nice!

Collapse
 
cbloss profile image
cbloss

Great overview! Thanks for this!

Also...people use divs for buttons? O.O

Collapse
 
noahoff profile image
noahoff

Hello everyone,
Great article. The Information you shared is quite appreciable.
Thanks by usejquery.com