Accessibility Makeover in E-Learning #353: Challenge | Recap
Challenge of the Week
This week, your challenge is to rework one or more slides to make them more accessible. To help others ...
Published 4 years ago
Version 1.0
Blog Post
This was a valuable learning experience, one in which I have merely scratched the surface for accessibility. Comments include my learning notes:
More accessible version: https://360.articulate.com/review/content/1ece07e4-34a3-4174-bb3c-a7af771237d9/review
Original: https://360.articulate.com/review/content/758286c2-338b-478a-9402-c265fd3b8900/review
More accessible version: https://360.articulate.com/review/content/1ece07e4-34a3-4174-bb3c-a7af771237d9/review
Original: https://360.articulate.com/review/content/758286c2-338b-478a-9402-c265fd3b8900/review
Steps I took to make this quiz more accessible:
1. Removed layers and "merged" information on the layer onto the base slide.
2. Used Colourcontrast.cc to fine tune background and foreground colors. I used the eyedropper tool in storyline, copy and pasted the web color values into the Colour Contrast Checker, then adjusted the lightness slider of each "pivot" color until the contrast Passed AAA Normal standards for text and AAA Large standards for icons and large images. This was really helpful for still using the brand's color scheme, allowing me to slide up and down lightness attributes of each hue/saturation of a color to stay within a similar tone for a still-harmonious color scheme.
3. I referred to WebAIm's WCAG 2.0 Checklist, their own interpretation of Guidelines
4. I downloaded NVDA screen reader and tested my story file, repeatedly. I had trouble testing the file in the preview screen, so I had to publish and republish to test using the screen reader and up and down arrow keys on my laptop.
5. The simplest way to change alt-text is to go to Home on the Storyline ribbon while in Slide View and click on Focus Order. While in Focus Order, you can delete decorative elements like "line" and "rectangle" that you would like the screen reader to not read. Also, in the right column, you can type in the Alternate Text you'd like the screen reader to read as you tap up and down on the arrow keys, or other key bindings selected in your screen reader.
This is also the place to reorganize which elements should be read in what sequence, and to monitor how the slide communicates. I added in additional information to make the alternate text more descriptive for those learners who may use assistive devices for visual impairment.
Retrofitting was a great way to learn about using the tools for accessibility that Elizabeth Pawlicki described in her informative webinars and that the enlightening video by Linda Lorenzetti and Amy had demonstrated. I look forward to building my toolbox for accessibility, and creating my own "Pre-Build Checklist" that designs with Accessibility as a forethought.
1. Removed layers and "merged" information on the layer onto the base slide.
2. Used Colourcontrast.cc to fine tune background and foreground colors. I used the eyedropper tool in storyline, copy and pasted the web color values into the Colour Contrast Checker, then adjusted the lightness slider of each "pivot" color until the contrast Passed AAA Normal standards for text and AAA Large standards for icons and large images. This was really helpful for still using the brand's color scheme, allowing me to slide up and down lightness attributes of each hue/saturation of a color to stay within a similar tone for a still-harmonious color scheme.
3. I referred to WebAIm's WCAG 2.0 Checklist, their own interpretation of Guidelines
4. I downloaded NVDA screen reader and tested my story file, repeatedly. I had trouble testing the file in the preview screen, so I had to publish and republish to test using the screen reader and up and down arrow keys on my laptop.
5. The simplest way to change alt-text is to go to Home on the Storyline ribbon while in Slide View and click on Focus Order. While in Focus Order, you can delete decorative elements like "line" and "rectangle" that you would like the screen reader to not read. Also, in the right column, you can type in the Alternate Text you'd like the screen reader to read as you tap up and down on the arrow keys, or other key bindings selected in your screen reader.
This is also the place to reorganize which elements should be read in what sequence, and to monitor how the slide communicates. I added in additional information to make the alternate text more descriptive for those learners who may use assistive devices for visual impairment.
Retrofitting was a great way to learn about using the tools for accessibility that Elizabeth Pawlicki described in her informative webinars and that the enlightening video by Linda Lorenzetti and Amy had demonstrated. I look forward to building my toolbox for accessibility, and creating my own "Pre-Build Checklist" that designs with Accessibility as a forethought.
- Nice example Yvonne. The best way to test a course is to publish it because the preview can be glitchy for screen readers.
- Thank you for providing feedback, Linda. I plan to make accessibility part of my design planning moving forward.
