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 page 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.
- 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
Visual Example of our Headings:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
These types of emphasis create visual interest, but that emphasis doesn’t translate well on a screen reader. They should never be used in replacement / instead of headings!
italics
bold
underline
strikethrough
- 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.
Readable Backgrounds
|
#303030 |
#2b2b2b |
#1f1f1f |
#303030 |
#1b1c1e |
#63b7cd |
Types of poor readable backgrounds: Fails WCAG AA level |
#ffffff |
#fdb515 |
- 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 — do they make sense out of context?
- Use tables only for data, not for layout
- Never use images of tables — use the tables themselves to display data
- Ensure tables read logically when linearized by screen readers
- Include row and column headers with <th> tags
- Sites and myUMBC do not support creating or editing tables, but you can use Tables Generator for HTML
Quick Win: Try reading your table aloud — does it make sense?
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.
Example table:
fish |
color |
fins |
one |
red |
yes |
two |
blue |
no |
Example replacement list:
- One red fish with fins
- Two blue fish without fins
This is a simplistic example, but it works well for all but the most complex data tables.
- 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?”
Adding 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
Adding descriptions to images in myUMBC:
-
- Edit the post or event
- Thumbnail: Enter description
- Inline image: Use “Add Alt Text” feature
- Save!
- Learn more with this FAQ.
- 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. Note: UMBC uses Panopto through Dec 2025 and will start using YuJa in 2026.
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
The 2-Minute Keyboard Challenge
Open your department’s website, your professional blog site, or your course in the LMS and complete this challenge.
- Put your mouse aside (seriously—move it out of reach!)
- Try these basic commands:
- Tab key: Moves forward through links, buttons, and form fields
- Shift+Tab: Moves backward
- Spacebar: Activates a button or toggles a checkbox
- Arrow keys: Navigates within text or menus
- Complete these quick tasks in a webpage:
- Navigate to a heading
- Follow a link
- Fill in a form field or checkbox
- 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
Using Accessibility Checkers
UMBC is currently in the process of switching from Monsido (Acquia Optimize) to Silktide. Check back soon for more information!
Additional Tips for Faculty & Staff
Resources
UMBC Training
External Resources
WebAIM (web accessibility in mind)
W3C.org