MyCourses: Accessibility
In short
- concise instructions for building an accessible MyCourses workspace
- ReadSpeaker intended for student use reads the workspace content
- test your own workspace's accessibility with Brickfield Accessibility
- checklist for accessible learning material
Designing an Accessible Course
-
Course Structure and Content Clarity
- Logical Structure: Organize course sections, modules, and assignments clearly so that navigation on the course page is easy. Use descriptive titles for headings and activities.
- Readable Text: Avoid long blocks of text and excessive formatting (e.g., all caps, underlining, or italics).
-
Technical Accessibility of Text
- Headings: Use formatted heading styles (e.g., H1, H2, H3) to create structure. These help screen readers and other assistive technologies interpret content correctly. Do not skip heading levels (e.g., jumping from H1 to H3), and avoid manually creating headings by changing font size or bolding text.
- Links: Use descriptive link text instead of just URLs. Avoid vague phrases like 鈥渃lick here.鈥 The purpose of the link should be clear from the link text alone.
-
Image Accessibility
- Alt Text: Add alternative text to images that describes the content and purpose of the image. If the image is decorative, mark it as such. To add alt text in the MyCourses platform:
- Click the 鈥淎dd Image鈥 icon.
- Select the image file in the file browser window.
- Add alternative text in the field 鈥淒escribe this image to someone who cannot see it,鈥 or mark the image as decorative. Save changes.
- Alt Text: Add alternative text to images that describes the content and purpose of the image. If the image is decorative, mark it as such. To add alt text in the MyCourses platform:
-
Video and Audio Content
- Captions: Add captions to all videos. They support deaf and hard-of-hearing students, as well as others. Panopto automatically generates captions. You can edit the captions afterwards. Read more about. Provide a text-based alternative description of the video content if captions are not available.
-
Colors and Contrast
- Contrast: Use color combinations with sufficient contrast, such as black text on a white background.
- Check Contrast: You can check color contrast using the WebAIM Contrast Checker.
- Color as Information: Do not rely solely on color to convey information. Use shapes, patterns, or headings to improve readability.
-
Accessible Documents
- Ensure that all Word, PowerPoint, and PDF files are accessible before publishing.
Accessible learning material
Checklist for the accessibility of learning material and digital content
This site provides you with a comprehensive checklist to help you ensure that your learning materials are accessible to all students.
Accessibility tool
The accessibility tool provides information about the accessibility of your course area. The tool鈥檚 analysis shows which parts of the course area are problematic in terms of accessibility
Enabling the accessibility tool in a MyCourses workspace
- Open the course workspace and turn editing on.
- In the right-hand menu, open Blocks.
- In Add a block, select Accessibility review.
- The block will appear in the right-hand menu.
- Start the accessibility analysis by clicking the Submit for analysis button. You will see the notification:
This course has been scheduled for analysis. It will take a few minutes to complete. You do not need to stay on this page while waiting for the results. Students cannot see the results. - Once the review has been completed, you can update the course structure and content based on the accessibility results. The accessibility review is updated automatically. You do not need to refresh or remove it.
Interpreting the results
When the review is complete, you can a summary of the results in the block. More detailed error list can be opened from the magnifying glass button (Icon no. 1 in picture below). The error list includes direct links to edit each activity. You may also view result in different ways:
- Results based on activies and content types: The charts are available via the magnifying glass button (Icon no. 1 in picture below)
- A heatmap that shows in which course sections there are accessibility issues. You can show or hide the map using the eye button (Icon no. 2 in picture below) in the block
- A PDF summary of accessibility issues. Download the summary using the download button (Icon no. 3 in picture below)
Typical errors and how to fix them
| Error type | What does the error mean? | How to fix this? |
|---|---|---|
| Images | The image is missing alt text. | Add descriptive alt text or mark the image as decorative. |
| Page layout | Headings are not marked with heading styles, the heading hierarchy jumps, or the page is very long. | Use H1鈥揌3 heading styles in a logical order. Consider splitting a very long page into shorter ones. |
| Links | The link opens in a new window without warning. The link text does not indicate where the link leads (e.g. it is just a URL). | Prefer opening links in the same window. If you open in a new window, indicate this near the link. Write descriptive link text (e.g. 鈥淎alto accessibility guidelines鈥 instead of a raw URL). |
| Media | The video has no subtitles. | Add subtitles or a short text description. |
| Tables | The table is missing header cells or the structure is unclear. | Add a header row and columns, and avoid merged cells. |
| Text | The contrast between text and background is weak. Bold/italic is not marked semantically. | Increase contrast (e.g. dark text on a light background). Remove formatting and reapply it in an accessible way. |
Read more:
Readspeaker for reading websites
ReadSpeaker is a service that has multiple products to help users read online content. WebReader is a tool to help user when reading text from screen. DocReader is tool for reading documents.
ReadSpeaker tools are service based so you can find WebReader or DocReader in some Aalto services but not all of them. This page is about ReadSpeaker services in MyCourses service.
How to activate ReadsSpeaker, WebReader and DocReader MyCourses course space?
ReadSpeaker is not activated by default in your course page. Teacher needs to activate it for students in course spaces. When activated, it will activate both Webreader and DocReader. Aalto licence includes three languages: English, Finnish and Swedish. Teacher can select one as a default language for course but user can change reading language when using system. If language is not selected default will be English. User can change reader language when using WebReader of DocReader.
Activate player on course space
- Go to course space and turn editing on.
- Open right side menu and select Add a block.
- From pop up menu select ReadSpeaker webReader.
- Now you can see ReadSpeaker player on the right side of the page.
- ReadSpeaker is now active on you page.
Configure ReacSpeaker
- open configuration from three dots and select Configurate listen to this page using ReadSpeaker block
- Set the language EN, FI, SV
- Set the Dosplay on page types to Any type this means than block will be shown on any page on course.
- Save changes.
More about:
Using ReadSpeaker for Content Reading
There are few different ways you can use reader when course space:
- If you just click play button reader tries to read page content. It does not read everything on page but it tries to find page content text.
- You can select text on page or if activate user can hover on page element to select readable content. After selection you will see menu where you can listen selected text. There is also Dictionary and Translation available (uses google translation)
- If teacher upload a text file (.odp .ods. odt .xls .xlxs .pps .ppt .pptx .doc .docx .rtf .epub .pdf) to MyCourses as a resource ReadSpeaker provides online service where user can use multiple tool to read the file content. User can open document in online service by clicking ReadSpeaker icon (see image below) instead of document name. Icon will be added automatically to resource activities when ReadSpeaker block is added to course space.