Information Technology Services

Here are the top five most important things to keep in mind when working toward ADA compliance on your SIUE website:

1. Provide Text Alternatives for All Non-Text Content

Why It Matters:

Users with vision impairments often rely on screen readers. If images, videos, buttons, or icons lack text alternatives, those users miss critical information.

What to Do:

• Use alt text (alt="") for all informative images. It should clearly describe the purpose of the image.
• For decorative images, use an empty alt tag so screen readers skip them.
• Provide captions or transcripts for audio and video content.
• Label form fields properly so screen readers can describe them.

Example:

<img src="team-photo.jpg" alt="School of Engineering winning an award at Nationals">

Why It Matters:

People with color blindness or low vision may not be able to distinguish between similar hues or rely on visual cues alone. And while the constraints in Cascade (the CMS for our SIUE website) do not allow for a lot of color manipulation for end users, should you ever find yourself in a situation where color is being added to your website, please keep the following in mind.

What to Do:

• Make sure text has a contrast ratio of at least 4.5:1 against its background.
• Never use color as the only means of conveying information (e.g., “Click the green button” should include text or icons too).

Tool:

Use WebAIM's Contrast Checker to test your colors.

Why It Matters:

Users with motor disabilities may use only a keyboard (or keyboard emulator) to browse the web. If they can’t navigate without a mouse, the site becomes unusable.

What to Do:

• Ensure that all interactive elements (menus, buttons, links, forms) can be accessed using the Tab key.
• Use visible focus indicators so users can see where they are on the page.
• Avoid keyboard traps where users can get stuck in a section.

Pro Tip:

Why It Matters:

Proper structure helps screen readers understand and navigate your site more easily. It also boosts SEO (Search Engine Optimization)!

What to Do:

• Use headings (<h1>, <h2>, <h3>, etc.) in a logical order. These are available in the 'Format' pulldown menu in the Cascade editor.
• Avoid skipping heading levels (like jumping from <h1> to <h4>).
• At least one and no more than two h1's are required per page. The page title is automatically an h1, so it's probably best to just start the body content of your page with an h2 and not use any h1's in the body section.
• No more than 50% of your page text should be a heading. Use headers, but use them appropriately.

Example:

Why It Matters:

Users with cognitive disabilities or screen reader users may get lost or confused if forms don’t include clear guidance or feedback. Our form creation apps that we use at SIUE (Qualtrics & Forms in Office 365) do a lot of this already for you. But please keep these in mind when creating forms, especially if you are coding your own forms.

What to Do:

• Add visible and descriptive labels for all form fields.
• Provide instructions for what format a field expects (e.g., “Use MM/DD/YYYY for date”).

<label for="email">Email address</label>
<input type="email" id="email" aria-describedby="emailHelp">
<small id="emailHelp">We'll never share your email with anyone else.</small>

After making changes, run your site through an accessibility evaluation tool. Cascade has a built in accessibility checker that runs when you 'Submit' a page before publishing and displays the results, but you can also use 3rd party applications to run a check on published pages:

• WAVE by WebAIM
• Google Lighthouse
• axe Accessibility Checker

Making your website ADA compliant isn’t a one-time fix—it’s an ongoing commitment to inclusivity. When you implement the five areas above, you’re building a site that’s not only legally safer but also more welcoming to all. Cascade helps making your site ADA compliant a little easier, but if you're adding content to a website, you're still responsible for making sure the content you add is ADA compliant.