"It's not just about disabled users being able to access your website - it's about everyone being able to access your website” - Trenton Moss
How do you make your learning materials accessible for all learners?
This article will summarise why web accessibility is important and provide three ways you can improve your Learning Management System (LMS) content for all learners..
Why web accessibility?
Imagine you are walking through Westfield with a large trolley filled with your baby and your groceries, many heavy bags of bottles, cans and so on. On the way out you only seem to find stair escalators. The lift is a long walk across the centre, far away from your car. You push your trolley to the lift, go down the lift and once you push the trolley out of the lift the concrete ramp does not seem to be designed for a trolley.
The journey and challenges would have been different:
- for a person with groceries without a baby as they may have carried the groceries to the car
- for a person with fewer groceries
- or a person that did their groceries with a friend that could help them carry their groceries to their car
Our journey at Westfield from the supermarket to the car with a full trolley and a child is effortless and unnoticeable because of thoughtful design.
Thoughtful design is required for websites too and without applying web accessibility conventions to your learning materials learning resources become difficult to understand and navigate for people with disabilities. This article covers three areas where for designers can improve their work: videos, headings/sub-headings and images.
Accessible design: Videos
Scripts provide information for screen readers and allow translation of your learning resources into different languages for your learners.
Take action
- Write a script for your video before filming. This has the added bonus of making your learning resources clearer and more concise. A script also makes further course tweaks in the future easier for you or the next course designer working on the course
Avoid
- Avoid not including a script.
But I didn’t record the video with a script!!!
This could be for a range of reasons:
- The course designer prefers old class recordings or old webinars
- The course designer is time poor and does not have the capacity to rethink the content
- The course designer genuinely believes their students will learn more through larger pieces of content
- The course designer does not have access to professional filming teams and is trying to produce something on their own and has already spent considerable time/effort on the project
Shorter videos have increased engagement, the famous 2014 MIT study where Guo, Kim and Rubin analysed 6.9 million videos found that short videos were more engaging (preferably when a video was 6 minutes or shorter in time). They also found videos that were solely not just slides and informal videos with a personal feel where the speakers had a high amount of enthusiasm and had greater engagement.
When working with larger videos without scripts you can still to make a difference in the way you address material:
- Cut it down: cut up long lecture/webinar to bite sized pieces (aiming for 6 minutes at most), remove irrelevant content and provide a value proposition statement for learners for each video segment.
- Use free script generating websites: upload the shortened videos first to YouTube. Once these have rendered YouTube has automatic scripts generated for free that you can read through and check for spelling or general upload into other platforms if your LMS is not either of these platforms for hosting video. If your institution is using the Office365 platform accessibility is something that has been designed into their video hosting program Stream with automatically generated captions or with the Translator app translating classes live into subtitles or different languages for learners.
- Question your organisation's policy: as a course designer/learning designer it is your job to advocate for your learners. Many universities use the system Echo360 for recording lectures but do not pay for the version of the software that creates transcripts for users. Perhaps they do not know about the paid version, you could let them know or advise them about web accessibility.
Accessible design: Headings/subheadings
Headings provide information to screen readers.
Take action
- Use Semantic HTML to write your webpages.
Semantic HTML is the correct use of HTML to reinforce the meaning of content on a web page, rather than merely define its appearance. Semantically correct HTML helps search engines, screen readers, and other user devices determine the significance and context of web content.
Built WISIWIG (What You See Is What You Get) editors have made creating web content easier for course designers and learning designers that might not have as much experience with web editing as they can see what something will look like as a finished product.
Avoid
Avoid differentiating your headings formatting such as making the text a bigger size on the WISIWIG editor or using bold, underline or italics.
But I dislike the style of current headings on my LMS!
A CSS tweak can change the formatting quickly and effectively with webpages and means your website can be updated at anytime with a new style. By updating the page you are telling a website when readers see specific heading styles, fonts and other design elements look a different way. This is particularly good for future proofing your company for rebrands in the future.
Accessible design: Images
Person using a sense machine to use computer. Text is overlaying image saying image descriptions or “alt text” tell screen readers what an image is Image descriptions support low tech, blind and low vision users of websites to see a textual description of images.
Bonus: Google rewards websites with good image descriptions with their websites showing first on google searches. People often ask me how my old business website took off so quickly and was featured on several news sites. It was partially because I knew about the importance of good image descriptions among other things.
Take action
Provide a detailed explanation of items including important text.
A picture of a fire extinguisher as a part of learning resources for a fire safety course requires a detailed description of its features so learners can differentiate it from other types of fire extinguishers. By adding the image description "Red fire extinguisher with a black hose. There is a metal opening at the bottom the same thickness as the black hose" rather than simply "fire extinguisher" a learner can differentiate this water based fire extinguisher from a wet chemical fire extinguisher, chemical fire extinguisher or carbon dioxide fire extinguisher.
Avoid
Avoid using statements starting with "a picture of" or "an image of". Screen readers will already read this information “a picture of a fire extinguisher” and by adding the additional picture in the text it means the person with the screen reader will need to hear the program saying picture twice.
Web accessibility matters
Imagine if websites were as thoughtfully designed as Westfield Shopping Centres...
Accessible tech makes tech better for everyone
What are some incremental improvements you can make today?
Check out the Web Accessibility Initiative for more detailed information and more incremental improvements you can make in your day to day work online.
References
Digital Transformation Agency. (n.d). 9. Make it accessible. https://www.dta.gov.au/help-and-advice/digital-service-standard/digital-service-standard-criteria/
Guo, P., Kim, J., Rubin, R. Proceedings of the first ACM conference on Learning @ scale conference March 2014. https://doi.org/10.1145/2556325.2566239
Springboard SEO. (n.d). What is Semantic HTML? http://www.springboardseo.com/resources/what-is/semantic-html.html
This article first appeared on Linkedin