Website Accessibility Tips

A 3-minute microlearning article to improve your website

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!