• 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

• 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.

• 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:

1. One red fish with fins
2. 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.

• 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.

1. Put your mouse aside (seriously—move it out of reach!)
2. 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
3. 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