Post date:
Monday, 12 June, 2017 - 11:13
Sat in front of my computer I closed my eyes, placed my fingers on the keyboard, but now what?
Without my sight, I am totally lost on how to navigate this or any website. Sure I can just about touch type, but I am totally reliant on the mouse or my touch screen. What about sounds? What if I was watching a video and I couldn't hear the sound, how would I be able to understand what was going on? Until you have a disability you cannot fully experience what it is like not to be able to do something that most of us take for granted.
On my most recent project, the requirements were for a website and CiviCRM integration, no issue there, but one thing had to permeate though and that was accessibility.
Accessibility is something that we try to factor into our website designs and developments but this one had a real focus.
The website is aimed at people in Greater Manchester that have a disability and supporting them to find information and resources and campaigning for their rights. Making the public facing website accessible is where we are usually tasked but this project also had the requirement of making the backend also accessible for the users from the organisation.
So what is Accessibility?
Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.
Why is it important?
The internet and websites have become an important resource in many aspects of daily life from Education, Employment to Entertainment. It is essential that all users have equal opportunity and equal access to the content and no barriers restrict those who do have difficulty.
How to make your site accessible.
Some steps to make your website more accessible are quick changes, while some others need a little more thought or a change to how you make content and how it is laid out.
Here is my top list of things to do and why they are important.
- Add proper alt text to images.
Alt text allows those that can't see an image understand what is going on in the page. Screen readers and Braille devices cannot describe what is going on in the image, so the alt text provides that context, images speak 1000 words, but if you can't see the image it speaks zero.
- Use Headings properly.
H1 to H6 help structure a page, this helps non-visual users understand the content of a page. Screen readers can navigate between Headings so they don't have to read every bit of information on the page. Sometimes it's tempting to just increase the font size or bold the text, but for some users, this "style" change does nothing to alert them to the important that the styling gives.
- Create accessible PDFs.
Tag content in pdfs and take steps to ensure that the content will be read in the correct order. Great you have made a really useful document and it's in pdf format, users can download this! But if the format of that document isn't navigatable a user doesn't have the ability to fully understand its content or context.
- Use ARIA landmarks.
This adds an identifier to content, so on Drupal websites, this is really powerful for blocks. Blocks can be landmarked so users with screen readers can jump to sections with single keystrokes. Sure you want to promote Twitter, but if you have a large feed a screen read could become trapped in reading all the tweets.
- Add labels to form fields.
Use tooltips so non-visual users will know which labels and prompts are with each field. Don't go over the top with the length of a form label, by the time you have finished reading the label you have forgotten what the question was. Use the Help text should the question be longer than a few words.
- Markup Tables.
Use table headers so readers can fully understand the relationship between the rows headers and data in the cells in their column.
- Use a colour contrast tool.
Be sure that there is enough contrast between text and backgrounds.Great tools such as Contrast checker will give you a rating and pass or fail. It's easy to highlight some text and colour its background but for some users, that lack of contrast could hide a whole sentence or paragraph.
- Avoid tiny fonts.
Some fonts have small lettering, spacing and tracking. This means a font size of 16px may not be as big as another font at the same size. Users can increase the size of the font using Ctrl and +. If you do have a fancy font as part of your brand, make sure there are ways a user can turn that font off.
- Respect white space.
Providing plenty of space between lines and blocks of text makes a page/ content easier to read. Some users have difficulty following text horizontally. Not only does this make for a cleaner interface it is also more aesthetically pleasing to the eye.
- Use text not pictures of text.
Screen readers can't read the text as part of an image, so for those users that context is lost. So if you have to use an image make sure it has the alt text and title.
- Think twice about the words you use.
Keep your content simple to read and understand. This may not always be possible with complex content and data, but remember who your target auidence is.
- Caption Videos, Describe videos and provide transcripts.
For users who are unable to see the video, create a script that includes brief descriptions of the important visual content. Captioning the video or adding subtitles will allow those with hearing difficulties.
- Keyboard shortcuts.
Some users cannot use a mouse to navigate a website, having shortcuts allow them to use a group of keyboard keys to move around the website and perform certain actions.
Putting my tips into practice
For this project, I exposed the alt and title fields for images. These fields are available on all Drupal sites with an image field upload. For those uploaded in the editor, you have the option to add alt text after uploading and placing the editor.
My original design had Green text in black boxes, but when I tested for contrast the level was too low, we decided to go for white text in black boxes. This has given maximum contrast and makes it easier to read text that is placed over an image, it also looks quite modern and stylish too which is a plus.
I am a big fan of white space, so throughout the design, I have tried to add extra margins and padding to allow clear definition from headings, body content and paragraphs, this has made the site and content easy to follow and text isn't compounded or squashed.
For table content, I have made sure the tables have a title, summary and the content within them are navigatable using the H1 - H6 tags.
On the homepage we have used 8 images to create a collection of 8 calls to actions, each image had alt text and tooltips that pop up when a mouse is over them. The image and the title of the item are both links, so clicking either will take them to the correct location, having items that are easy to select was key for those who may have restricted movement.
We also broke one rule which was the text as an image, we wanted circles with text in, but with each item having different wording that was different lengths we decided to use an image, these images have the alt text and descriptions, so we have made a broken tip into an accessible option.
For the staff access to CiviCRM, I created a set of keyboard shortcuts, this sounds like a simple task, but I did find that this can have a few issues. As browser already have keyboard shortcuts in place to access their items, each shortcut I created needed to be checked for conflicts. It's not possible to create shortcuts to perform every action, but the ones we have made have covered the essential basics.
For most users that have disability issues, they will have their devices setup to maximise the way they can interact with the internet and websites. So adjustments like colour contrast and text size are less needed as standard, more care is needed when developing sites for those using a screen reader. Having the alt text and correct use of headers H1-H6 tags will give those users an experience that is similar to a visual user.