If I want to cover like 95% of the accessibility stuff, what should I look out for first? Colors and alt text are obviously the big ones that come to mind, but there’s probably so much more! Are the Firefox accessibility tools any good? I also have the tota11y bookmarklet, which seems to be pretty good.
Front end developer specialising in JavaScript and React. Experienced in all aspects of modern front end development. Passionate about making accessible, secure and performant software.
I'm looking forward to an answer from InHuOfficial, but I'll chip in too.
In short, using tools like tot11y and Google Lighthouse (or a firefox alternative) is very good. They audit your web pages and tell you how to fix accessibility violations. They cover a lot.
Another necessity is to use semantic HTML, but I'll assume you're already doing that.
Manually test your website's screen reader user experience (use a screen reader to read your page's content to you) and also use your website using only the keyboard (no mouse)
WebAIM's WCAG checklist
WebAIM's WCAG 2 checklist is a checklist that covers the vast majority of what you need to do for accessibility. It only takes about 10 minutes to check against (after you've familiarised yourself with it). If you're not sure on how to do something, it has links with a lot of information to help you.
For example, it mentions things like your page must work at 200% zoom, what color contrasts you must have and that the user should always know what has focus when they're using the keyboard for navigation (e.g. by using focus outlines).
Manual testing
You need to manually test some things. That includes whether your website can be navigated purely with the keyboard. It also includes using your website with only a screen reader.
Without manual testing, you can't know for sure whether those experiences work.
Those things are relatively fast to test (after you've become familiar with them). It's like looking at your website (visually) and making sure it looks correct and has the correct content.
More information
There are many more things that you can do, such as manually testing more things, using more automated tools and writing end to end tests for accessibility.
Wow! Thanks for the detailed answer! I’ll definitely check the WCAG 2 checklist! I’m having a hard time with colours sometimes though since I don’t always want a darker colour for e.g. a button. But hey, if the design still looks fine with the darker colour, I don’t mind much!
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
Sorry for the slow reply, still getting used to the site and the comments system is a bit clunky when you aren't used to it!
The best way to learn accessibility stuff is to download a screen reader (NVDA is free), read how to use it and then try and use websites.
Then when you come to something that doesn't work such as an accordion Google "how to make an accessible accordion".
That will take you down a massive rabbit hole learning about WAI-ARIA, WCAG etc.
Golden rule when starting out is to always try and use native and semantically correct elements. For example if clicking something causes an action on the same page it should be a <button> element. If it takes you to another page (or an anchor / id on the same page) it should be an anchor <a>. You often see people using an anchor with an empty href (<a href="#") - that is an example of using the wrong element for the job as that should be a <button>!
A site I really liked when I was learning about WCAG is called wuhcag.com - they explain the WCAG rules in a simplified way.
Also dboudreau.tumblr.com/archive is nicely presented with a user story to explain why something is important. The blog is a little older so it doesn't contain the latest guidance but 90% of stuff is there.
Finally just do a search on dev.to for accessibility, I am sure there are loads of good articles such as this one you just read by Spyros on the "why" and articles such as this article on accessibility tips from @addyosmani
(who is worth following).
Finally a really quick way to get you in the mindset of accessibility is to hide your mouse! Try using anything you build with just the keyboard and see if you lose where the focus is, can't interact with important elements etc. and you will be an accessibility wizard in no time!
Thanks a lot for the guidance! I try using as much as possible the semantic tags as I find they are useful for reading the code anyways! I’ll have to try using a screen reader for sure though!
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
If I want to cover like 95% of the accessibility stuff, what should I look out for first? Colors and alt text are obviously the big ones that come to mind, but there’s probably so much more! Are the Firefox accessibility tools any good? I also have the tota11y bookmarklet, which seems to be pretty good.
I'm looking forward to an answer from InHuOfficial, but I'll chip in too.
In short, using tools like tot11y and Google Lighthouse (or a firefox alternative) is very good. They audit your web pages and tell you how to fix accessibility violations. They cover a lot.
Another necessity is to use semantic HTML, but I'll assume you're already doing that.
My next recommendations would be to:
WebAIM's WCAG checklist
WebAIM's WCAG 2 checklist is a checklist that covers the vast majority of what you need to do for accessibility. It only takes about 10 minutes to check against (after you've familiarised yourself with it). If you're not sure on how to do something, it has links with a lot of information to help you.
For example, it mentions things like your page must work at 200% zoom, what color contrasts you must have and that the user should always know what has focus when they're using the keyboard for navigation (e.g. by using focus outlines).
Manual testing
You need to manually test some things. That includes whether your website can be navigated purely with the keyboard. It also includes using your website with only a screen reader.
Without manual testing, you can't know for sure whether those experiences work.
Those things are relatively fast to test (after you've become familiar with them). It's like looking at your website (visually) and making sure it looks correct and has the correct content.
More information
There are many more things that you can do, such as manually testing more things, using more automated tools and writing end to end tests for accessibility.
For a lot more information on this, I recommend looking at the next posts I'm planning to upload. They can be found early at How to learn web accessibility and How to make accessible websites - The ultimate guide.
Wow! Thanks for the detailed answer! I’ll definitely check the WCAG 2 checklist! I’m having a hard time with colours sometimes though since I don’t always want a darker colour for e.g. a button. But hey, if the design still looks fine with the darker colour, I don’t mind much!
Sorry for the slow reply, still getting used to the site and the comments system is a bit clunky when you aren't used to it!
The best way to learn accessibility stuff is to download a screen reader (NVDA is free), read how to use it and then try and use websites.
Then when you come to something that doesn't work such as an accordion Google "how to make an accessible accordion".
That will take you down a massive rabbit hole learning about WAI-ARIA, WCAG etc.
Golden rule when starting out is to always try and use native and semantically correct elements. For example if clicking something causes an action on the same page it should be a
<button>element. If it takes you to another page (or an anchor / id on the same page) it should be an anchor<a>. You often see people using an anchor with an emptyhref(<a href="#") - that is an example of using the wrong element for the job as that should be a<button>!A site I really liked when I was learning about WCAG is called wuhcag.com - they explain the WCAG rules in a simplified way.
Also dboudreau.tumblr.com/archive is nicely presented with a user story to explain why something is important. The blog is a little older so it doesn't contain the latest guidance but 90% of stuff is there.
Finally just do a search on dev.to for accessibility, I am sure there are loads of good articles such as this one you just read by Spyros on the "why" and articles such as this article on accessibility tips from @addyosmani (who is worth following).
Finally a really quick way to get you in the mindset of accessibility is to hide your mouse! Try using anything you build with just the keyboard and see if you lose where the focus is, can't interact with important elements etc. and you will be an accessibility wizard in no time!
Thanks a lot for the guidance! I try using as much as possible the semantic tags as I find they are useful for reading the code anyways! I’ll have to try using a screen reader for sure though!