- About
- Submit
- Tools
- Guides
- Equity, Diversity and Inclusion guide
- Multimedia Consent Guide
- Formal studio portraits
- SFU News
- Brand guide
- Communication strategy
- Editorial style guide
- Media guide
- Project management
- Self-recorded video
- Social media
- Website content guide
- Website project guide
- Website Design Guide
- What makes a good story?
- URL request guidelines
- Blog
- C&M staff
Accessibility
Making content accessible is about designing for universal use that includes everyone.
The Web Content Accessibility Guidelines (WCAG) are industry standard guidelines for making web content accessible to all audiences.
Accessibility principles
The WCAG defines four overarching principles for content accessibility:
- Perceivable. Information must be presented to users in ways they can perceive.
- Operable. User interface and navigation must be usable.
- Understandable. Information and the user interface must be understandable.
- Robust. Content must be robust enough that it can be interpreted reliably by a wide variety of users, including people using assistive technologies.
Perceivable
- Provide text alternatives to all non-text content that is intended to convey meaning. For example, include transcripts, captions and descriptive video
- Create content that can be presented in different ways without losing information or structure
- Follow a standard and simple content structure for each page type
Operable
- Each web page should have a title that describes the page topic or purpose
- The title should distinguish the page from other web pages
- Write link text in a way that makes the purpose and destination of each link clear
- Provide multiple pathways to content from various logical starting places
- Headings and labels should describe the topic or purpose of a section
- Follow the heading hierarchy. Start each page with an <h1> and don’t skip levels
- Place distinguishing information at the beginning of headings
- For tables, identify row and column headers
Understandable
- Avoid using unfamiliar terms, including idioms and jargon
- Avoid unfamiliar acronyms and abbreviations
- Write all page copy intended for the general public at a Grade 8 reading level
- Use a consistent and predictable structure for all page elements on similar page types
- Avoid long blocks of narrative text
- Use short sentences, short paragraphs, descriptive headings and subheadings, and effective information design such as lists and tables
- Include written context for tables, lists and visual representations
Alt text
Alternative text (alt text) appears on pages when an image is still loading, or when it fails to load. This text is accessed for SEO in image searches, and is read by screen readers.
- Write alt text for meaningful images. Try to convey the meaning of the image, rather than a description
- Write: "SFU President Andrew Petter giving speech at Convocation 2018", Don't write: "Andrew Petter"
- Write for people first, SEO second
- For purely decorative images, always apply empty text alt tags: <alt=””>. This allows screen readers to skip over them
- For images that act as links, write alt text that describes the destination link
- If a contextual image requires further explanation, provide a text alternative on the same page or on a linked page
Test alt tags with Screen-Reader Emulator for Firefox.
Buttons and forms
Screen readers can't read button text if the button was created as a graphic rather than HTML text. All graphical buttons should be described with an alt tag.
Interactive HTML form elements such as radio buttons, checkboxes and drop-down menus are useful for sighted people, but they are completely mouse-activated. Clarify in written HTML where text entry fields occur and which information is being requested.
Contact information
Make it easy for people with access concerns to contact you to ask about venue accessibility for your programs or events.
Always publish contact information in the footer of the site.