Accessibility 101

You may have heard the buzz about accessibility lately. Maybe you heard about the federal regulations around Title II of the Americans with Disabilities Act or maybe you are just tired of students complaining that they can’t read the PDF you uploaded for them. Whatever the reason you are here, welcome! 

Eastern is taking the opportunity this hubbub has created to make our content more accessible. We are including accessibility training in our faculty onboarding process and has been hosting a series of lunch and learn sessions on different aspects of digital accessibility. If you missed a Lunch and Learn session, you can find the recording on CTLT's website. If you are interested in attending a future Lunch and Learn, check out our schedule. 

The following article is taken from the updated FDC 100, part of our faculty onboarding. It focuses primarily on the why of digital accessibility aspects. For how-to guides, please visit the Brightspace Accessibility Checklist. 

Accessible Course Design

When we build our courses, it’s easy to look at accessibility as just another compliance box to check off. But honestly, it's so much more than that. It’s about making sure every single student logging into our course has the exact same opportunity to learn, engage, and succeed. When we design with accessibility in mind from the start, we actually end up creating a more intuitive and frustration-free experience for everyone.

Please bookmark the Brightspace Accessibility Checklist. You can use this checklist as a quick reference while you build or review your course content. If you get stuck and need an example or step-by-step technical instructions for any of the items, check out the How-To Guides section at the bottom of the document!

Let's take a look at a few core practices from the checklist and explore why they make such a massive difference to our students' day-to-day lives. Many of these "rules" of accessibility are there specifically to help students who use assistive technologies, special tools that take content that can be easily seen and heard by many people and convert them to a new format that can be perceived by individuals with disabilities.

Check out this video of Carin, a Brightspace user who uses a screen-reader, a tool commonly used by blind individuals to navigate the internet. The video has an older view of Brightspace, but it shows how a screen reader interacts with the Brightspace environment. It illustrates why many of the practices below are so important.

📖 Accessible Text

In the above video, we saw how Carin's screen reader interacts with text. In order for her screen reader to work properly, the content of the page needs to have appropriate "tags" that let Carin navigate the page. These tags act like a table of contents, allowing Carin to skip to the main content of a page, or a specific section of text.

That's why it's important for us to use:

• Descriptive page titles

• Proper heading and list structure

• Descriptive text for links

• Correctly formatted tables and layouts

• Set the correct reading order for slides.

Other factors that affect the accessibility of text have to do with making sure those with low vision or color vision deficiency can read comfortably. That's why we want to:

• Use high contrast colors such as black text on a white background

• Avoid making color the sole indicator of meaning.

You probably wouldn't accept a student paper that looks like the one shown on the right, and your Brightspace page shouldn't look like it either. Academic standards like high-contrast black text and left-justification exist to make reading effortless.

Beyond just font choice, proper headings can act as a roadmap for your content, allowing readers to scan the page and helping screen-reader users navigate directly to the information they need. The goal of formatting is to provide a clear, logical structure that prioritizes the reader.

📷 Accessible Images

Thinking back to Carin's example again, now we want to think about images. What will happen if Carin's screen reader encounters one? When a screen reader comes across an image, it can't see the image like we do and make meaning of it. It needs someone to tell it what it is looking at. That's where alt text comes in. Alt text is a way we label images. We describe to the screen reader what we want it to see. Much like a podcast host does for their audience. But not every image needs to be described. The screen reader doesn't care about your decorative fall leaves on your fall free days page, but it does care about that important graph showing the weight of the major assignment categories in the course. So how does it tell which images are important and which are not? We tell them.

In tools like Brightspace, we can either add alt-text when we upload an image or mark an image as decorative. Marking an image as decorative tells the screen reader to skip over it. When we add alt text, we tell the screen reader what to say to the student, so it is important that we get it right. Check out WC3's Alt Text Decision Tree to help you determine if your images need alt text.

Finally, we want to consider image resolution. Some individuals (myself included) zoom in on the screen to see it better. Best practices say we want viewers to be able to zoom in by up to 400% before the image starts getting grainy. This can be especially difficult when using images of text, so we recommend you avoid them when possible.

Pause and Reflect

We have gone over a lot of ideas so far in isolation but rarely do we only have an image or only have text, so let's take a moment to see what some of these things look like when they are put together. Images aren't just pictures; they include things like diagrams and charts.

Take a look at the two charts below and notice the differences. They show the same information, but they have different color contrast, different labeling systems, and different alt text. Since alt text isn't something we can see on the screen, I have added a caption to each image, quoting the alt text provided.

"Bad" Image Example

Alt text provided: The dark red section shows that poorly scanned PDFs are less than 1/4 of the accessibility problems that drive Alexa crazy.

"Good" Image Example

Alt text provided: Pie chart outlining the accessibility problems that drive Alexa crazy. Poor color contrast is the number 1 problem, making up over 40% of the issues, images without alt text coming in closely behind it at just over 30%. Other issues cited in the graph include poorly scanned PDF (15%), files without proper heading structure (9%), and videos without captions (1.5%).

🎧 Accessible Audio

Carin's screen reader converts text to audio, so audio must be the most accessible of all content types, right? Wrong. Think about individuals who are deaf or have a hearing impairment. How will they access the content? I'm so glad you asked! We need to provide the audio in a different format -- text. We do this in two ways: captions and transcripts.

Captions are text that appear on the screen as someone is speaking. A transcript is a written document that contains all of the captions from a piece of audio. The good news is, as long as you make captions using one of Eastern's video hosting platforms (Panopto or Media Library), a transcript file will automatically be created for you!

🎥 Video: Putting it ALL Together

Often video content combines text, images, and an additional factor -- audio. We are off to a good start with practice putting text and images together... Now throw out most of what you know. When we get to video, that changes things. Unless you are providing your slides to students (which, I recommend you do) your alt text and file structure isn't going to make a difference within a video itself. Here we are going to rely on the visual and auditory elements. But what if someone has a disability that affects one of those senses? That's where best practices come in!

We don't need to worry about putting alt-text on images, but we should instead verbally describe the image in the video. Imagine you are giving a podcast, and your listeners cannot see your slides. It's important that you give them the necessary information in your talk. This will be picked up by the captions for learners who are deaf or have a hearing impairment.

A Special Note on PDFs

PDFs are a difficult document type to make accessible as they are usually created in an inaccessible way. Check out the CTLT's Lunch and Learn session on PDFs to get more detailed information. Here are some key things to note:

1. Born-digital documents are preferable to scanned PDFs, so check with the library to see if we have access to an eBook.

2. If you are scanning a PDF, it needs to go through optical character recognition (OCR). That can be done during or after the scan.

3. If you are converting a digital document (such as a syllabus or slides) to a PDF, you need to follow the above directions for text and images AND export, download, or save as a PDF. If you are given a "Print to PDF" option, do not use it; that will flatten all of your hard work into an image that does not recognize any of the "tags" or elements you previously worked so hard on.

Final Thoughts

Carin's screen reader is just one example of an assistive technology someone might use. There are many others out there, but you don't need to know them all. The important thing to remember is this: we used Carin as just a case study for this lesson, but following the principles listed above will make your content more accessible for all of your students, not just those using a screen reader.

Enjoy this article? Read the rest of this issue of the Flex Gazette!