Building a great SmartHub® that is visually appealing is one thing, but it is vital that the end user's whole experience is always considered. This includes those who may have visual impairments or those unable to use a mouse to navigate the page.
If this is neglected in the design, clients will likely exclude a whole segment of their workforce that could be engaged with a little thought about web accessibility. They may also be skirting their legal responsibilities to their employees, too.
What is web accessibility?
Web accessibility is concerned with how to make web sites effective and efficient for people with all types of disabilities – visual, auditory, physical, speech, cognitive, and neurological disabilities. This also includes older people with age-related impairments and those who have temporary disabilities due to accidents and illness.
Other groups benefit from the techniques used to do this too, for example:
- People who are not fluent in English or people who have difficulty reading or comprehending text
- People working in a very noisy or very quiet environment
- People who do not have or are unable to use a keyboard or mouse
- New and infrequent users
By making sure that the SmartHub® content is available to as wide a range of users as possible, clients can maximize audience reach, and thus can achieve higher levels of engagement. If users have a positive experience of the site, they are more likely to use it thoroughly, return more often and tell others about it.
Simple do’s and don’ts
There are a lot of technical things we do to ensure that Reward Gateway as a whole is accessible, but we need help from clients to make sure that specific pages they create are also accessible. Below is a simple list of do’s and don’ts showing how to make a good SmartHub® great on the accessibility front.
Use alt tags properly
When you hover your mouse over an image on a website, the little words that pop up are called alt tags. For someone who has a visual impairment and uses a screen reader (a software program that reads text on a website out loud), the alt tags are read aloud and are the only way a user knows what the image is.
Take alt tags seriously and use them as an opportunity to describe the image accurately and succinctly. If it’s a picture of a person, write out the person’s name. If it’s an object, use a couple of words to describe it. If it’s not relevant to the content though and is just being used as a decoration, leave the alt tag blank.
- Hover over the image above to see an example of an alt tag and how to configure them in Reward Manager.
Pick sensible colors
Picking sensible colors is useful for a website of any kind. Avoid using garish colors, and be wary of using yellow, blue and green close to one another to help color-blind users. Also avoid picking colors that don’t contrast enough against each other – like light grey text on a white background, or white text on a yellow background (as below) – to help even more.
Lastly, never use color as the only means of conveying information. Always combine it with another property, like shape and size, to enable the element to be distinguished from a group.
- If there's any uncertainty about the colors used, stick to simple black text on a white background, as it's readable for most audiences.
Never say “click here” in text
For users with mobility problems, it can be incredibly difficult to click on small items – it’s like threading a needle each time. Don’t berate them about “clicking here” in the text.
- Write clear link text that describes the content behind the link.
Think about heading structure and break text into clear paragraphs
This is helpful for any audience but is imperative for elderly audiences or those with learning disabilities. If there's a lot of text on a page, break it into smaller paragraphs. If headings are being added to the text, make sure they are in a logical order as the reader progresses down the page.
- Use simple, straightforward language in the active voice. Check out this guide for more information.
- Don’t put big important headings at the bottom of the content.
Add pictures that support the content
Lastly, consider adding images to support the text. For example, if the page has detailed facts and figures in it, consider adding a (simple!) chart next to it to help illustrate the key pieces of information. This will be especially helpful for people with dyslexia.
- Use relevant images to convey key points. Don't include them just for decoration.
- If a page includes video, make sure it has subtitles so that people with auditory problems can understand.