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...
For further actions, you may consider blocking this person and/or reporting abuse
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 !
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! 😉
p.s. mirellamoves.com/ has a 503 on it, I wanted to check out your site! Just in case you didn't know!
"elle" is the french traduction of "she" ;)
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 🤣
Lol! Were you going to rate it for accessibility? 😂
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! 😋🤣
Pay attention @inhuofficial .. Ella has the power to ban you and all your articles from DEV if you give her a bad rate 😜
@afif Are you suggesting I would do such a thing? 😳
no no, I simply want to scare him .. Il a peur assez vite 😆
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! 😀
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! 😉🤣
Oh, I smell a counter-attack! you know what can happen next ... 😈
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! 😋🤣🤣
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!
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? 😉
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
❤ 🦄 📘
I
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? 😋🤣
Wow! There are literally 101!!! I was expecting an average listicle, but thanks so much!!!
😃💗
Another good assistive technology to ensure compatibility with is Switch Control (iOS/macOS) and Switch Access (Android/Chrome OS). I find it a pretty-overlooked AT which isn't as prevalent in operating systems (Windows, for example, requires third-party software I believe and/or the On-Screen Keyboard app), but in some ways is more commonly-used than other ATs like screen readers due to the number of people who have limited motor skills.
It's a really clever AT which enables the use of a device with simply one button, called a switch. It allows for all features of a device to be performed with relatively fast operability (for repeatedly pressing a single button), such as swiping and pinching on a touchscreen.
It seems like Switch Control/Access is rarely talked about with regards to web accessibility, but is certainly an important one to think about! There's a great article on SC/A on the 24 Accessibility site — one of the few articles that turn up results on Google (often Google thinks you're talking about the WAI-ARIA
switchrole for checkboxes...)!In fact, I'm building a Linux-based smartphone user environment/OS, and have included Switch Navigation as a feature early on — imo it's actually quite fun to implement and get working with various parts of the system!
The whole world of AAC is a fascinating subject! Sip puff, single or double switch controls, eye gaze. Honestly I find it all so exciting and interesting.
I haven’t had chance to read your article on building custom switch navigation but it is an article I have in draft myself so I am looking forward to seeing how you approached it! ❤️
Thanks! I did notice you briefly mentioned about sip-and-puff control — that's quite a good example of effectively having two switches integrated into one device. In many ways, I'm glad that people are conscious of keyboard navigation a11y, since many switch control ATs essentially rely on the same kind of traits as that of keyboard nav ARIA roles/attributes etc.
Yeah exactly, if it works for keyboard it will probably work for switch controls reasonably well.
However I am intrigued to see what things you did / how you tackled it and will read your article when I get back to the UK in a couple of days. Looking forward to it! 🔥
Yeah; the implementation that I made mainly emulates the Tab keyboard event to scan to the next item, much like on a keyboard. Pressing Space would of course interact the focused item, which relies on the default behaviour of that key on elements (might need to address pressing Space on things like range sliders, links etc. that don't do anything when pressed though 🤣). Switches typically act like keyboards in that they typically send the Space event when pressed, so that essentially completes the system.
There's also things like point scanning (which was talked about briefly in the post) which emulates things like mouse/touch events, too. Not too hard to implement once key emulation works!
Safe travels as you get back to the UK!
@inhuofficial
I'm so curious, what would (and can you) put together an HTML/CSS template that includes all relevant and common HTML elements along with all of your accessibility tips, like a "Fully accessible HTML Kitchen Sink" of sorts?
I have been working on a project for some time (and it won’t be ready for a while yet either) called “ultimate UI”, this will do exactly that! Hopefully will start writing about that soon as I was meant to start writing about it in May but ended up mega busy, hopefully I will find the time 🤞
I think now we have no excuses for not making a website accessible ...
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! 😂😜🤣
😂 ,no this young developer have this swiss knife now. Thanks for so long and detailed tips.
Mine is that there's too much stuff in accessibility to worry about, the article felt overwhelming.
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!
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.
Aww thank you Timothy, I am blushing!
Let me know if you find any blunders or typos as you work your way through it! 😋
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
altattributes 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 (
imgwith empty stringalt), and a decorative image enhancing the website's design (divwithbackground-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.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
altdescriptions should be shorter and to use things like<figcaption>andaria-labelledbyif 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!).
[[Pingback]]
This article is curated as a part of #20th issue of software Testing Notes.
softwaretestingnotes.substack.com/...
That's great!
Is it your newsletter?
hey @inhuofficial ,
yes, I have just started couple of months ago.
I subscribed so I look forward to the next issue!
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.
Okay I'm bookmarking this. Thank you
Wow! Super complete article. I stil need to finish reading it, but it looks amazing so far.
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 😁
THANK YOU! THANK YOU! THANK YOU SO MUCH ❤️
Hope you find it useful Ålexander! ❤
What a resource! I don't think I would even classify this as a listicle - it's closer to a handbook!
Thanks Erica, no defo a listicle....the handbook is coming 😉
HUGE! This one goes right into my bookmarks (both)! Just awesome!
Thanks a lot Siddharth, I hope you find it useful now and or in the future!
learn more html dd beginnerwebdeveloper.com/blog/html...
Gold mine... So I have something for the weekend .
Thanks a lot, I hope it doesn't take up your whole weekend...it turned into a bit of a monster article 😋🤣
Thank you for this!
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. 😂
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.