Accessibility & SEO
Accessibility Quick Tips
All websites hosted on Ryerson.ca must be accessible and adhere to level A of the Web Content Accessibility Guidelines (WCAG 2.0, external link). All content must conform to level AA by January 1st, 2021.
The following tips will help make your content more accessible in the responsive templates.
Write a unique title for every page (H1)
The page title orients users, and it is often the first thing a user hears through their assistive device or screen reader. In the responsive templates the H1 is created by default as soon as you create your page.
The H1 (heading 1) indicates the main topic of a page and represents the start of the main content. You are able to edit the H1 text after creating a page.
Related:
Structure content with headings
Use HTML headings (H1, H2, H3, H4, H5, H6) in every web page. Headings should be meaningful, succinct and structured in a hierarchical manner.
Use headings to:
- break up blocks of text
- communicate content relationships and hierarchies
- make it easier for users to scan and find what they need
- provide visual cues to visitors and adaptive technologies
- replace the use of bold, italics or other styles
Find headings in the following components:
Create meaningful hyperlink text
- Use self describing links
e.g. "Learn more about Ryerson University" vs. "Click here to learn more"
- Link text should describe the destination of the link, or the action to be performed
- Don't use "click here or learn more"
- Descriptive links also improve:
- page usability, as the descriptive links become scanning cues for visual readers
- search engine optimization (SEO), as search engines create context and relationships between link text and link destinations.
Add meaningful text equivalent, or alternative text, for images
- Images that convey meaning or have meaningful context should have ALT text.
- Images that HYPERLINK to another page should have ALT text.
- Images that are decorative in nature (stock photos) should be marked as decorative in the Accessibility dashboard.
- Link-heavy resource pages such as the Campus Life page, images should be marked as decorative. This will prevent the screen reader audio stream from being "cluttered" with superfluous literal descriptions of images.
- When writing ALT text, keep it concise and use plain language. Do not include the words “image of” or “graphic of” in the ALT text.
Add alternative tex (alt-text) in the DAM:
- Navigate to the DAM folder, right click on the image and select "Open" (or double-click to open)
- Add descriptive text in the Title field
- Click Save
- Activate the image[s]
Add alt-text in an image component:
- Descriptive text can be added in the Alt text field of the Image + text component
- The Alt text in this component will take precedence over alt text added within the DAM.
Video Tutorial (DAM)
Need Help?
Find images missing alt text using the Accessibility Dashboard.
Use components as they were intended to be used
Asset List Component
- Use the Asset List component for PDF's and other downloads. For larger documents (over 6MB), ensure the file size is indicated.
Image Component
- If you intend to make an image 'clickable', it is highly advised to use Overlay Text with the Image Component. The Overlay Text should describe or relate to the destination of the page it links to. For example:
Best practices for writing for the web
Use clear and simple language when writing for the web. This will make your content easier to read for a broader audience, including those with reading disabilities/difficulties.
Do
- Be succinct
- Use bullets or lists to highlight key information or related links
- Use lists, headings and paragraphs to break up blocks of text
- Use clear, simple and plain language
- Add summaries and images to help convey meaning
- Use short sentences and common words
Don't use
- All caps
- Acronyms (unless you provide expanded form)
- Abbreviations
- Slang, jargon or idioms