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!
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.
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!