Accessible components from scratch

Recently, my colleagues asked me to create a small checklist for making an accessible component from scratch. Here it is.

Why do I need to make something accessible?

Do you have a perfect vision? Will it be perfect forever?

Have you had your hand broken sometime? Arm dislocation, maybe? Cut your finger? How was it to use websites?

Did you have a broken mouse sometime? Broken touchpad? Imagine that your touchpad is broken, and you need to find some repair service to fix it, but your phone is discharged, and the search page is made the way you can’t follow the link using the keyboard. Good luck!

We (developers) still do not know how to calculate the lost profit. Anatoly Popko (my blinded colleague from Yandex) said that he wants to spend his money using some services but the services don’t want to get his money just because their functionality is inaccessible.

When we make our websites comfortable for people with disabilities, we make these sites very comfortable for us.

How can people use your site?

How to make the component accessible?

1. Use ready-made solutions

You are not the first person who wants to make an accessible component. Smashing Magazine has an awesome article with many links about the a11y.

2. Use semantic tags

Screenreader will do all the job if you have nav, ul, button, a, dialog, etc. It can’t do the same if you use div and span only.

3. Use ARIA

If you can’t solve your task with semantic tags only. But please, try point 2 first.

4. Do not use tiny interactive elements

Try to touch some tiny 5×5 button to close some adv popup. It enrages! Use 44px as a minimum dimension for any interactive element, it’s enough for fingers.

5. Link <a> should have some text inside it

Screenreader reads the URL if it hasn’t. Let me guess, you don’t have readable URLs for all your links, have you? If your links don’t have texts by design, add <span class="visibility-hidden">Text</span> for that. But try to talk to your designer first.

6. Links vs Buttons

Do you have the web-app state recoverable by URL? It’s an <a> link. Haven’t you? It’s a <button>.

7. Don’t use only icons for buttons or links

Add some hidden span or aria-label to give that element a text. Talk to your designer to make the element better. Not every person understands your icons, but almost everybody understands the text.

8. Add alt to your images

Blind people want to read them too. Can’t you do that? Use alt="" to hide the image from screenreader. It will announce the URL if you haven’t an alt attribute. Let me guess, you don’t have readable URLs for all your images, have you?

9. Don’t hide visual focus

If you don’t like the default style of a focus, make your own custom styles. Explain to your designer, that you can’t hide the focus. If they argue with you, add the cursor: none to their Firgma workspace to explain it more clearly.

10. Trap the focus inside the modal.

The focus shouldn’t move outside.

11. Move the focus inside the modal on its opening

12. Return the focus back when the modal is closed

13. Don’t use only the colors to create some difference

If you use red to mark errors and green to mark success messages, somebody sees some color to mark something… Add icons, text, underlines instead. Why in general we use red color to mark something dangerous, huh?

14. Use captions for videos

Don’t use videos with forced subtitles, they can’t be translated.

15. Use prefers-* media features

For example, prefers-reduced-motion or prefers-contrast. If I’ve set such an option for my OS, I have some reasons for that.

16. Don’t use tiny font size

It’s annoying. I can’t see tiny texts. If your designer decided to use 10px as a font-size, make his Figma workspace better with font-size: 5px !important everywhere. But try to talk with them first.

17. Don’t try too hard

Make your general scenarios work first. If your ’BUY’ button doesn’t work, it makes no sense to add perfect captions to all the images on a page. Fix the main scenario first.

18. Use correct texts for interactive elements

Don’t use Button text inside the <button>. All the roles are read by the screenreader by default.

Resources

Webmentions [?]

  1. Nikita Dubko

    Оформил тред про написание доступных «из коробки» компонентов в виде поста в блог. Можно и с англоязычными коллегами делиться 🙃