Making your pages accessible

• Create a simple and intuitive structure for your site to help users find their way around
• Use clearly labelled, consistent navigation, making sure links and menu items are located in the same place on each of your pages
• Create well-written, structured page content with clear headings so users can quickly find the information they need

• Some users may have problems differentiating between colours; so it is important that you don’t rely on colour alone to convey information on your web pages. Effective use of colour can enhance your web page accessibility.

• Make sure there is sufficient contrast between foreground and background colours
• If you are putting text on top of a colour there should be high contrast between the foreground text colour and background colour to make the text stand out

• Don’t use colour combinations that will cause problems for colour blind users to differentiate between, such as red and green
• If you are featuring a chart or graph on your pages, use patterns and alternate high contrast colours to indicate changes to different sections, and make sure the alt text is accurate

Web pages need to be concise and to-the-point as readers tend to skim-read text.

• Use descriptive headings to provide a brief overview of what the page is about
• Give a brief conclusion of the page in the opening paragraph
• Break up text with descriptive sub-headings to allow users to scan and easily see what each section of the page is about
• Ensure links are meaningful and descriptive and are as short as possible while still making sense
• Never use links such as ‘click here’ or ‘more’ as they make no sense when read out of context by screen readers
• Add alternative text to images, as this is what users will see or hear in place of the image if their browsers don’t support images
• Use bullet points and lists, as they are easier to scan and read than long paragraphs
• Provide subtitles or written transcripts for video and audio content so that this type of content is accessible to hearing impaired users

• Users who read content with a screen reader may read the page section headings separately from the main page content. This enables them to tab through the headings to sections they are interested in without having to read all the text on a page. Screen readers relay heading information to the user in sequential order: Heading 1, Heading 2 and so on. If headings have been used in a non-sequential order it can cause confusion.
• Never use a heading style to create emphasis – use bold text instead. Similarly never simply embolden a heading. It may look the same, but a screen reader will not recognise the text as a heading.

• Only use document formats (such as PDF) for downloading supplementary materials – don’t use these for primary web content:
• Clearly indicate what type of document the user will be downloading (eg, Word, PDF, Excel, PPT)
• State the size of the document in the link text, eg, Web guidelines (PDF 50KB)
• Clearly state whether the user will need specific software to view the document (eg, Adobe Acrobat, Windows Media Player, QuickTime), and provide a link so the user can download the latest player
• Provide a summary of the document’s content on the same web page, so the user knows what they will be opening
• Any document attached to a web page needs to be optimised to make it accessible, as screen readers will ‘view’ it in the same way as they view web pages

Users who read content with a screen reader may read the page links separately from the main page content. This enables them to tab through the links without having to read all the text on a page:

• Link text should clearly describe the link destination, for example: 'For more information visit the Media Centre website'
• Avoid using non-descriptive links such as ‘click here’ or ‘more information’ as they will not be meaningful if read out of context of the page
• When linking to a PDF or any other non web page document,always specify the file type and size, for example: Edgbaston campus map (PDF 3MB)
• Email addresses are written in lowercase in the full form: j.smith@bham.ac.uk
• Web addresses should be written without the ‘http://’ prefix eg, www.birmingham.ac.uk
• If a link is at the end of a sentence ensure the full stop is outside the link
• Do not reference specific index files as a browser will direct to it automatically eg, use www.birmingham.ac.uk, not www.birmingham.ac.uk/index.shtml
• Links should always open in the same window – whether to external sites or to University of Birmingham sites; links opening in new browser windows can be confusing for users, as the ‘back’ button in the new window no longer lets them navigate back

• Use alt text to concisely describe the content or function of all images; if the graphic is a link, the alt text should describe the destination of the link, not the image itself
• Functional graphics, such as symbols and icons should also be given alt text describing their purpose
• Never leave blank alt text for an image
• Make sure you keep file sizes small without losing image quality

• Provide text transcripts of audio and video content – if you have video that is more conceptual the transcript should provide an brief overview of what happens rather than a detailed action-by-action description
• For any media that requires a software player (such as a Windows .WMV or QuickTime .MOV file) it is important to include a link so the user can download the latest player
• If you are using looped animations on your web pages make sure the animation only loops once or twice; if this is not possible provide an option for the user to turn the animation off

There are a number of steps that can be taken to make on-screen text more easy-to-read including users with dyslexia:

• Avoid using italics or capitals – italics can be used to add emphasis for one or two words but any more and the text becomes difficult to read
• Don’t justify text, as this can cause erratic spacing between words, which makes it harder for dyslexic users to read; text should be left-aligned
• Use non-serif fonts for main page content, as it is easier to read; our house style is to use Arial
• Don’t specify font sizes as this will prevent the user from being able to increase the text size to suit their needs – CMS templates are set so fonts can be resized
• To make sure your fonts appear correctly in your web pages always use the ‘Paste plain text’ command when you are pasting text in from MS Word documents into CMS

• Keep any tables in your web pages as simple as possible to make it easier for users to read – particularly those using assistive technology devices
• Avoid using tables to structure your content, as this can cause problems for users who use screen readers to access your pages
• When using data tables – ie, those that contain statistical information – remember that they will be interpreted by a screen reader row by row, from left to right; it is important therefore that you structure your table so that it can be read in that order
• Use column and row headings to help users understand the table’s content
• Don’t add coloured backgrounds to tables