Accessibility guidelines

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 template. All new templates 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.

  1. Content rules
  2. Development rules
  3. Accessibility tools
  4. Useful links

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

WCAG guideline 2.4.4

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

WCAG guideline 2.4.4

Instructions must not rely on colour, the layout of the page or upon a sound

Any instructions (eg 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.

Back to top

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 eg 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

WCAG guideline 1.1.1

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

WCAG guideline 1.1.1 

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

WCAG 1.4.5

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

WCAG guideline 2.3.1

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

WCAG 1.4.2

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

 

WCAG guideline 1.2.1

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

WCAG 1.1.1

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

Back to top

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

 

WCAG guideline 1.3.1

Back to top

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

WCAG guideline 2.3.1

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 templates conform to this rule however developers should be mindful of using this kind of functionality (eg sliders) when developing new templates.

More information

WCAG guideline 2.2.2

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 templates conform to this rule however developers should be mindful when developing new templates and check all page elements to ensure colour is not the only way that information is conveyed. Please read our for further help.

More information

WCAG guideline 1.4.1

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 templates already conform to this rule however developers must ensure that new templates also conform. The will help you.

More information

User must be able to resize text without use of any adaptive technologies. 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 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 templates already adhere to this rule but developers must ensure that new templates also conform. Read our  for further help.

More information

Back to top

Navigation

All functionality of the page can be made using keyboard only controls. Tabbing must be logical and intuitive. It must be visually apparent of 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 templates already meet this rule however developers must ensure that any new template fulfils this requirement.

More information

Multiple ways are provided to find other webpages 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 webteam. 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 templates.

More information

WCAG guideline 3.2.3 

Navigation links must remain consistent throughout the website

Inconsistent navigation presents problems for 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 templates to ensure that navigation in new templates is consistent.

More information

WCAG guideline 3.2.3

Page-specified shortcut keys and accesskeys (accesskey 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

WCAG guideline 2.1.1

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 webteam.

More information

WCAG guideline 2.4.1

Back to top

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 handing 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 template 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

WCAG guideline 1.1.1 

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 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 template 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 summary provided.

Tables should not be used for the layout of 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

Back to top

Coding

Change in focus or interaction with a 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 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 templates do not have automatically updating content.

More information

WCAG guideline 2.2.2  

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 templates.

More information

WCAG guidelines 3.2.4

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, eg 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 webteam. If a template is developed to accommodate another language then this rule will need to be followed.

More information

WCAG guideline 3.1.2

Pages must give 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 ability to either extend session or pick up wehere the user is left off.

 

More information

WCAG guideline 2.2.1

Back to top

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.

Example of screen reader shortcuts can be found the webaim jaws shortcuts page.

Other screen readers are available eg windoweyes, 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.

Back to top

Useful links

Back to top