Thread by @vponamariov

10 simple rules to make your site more accessible 👇

1/10

The site should be accessible via keyboard without using a mouse.

This is easy to test - simply try to use your own site without a mouse & touchpad.

2/10

Use proper alt text for all images

Alt text should be provided for images, so that screen reader users can understand the message conveyed by the images.

If an image serves decorative purposes, use an empty string as the alt tag.

3/10

Give your links unique and descriptive names

Instead of using "Click here" try to use something informative.

Consider these two examples:

1. CLICK HERE to send us a message ❌
2. To send us a message, USE THE FEEDBACK FORM ✅

4/10

Make sure your text has enough contrast

There are three levels of text contrast: A, AA, and AAA. It's pretty good if you conform to the AA level.

There are a lot of online tools to check the contrast.

5/10

Use headers for structuring your content

🔸Use <h1> for the primary title of the page
🔸Use headings to indicate and organize your content structure
🔸Do not skip heading levels (e.g., go from an <h1> to an <h3>)

6/10

Use labels in your form inputs. They should be always visible!

Don't use placeholders only instead of labels.

- They may be hard to read (since they are usually gray and the contrast is poo)
- They'll disappear when the user starts typing.

7/10

Don't use absolute text size units

A good practice is to avoid absolute units, such as specifying text size using pixels.

Instead, use relative sizes, which enable the text to scale depending on other content and screen size.

8/10

Use tables only for tabular data, not for layout

Using tables for page layout adds additional verbosity to screen reader users.

Whenever a screen reader encounters a table, the user is informed that there is a table with "x" number of columns and rows.

9/10

Use ARIA attributes.

But be careful: you should only use them when necessary.

For example, you should use the native HTML button tag instead of the ARIA role of button.

10/10

Check WCAG guidelines

WCAG stands for Web Content Accessibility Guidelines.

It has three levels of accessibility standards: A, AA, and AAA.

If you want your site to conform to one of these levels, you should check if it conforms to all the requirements in the level.

Remember: at least 97.8% of homepages failed to meet WCAG Level AA compliance.

By the way, one of the coolest plugins I've seen related to accessibility is @getstarkco

They even have a blog with many articles related to this topic.

An awesome project I've just found is @A11YProject.

Look at their checklist!
a11yproject.com/checklist/