The Relationship Between User Experience/User Interface, Mobile First Instructional Design, and Digital Accessibility
I frequently received questions about using tables to organize content on web pages or course content pages in an LMS. I also frequently see novice instructional design students do this in order to make content line up for aesthetic purposes. The problem is, if you are not well-versed in HTML coding, and using tools like Bootstrap UI to create engaging, interactive, responsive page elements, then using simple "tricks" like aligning contents with tables, manually formatting text for emphasis, or manually inserting lines on your pages to create visual divisions between content can actually create more problems then they solve!
Insprired by a recent flurry of questions from my ID students, I put together this video to demonstrate what problems you create when you use tables to organize content (among other issues). The key recommendations to optimize course page layout, minimize cognitive overload, and minimize Digital Accessibility issues are:
Power, R. (2023, February 20). UX and Accessible Course Pages. [video]. https://youtu.be/QEvJ6r1ylDo
New eBook: Everyday ID
Everday Instructional Design: A Practical Resource for Educators and Instructional Designers provides useful background understanding of the principles and processes that guide the design, development, testing, and refinement of online course modules. This book has been developed based on a seriest of instructional design and educational technology courses taught by Rob Power at different Canadian universities, and follows a project-based learning experience that walks participants through the first few weeks of an instructional design and development project. These steps typically span the first six to eight weeks of designing and developing online courses as a contract instructional designer or as an in-house ID specialist. Everyday Instructional Design works through this process, exploring the rationale and pragmatics of all of the steps involved with determining what needs to be developed, creating our initial design plans, developing a prototype of a selected portion of the larger ID project, collaborating with other instructional designers to get “expert feedback” on our works-in-progress, pilot testing our prototypes with a “live” student audience, reflecting on the expert and student feedback we receive, and determining how we can tweak our prototype designs before proceeding with the rest of the course development project.
The Everyday ID eBook is available as an Open Access / Open Educational Resource via the Pressbooks platform, and can also be downloaded in both ePUB and PDF format, at https://pressbooks.pub/everydayid/
Are Your PDFs Accessible?
There’s an old adage that “a picture is worth a thousand words.” Well, that isn’t true is you can’t see the picture! Which brings me to the inspiration for this blog post, and for a series of videos that I just put together. I am working with a client that has a number of PDF versions of mock WHMIS information sheets (Canadian Council for Occupational Health and Safety, n.d.) that they want to make available as downloads to accompany a new series of workplace safety online training modules. The problem is, those PDFs are all image-only files. They reminded me of the photocopies and scans of course readings, like the one pictured below, that I used to find on reserve in the university library, or uploaded into online courses that I was a student in.
The problem with these image-only readings is that they are not machine-readable. They contain no text that a screen reader application could read aloud to students who have visual impairments. Thus, they are only as good as their ALT text – and you certainly cannot (or at least you should not) recreate all of the text embedded in the images in their ALT tags! If you did, you are probably only going to make things worse from a Digital Accessibility standpoint:
Luckily, there are ways to determine if a PDF you want to share with your students is machine-readable (and, at least somewhat accessible). In the following video, I demonstrate how to do this using both Adobe Acrobat Reader (2023b) (free!) and Acrobat Pro (2023a) (paid).
So, how do you create your own PDFs that you know will be (at least somewhat) accessible, and okay to share with your students? In the following video, I demonstrate how to use Microsoft (2022) Word to do just that be preformatting the required heading, paragraph, and image (ALT) tags before you export it to PDF.
Okay, but what if you have one of those image-only PDFs and you want to make it accessible for all of your students? To do that, you will need an actual PDF editor like Acrobat Pro, which has a number of built-in features such as optical character recognition (OCR) and a suite of Accessibility Tools (Adobe, 2023c, d). Watch the following video for a demonstration of how I use Adobe Acrobat Pro DC to edit an image-only PDF, convert it to one that can be read by a screen reader application, properly tag the text and images, and set the reading order (the order in which a screen reader will read the page contents out load to your students).
Adobe (2023a). Adobe Acrobat Pro. https://www.adobe.com/ca/acrobat/acrobat-pro.html
Adobe (2023b). Adobe Acrobat Reader. https://www.adobe.com/ca/acrobat/pdf-reader.html
Adobe (2023c). Creating accessible PDFs. https://helpx.adobe.com/ca/acrobat/using/creating-accessible-pdfs.html
Adobe (2023d). How to customize your toolbar. https://helpx.adobe.com/ca/acrobat/how-to/customize-toolbar.html
Canadian Council for Occupational Health and Safety (n.d.). WHMIS.org: Canada's Workplace Safety Portal. https://whmis.org/
Microsoft (2022). Word. https://www.microsoft.com/en-us/microsoft-365/word
Power, R. (2020, February 12). Two Basic Steps to Make Your Documents Digitally Accessible. [video]. https://youtu.be/AKzuXghQFnc
Power, R. (2020, February 13). Helping Everyone Access Your Online Learning Resources. [Web log post]. Power Learning Solutions. https://www.powerlearningsolutions.com/blog/helping-everyone-access-your-online-learning-resources
Power, R. (2023, February 2, a). Are Your PDFs Accessible? [video]. https://youtu.be/frOYI-y-XfE
Power, R. (2023, February 2, b). Creating Accessible PDFs. [YouTube playlist]. https://youtube.com/playlist?list=PLIJ8QfsveW2Y5rFnTVytRkyVc46N3WXVI
Power, R. (2023, February 3). Fixing PDF Accessibility. [video]. https://youtu.be/33h70ytABkc
Power, R. (2023, February 2, c). Properly Exporting PDFs. [video]. https://youtu.be/F_QAGsHQ-FE
TPGI (2023). Colour Contrast Analyzer (CCA). [Web page]. https://www.tpgi.com/color-contrast-checker/
Rob Power, EdD, is an Assistant Professor of Education, an instructional developer, and educational technology, mLearning, and open, blended, and distributed learning specialist.
Older Posts from the xPat_Letters Blog