Your website is the public face of your organisation. It brings together all the information you want to provide to your customers and potential customers. It:
- provides in-depth information about your services;
- allows users to download information for their own use;
- provides access to all your social networking and blogging activity; and
- allows users to interact in various ways with your organisation.
Making your website accessible at the design stage is good practice and will help to ensure that as many people as possible can access your information.
These guidelines will help to create a structurally accessible website. They do not cover content. General guidelines on the accessibility of printed and electronic documents can be found on the Disability Information Scotland Website.
What we mean by an Accessible Website
An accessible website is one which has all of the following elements:
It is easy to use
Users have no difficulty in finding the information they are looking for. A good test is how many clicks it takes to find contact details for the organisation.
It is easy to read
Most users access a web page by reading the content on screen. Attention needs to be paid to the size of text, the contrast between text and background, and the layout. Following SAIF General Guidelines will help you to produce a website that most people will find easy to follow and understand.
It has a logical structure
A logical structure can be achieved by applying Headings coherently. Therefore, Heading 2 is a Sub-Heading of Heading 1 and Heading 3 is a Sub-Heading of Heading 2. See www.saifscotland.org.uk/information-and-advice for further information.
(Also see section: Why Accessibility is Important)
It is flexible
It is impossible to make a web page completely visually accessible to all potential users. For example, some people need low contrast between text and background, while others need high contrast. The answer is to separate the structure of a web page from its content. This is achieved at the design stage by structuring the website using Cascading Style Sheets (CSS). These are formatting sheets that can be applied across all pages in a website. Users can then create their own CSS according to their visual preferences and apply them to any website that has been created using CSS.
Beginner’s guide to CSS: www.htmldog.com/guides/css/beginner
It uses unique text for links
One of the benefits of a website is that more in-depth information can be given using Links (Hyperlinks). However, if the Links are not identified by a meaningful and unique text it can make it difficult for users who rely on a Links List. (See section: Why Accessibility is Important: Visual Impairment)
All non-text elements have been given an alternative text
Websites are essentially a visual medium and non-text elements (photos, drawings, graphs) can add to their usability and attractiveness. However, they need to be given an alternative text so that they can be accessible to visually impaired users.
Similarly, a transcript of the content should be available for audio clips and video clips should have captions (subtitles) to make them accessible to deaf and hard of hearing people.
It uses validated (X)HTML
Websites are written using HTML (Hyper Text Mark-up Language) or X (Extensible) HTML. XHTML is stricter than HTML. Validating the (X)HTML at the design stage and on a regular basis helps to ensure that a website is and remains accessible. Validation also applies to the Cascading Style Sheets.
Beginner’s Guide to HTML: www.htmldog.com/guides/html/beginner
It can be viewed on all web browsers and devices
There are numerous ways to access the Internet, using:
- different web browsers, for example, Chrome, Firefox, Internet Explorer, Spartan, Safari, Windows Edge and,
- different devices, for example, computer, television, tablet, mobile phone.
A web page will not necessarily look the same on all of these platforms. This should not affect the structural accessibility of a well-designed site but can affect its visual accessibility and usability. (See section: Checking Accessibility)
It follows Good Practice Guidelines
The best way to achieve an accessible website is to follow the Web Content Accessibility Guidelines (WCAG), produced by the World Wide Web Consortium (W3C) – www.w3.org – and the British Standards Institute BS8878 Web Accessibility Code of Practice. www.access8878.co.uk
We recommend that you aim for (WCAG) 2.0 Level AA. www.w3.org/TR/WCAG20
Why Accessibility is important
An accessible website is important because it means that as many people as possible can use it independently. It is also important because an inaccessible website can leave organisations open to prosecution under the Equality Act 2010.
Everyone benefits from a clear, uncluttered design that is uniform across each page and which clearly shows how to navigate back and forward through the website. This is especially true for:
- people with learning disabilities
- those who read English as a foreign language, including deaf people whose first language is British Sign Language (BSL)
- people with little experience of using computers or websites, for example some older people
- people with poor literacy
- people with restricted hand movement, including those who use pointers and other devices to access the screen
Certain design features can make a website much more usable and accessible to these groups of users, for example using:
- large clearly marked target areas for links;
- images to support the meaning of the text;
- embedding sound files so that users can listen to the information;
- navigation sequences that limit the number of ‘clicks’ before reaching the required information;
- too many distractions such as animated graphics and moving images;
- too many links on any one page.
However, some users have very specific needs when accessing websites.
The way in which people with visual impairment access websites varies depending on the type and level of impairment and their preferred way of accessing information. Some people will need to change the appearance of the information on the screen, for example, enlarge (or reduce) the size of text, or change the background colour. This should be possible with a flexible website designed using CSS.
Others who cannot see the screen or use a pointing device such a keypad or mouse will rely on screen-reading software (SRS). SRS uses the internal structure of the web page to help the user navigate through the information using the keyboard. It provides shortcuts by creating Heading Lists and Links Lists which the user can scroll through to find the information they are looking for. It is vital that these lists make sense out of context. For example, a Links list saying “Read More” or “Click Here” will not be very helpful.
Logically applied Headings will help SRS users follow the structure of the information in the same way that visual users use visual clues to identify Headings and Sub-headings or consult a computer-generated contents list based on Headings.
Examples of this type of software are:
- JAWS (Jobs Access With Speech) – www.freedomscientific.com/Products/Blindness/JAWS
- NVDA (non-Visual Desktop Access) – www.nvaccess.org
For more information: www.rnib.org.uk search “Beginner’s guide to assistive technology”
Specific Learning Difficulty
People with a Specific Learning Difficulty (SpLD) such as dyslexia may need to change the appearance of the screen, for example, change the font, text size and colours used for background and text. If the website has been created using CSS, they will be able to do this by applying a Style Sheet specially created to suit their preferences. For more information see: mcmw.abilitynet.org.uk/category/using-your-own-stylesheets
Web Designers can embed optional style sheets in a website, allowing users to change the appearance on the screen without changing content. This option will normally appear at the top of the screen under the heading Accessibility. For more information see: www.thesitewizard.com/css/switch-alternate-css-styles.shtml
Specialist software designed for people with dyslexia and others who have reading difficulties can be embedded in a website. This software supports the user to navigate and understand the information they see on the screen by reading the content. It does not help visually impaired users who cannot see the screen or use a pointing device. Examples of this type software are:
- www.browsealoud.com (screen-reading)
- www.reciteme.com (screen-reading and changing appearance)
- www.roktalk.co.uk (screen-reading and changing appearance)
Deaf, Deafened and Hard of Hearing
Audio-visual content can make information more accessible to many groups as well as making a website more interesting. However, in order for the information to be accessed by deaf or hard of hearing users, a textual transcript of both audio and video clips is needed as well as subtitles (captioning) for video clips. There are two types of captioning:
- ‘closed’ can be turned off
- ‘open’ remain visible.
Captioning can also help people with poor literacy or learning difficulties.
Creating an accessible website
Before deciding whether you are going to create your website in-house or commission a web designer you need to have a clear idea of:
- how you want it to look
- what you want it do
- what sort of information you wish to include
- how interactive (dynamic) you want it to be, for example, videos, blogs, social media, forums
- how you are going to update and maintain it and what training you might need
- your initial and maintenance budget
It is a good idea to draw up a structural plan outlining different sections, how they are connected and what common elements should be included on each page. This will help to create a logical website and give you an idea of how many pages you will need. This plan can be changed as you go along if necessary.
Creating an accessible website in-house
Depending on your level of technical knowledge, you can create an accessible website in-house.
- Potentially more control over form and content
- Time consuming
- Labour intensive
- Increasing need for technical knowledge the more complex and/or inter-active the website becomes.
Sources of reference
- Web Content Accessibility Guidelines (WCAG), produced by the World Wide Web Consortium (W3C) – www.w3.org
- Web Accessibility Code of Practice BS8878 – www.access8878.co.uk
- Accessible CSS templates – free or small charge. Search and find a design you like.
- Accessible Content Management Systems (CMS). For more information:
- Free online tutorials, for example: www.w3.org/WAI/tutorials
- Students from University Computing Departments.
- Intern Programmes
Make sure that anyone helping you in a voluntary or paid capacity understands the principles of accessibility.
Choosing a professional web designer
If you decide to commission a professional web design company, the previous sections will have made you realise the need to find someone who understands:
- why accessibility is important, and
- how to produce an accessible website.
A good starting point is word of mouth recommendations from other organisations in your sector with recent experience of commissioning a website. Do their websites fit your requirements, are they well designed, easy to use and do they pass basic validation and accessibility checks? (See section: Checking Accessibility)
We suggest that the following requirements are essential:
- The Website must comply with Web Content Accessibility Guidelines (WCAG) 2 Level AA (as at 2015). This requirement helps to ensure that the content of websites will be flexible enough to adapt to unpredictable user needs.
- The website must be created using valid (X)HTML. This requirement provides the best chance that sites will work on all hardware platforms and all web browsers.
Guidelines for what else to include in an accessible website tender document can be found online, for example www.jimbyrne.co.uk/category/tendering-documents
Questions to ask at interview
- What will be the total cost of design?
- How much will it cost and how long will it take to update page design or add pages to the website?
- Will you be able to update the site yourself? Unless you specifically do not want to update the site in-house, it is possibly a good idea to make this a requirement rather than an option.
- What accessibility and usability tests will be carried out during the design process and on a regular basis? (See section: Checking Accessibility)
- Are regular visitor statistics available?
- What are the hosting arrangements and how much do these cost?
Checking website accessibility
There are various online tools which can be used to check accessibility during the creation of a website. For example:
- Validity of the Style Sheet (CSS) www.css-validator.org
- Validity of (X)HTML – validator.w3.org
- Colour Contrast – picking colours www.w3schools.com/tags/ref_colornames.asp www.w3schools.com/tags/ref_colorgroups.asp
- Colour contrast – checking choice webaim.org/resources/contrastchecker
- How the screen looks on different browsers and different devices – www.browserstack.com/screenshots
- Overall accessibility checks – www.cynthiasays.com
These tools can identify actual mistakes and they may also warn of areas where difficulties might arise. Whether these are relevant or not can only be found out through user testing.
It is good practice to consult with a variety of users, especially those who rely on assistive technology, throughout the design process. This will help to identify and sort out any access issues at this early stage.
Checks to maintain accessibility
- Re-check CSS and (X)HTML if you make changes to the formatting or add new code.
- Regularly check that Links still work.
- Regularly check that all documents for download from your site are accessible.
Sources of further information
Jim Byrne Associates
Some useful information in reasonably non-technical language on a variety of topics related to Web Accessibility www.jimbyrne.co.uk/category/webaccessibilityblog
Royal National Institute for Blind People (RNIB)
The RNIB has a range of very useful guidance notes as part of its See It Right accessible websites campaign. These guidance notes contain lots of advice about building websites that do not exclude visually impaired people. www.rnib.org.uk
WebAIM (Web Accessibility in Mind)
Useful articles, tutorials and accessibility tools. www.webaim.org
Web Accessibility Initiative at W3C
WAI offers a vast range of resources that will be helpful whether you are a complete novice or a technical wizard, including accessibility checkers like WAVE and Bobby. http://www.w3.org/WAI
Please note that information may be subject to change. All advice is provided in good faith but Disability Information Scotland does not guarantee the accuracy of these materials.