At Liverpool John Moores University, we’re committed to making digital content accessible to as many people as possible. To help meet this objective, this article aims to help you create an accessible Canvas course home page for your students.
What makes a good home page?
The good home page should provide an overview of the course materials and structure with relevant links. It should help students access learning materials and sections they need as easily as possible. The more complex the content and design of this page the easier it is for students to become confused and miss important links, and can, in some cases make it harder for students with disabilities.
The key principles of an accessible homepage:
It has a responsive design and works on all devices
- Some students may access your homepage on a device with a small screen. Responsive is a term used to signify the adaptability of a page across all devices, tablets and smartphones. The page should display without the need to scroll horizontally, and sections of the page should not require vertical scrolling.
- Students should be able to resize text without causing elements on the page to misalign. Students with visual impairments sometimes increase the size of text when reading online. If your page design is complex this may make the page difficult to read.
- Sections of plain text. These will resize easily and maintain their structure.
- Headings. These will provide logical identification of the structure of the content allowing screen readers to move to each element of the page easily. See our blog post on how to use Headings in your content for more information: Blog Post: Accessibility – Just do one thing [1. Headings]
- Avoid fixed width tables, or tables containing a number of images. Fixed tables can’t readjust to new screen sizes and students will need to use horizontal scrolling as well as vertical scrolling to read content.
It uses images purposefully and accessibly
Images for the most part can also be resized, unless specific dimensions for the image have been set in your html. People with visual impairments sometimes use screen reader software to read your document or webpage out loud. Screen readers have no way of delineating the purpose of an image without you telling it. This is where the Alternative Text or Alt Text field takes centre stage. Screen readers read out text in the ‘Alt Text’ field allowing users to understand the purpose of the image. If the image contains important information you need to ensure that you include this information in the Alt Text field. You can create Alt Text for shapes, pictures, charts, SmartArt graphics, or other objects. You can also mark an image as decorative in Canvas if the image is used purely for aesthetics.
You can find more information about Alt Text in our recent blog post: Blog Post: Accessibility – Just do one thing [2. Alt Text].
It is consistent – matches other course homepages in the same programme
Consistency across course pages in a programme allows students to concentrate on the content rather than learning a new design or layout for each part of the site. If you are designing your canvas course in a particular way, talk to the other module leaders to move towards a shared level of consistency in the design and layout. This will make it easy for your students to focus on learning from the resource and materials rather than spending time trying to work out where things are in each course.
Avoids the use of tables
Tables can be problematic. We advise that you avoid tables where possible and instead simplify your homepage and ask students to navigate your content via the ‘Modules’ section of your course. Tables can be used for both layout and data purposes, but the accessibility regulations around them can be conflicting depending on the intended use of the table.
This useful Table Accessibility guide from Canvas, shows you to how apply captions and headings should you want to use a data table on your home page. Tables can be problematic for a number of reasons:
- Reading Sequence
Depending on how you have structured your content, tables are navigated in a linear sequence by screen readers. For both data and layout tables, the order in which content is presented can affect its meaning. “Many web sites use tables for layout, and most of them use spanned rows and columns to achieve formatting effects. The end result is that the linearized reading order may not be the same as the visual reading order. This can lead to confusion on the part of people who access the linearized reading and navigation order, such as individuals who use screen readers or who navigate with keyboards.” according to Webaim.org. Use the ‘Tab’ key on your keyboard to navigate through your table, does the linear sequence make sense?
- Horizontal Scrolling
Tables aren’t always responsive, which means that anyone accessing the page on a mobile device may need to scroll across the page horizontally.
- Table Headers
If you’re using a table for tabular data or a data set, accessibility regulations require ‘Header cells’ to be marked up and a caption to help identify the overall topic of a table. A header cell is the title for the column or row that helps identify the purpose of all the corresponding cells. For example: Bus Stop Location, Bus A, Bus B, Bus C and Bus D are all marked as a header:
| Bus Stop Location | Bus A | Bus B | Bus C | Bus D |
| Location A | 09:00 | 09:15 | 09:20 | 09:25 |
| Location B | 09:10 | 09:20 | 09:25 | 09:30 |
| Location C | 09:15 | 09:24 | 09:30 | 09:35 |
Tables used for layout purposes only, should not apply headers or use a caption.
It should have an accessibility statement
A good course homepage should have a course accessibility statement outlining what a student should do if they encounter any issues related to accessing content.
Example Course Accessibility Statement
At LJMU, we are committed to providing an inclusive and accessible learning environment for all students. We believe every student should have the chance to succeed and fully engage in our courses. If you find any issues with the accessibility of course materials, please notify [your email address] as soon as possible. We welcome feedback from students, if you have suggestions for enhancing accessibility in this course, please share them with your tutor. Further information about learning technology related accessibility s can be found on the Learning Technology Website: Student Guide: Accessibility.
Is there a template available for me to use?
The Teaching and Learning Academy have developed an accessible template for you to use in your course. You can import it from ‘Canvas Commons’. It’s titled ‘Accessibility Homepage Template‘. The template is designed to work alongside the ‘Modules’ section of your course. Add and organise your learning materials into the ‘Modules’ section and use this template as a home page. This allows for easier access to Learning Materials on various devices.
To add the Accessible template to your course, use the ‘Import Existing Content’ button from your course homepage. The item should be listed at the top of the page, but if you can’t find it, search for ‘Accessibility Homepage Template’ in Canvas Commons.
Add your own image, but don’t forget to mark the image as ‘decorative’. Further information about making images accessible can be found in our blog post: Blog Post: Accessibility – Just do one thing [2. Alt Text]
Change the text and remove any references that aren’t relevant to your course.
Accessibility Homepage Template
Accessibility in Digital Education Design Project (AiDED)
The Teaching and Learning Academy’s AiDED vision is to use the digital learning environment to help all our students improve their life chances. Find out more about accessibility and the AiDED project over on our AiDED Project page.
