These web accessibility top tips for best practice are based on both WCAG2.0 guidelines and my own experience of web accessibility and assistive technology. It is ment as a starting point and aims to help you make a start on the path to using better web accessibility practices.
1 Use well structured semantic mark up
By following W3C code standards and marking your content with the right HTML tags, you help both future proof and maintain your code and allow assistive technology to work more effectively.
You can read the article Get started with Structured Headings to see the value of using headings within your WebPages.
2 Use colour effectively
Colour is often considered part of the cosmetic design and not have any value to the content. Although for some people colour can aid there ability to read or find content.
You can read the article The Smart Design: Accessibility and Colour to find out more on how to use colour effectively.
3 Ensure device independence
This is key for many assistive technology as well as the fast growing mobile web access. More people are using mobile devices to access WebPages on the go or while relaxing at home.
You can read the article A Little Accessibility Guide to Device Independence to learn the fundamentals of this.
4 Use link text that is meaningful
Link text is the clickable text that will take you to something else. If an image is used instead of text, its alt text will be used as the link text.
Many assistive technologies and search engines will use this link text to see what the link is for. So link text like ‘click here’ or ‘more’ gives no meaning.
Also if the link is to something other than another webpage, it can be very helpful to say this within the link text. For example if the link is to a PDF file, adding ‘[PDF Document]’ to the link text will let people know what to expect.
5 Use progressive enhanced design where possible or graceful degradation
These terms are similar in that they both offer backward support for older technology. However, their approach is different.
Progressive enhancement is where you start with something that will work anywhere and then check for support of newer technology before using it. Where as graceful degradation is when if something is not supported you either give information about why and what is required before it will work or offer a more basic alternative.
You can read this article Graceful degradation versus progressive enhancement to see an example.
6 Separate content from style
The very early days of web technology, some basic styling like text size and colour was placed in the HTML code. In today’s web technology it is no longer required to do this. Now we have something called CSS (Cascading Style Sheets).
This allows us to just place our content in the HTML code and put all the styling in the CSS. By doing this it makes it easier to maintain and also allows assistive technology have some control over the styles. This can help people with low vision or people with dyslexia.
I generally advise that images used purely for decoration also be placed in the CSS and not in the HTML to help prevent any confusion over the purpose of images. Using null alt text may leave some people who may not be able to see them, wonder what the purpose of the image is. Placing alt text like * or decoration, may distract from the flow of content and again cause confusion.
7 Always use text to support the use of icons
When using icons to help identify something like a PDF document, make sure that it also has text that does the same thing. There are different ways of doing this from using images and alt text within the HTML content. To using custom fonts or images within the CSS and either visible or only screen reader visible text.
Screen reader only visible text is when it is not visible on the screen but screen reader software can access it and read it out.
There are a few ways people have managed this but the best way I have found is to use the CSS clip property. Some have used a left margin offset. However, this will cause horizontal scrolling for people using a right to left language.
8 Keep page content simple and consistent
There is a phrase known as KIS (Keep It Simple) and it is a great thing to bare in mind when writing or designing WebPages.
If your use of language is hard to read or the amount of information on your webpage is overwhelming, many people will not bother and look else where.
Likewise if your webpage layout and navigation is not consistent or is complicated to follow, again most people will give up and go somewhere else.
For accessibility, pages with large numbers of links, complex structures or inconsistent layout and navigation, will often make it very hard to impossible to use with assistive technology.
9 Don’t repeat yourself (DRY)
This term is often used in development and is good practice to follow in your WebPages. Things like using the same link text for different places will cause confusion and people will simply not know what link goes where.
Duplicating your navigation or content on a single webpage, will often just add to the level of complexity for people using assistive technology.
10 Label your form fields effectively
Assistive technology will use the HTML label tag and modern technology may use ARIA to identify form fields and sections of forms.
If form fields do not have their labels marked up, people who use assistive software like screen reader software, may not be able to use the form.
To conclude
These ten tips are a starting point on some of the most common accessibility issues found in today’s websites.
I hope you have found them useful and please feel free to comment, ask questions and let us know your views.
Bonus Tip
A bonus tip is not to place critical text in HTML title attributes. In most cases, you need not use them at all. The reason is generally this text is only available when using a mouse and if it just duplicates text elsewhere, it may cause some screen reader software to read the text twice.