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.
Leave a Reply