Interactive Web Accessibility Cheat Sheet

15 quick tips to improve the web accessibility of your web pages.

Some of them may seem obvious and more based on usability, but still they are important, make the web more accessible... and they are easy to implement.

Interactive Web Accessibility Cheat Sheet

Find the 15 tips for accessibility

Logo/Site name redirects to home

Users need easy access to the home page, and the logo is expected to be a link to it.

Link skips directly to the content

Make it easy for users to jump the header, menu, etc. and jump to the page main content by adding a skip link.

Good color contrast

The color of the text and elements on the foreground should contrast enough with the color of the background.

Menus should also be usable via keyboard

A way to control and navigate the menu via keyboard should be available for users that don't use a mouse.

Text must always be readable

Pick a font that is easy to read, avoid small font sizes, and adapt the size to fit different screens.

Give meaning to abbreviations

Screen readers don't recognize acronyms or abbreviations. Use titles and the abbr tag to add meaning to them.

Descriptive and easy to use forms

Use placeholders and labels to describe the fields. Organize fields in order. If there are errors, make it easy to jump and fix them.

The right image for the right place

Consider type and sizes. Use SVG for vectorial graphics and icons (leverage its accessibility features).

Specify the language of document/elements

It will help with Braille translation software, and with the pronounciation and definitions in screen readers.

Use metadata and social media tags

Well-crafted metadata provides orientation to users, screen readers, and external sites.

Have meaningful and usefull link

Don't have empty links, or links with just images and no description... or many similar links (e.g. "Read more").

Use ARIA attributes and roles

They provide useful properties and make the web more accessible for people with disabilities.

Use semantic tags

Not only good for accessibility, but html5 tags improve performance and SEO.

Always have alternative text

First principle of web accessibility... and sometimes easier said than done.

Structure content logically

Headings and content must be structured in an orderly way. Don't skip headings, have valid HTML.

See the Pen Interactive Web Accessibility Cheat Sheet by Alvaro Montoro (@alvaromontoro) on CodePen.

Advertisement

Google Matched Content...