DEV Community

Cover image for 101 Digital Accessibility (a11y) tips and tricks

101 Digital Accessibility (a11y) tips and tricks

InHuOfficial on July 30, 2021

Hey peeps, yes I have written a listicle. Don't worry I am OK. May I present 101 Accessibility tips and tricks. So if you have a minute (or an hour...
Collapse
ellativity profile image
Ella Ang (she/her/elle)

I'm so sorry I missed this when it first got published. It's a beast, but a magnificent beast. Thanks for taking the time to write and compile all of this.

As @egilhuber says, this isn't a listicle, it's a handbook! Nice work, @inhuofficial !

Collapse
inhuofficial profile image
InHuOfficial Author • Edited

Aww thanks Ella.

You can't be expected to see everything on the site, DEV is a beast (a magnificent beast) when it comes to the amount of contributions each day! 😉

Collapse
inhuofficial profile image
InHuOfficial Author

p.s. mirellamoves.com/ has a 503 on it, I wanted to check out your site! Just in case you didn't know!

Thread Thread
afif profile image
Temani Afif

"elle" is the french traduction of "she" ;)

Thread Thread
inhuofficial profile image
InHuOfficial Author • Edited

Jeez 🤦‍♂️🤦‍♂️🤦‍♂️ for that one, I should have read her profile! What a numpty I am!

Sorry Ella, that was a typical ignorant Brit thing to not notice...we don't do foreign languages over here you know! I will go hang my head in shame right now 🤣

Thread Thread
ellativity profile image
Ella Ang (she/her/elle)

Lol! Were you going to rate it for accessibility? 😂

Thread Thread
inhuofficial profile image
InHuOfficial Author

I don't dare do anything for the rest of the day after such a blunder, still hanging my head in shame that I could be so silly! 😋🤣

Thread Thread
afif profile image
Temani Afif

Pay attention @inhuofficial .. Ella has the power to ban you and all your articles from DEV if you give her a bad rate 😜

Thread Thread
ellativity profile image
Ella Ang (she/her/elle)

@afif Are you suggesting I would do such a thing? 😳

Thread Thread
afif profile image
Temani Afif

no no, I simply want to scare him .. Il a peur assez vite 😆

Thread Thread
inhuofficial profile image
InHuOfficial Author • Edited

I think we can all agree if the DEV team were the sort to ban people I would be long gone by now!

And no I was obviously not going to give it a bad rating...but I cannot guarantee I wouldn't have picked a few (tiny, teensie weensie) holes in any accessibility issues 😋🤣

Oh and I do not scare easily darling! I see you trying to sneak past my ignorance there! 😀

Thread Thread
inhuofficial profile image
InHuOfficial Author • Edited

I think suggesting you would abuse your power and ban me counts as "Trolling, insulting/derogatory comments, and personal or political attacks"! Suggesting such a thing is just outrageous...so for contravening the Code of Conduct I say...go get him! 😉🤣

Thread Thread
afif profile image
Temani Afif

Oh, I smell a counter-attack! you know what can happen next ... 😈

Thread Thread
inhuofficial profile image
InHuOfficial Author

Another war? I mean after the pasting you got in the last one have you even recovered yet?

I have so many SVGs with your name on them, I am ready! 😋🤣🤣

Thread Thread
afif profile image
Temani Afif

you are funny .. recovering from what? I didn't even use a single mana. Building one loader take me more effort than what you call a "war" 🤭

Also my name is non-SVG-able!

Thread Thread
inhuofficial profile image
InHuOfficial Author

Hehe!

I do think we should have another war, just trying to think of something that would get loads of variation and not get boring in the feed.

Maybe a menu system war, we could really go wild coming up with unique ideas for that! I also imagine it would really lend itself to some really new CSS features!

We could agree terms before the war like gentlemen (number of links, whether there is a second level, mobile or desktop or both) etc. I think it could be fun!

Oh and the name...shouldn't it be CaSiuS the SaVaGe surely? 😉

Collapse
inhuofficial profile image
InHuOfficial Author • Edited

OK, I think I need a lie down after writing that!

Please, if you notice a typo, or worse, a mistake in what I have said, let me know.

I hope you all enjoy this article and if you do enjoy it, please do share it on Social Media, it would be very much appreciated .

Don't forget to

  ❤    🦄    📘  

Collapse
posandu profile image
Posandu • Edited

I

Collapse
inhuofficial profile image
InHuOfficial Author

I saw the original comment notification just now "test"...were you as surprised at me that button elements work (at the moment) in the comments? 😋🤣

Thread Thread
posandu profile image
Posandu

Collapse
afif profile image
Temani Afif • Edited

I think now we have no excuses for not making a website accessible ...

Collapse
inhuofficial profile image
InHuOfficial Author

Hehe, well at least now I have some extra ammo for the next time when you decide to summon me to destroy another young developer’s dreams! 😂😜🤣

Collapse
anurag0s1 profile image
Anurag

😂 ,no this young developer have this swiss knife now. Thanks for so long and detailed tips.

Collapse
oniichan profile image
yoquiale

Mine is that there's too much stuff in accessibility to worry about, the article felt overwhelming.

Collapse
inhuofficial profile image
InHuOfficial Author

Take it section by section. It isn’t designed as an article to read in one sitting, more as a reference piece and a guide to things to learn over time.

Another way to think of it is 55 pages of a book, how would you tackle that? Probably a few pages / a chapter at a time then go and digest it.

If you read, practiced and implemented just one point a day you would be an accessibility expert in 3 months!

Collapse
auroratide profile image
Timothy Foster • Edited

This makes me so happy! It wasn't enough to just leave a heart and unicorn, I had to comment about it. It's been such a journey for me finding these bits and pieces all over the web, so seeing it all in once place is beyond useful.

Collapse
inhuofficial profile image
InHuOfficial Author

Aww thank you Timothy, I am blushing!

Let me know if you find any blunders or typos as you work your way through it! 😋

Collapse
auroratide profile image
Timothy Foster

Finally made it through the whole thing! Made some tweaks to my website from some of these tips, and will definitely write a post linking to this soon!

Here are some general thoughts I had reading through some of the tips.

12: One h1 per page

One of the things that surprises me about the HTML Spec is the use of <section> and <h1>, where it explicitly allows (and even recommends) each section essentially resetting the heading level. On the one hand it's pretty modular, but in practice it really hurts AT, so I just do headings normally now.

29: alt attributes

I wrote about this recently; thanks for giving it a read! Every once in a while I look to see what alt attributes people are using and shed a tear every time I see "file-name.png" : (

30: Don't add alt text to images

Another technique I've seen recommended is to use CSS background image for decorative imagery. Lately I've been making a distinction between a decorative image in the context of an article (img with empty string alt), and a decorative image enhancing the website's design (div with background-image).

78: Automated testing

Happy to see testing here too! At my last job our web architect highly advocated the use of the Lighthouse Node CLI so that a lighthouse report could be generated on the continuous integration pipeline.

I'll definitely be giving the Accessibility Insights for Web tool a look-over!

79: Manual testing

I learned a whole lot just from manually experimenting with keyboard-only navigation and using screenreaders!

Lately I've been trying to think of ways to utilize journey testing to catch usability issues. For instance, I recently wrote a test for a dialog that, instead of using functions like click('Close'), relied only on keyboard presses to make sure tab trapping worked and so forth.

Thread Thread
inhuofficial profile image
InHuOfficial Author

I am so glad somebody managed to read the whole thing!

By the way I wrote (and obviously didn't send somehow...) a comment on your article.

You got most of the points spot on! I was just going to make a minor point on how your alt descriptions should be shorter and to use things like <figcaption> and aria-labelledby if you want to add details such as "large swirls", "magenta bands" etc.

Overall your article was excellent, I enjoyed reading it and "Purpiter" is now my new favourite planet!

I am glad a few points in this article jumped out at you and I am really looking forward to seeing your post on the improvements you made to your site because of it (that is the biggest compliment you could have given me!).

Collapse
priteshusadadiya profile image
Pritesh Usadadiya

[[Pingback]]

This article is curated as a part of #20th issue of software Testing Notes.
softwaretestingnotes.substack.com/...

Collapse
inhuofficial profile image
InHuOfficial Author

That's great!

Is it your newsletter?

Collapse
priteshusadadiya profile image
Pritesh Usadadiya

hey @inhuofficial ,
yes, I have just started couple of months ago.

Thread Thread
inhuofficial profile image
InHuOfficial Author

I subscribed so I look forward to the next issue!

Collapse
oniichan profile image
yoquiale

Amazing article, I'll save it for when I get asked to implement accessibility. I almost never implement accessibility on the websites I code because there's TOO MUCH to worry about, this article was helpful, although it felt too overwhelming for me.

Collapse
onyebuchidaniel60 profile image
EXtreme Stack

Okay I'm bookmarking this. Thank you

Collapse
egilhuber profile image
erica (she/her)

What a resource! I don't think I would even classify this as a listicle - it's closer to a handbook!

Collapse
inhuofficial profile image
InHuOfficial Author

Thanks Erica, no defo a listicle....the handbook is coming 😉

Collapse
alvaromontoro profile image
Alvaro Montoro

Wow! Super complete article. I stil need to finish reading it, but it looks amazing so far.

Collapse
inhuofficial profile image
InHuOfficial Author

Thanks Alvaro! Oh just spotted you have a new article so I think it is time to do a swap and I read yours while you read mine 😁

Collapse
rockysfairat profile image
Ålexander Y.

THANK YOU! THANK YOU! THANK YOU SO MUCH ❤️

Collapse
inhuofficial profile image
InHuOfficial Author

Hope you find it useful Ålexander! ❤

Collapse
satrun77 profile image
Mohamed Alsharaf

Thank you for the article! It is soooo good! I shared it in my work slack. Like the jokes in between sections, it stopped me from falling a sleep. 😂

Collapse
inhuofficial profile image
InHuOfficial Author

The jokes stopped me from falling asleep as well while writing it 😜.

So glad you enjoyed it and thanks for the kind words, I hope it is a useful reference piece etc.

Collapse
rafanas profile image
Rafael Fu

Thank you for this!

Collapse
siddharthshyniben profile image
Siddharth

HUGE! This one goes right into my bookmarks (both)! Just awesome!

Collapse
inhuofficial profile image
InHuOfficial Author

Thanks a lot Siddharth, I hope you find it useful now and or in the future!

Collapse
kiranrajvjd profile image
Kiran Raj R

Gold mine... So I have something for the weekend .

Collapse
inhuofficial profile image
InHuOfficial Author

Thanks a lot, I hope it doesn't take up your whole weekend...it turned into a bit of a monster article 😋🤣