-
Notifications
You must be signed in to change notification settings - Fork 343
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: V2 videos page updates
- Loading branch information
Showing
8 changed files
with
283 additions
and
85 deletions.
There are no files selected for viewing
101 changes: 101 additions & 0 deletions
101
en_us/course_authors/source/accessibility/accessibility_checker.rst
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
.. _Accessibility Checker: | ||
|
||
###################### | ||
Accessibility Checker | ||
###################### | ||
|
||
* This feature allows you to check HTML in the editor for various | ||
WCAG and Section 508 accessibility problems. | ||
* The Accessibility Checker focuses on exceeding WCAG "A", "AA", | ||
and "AAA" levels. | ||
* The Accessibility Checker enables content authors to check for | ||
accessibility problems using an in-editor dialog, complete with | ||
a repair feature that corrects the errors on their behalf. | ||
|
||
******************************* | ||
Accessibility Checker Use Case | ||
******************************* | ||
|
||
When using the Accessibility Checker, begin by looking for the | ||
accessibility icon . As you enter content into the Rich Content | ||
Editor, the Accessibility Checker will automatically start looking | ||
for any potential accessibility issues. Click on the icon to learn | ||
more. | ||
|
||
After clicking it, the Accessibility Checker will open in the | ||
sidebar menu with details on each issue found. Navigate between | ||
the items to learn about each issue and apply the fixes (see | ||
images below). | ||
|
||
.. image:: ../../../shared/images/AccessibilityCheckerWidget.png | ||
:alt: an image of the accessibility checker icon and menu. The | ||
accessibility checker lists various accessibility issues and | ||
includes an auto repair capability. | ||
:width: 600 | ||
|
||
**************************** | ||
Accessibility Checker Review | ||
**************************** | ||
|
||
#. **Adjacent links**: Adjacent links with the same URL should be | ||
a single link. This rule verifies link errors where the link text | ||
may include spaces and break the link into multiple links. | ||
|
||
#. **Headings**: Headings should not contain more than 120 | ||
characters. | ||
|
||
#. **Image alt text**: Images should include an alt attribute | ||
describing the image content. | ||
|
||
#. **Image alt filename**: Image filenames should not be used as | ||
the alt attribute describing the image content. Currently, files | ||
uploaded directly to Canvas create a redirect that does not | ||
properly verify image filenames. | ||
|
||
#. **Image alt length**: Alt attribute text should contain fewer | ||
than 120 characters. | ||
|
||
#. **Large text contrast**: Text larger than 18pt (or bold 14pt) | ||
should display a minimum contrast ratio of 3:1. | ||
|
||
#. **Lists**: Lists should be formatted as lists. | ||
|
||
#. **Sequential headings**: Heading levels should not be skipped | ||
(e.g. H2 to H4). However, the tool does not check if the first | ||
header starts with H2 or whether the headings are sequential | ||
with the rest of the content in the page. Tables do not begin | ||
with H1, which is designated for the page title. | ||
|
||
#. **Small text contrast**: Text smaller than 18pt (or bold 14pt) | ||
should display a minimum contrast ratio of 4.5:1. | ||
|
||
#. **Table captions**: Tables should include a caption describing | ||
the contents of the table. | ||
|
||
#. **Table header scope**: Table headers should specify scope and | ||
the appropriate structure. | ||
|
||
#. **Table header**: Tables should include at least one header. | ||
|
||
*************************************** | ||
Advantage of the Accessibility Checker | ||
*************************************** | ||
|
||
The Accessibility Checker has the primary advantage of being very | ||
low effort and having intelligible warnings and solutions for | ||
content creators, who are most likely not accessibility experts. | ||
We have a general goal of minimizing instances of asking content | ||
creators to edit the HTML view of course content in order to make | ||
it WCAG-compliant, and this helps with that significantly. | ||
|
||
Course content will be more accessible, consistent, and predictable | ||
because the TINYMCE accessibility checker reviews for the following | ||
content: | ||
|
||
* Heading levels | ||
* Lists | ||
* Contrast ratios on text | ||
* Image alt text | ||
* Tables | ||
* Captions | ||
* Scopes |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.