Making websites accessible to all
Our web accessibility tips can be used by anyone to help create or adapt a website to make it more accessible to all users. This hints listed below are not intended replace standards such as the World Wide Web Consortium’s (W3C’s) Web Content Accessibility Guidelines.
Check out our Accessibility page for more ideas on increasing your accessibility
Add alt text to images – Alt text provides a written description of an image for individuals who cannot see them. They can be picked up by people using screen readers or Braille output devices.
Headings – Use headings to break down the content on your page into manageable chunks. This will help non-visual users to understand how the page is organised as well as making it simpler for screen reader users to navigate.
Use a color contrast checker – Check that your foreground and background colours have adequate contrast by using a Colour Contrast Analyser
Avoid using tiny fonts – Even though modern browsers can increase text size automatically, some users may be unaware that font size can be increase. If you use a reasonably large font size by default then your website will be more accessible by default.
Simple Language – Keep your language simple and sentences short to read.
White space is important – As with print, space between lines and columns of text help users follow the flow of the text. Good white space contributes to a cleaner and better experience for all users and in e-commerce can help lead to higher sales.
Provide a focus – You website should respond to mouse movements for instance, colour changes when a mouse moves over link text. For people who aren’t using a mouse, provide the same functionality when navigation with a keyboard.
Avoid using pictures of text – Pictures of text can not be read by screen readers and become blurry when enlarged. As with print avoid overlaying text on images.
Without an accessible menu user may not be able to move past the home page. If using sub menus check that they can be accessed by keyboard alone.
Test with a keyboard alone – Try navigating the web yourself by just using the keyboard, here are some simple instructions to get you started. This simple test is typically a good indicator of accessibility.
Test with a high contrast color scheme – Most operating systems have a high contrast color scheme available. When enabled, make sure that all important page content is still visible.
Test with assistive technologies – There are free screen readers available and other assistive technology which can be used for testing. You don’t have to an expert to use them, but by testing with these technologies you will quickly identify any issues with your site.
Test pages on mobile devices. – Over 50% of internet traffic is now mobile (smartphone and tablets). Test your website using several mobile devices as different types of devices can make display the website differently
Before you buy
Templates and plugins – If you are buying a template or plugin ask the vendor if their product is accessible. You can ask for a demo site to check for yourself.
Feedback – Encourage users of your website to let you know if they encounter a problem. This will allow you to apply a fix or work around and avoids the situation whereby the user doesn’t return.
If you have suggestions on how this list can be improved then please send your ideas to firstname.lastname@example.org