Make your web content more accessible

Tip 1 - Use 'alt' on images

Add descriptions in the images and make it readable for screen readers.

You can leave the atribute empty if it is an decorative image that you want the screen reader to ignore, therefore you don't waste the user's time with useless information.
Here's an example:

Tip 2 - Use 'aria-label' on buttons.

Add this atribute with the name of the button to make it readable for screen readers.

Here's an example:

Tip 3 - Colour contrast

You can check colour contrast of your website using Who can use or using the element inspector (F12) and selecting the area you want to check. Another precious tip is to not use just color to differentiate assets in your page. Add icons, patterns and other features to make it easier for everyone.

Tip 4 - Keyboard navigation and focus

Allow people to use the keyboard to navigate through your website and also highlight on screen which element is selected.

Check below the primary shortcuts:

• tab - navigate between elements
• Space - select
• Enter - submit

Want to know more about it?

Tip 5 - Legibility and readability

To improve legibility, choose a proper font for screen, set a font-size not too small and check colour contrast between the text and the background.

To improve readability, avoid a whole text in capital letter because it makes harder for people with dislexya to read and try to write in a simple language so everybody will understand.

Bonus tip

• Learn more and check more tips on the W3C website
• Use Lighthouse (from Google) to evaluate performance, acessibility and best practicies of your website.