Web Accessibility

Listed below are UIW's basic accessibility standards. For more information or site specific reference materials, check out the Editorial Guidelines for the Community Site and our Editorial Guidelines for the Main School Site pages. 

Written Content

• Nest headings in order (for example, h1, h2, h3)
• Don’t skip heading levels
• Avoid using the underline attribute
• Avoid italics, block capitals or justified text
• Use plain English
• Explain unusual words and jargon
• Put the most important information at the start
• Explain what a user has to do in a clear and concise way
• Use headings and lists to break the content into chunks
• Download links labels should include file format and size
• Headings, links and button text must be unique and descriptive
• Each page should have a unique, descriptive h1 and page title

Tables

• Only use tables to present data
• Tables have a caption (title) established.
• Use tables as accessible alternatives to charts and infographics
• Split complex tables into multiple small ones
• Use correct table markup for headers, rows and cells, so screen reader users can understand and navigate them

Hyperlinks

• Links must make contextual sense on their own or with the assistance of surrounding text
• Avoid general link text such as “Learn more”, “Click Here”, “More Information”, etc
• Links and adjacent icons must be combined to make a single link

Color and Contrast

• Check color contrast between text and background
• Check design works in black and white
• Don’t communicate using color alone
• Check design works in high contrast mode

Interaction

• Check design is functional when using a keyboard to navigate
• Check it’s visually apparent which page element has current keyboard focus
• Complex interface components, like sliders, should be avoided when simple solutions, like a text input, can be used instead
• If an experience cannot be made accessible, create another route for users to get that information

Forms

• All form inputs should have labels and be linked with a ‘for’ attribute
• Forms and interactive elements should have useful hints
• Error messages should suggest ways to fix errors
• Error messages should show a summary of errors above the h1 and move focus to it
• Error message summaries should include an h1 message that tells the screen reader user there is a problem, and give a list of descriptive errors with links to the relevant fields

Images

• Images should have good alternative text
• Avoid using images of text (Logos are excluded from this rule)
• Images and Graphics are given an appropriate alternative text
• Clickable graphics cannot be given a blank alt-text and must be described
• Images of text have a contrast of 4.5:1 (small text) or 3:1 (large text).

Layout and Structure

• Layout should be consistent and predictable
• Do not rely upon shape, size, or visual location (for example, “Click the square icon to continue” or “Instructions are in the right-hand column”)
• Check reading and navigation order is logical
• Check page is readable and functional when text size is doubled
• Don’t use duplicate id attributes

iFrames and Video

• Use the iFrame title attribute to give the content a descriptive title
• Make sure interactive elements inside an iFrame are usable with a keyboard
• Make sure interactive elements have a clear focus style
• All video embeds must be hosted through Youtube (for assistance with uploads contact Adela Gott at )
• Make sure text such as "Loading..." is inserted between the opening and closing tags of the iFrame
• Test the iFrame is readable and functional with browser zoom at 200%
• Test the content doesn’t overflow or become truncated when font size is increased