Accessibility for Developers

Table of contents

Incorrect alt tags

Alt tags are used to add descriptive text to images.

<img src="image.jpg" alt="Photo of blue sky against the sea" />

This is great - until they’re misused.

There are two main ways they are incorrectly used.

The first is when decorative images have an alt of sometyhing like “divider line”. Decorative images should have alt="" so screen readers will ignore them.

And then you have the times when useless or incorrect values are given, e.g. <button><img src="something.jpg" alt="Button" /></button>.

No visual indicator for currently focused item

When you are navigating the page with a keyboard, it should be immediately obvious what the current focused element is. Try it on this site - hit tab a few times, and you will see an outline of the current selected element - probably a link.

Bad colour contrast

People with sight issues, or almost anyone when using a laptop/phone in bright sunlight can find it very hard to read text if there is not enough colour contrast.