An accessible website is vital for all website owners. People of all abilities use the web for access to resources that help them in life. This includes access to health care services and information, employment, research and entertainment to name a few. Making your site accessible to all will help you avoid costly adjustments in the future. It won’t be long before governments make it mandatory for websites to be inclusive of all abilities.
Many people with vision impairment or users who suffer from screen fatigue use a computer screen reader. A screen reader is essentially a synthesized voice-over that reads words displayed on the screen. It will not only read the text, but also the alt-text, link text, menus and call-to-action buttons.
Content management systems for an accessible website
Choosing a content management system that has the tools to build an accessible website is the first step in this process. WordPress and Drupal have templates and layouts that are accessible and plugins and widgets that fit into an accessibility model.
Content structure
When we read a web page or browse information on the screen, we follow the information and absorb it much more easily with a heading structure that makes sense and guides us through the content. It helps to organise the content and highlight key messaging.
Headings should have a cascading structure to help the screen reader follow the information correctly and present it to the user. <H1> should be the top tier title of your page, then <H2> should be the next title in the content structure and so on with <H3> and <H4> etc.
Images
Alt text is very important here. The media file should have a descriptive alt-text that helps the user understand the context of the image. The alt-text is especially important to help the visually impaired understand the context of the image appropriately.
Alt-text is important when infographics are included in the content of your web page. If an image is used as a link, then alt-text should be used instead of the file name.
Colour
Colour blindness which is known as Colour Vision Deficiently affects 8% of the population so it makes sense to cater to this condition when designing your website. Red and green are the most common deficient colours. Using these colours excessively can hinder 8% of people from reading your website properly and links will be lost to them if coloured in this way.
Colours can be designed to distinguish sections of information and organise key messages on the web page. Combining colour with visual signals such as icons also benefits people with learning difficulties to organise web page content into manageable chunks for themselves.
Using white space and a visually logical design layout makes your web page user-friendly to everyone.
Links
For accessible website design, it helps if your links are made up of descriptive text indicating where the link is going. Providing good sentence structure with descriptive link text will make more sense to the person using a screen reader. Instead of saying, “follow the link for a list of our products” it is better to say “For a list of our products follow the link.” That way the screen reader will convey the link description to the user, it will make more sense.
Online forms
Online forms are tricky to get right for accessibility standards to be met. Form structure needs to be consistent, so choosing one method of field selection is important. There are a few methods to choose from. We are all familiar with drop-down menus and checkboxes.
Forms need to be in a logical sequence and the types of information fields need to be grouped together. A tab system should follow the logical order of a form so the user can land on the fields they need to fill in.
Required fields usually have an indicator for the user with good vision. A symbol is also useful for people with learning disabilities or people who speak and read limited English. An asterisk is a commonly used symbol.
A required field can be coded to alert a screen reader to convey this to the visually impaired. Error alerts are important too. The user can be redirected back to the required fields with coding to complete all required fields.
Spam prevention
For accessible website design, there are spam preventions for form submissions that are more accessible than CAPTCHA. WebAIM has some information on web-accessible spam-free forms.
Accessibility for keyboard users
Some people can only use a keyboard due to disability or injury. Your website needs to follow a logical layout for tab and arrow key navigation as the mouse is not an option for some people. To assist non-mouse users to access menus and page content without having to tab and arrow key their way through the whole page, it makes sense to provide jump links. This way browsers can get to sections of the page and skip over parts that aren’t of interest.
A jump link would be something like “Back to the top of the page” or have a jump link list to each chapter or section of a page. This is especially evident in government web pages and pdf documents with long pages of content.
Video content
If you have video content, it’s imperative to include closed captioning and transcriptions to meet accessibility standards. You want to make sure that your website, including sound and video can be accessed and controlled from the keyboard.
Assistive technology and access for all
It is important to set up your website to be compatible with assistive technologies. You want to enable the whole population to have access to your website, your marketing campaigns and your business. Everyone benefits when all visitors to your site can navigate freely around your web pages and feel included in the messaging you are disseminating. In essence, you will gain more traffic to your site and repeat visits from people from all walks of life. That’s a win for all.
We Push Buttons Web Accessibility Standards Service
We design websites in WordPress that are accessible to people of all abilities. We develop inclusive content that meets the World Wide Web Consortium’s (W3C) accessibility guidelines for persons with a hearing disability, learning disabilities, physical impairment, speech difficulties, ageing and visual impairment.
If you need an accessible website developed visit our Custom Web Design and Development service page.
Rob Jennings
