---
title: "Brickfield Accessibility+ Toolkit"
canonical: "https://helpcentre.macewan.ca/space/ETS/2668625929/Brickfield%20Accessibility%2B%20Toolkit"
format: markdown
---
# Accessibility+ Review Toolkit
Click the link below to download this tutorial
---
The Brickfield Education Labs Toolkit is an integrated solution that allows us to make the content we add to mêskanâs (Moodle) more accessible to all our learners, especially those using assistive devices like screen readers. The **Accessibility+ Review Toolkit** will help us clean up the text we provide throughout our courses using activities and resources in mêskanâs, rendering it more easily understood for any learner using an assistive device. And while we’re committed to meeting our learners’ needs, we must also ensure that our course materials meet accessibility standards. Over the next several months, the CTL staff will host workshops to help you learn how to use these new tools.
# Scheduling Courses for Analysis
mêskanâs courses now include the **Accessibility+ Review block** in the right block drawer. This feature is available under the course menu, “**More**,” as **Brickfield Accessibiliy+ Toolkit**. To get started, locate the block in the course menu and click on the “**Submit For Analysis**” button. Depending on the course resources and activities, the analysis will take a few minutes or more. When completed, the block will display a summary of the results. Note that the block will only be visible to you and not to your learners.
Adding the block: “**Edit Mode**” set to “on” (1), and then click on “**Add a block**.”
Or locate the “**Course Menu**” and click “**More**,” and then click on “Brickfield Accessibility+ Toolkit.”
Click “**Submit For Analysis.**”
Or click “**SUBMIT FOR ANALYSIS**” under the “**Course Menu**” and “**More**.”
The course has been scheduled for analysis. Depending on the course resources and activities, the analysis will take a few minutes or more. When completed, the block will display a summary of the results.
Summary of the results.
(1) Toggle Accessibility+ Heatmap | (2) View Accessibility+ Report | (3) Download Accessibility+ Report (3) | (4) View Accessibility+ Outline Report
# Toggle Accessibility+ Heatmap
It toggles on and off a visual highlighting overlay onto the course main page via the bottom **Eye icon link**, showing which activities and resources have passed or failed the accessibility checks. The Eye icon also indicates whether the accessibility results display is currently active or not. The heatmap will only be visible to faculty, not to learners.
# View Accessibility+ Report
The chart icon at the bottom of the block will take you to a series of tabs detailing all of the errors uncovered in the analysis and the wizards that can clear many of them up with just a click. While many options are available, you’ll likely only work in just a few tabs.
## Overview
The Overview report allows quick access to any enabled report and wizard of the toolkit. It also provides a summary of the course activities and HTML content types (refer to “**Appendix I**” to have a better understanding of HTML code in mêskanâs).
This Overview report displays the following details:
- The links and brief descriptions of the enabled tools in the Brickfield Toolkit.
- The total activities and the number of activities passed and failed.
- The number of errors, broken down per HTML content type (Image, Layout, Link, Media, Table, Text).
## Activity Breakdown
The Activity breakdown report provides a breakdown of the pass rate and error totals per activity or resource type for the course with two different tabs, “Display pass rate” to display the pass/fail per activity or resource type and “Display error totals” to display the total error count per activity or resource type.
This Activity breakdown report displays the following details:
- The summary data per activity for the course
- Activities are counted as either activities, resources, or content areas relating to the courses themselves
- The number of errors per activity
- The number of instances passed and failed per activity, in ratio
- A concise description of this report is on the right
Activities are counted as either activities, resources, or content areas relating to the courses themselves. Each activity with no detected errors is counted as passed, and each activity with one or more detected errors is counted as failed. The ratio of passed to failed activities is then displayed.
The per activity chart page displays the following information:
- The “pass rate” tab shows the total ratio of passed to failed areas per activity, such as assignment, course, label, etc.
- The “error totals” tab shows the error breakdown per activity.
- The information can be filtered to show all courses or one individual course.
## Content Types
The Content types report provides a breakdown of the pass rate and error totals per HTML content type for the course with two different tabs, “Display pass rate” to display the pass/fail per HTML content type and “Display error totals” to display the total error count per HTML content type, which are as follows:
- Image
- Layout
- Link
- Media
- Table
- Text
This Content types report displays the following details:
- The summary data per HTML content type for the course
- The number of errors per content type (Image, Layout, Link, Media, Table, Text)
- The number of instances passed and failed, per content type, in ratio
- A concise description of the reports is on the right
The content type chart page displays the following information:
- The “pass rate” tab shows the total ratio of passed to failed activities per content type, such as Image, Link, etc.
- The “error totals” tab shows error breakdowns per content type group, such as image, link, etc.
- The information can be filtered to show all courses or one individual course.
## Summary Report
The Summary report provides a breakdown of the accessibility errors found within an individual course and is a combination of many of the Find tools found within the Accessibility+ toolkit; it can also download a PDF transcript of the course with a link called Download PDF, which is located at the top right of the report.
The Summary report shows the following details:
- Top errors: the most failed HTML checks and their total error count
- Failed activities: the top failed activity types and their total error count
- Check errors: the total error count for each HTML content type
- Activity pass ratio: course activities and the total number that have passed or failed
- Error details (Showing first 10 errors)
- Activity: the activity name
- Section: the course section within which the activity exists
- Check: HTML check that failed
- Line: the line of code on which the error exists
The two-pager accessibility PDF transcript can also be downloaded from the **Accessibility+ Review** block via the download icon in the bottom right.
## Check List
The Check list report provides a list of the checks that have failed and all checks for the course with two different tabs, “Show checks with errors” to view the checks with errors and “Show all checks” to view all checks, regardless of whether errors exist for them or not.
The Check list report shows the following details:
- Check: the check’s name
- Guide: help popup with further information on the check, its summary, and its impact
- Errors: total error count
- Severity: severity level
- View: view link, which brings you to the Errors page for all the errors related to this check alone
- Fix: where relevant, some checks have corresponding Fix wizards, so you have a Fix link for each check when it exists
*Note*: Error types that do not have wizards can be repaired by clicking on the **view** icon associated with the error type.
# Fixing Error
An analysis report can seem overwhelming, as it contains numerous errors related to obscure course elements. So, where should we begin? One approach is to compare the potential impact with the ease of implementation.
To improve accessibility for our learners using assistive devices, we should prioritize fixing issues with images and links, which can be easily addressed with wizards. On the other hand, issues related to page layout and captioning are more challenging to fix and require manual manipulation of HTML code. Text and table errors have less impact, as most text errors are due to new formatting standards, and tables are not frequently used in our courses. Using wizards can efficiently address challenges with images, links, and text through bulk corrections with simple clicks. On the other hand, errors related to page structure, closed captioning, and tables require manual fixes.
| | | |
| --- | --- | --- |
| **Error Category** | **Error Type** | **Type of Solution** |
|  | **Images** | Description challenges: “alt-text” missing or needs improvement | Wizard |
|  | **Layout** | Heading style irregularities: sequence problems or text missing | Manual |
|  | **Links** | Descriptive text problems: actual URL in text instead of information about the destination | Wizard |
|  | **Media** | Caption troubles: video lacks captions | Manual |
|  | **Tables** | Missing headers or merged cells—these errors can be ignored at this point | Manual |
|  | **Text** | Page length concerns: page contains more than 500 words without headings/ subheadings | Manual |
# Available Wizards
To access all available wizards, click on “**Go To Wizards**.”
## Fix Image Alt Text
The Fix image alt wizard provides you with “**image alt**” errors for the course and allows you to submit a suitable image (alt) description for each image to help fix them quickly. Image alt (alternative) text is the HTML standard alternative (non-visual) way to describe the meaning and context of an image. Please provide a brief description of the image for a screen reader user, which is NOT the image file name. It should be concise, relevant, meaningful, and no longer than 125 characters, ideally. The existing image alt errors are listed with a “**Submit Bulk Fixing**” button, which will then update all the image alt errors on that **current page**.
Please be aware that changes to image alt text require some level of oversight or involvement from a faculty. Therefore, the alt text must be manually entered into the “Update to” input field for each image as plain text. This will then be used to update the image’s alt text in its content location. Additionally, there is a helpful popup with guidance on how to write effective image alt descriptions located below the text input area. Any changes made using this wizard can be undone using the “**Bulk fix log**.” Any errors that have been hidden using this wizard can be found in “**Exception Management**.”
The Fix image alt wizard displays the following details for each error:
- Name: the activity type and name
- Course: the course’s short name in which the error resides
- Existing HTML code: the full HTML code
- Update to: update to a help popup about the checks inaccessibility, a text area for the new image alt, and another help popup for creating good alt text
- Hide: checkbox to hide the error when processed
If an image alt is not descriptive enough, such as using the image file name, users of screen readers or users with images blocked cannot determine the image’s content and importance. If an image alt is too long, users of screen readers need to spend too long engaging with it to determine the image’s content and importance.
## Fix Bold
The Fix bold wizard provides you with “bold” errors for the course and updates the formatting of bold text into the correct HTML tag (refer to **Appendix II** for more information), from the tag to a tag, to help fix them quickly. The (bold) element, or tag, provides no emphasis on text for non-sighted readers. Use the correct tag instead. The existing bold tag errors are listed with the “**SUBMIT BULK FIXING**” button, which will then update all the bold tag errors on that current page.
*Note*: All fixes applied through this wizard can be reverted with the “**Bulk fix log**.” All errors **hidden** through this wizard are located in “**Exception Management**.”
##
Fix Italics
The Fix italics wizard provides you with “italic” errors for the course and updates the formatting of italic text into the correct HTML tag (refer to **Appendix II** for more information), from the tag to a tag, to help fix them quickly. The (italic) element, or tag, provides no emphasis on text for non-sighted readers. Use the correct tag instead. The existing italic errors are listed with a “**SUBMIT BULK FIXING**” button, which will then update all the italic errors on that current page.
*Note*: All fixes applied through this wizard can be reverted with the “**Bulk fix log**.” All errors **hidden** through this wizard are located in “**Exception Management**.”
## Fix All Caps | Fix Strike | Fix Area Targets | Fix Header Tags | Fix Empty Header Tags | Fix Link Targets
Fix All Caps, Fix Strike, Fix Area Targets, Fix Header Tags, Fix Empty Header Tags, and Fix Link Targets are similar wizards to the Fix Bold and Italics. “**Fix Link Targets**” will prevent links from opening in **new tabs**. If this change affects your teaching methods or resources, you can choose to ignore this fix or hide links that you don’t want to open in the same tab.
The existing errors are listed with a “**SUBMIT BULK FIXING**” button, which will then update all the errors on that current page.
*Note*: All fixes applied through this wizard can be reverted with the “**Bulk fix log**.” All errors **hidden** through this wizard are located in “**Exception Management**.”
## Fix Link Text
The Fix link text wizard provides you with “link text” errors for the course and suggests alternatives, based on the retrieved title of the URL to help fix them quickly, but this can also be customised. Links should be descriptive of the content they’re linking to, such as “Project Jude guidelines” rather than “guidelines.html” or “Click here.” The existing link text errors are listed with a “**SUBMIT BULK FIXING**” button, which will then update all the link text errors on that current page.
*Note*: All fixes applied through this wizard can be reverted with the “**Bulk fix log**.” All errors **hidden** through this wizard are located in “**Exception Management**.”
This Fix link text wizard deals with URLs that have been reported for using incorrect link text, either using a known bad phrase for a link, such as “Click here,” which gives no context, OR for using the actual URL itself, which creates a bad experience for users that need to listen to the URL instead of viewing it. It’s important to remember that changing links requires some level of faculty involvement.
We automatically fetch the website’s title and suggest it as the new link text. However, the faculty should review and edit the new link text as plain text to ensure accuracy before updating the link in its content location.
The Fix link text wizard displays the following details for each error:
- Name: the activity type and name
- Course: the course’s short name in which the error resides
- Existing HTML code: the full HTML code
- Update to: update to the full HTML code if the fix is applied; this will use the links page title
- Hide: checkbox to hide the error when processed
# Manual Repairs
For errors that require manual fixing, you will need to manipulate the HTML code. Please refer to “**Appendix I & II**” for a quick introduction to HTML and a list of commonly used codes in mêskanâs. Some errors can be easily fixed by replacing the existing content in a textbox with plain text. For more information, you can refer to “**Appendix III**.”
# Keeping Score
The numbers reported in the **Accessibility+ Review Toolkit** will not necessarily change as soon as you make a correction. Gradually, they will drop to reflect the progress you’ve made. Once you have submitted the course for analysis, new content that you add will be scanned automatically and assessed for problems as the term progresses.
# Accessibility Guides
The Brickfield Accessibility+ Toolkit has many in-screen guides that provide information on essential accessibility tips and concepts. Our first set, just below, is on HTML content types, such as Image, Layout, Link and so on. Our second set, further below, is on the accessibility checks we run and their impact if not followed.
The HTML content types accessibility in-screen guides provide in-depth tips for making the course content accessible and are located within the Accessibility+ Review block. These accessibility tips are divided into six HTML content types:
- Image
- Layout
- Link
- Media
- Table
- Text
**References**
*Brickfield Education Labs*, [https://accessibilitytookit-vt11.eu.helpdocsite.com/](https://accessibilitytookit-vt11.eu.helpdocsite.com/)
*Southern Oregon University*, [https://sou.edu/](https://sou.edu/)
#
Appendix I
## Basic Introduction to HTML in mêskanâs
To make mêskanâs courses accessible to all learners, it’s helpful to have a basic understanding of the underlying structure of our text. You don’t need to be an HTML expert, but having a little understanding of what you’re looking at can be very useful.
To view the HTML behind your textbox, click on the toggle icon in the upper-left corner, then click on the HTML icon in the lower-right corner. Click on the icon again to return to normal view.
In this example, we have code for a paragraph, a list, regular text, and a link to another website. We are using the default “Atto” editor, which makes it easy to differentiate the code from the text. All of the code is displayed in green font; specific elements within the code appear in blue and red, while the text you have entered is black. (See the common code “tags” in Appendix II to better understand what the code means.)
One important thing to understand about HTML is that code needs to be balanced: every element is opened with angle brackets and closed with a forward slash . For example, to make words bold, you would use to start and to end.
When editing HTML, you have the ability to select and delete text or code as needed. As you delete elements, you may notice that some green code changes to red. This indicates that there is a warning because the code is unbalanced in some way. For example, you may have an open command without a corresponding close, a typo in the brackets, or a missing bracket. If the red persists, the editor may be able to fix it for you, or you may need to find the problem and fix it. If things get really messed up, you can cancel the operation entirely instead of saving your changes, then start over or ask for help.
### Challenges in HTML
One of the most significant challenges we encounter is the “messy” HTML that results from copying text from a Word document into a textbox. Here is an example of text copied from Word and pasted into a textbox:
In this instance, any text that appears in red is unrelated to the content itself—it’s simply extraneous information that is carried over from Word.
Please refer to “**Appendix III**” to find more information about “**Fixing Problems with Plain Text**” in mêskanâs textbox.
# Appendix II
## Common HTML Codes in mêskanâs
It’s helpful to be able to decipher HTML in a mêskanâs textbox to understand what is being displayed. Here are some of the most common “tags” you will encounter when you look under the hood.
| | | |
| --- | --- | --- |
| **Tag Type** | **Tag (Code)** | **Purpose** |
| **Text** | | Bold *(outdated code – replace w/ )* |
| | Italic *(outdated code – replace w/ )* |
| | Bold |
| | Italic |
|
| Top heading level *(numbers denote hierarchy)* |
|
| Second heading level *(don’t skip levels – 6 is max)* |
| | Set the size of the font – 1 to 71 |
| | Set font color2 *(apply with the icon in the toolbar)* |
| style="text-decoration: underline;" | Underline *(can be confused with hyperlink)* |
| **Formatting** |
| New paragraph |
|
| Line break *(no additional space between lines)* |
|
| Indent |
| | Identify the range of text affected by tags |
| **Lists** | | Insert bulleted list |
|
| Insert numbered list |
| | Designate list item |
| **Links** | click text | Hyperlink to URL |
| target="_blank" | The link opens in a new window *(not preferred)* |
| click text | Link to an email address |
| **Graphics** |
| Insert a horizontal rule (line) *(use the toolbar icon)* |
| 
| Insert image *(from mêskanâs or external URL)* |
| | Align image left, right, center, top, bottom |
| | Set image height and width in pixels *(10 = 1 inch)* |
| class="img-fluid atto_image_ button_**left**" | Align the image according to the last word *(left, right, center, top, bottom)* |
| | Alternate (alt) text describes the image *(****required****)* |
| | Decorative image needs no alt text |
| **Media** | | Display an embedded video |
| **Tables** | | Insert a table |
|
| Identify a row |
| | | Identify a cell |
| | | Insert a header |
_______________________________________
1 Avoid using font size to designate headings—use paragraph styles instead.
2 Don’t use colour as the sole means of conveying meaning (e.g., red items are mandatory viewing, blue items are optional).
# Appendix III
## Fixing Problems with Plain Text
### Origins of HTML Weirdness
Some of the text errors that the Brickfield Labs’ Toolkit flags in our courses are related to text that we have copied from Word or Google Docs and pasted into a textbox in mêskanâs. When you look at the text in the HTML view, you might see codes like these that come over from Word:
****
** **
These codes don’t throw errors when your course is analyzed, and you can safely delete them if it helps you see the rest of the code.
When you copy and paste from a Google Doc, you might see something like this:
**** ****dir=****"ltr"**** ****id=****"docs-internal-guid-86f8da32-7fff-bc7f-3532-c53c0d04b2ab"****>****. **
In the case of the “id” code that Google inserts, the Toolkit will flag that with a message like this: *Any elements using an “id” (identifier) attribute needs to use a unique value for its “id*.*”*
### Fixing Problems
Some text problems identified by the Brickfield Toolkit (“*insufficient colour contrast*,” “*id attributes missing a unique value*”) can be fixed by replacing the existing text with the* *new text entered in the textbox or with plain (unformatted) text. How you fix these text problems may depend partly on how much text is involved. If there is just a sentence or two involved, you may choose to simply retype the text in the textbox, while for more extensive content, generating plain text is easier than retyping your text in the long run.
### Retype Text
To eliminate the coding errors behind the text, use the toggle icon in the upper-left corner of the textbox toolbar to display additional tools. Click on the HTML icon on the right end of the bottom row (< / >). Select all the characters in the textbox (Ctrl+A or Cmd+A works great for this!) and then delete them. Click on the HTML icon again to return to normal editing and retype the content that you just removed.
### Repair Problems with Plain Text
**Important Note**: If the existing text includes embedded links to websites or files, **those links will be stripped out** in the solutions suggested below. Download any files and open any links in new tabs to replace them easily after swapping out the existing text for new plain (unformatted) text.
Here are a few ways to generate plain text:
### Create Plain Text Using Word (PC or Mac)
1. Copy the existing text in the mêskanâs textbox.
2. Paste the text into a blank Word doc.
3. Use “Save as” to save the document as a plain text file (.txt). (Windows default coding will work fine if you are prompted to save.)
4. Close the document.
5. Open the .txt file you just created.
6. Copy the text (Ctrl+A or Cmd+A will select all the text for you).
7. Return to the mêskanâs textbox and delete the text (the same shortcut will work there for selecting all of the text).
8. Paste the plain text that you copied from the .txt file into the textbox using Ctrl+V or Cmd+V.
9. Recreate any formatting or links to websites or files that were present in the original version.
10. SAVE CHANGES!
### Create Plain Text Using Notepad (PC)
1. Copy the existing text in the mêskanâs textbox.
2. Open the Notepad app (**not** Wordpad—it uses a rich text editor).
3. Paste the text into a new file.
4. Copy the text (Ctrl+A will select all the text for you).
5. Return to the mêskanâs textbox and delete the text (the same shortcut will work there for selecting all of the text).
6. Paste the plain text that you copied into the textbox using Ctrl+V.
7. Recreate any formatting or links to websites that were present in the original version.
8. SAVE CHANGES!
### Create Plain Text Using TextEdit (Mac)
1. Copy the existing text in the mêskanâs textbox.
2. Open the TextEdit app. ([This video](https://youtu.be/VV7tLj4ttxU?t=26) provides a quick explanation of how to find and use TextEdit—watch only until the 2:30 mark unless you’d like to learn more about .rtf files!).
3. Select Plain text mode.
4. Paste the text into a new file.
5. Copy the text (Cmd+A will select all the text for you).
6. Return to the mêskanâs textbox and delete the text (the same shortcut will work there for selecting all of the text).
7. Paste the plain text that you copied into the textbox using Cmd+V.
8. Recreate any formatting or links to websites that were present in the original version.
9. SAVE CHANGES!