11.05.2017

Simple ways to make your website more accessible.

 

By Michael Hanton

Accessibility does not hinder the ability of a website to be “beautiful”.Apple, The White House and Joined and Joined are all good examples of accessible websites that also look great. Accessibility needs to be of higher importance in all stages of a project and below are a number of simple things that you can do to make your web project more accessible from the offset.

1. Accessible CMS

The first step is to ensure that the CMS you choose supports accessibility. Most modern CMS’s should support accessibility but it is good to be aware of this when you are initially selecting the CMS to build your website with. Kentico, Strata3’s CMS of choice, is well equipped to support a client’s specific accessibility requirements.

2. A clear and logical structure of content

Use appropriate heading structure with only one H1 on each page. At Strata3 we use a modular approach when developing websites. Therefore, any given module could be used as the first module on a page. To avoid having a number of H1 tags on a page we add a single H1 to each page and use CSS to “visually hide” the H1 but still allow for it to be accessible. This means we don’t have a number of H1’s throughout a page when each module is added.

3. Colour contrasts and font ratios

Generally a colour palette/brand colours will be provided by a client which coincide with their overall global branding and colour scheme. Designers must use these colours throughout the design process to ensure that what they are creating is on brand. However, while creating designs for the website they need to keep in mind colour contrasts and font size ratios to ensure that they are all accessible.There are a number of tools which can be used to check this. WebAIM have a nice and simple tool that can be used as a reference.

Frontend developers can also use tools and extensions to check the accessibility of colours and fonts as they build. WAVE Evaluation Tool created by WebAIM is a great way of checking a local build while you develop.

4. Best use of imagery

Be sure to give proper descriptive alt text and titles to any imagery on your website. Make sure that the image is clearly described so that a user can easily identify if an image is of importance to the content they are reading or if it is simply placed there to break up the content.

 

Try to avoid using background images when imagery is important to the content it is supporting. Background images are not available to screen readers so the inf​ormation being provided by a background image would be lost for users who rely on screen readers. It is also not possible to add alternative text to background images so there is no information made available to the screen reader and as a result background images will not be picked up by the assistive technology being used.

 

5. Appropriate use of links and buttons

Make sure that you choose the right place to use a button when there is a clear CTA (Call To Action). Some good examples are “play button” on a video, “submit button” on a form, “next” button on a multi-step checkout process and so on.

 

Buttons should not be used for links for example “find out more”, “click here” for more information etcetera, as these are standard links which simply bring the user to a page containing more information.

 

The most important thing to remember is to ensure that buttons and links are labelled descriptively so that a user knows exactly what to expect if they were to click a specific button or link.

 

Examples of clear button labels - “Submit Form”, if you have filled out a contact form. “Continue to Step 2”, if you are moving onto the next step of a checkout process or form submission.

 

Examples of clear link labels - “Cookie Policy”, which links directly to the cookie policy page. “View Price Plans”, which brings a user to a page with a list of price plans.

 

If for whatever reason a button or link has an obscure label such as “Click Here” or “View More” etcetera, then the use of the aria-labelledby attribute to associate the button/link with a heading or descriptive piece of text that it is related to should be used.

 

In conclusion…

These are just a few simple things to consider when planning and developing a website to ensure accessibility is not overlooked. These are quick wins which can dramatically improve the accessibility of a website and as a result create a greater overall experience for the user.

 

There is so much more that can be done to improve the accessibility of a website and I would encourage anyone interested in learning more on this subject to head over to WebAIM where they have plenty of useful resources  - http://webaim.org/

 

 

To discuss this topic more with us please get in touch.

Share this article