The University of Strathclyde has an ethical as well as a legal responsibility to ensure that there are no barriers for anyone to access content on our website.
To help in this we've developed this list of rules for content writers as well as technical developers. It's based on the success criteria level AA of the World Wide Web Consortium's (W3C) Web Content Accessibility Guidelines.
Content rules are concerned with the text, images and links added to the page. Content writers must check new content against these rules to ensure the site remains accessible. A Content Accessibility Checklist is available for content writers.
Development rules must be followed when developing a new content type. All new content types must be tested against the rules before they can be signed off by the Web Team. A Template Development Accessibility Checklist has been created for technical developers.
Content Rules
Navigation
Ensure the web pages have a descriptive page title
Providing a descriptive page title helps visually impaired users differentiate content when multiple tabs are open.
The page title is derived from the T4 section name; therefore this name should be descriptive of the content within the page.
More information
You can get more information at the W3C's website for Web Content Accessibility Guidelines (WCAG). Please see the guideline WCAG 2.4.2
Link names are informative out of context
Screen readers have the option of listing all navigation links for the user. This list will only contain the link itself therefore the link must inform the user the purpose of the link without requiring the surrounding text to provide context.
This should be tested by manually checking each link to see if the link make sense without the surrounding text.
Example:
Correct: Search for undergraduate courses
Incorrect: To find an undergraduate course click here
More information
There must be no duplicated links on a page that have separate page destinations
Screen readers have the option of listing all navigation links for the user. Having multiple duplicated links on a page going to the same location is not an issue however if any of them have a different location it can cause confusion eg Find out more information about accessibility linking to http://www.w3.org/ and Find out more information about accessibility linking to http://en.wikipedia.org/wiki/Web_Content_Accessibility_Guidelines.
The screen reader only reads out the link text. In this case it would read out "Find out more about accessibility" twice. The user would not know where each link will take them.
Each link must be manually checked to make sure there are no links with the same name / description that lead to a different location.
More information
Instructions must not rely on colour, the layout of the page or upon a sound
Any instructions (for example, a link) that rely on colour or layout would not be accessible to visually impaired users and the nature of responsive design means that layout could be different depending on the device the page is viewed in. Sound would also be an issue for users with an auditory impairment.
This is tested by visually checking though all content and ensure no instructions rely on colour, layout or sound.
More information
Go to our or to the WCAG guideline 1.3.3.
Images and multimedia
All images must have appropriate alternative text. Purely decorative images must have null at text (alt="") or implemented as CSS backgrounds. Images that convey information must have alt text that describes the information.
Alternative text is used by screen readers to convey information about the image to the user, for example Photo of business people in a meeting.
Images used solely for decoration should not have an alt text as this allows the screen reader to bypass the image streamlining the journey for the user.
This rule should be tested by simply checking each image on a page to ensure appropriate alternative text is present.
More information
All linked images must have descriptive text that either describes location or functionality of the link
Screen readers aren’t able to convey the information within an image so descriptive text must be used to explain the location the link will take the user eg Linking to BBC website for more information.
This should be tested by simply checking each image link on the page to ensure appropriate descriptive text is present.
More information
Images must not be used to display text however if text is within an image, the alt text must contain the text within the image
Images shouldn’t be used to display text as screen readers cannot pick up this information for visually impaired users. If there is a requirement for an image including text (such as a logo), then the alternative text field should include this text which can be read by screen readers eg University of Strathclyde, Glasgow logo .
This should be tested by manually checking each image that displays text. Iif the text in the image conveys useful information then ensure the alt text field captures this information.
More information
Avoid using blinking or flashing content. Where this can’t be avoided content must not flash more than 3 times per second
Blinking content should typically be avoided.
Content writers must not use animated images that blink or flash. Videos must also avoid blinking or flashing content. If any contain blinking or flashing content they will not be uploaded onto the website.
More information
Multimedia must not automatically play
Automatically playing multimedia can cause issues for users that rely on screen reading software. These users will not be able to hear the screen reader output due to the sound coming from the multimedia playing.
More information
A descriptive text transcript must be available for all non-live audio and be clearly accessible
By providing a text transcript users with hearing impairments will be able to access any information that is provided via an audio file.
More information
Multimedia must be identifiable via accessible text
Using accessible text to identify multimedia will allow visually impaired users to identify all multimedia on the page and skip it if they choose to.
More information
Synchronised captions must be available for video and a transcript containing all relevant visual and auditory clues and indicators must be clearly accessible. Avoid use of automatic captions as these are not accurate
Providing synchronised captions for a video enables users with any hearing impairments to watch a video and read the content provided via the audio track. Transcripts allow users with visual impairments to access the visual and auditory information within a video.
Synchronised captions and a transcript are part of the requirements for a video to be uploaded to the site.
More information
WCAG guidelines 1.2.1 to 1.2.3
Structure
A page must have a proper heading structure using semantic HTML. Headings must not be duplicated and must only be used to provide a logical structure (not for specific look)
Headings that are clear and descriptive help users find information on a page quickly. Headings that are inappropriately used for appearance or are duplicated will have the opposite effect and can make navigating a page difficult for users.
More information
Tables are only used for displaying tabular data. Appropriate headers must be used and summary provided
Tables should not be used for the layout of page as this should be developed using style sheets.
By ensuring appropriate headers and summaries are included in the table, screen readers are able to describe the key information without users having to scan the entire table.
More information
Development Rules
Colour, text and display
Avoid using blinking or flashing content. Where this can’t be avoided content must not flash more than 3 times per second
Blinking content should typically be avoided.
Content writers must not use animated images that blink or flash. Videos must also avoid blinking or flashing content. If any contain blinking or flashing content they will not be uploaded onto the website.
More information
Automatically moving, blinking or scrolling content must not last longer than 5 seconds unless it can be stopped or hidden by the user
Automatically updating or moving content can be a severe distraction to a user so should be avoided. If there is a need for moving content then there should be a mechanism that allows users to stop or pause the movement.
Current content types conform to this rule however developers should be mindful of using this kind of functionality (eg sliders) when developing new content types.
More information
Colour must not be the only method of conveying information or distinguishing links from surrounding text
If colour alone is used to convey information, colour blind or visually impaired users may not be able to access this information.
Current content types conform to this rule however developers should be mindful when developing new content types and check all page elements to ensure colour is not the only way that information is conveyed.
More information
Text must have a contrast ratio of at least 4.5:1 and large text (point 18 or 14 bold) must have a contrast ration of at least 3:1
Visually impaired users may have difficulty in reading text with a lower contrast ratio. These ratios also allow users with moderately low vision to view text without the use of adaptive technologies.
There are a number of tools and plugins to test the contrast ratio eg http://webaim.org/resources/contrastchecker/. Current content types already conform to this rule however developers must ensure that new content types also conform. The will help you.
More information
User must be able to resize the text without the use of any adaptive technologies. The text must be readable when text is doubled in size
Not all users will require or use adaptive technologies and in some instances rely on standard browser functionality to increase the size of the font. The user must be able to resize the font without affecting the readability of the text or functionality of the page elements.
This can simply be tested by increasing the font in the browser settings. Current content types already adhere to this rule but developers must ensure that new content types also conform.
More information
Navigation
All functionality of the page can be made using keyboard-only controls. Tabbing must be logical and intuitive. It must be visually apparent which page element has focus and focus must never be trapped on an element
Many users rely on keyboard-only control of a webpage. Logical tabbing is a basic usability requirement. It can cause serious accessibility issues if the user does not know where the next tab is likely to take them.
Although a screen reader will inform a user what tab they have landed on, by making the current tab visually apparent, users that rely on keyboard controls without a screen reader will also be able to navigate the page.
This can be tested by tabbing through the page and ensuring that the order is logical and focus is never trapped. Current content types already meet this rule however developers must ensure that any new content type fulfils this requirement.
More information
Multiple ways are provided to find other web pages on the site
This is a general usability requirement that also assists accessibility. By ensuring that there are multiple ways for a user to find content then they have a better chance of finding content quickly and easily.
This is mostly covered by the header and footer which is maintained any the web team. They contain links that start most of the user journeys on the site as well as containing a search box. Additional navigation will be included using the main content and developers should be mindful of this when developing new content types.
More information
Navigation links must remain consistent throughout the website
Inconsistent navigation presents problems for the usability and accessibility of the website for all users.
The navigation links contained in the header and footer is shared between all pages which help to fulfil this requirement. However, most navigation is embedded into the content of each page to help the user progress along their journey. Developers will need to think about navigation items in current content types to ensure that navigation in new content types is consistent.
More information
Page-specified shortcut keys and access keys (access key should typically be avoided) do not conflict with existing browser and screen reader shortcuts
Accessibility and usability can be greatly impacted if there are conflicts between shortcuts developed for a page and ones that already exist for browser or screen readers.
Developers should avoid using shortcuts when developing new functionality. However, if there's a valid specific reason for a shortcut it should not interfere with browser shortcuts or screen reader shortcuts. For more information on screen reader shortcuts please see accessibility tools.
More information
Provide visible links to skip to main content and bypass navigation
This allows users that rely on keyboard controls to bypass the navigation items and go straight to the content.
The skip to main content should be the first item tabbed to. This has been developed as part of the header section of the page which is controlled by the web team.
More information
Structure
Form inputs have descriptive text labels and are grouped together into a fieldset when related. Form buttons provide descriptive values and sufficient instructions are provided for entry. Efficient input error handling must provide good quality suggestions for resolution
Developing clear text labels and instructions help users understand what input is expected on a form. This will in turn reduce the likelihood of a user making a mistake, however suitable error handling must also be provided to enable the user to quickly correct issues.
More information
Frames must have a descriptive title
Frames should generally be avoided when developing a content type as they can be disorientating for users that rely on screen readers. If there's a genuine need for a frame then provide a brief and descriptive title (such as “navigational frame” or “main content”) so that a user that relies on a screen reader can understand the purpose of each frame.
More information
A page must have a proper heading structure using semantic mark-up. Headings must not be duplicated and must only be used to provide a logical structure (not for a specific look)
Headings that are clear and descriptive help users find information on a page quickly. Headings that are inappropriately used for appearance or are duplicated will have the opposite effect and can make navigating a page difficult for users.
Developers should be mindful of this requirement when developing a content type and ensure that headings are developed to provide a logical structure.
More information
Tables are only used for displaying tabular data. Appropriate headers must be used and a summary provided.
Tables should not be used for the layout of the page as this should be developed using style sheets.
By ensuring appropriate headers are included in the table screen readers are able to describe the information for the visually impaired and a summary allows users to get the information without scanning the entire table.
More information
Coding
Change in focus or interaction with control must not significantly change the page, change keyboard focus or disorientate the user without informing user ahead of time
Significant changes to a page should be avoided and keyboard focus should not be changed as these can be confusing to users.
When developing new functionality, check through each element to ensure that the focus is not changed, that the page layout is not significantly changed and popups do not appear without prior notice to the user.
More information
Avoid automatically updating content. If this is not possible, allow the user to pause or stop
Similar to the previous rule, automatically updating content can cause difficulties for many users.
Developers need to be mindful of this rule when developing new functionality. Standard content types do not have automatically updating content.
More information
Functionality must be consistent throughout the site
By having a constant approach, users will have a better experience when using the site rather than have to spend time determining how each piece of functionality works.
Developers need to be mindful of existing functionality on the site when developing new content types.
More information
Page must not have any significant parsing/validation issues
Adaptive technologies rely on properly coded pages to inform their users of the page content and navigation. If pages have significant errors this could lead to users that rely on these technologies having a poor or broken user experience.
This can be tested using a validator, for example, http://validator.w3.org/. Developers should check reported errors and warnings to ensure that none of the issues are significant. Every effort should be made to remove as many mark-up issues as possible.
More information
The language of the page is identified using the lang attribute and any content within a page that is a different language must also be identified
This rule allows for browsers and adaptive tools to pick up the language and display, or in the case of screen readers, pronounce, the languages correctly.
Developers don't need to worry about the language of the page as this is part of the header and maintained by the web team. If a content type is developed to accommodate another language then this rule will need to be followed.
More information
Pages must give an adequate amount of time to view a page or complete its functionality.
Some users will take more time to look through a page than others and require adequate time to navigate and read a page. If there are no security implications then a page should not time out or automatically refresh. For applications that rely on time-based sessions, ensure that the user is aware of the timeout and provide the ability to either extend the session or pick up where the user is left off.
More information
Accessibility tools
Jaws
Jaws is the screen reader used by the university. A trial version of Jaws can be downloaded for testing purposes. The trial can be used for 40 minutes at a time after which a reboot of the machine is required to access another 40 minutes. Visit the Jaws website to download a free trial version.
An example of screen reader shortcuts can be found the webaim jaws shortcuts page.
Other screen readers are available eg window eyes, voiceover for OSX and IOS, talkback for android and narrator for Windows phone.
BrowseAloud
Browsealoud is a web-based screen reader.
ZoomText
ZoomText is a magnification and screen reading tool used by the university.