DoIT Alerts

Accessible web content ensures that all users, including those using screen readers, keyboard navigation, or assistive technology, can interact with your website and digital content. At UMBC, this applies to both Sites@UMBC, myUMBC groups, and other platforms that present course, departmental, or university information.

Accessibility isn't just a legal requirement—it's part of inclusive, student-centered design. This article provides easy-to-follow guidance grounded in WCAG 2.1 standards and the POUR principles:

• Perceivable: Everyone can perceive the content (e.g., text descriptions for images).
• Operable: Everyone can navigate the site (e.g., keyboard-friendly menus).
• Understandable: Everyone can comprehend the information (e.g., clear instructions and consistent layout).
• Robust: Everyone can use the site across different devices and technologies (e.g., follow HTML standards and semantic markup).

Common Accessibility Issues

Even with accessible templates, website editors must ensure that their content meets accessibility standards. Below are common content types and how to improve them.

 

1. Content & Headings

• Use heading levels in order — don't skip levels.
• Use headings to organize content for both sighted users and screen readers.
• Don't simulate headers by resizing or bolding text.
• Quick Win: Start pages with a clear <h1> and use <h2> for major sections.

 

2. Color & Contrast

• Don't rely on color alone to convey meaning (e.g., "Items in red are overdue").
• Ensure text contrast is at least 4.5:1 for body text.
• Use tools like the WebAIM Contrast Checker.
• Quick Win: Check your headings and buttons for contrast with the background. Review this handy guide to UMBC Brand Color Contrast combinations.

 

3. Descriptive Links

• Use meaningful link text (e.g., "View our schedule" instead of "Click here").
• Avoid duplicate links with the same text that go to different places.
• Indicate when a link opens a new window or downloads a file.
• Quick Win: Hover over your links and ask yourself, do they make sense out of context?

 

4. Tables

• Use tables only for data, not for layout.
• Never use images of tables, instead use the tables themselves to display data.
• Ensure tables read logically when linearized by screen readers.
• Include row and column headers with <th> tags.
• Quick Win: Instead of a table, consider if you can present the same information in a list format!  Lists are easier for a screen reader to accurately present information for.

 

5. Images

• Images must have descriptions, even thumbnails and inline visuals. Not sure whether an image needs a description or if it should be marked decorative? Try this decision tree.
• Avoid using text inside images since screen readers cannot interpret them.
• Complex images (e.g., infographics, charts) should include a longer description or linked text alternative.
• Quick Win: Ask yourself, "What would I say if I were describing this image out loud?"

How to add descriptions to images in Sites@UMBC:

• Option 1: Edit the page → click image → pencil icon → add alt text → update.
• Option 2: Go to Media → Library → select image → add description.
• Click here for the wiki walkthrough of adding alt text on Sites.

6. Audio & Video

• All videos must include captions.
• Audio content should have transcripts.
• Avoid autoplay media or provide controls to stop it
• Quick Win: Use our video capture platform's auto-caption feature, then edit for accuracy. 

 

7.  Navigation & Keyboard Access

• Include a "Skip to Main Content" link at the top of each page.
• Ensure all interactive elements are accessible using the keyboard only.
• Avoid hover-only content (e.g., tooltips or dropdowns that don't work with keyboard focus).
• Quick Win: Try navigating your site using only the tab key.

 

8. Forms & Feedback

• Label all form fields clearly.
• Provide instructions for completing the form (e.g., required fields).
• Avoid placeholder-only labels — use actual visible labels.
• Quick Win: Use the preview mode and test your form with a screen reader.

 

Creating accessible web content is an ongoing journey that starts with these foundational steps. By applying the POUR principles to your daily work, you help make UMBC's digital landscape more robust and user-friendly for everyone. Let's continue to work together to keep our digital doors open to every member of our community.

 

Learn more about UMBC's website Digital Accessibility Remediation Project here!

 

 

• More Information about Website Accessibility Tips

What is Digital Accessibility?

Digital accessibility ensures that everyone, including people with disabilities, can access and use digital content and tools. Building accessibility into websites, documents, and course materials from the start helps everyone. It reduces the need for last-minute fixes, improves usability across the board, and supports a wide range of users — including those with temporary or situational challenges. Accessible design is smart design.

 

Four Quick Tips

Are you looking for easy ways to improve your digital content today? Here are four quick tips that will help you improve your content's accessibility: 

1. Include Alternative Text (Alt Text) to describe images for screen reader users. Find additional resources for Accessible Images here. 
2. Use Headings (Heading 1, Heading 2) to create a clear structure rather than just bolding text in documents, presentations, myUMBC posts, and websites. Find additional resources for Accessible Documents and Presentations here.
3. Provide descriptive link text (e.g., "Register for the Workshop") instead of vague phrases like "Click Here." Learn more about Website Accessibility here. 
4. Ensure all videos have accurate captions. Utilize Video Resources and Audio Accessibility Resources. 

 

UMBC's Commitment to Digital Accessibility

Your Work Matters. Whether you are sending a newsletter, updating a website, or sharing a video, you are helping build a more inclusive UMBC. Accessibility is not just a technical checklist; it is a shared commitment to ensuring that every Retriever and guest can participate fully.

Together, we can build a more inclusive digital experience for everyone at UMBC. 

• More Information about Quick Tips for Digital Accessibility

Specifically, Bass and Carpenter focused on the use of open educational resources (OER) and students' time on task practice in CHEM 101 and 102. Anderson, Cui and Goolsby-Cole focused on providing timely feedback on low-stakes assessments. Findings from both departments’ projects included better student-instructor relationships in the face-to-face classes of spring 2022 compared to the previous year's online classes. Also, the results of student surveys showed positive changes in student perceptions of feedback. Finally, all projects adopted an approach that emphasized using open educational resources (OER), where possible, and supporting productive practice through adaptive learning and formative assessments.

Long term, the goal of ELE is to eventually use these approaches to inform redesign of large, introductory STEM courses that promote equity in achievement for all students. Toward this end, a preliminary analysis of the use of adaptive learning in CHEM 102 showed an overall 10% improvement in exam scores and a decrease in the score gap between white students and students of color.

Note: As an experiment, the first "draft" of this post was initially generated by ChatGPT, summarizing the full ELE project report to focus on UMBC participants, and then revised by John Fritz and Tom Penniston. 

• Attached Image for Five Faculty Complete “Equity & Digital Learning” Grant
• More Information about Five Faculty Complete “Equity & Digital Learning” Grant