Scenarios and Solutions: Designing Accessible Courses

Introduction: The Critical Role of Instructional Designers in Accessibility

In the rapidly evolving landscape of digital education, the role of the Instructional Designer (ID) extends far beyond simply arranging content on a Learning Management System (LMS). IDs are at the forefront of digital inclusion, serving as the bridge between pedagogical goals and equitable access for all learners. Well-informed IDs are highly influential in helping educational institutions meet federal accessibility guidelines and serve the diverse needs of students with disabilities.

Research consistently underscores the necessity for digitally accessible content. According to the National Center for Education Statistics (NCES, 2017), during the 2015–2016 academic year, 19.4% of undergraduate students and 11.9% of postbaccalaureate students self-reported having a disability. In some institutions, such as Oregon State University, approximately 40% of online courses host students requiring specific accommodations or consultations from Disability Access Services. These statistics reveal that accessibility is not a niche requirement but a fundamental necessity for a sizable portion of the student body.

In collaboration with faculty, IDs can implement meaningful, proactive changes to course design. By adhering to frameworks like Quality Matters (QM)—specifically General Standard 7 (Learner Support) and General Standard 8 (Accessibility and Usability)—IDs pave the way for universal student success.

Common course development practices, as highlighted by Moorefield-Lang (2019) and Sutton (2020), include consistency in document creation, uniform headings, alternative text (alt text) for images, accurate video captions, descriptive hyperlinks, user controls for video content, and avoiding the reliance on color alone to convey meaning. But what happens when an ID encounters specific, complex challenges in the real world?

This comprehensive guide delves into four authentic scenarios frequently encountered in the field and provides practical, actionable solutions.

---

Scenario 1: The Challenge of Lecture Slides

The Scenario: A faculty member approaches you to design a course featuring multiple recorded lecture videos. Following standard practices, the faculty member used a popular presentation tool to create slide decks. Previous course evaluations indicated that students strongly prefer having the option to download these lecture slides to review offline at their own pace. The faculty member, aware of general digital accessibility principles, hands over a collection of slide decks for you to review, remediate, and embed in the LMS.

The Solution: While uploading native presentation files (like .pptx) is an option, it is not always the most universally accessible format, as students might not have the required software. The most common and reliable method is converting these slides into a Portable Document Format (PDF). PDFs are supported by most modern web browsers and maintain a static layout across various operating systems, ensuring the content is displayed precisely as the creator intended.

However, a PDF is only as accessible as its underlying structure. When reviewing and converting these slides, an ID must consider several critical elements:

1. Titles and Headings: Does every slide have a unique title and properly nested headings (e.g., H1, H2, H3)? Many presentation applications have built-in tools to enforce this, but you should always run an accessibility checker before and after PDF conversion. Headings allow screen reader users to jump between sections effortlessly.
2. Logical Reading Order: Sighted users naturally read from top to bottom and left to right (in Western languages). However, screen readers read elements based on the order they were added to the slide or how they are structured in the document's tags. Feature-rich editors like Adobe Acrobat Pro provide an Accessibility tool that allows IDs to view and manually rearrange the Z-order (object order) of elements on each page, ensuring a logical auditory flow.
3. Alternative Text (Alt Text): Informative images must have alt text describing their function and content. Conversely, decorative images (such as aesthetic borders or background swooshes) must be explicitly marked as "decorative" or artifacted so that screen readers skip them, preventing cognitive overload for visually impaired learners.
4. Color Usage: Colors on slides must maintain sufficient contrast against their backgrounds. Furthermore, color should never be the sole indicator of emphasis. Screen readers do not announce font colors, so a phrase like "the red text indicates a warning" will be entirely meaningless to a visually impaired student.

---

Scenario 2: Coding and Color Contrast

The Scenario: You are collaborating with a computer science professor on a highly technical, code-heavy course. To make the complex syntax readable, the professor relies on color-coding generated by their preferred text editor. They provide you with an exported version of these colored code blocks to embed in the course. Upon running an accessibility checker in the LMS, you are hit with hundreds of errors—all flagging inadequate color contrast.

Certain colors in the code syntax are too light against the background, making them unreadable for learners with low vision or color blindness. Because there are thousands of lines of code spread across the course, fixing each instance manually seems insurmountable.

The Solution: The Web Content Accessibility Guidelines (WCAG) set strict standards for color contrast to ensure readability: a 4.5:1 ratio for AA compliance and a 7:1 ratio for AAA compliance. When syntax colors fall below this threshold (especially when viewed in grayscale or by a student with color vision deficiency), the pedagogical benefit of syntax highlighting is lost and actually becomes a barrier.

1. Proactive Planning (The Ideal Approach): The most efficient solution requires early intervention. Work with the faculty member to establish an accessible, agreed-upon color palette predefined within their text editor before the code is exported. Tools like Moroshko and Arnautovic’s "Accessible-Colors" can help you build a WCAG AAA compliant palette.
2. Retroactive Remediation (HTML/CSS editing): If the inaccessible code is already embedded, you can fix it by diving into the HTML editor of the LMS. Colors are usually defined by Hex color codes (e.g., #0000FF for pure blue) or RGB/RGBA codes (e.g., rgba(0, 0, 255, 0.8)). By using a simple find-and-replace command across the HTML files, you can swap the inaccessible Hex codes for your approved, high-contrast equivalents.
3. Implementing Dark Mode: Many programmers prefer reading code in dark mode to reduce eye strain. Providing a high-contrast dark mode color palette and allowing users to toggle between light and dark modes is a fantastic example of universal design benefiting everyone.

---

Scenario 3: Complex Images and Alt Text Limitations

The Scenario: You are assigned to assist an economics professor in overhauling a rigorous third-year university course. The professor wants to introduce more visual aids, specifically complex economic graphs, charts, and scatter plots. Integrating the images into the LMS is easy enough. However, your accessibility checker flags all new images. Simply typing a 150-character alt text description is wildly insufficient to convey the nuanced data contained in a multi-variable economic chart.

The Solution: While older screen readers struggled with long alt text, modern readers do not have strict character limits. Still, best practices dictate keeping standard alt text brief (around one to two sentences) so it doesn't disrupt the flow of the page. For complex images, alt text alone is not enough; you need a "long description" strategy.

1. HTML Editing and ARIA Attributes: The most robust method involves editing the website's HTML code. You can write out the detailed explanation of the graph in a text block on the page and assign it an HTML ID (e.g., <p id="chart-desc">). Then, in the image tag, you add an Accessible Rich Internet Applications (ARIA) attribute, specifically aria-describedby="chart-desc". This programmatically links the image to the text block, informing the screen reader that the text serves as the image's detailed description.
2. Screen-Reader-Only Classes: In LMS platforms like Canvas, you can use CSS classes like screen-reader-only. This visually hides the long description from sighted users (keeping the visual design clean) while remaining fully readable to screen readers. Caution: Only use this if the detailed description isn't vital for sighted students. Usually, all students benefit from detailed text explanations of complex charts.
3. Captions and Context: If editing HTML isn't an option, use the rich content editor to place the long description immediately adjacent to the image (often using the <figcaption> element). The standard alt text should briefly state what the image is and instruct the user to read the surrounding text for details (e.g., alt="Supply and demand curve for Q3. Detailed data is presented in the text directly below.").

---

Scenario 4: Interactive Learning Objects (ILOs) and Virtual Labs

The Scenario: A biology professor is transitioning a face-to-face course online. The original course heavily relied on physical laboratory assessments. To replicate this, the professor and a multimedia development team are creating Interactive Learning Objects (ILOs)—digital lab simulations where students must drag virtual scientific instruments, drop chemicals into beakers, and toggle digital buttons to observe reactions.

As the ID, you realize that the interactive elements have been designed exclusively for mouse interactions.

The Solution: Interactive Learning Objects are incredibly powerful for engagement, simulating real-world phenomena without physical limitations. However, bespoke ILOs built in external tools (like H5P or custom HTML5/JavaScript apps) pose severe accessibility risks if not scoped properly from day one.

1. Advocating for Alternative Interactions: From an accessibility vantage point, you must anticipate that not all learners can use a computer mouse. Students with motor disabilities might rely entirely on a keyboard, switch devices, or voice-controlled assistive technologies. During the scoping phase, you must mandate that the multimedia team builds keyboard operability into every draggable object and button.
2. Preventing Keyboard Traps: During testing, you must rigorously test the ILO using only your keyboard (specifically the Tab, Space, Enter, and Arrow keys). A common issue when embedding ILOs via iframes is the "keyboard trap"—a scenario where a user can tab into the interactive object but cannot tab out of it to access the rest of the LMS page. Identifying this early allows developers to fix the iframe's focus management.
3. Alternative Assessments: If full accessibility within a complex ILO proves technically impossible or cost-prohibitive, you must work with the faculty member to develop an alternative assessment. This alternative must align with the exact same learning outcomes, perhaps through a descriptive case study or a data-analysis assignment, ensuring equitable academic opportunities.

---

Conclusion

The rapid expansion of online education has cemented accessible course design as an absolute necessity rather than an optional afterthought. The scenarios presented—remediating slide decks, fixing color contrast in coding environments, providing long descriptions for complex graphics, and ensuring interactive labs are keyboard accessible—demonstrate that accessibility is an ongoing, proactive practice.

The key to successful digital accessibility lies in providing robust support for faculty through knowledgeable Instructional Designers. By staying current with coding practices, HTML/ARIA standards, and the nuances of assistive technologies, IDs can anticipate barriers before they affect students. In doing so, IDs champion the creation of truly inclusive learning environments where every student, regardless of their physical or cognitive abilities, has the equal opportunity to succeed.

---

References

Mancilla, R. (Ed.). Guide to Digital Accessibility: Policies, Practices, and Professional Development. (Based heavily on Chapter 12: "SCENARIOS AND SOLUTIONS: An Instructional Designer’s Perspective on Creating Accessible Courses" by Philip Chambers).