Simple accessibility

Sep 6, 2018

Implementing proper accessibility practices can seem a little daunting at first, but there are a few basic standards you can introduce into your project work-flow that are fairly straightforward:

Basic design

  1. Test that your project has the proper contrast color settings between type, backgrounds, icons etc.
  2. Only use “fancy” grid-ordering for minor layout design - avoid rearranging important content via CSS


  1. Use proper HTML structures (aside, header, main, footer elements as needed)
  2. Make use of the aria-label attribute
  3. Ensure your website/app can be navigated completely (and properly) with only a keyboard


  1. Avoid using CSS backgrounds for content images (should only be used for patterns, layout design etc.)
  2. Ensure proper alt attributes are provided on all images

It isn’t much - but follow these basics and you’ll be one step closer to providing better accessibility to your users.

← Back to all articles

If you would like help support this blog, please consider donating to help keep articles ad-free.
This site is an honorary member of the 1MB Club.
No third-party advertising or data collection - More about privacy.
Built with Jekyll & hosted on Netlify.
Maintained with ♥ for the web.

This page is valid HTML