Top 5 Accessibility Mistakes on Higher Ed Websites—And How to Fix Them

Alliance

Jun 10, 2025 • 7 min read

Many higher education websites unintentionally block access to vital content. Poor accessibility frustrates users, exposes institutions to compliance risks, and damages trust. Colleges and universities cater to many users, including students and parents with disabilities. However, web teams often lack the tools, training, or time to catch accessibility gaps early.

Whether it’s a missing image description, unreadable text, or inaccessible forms, these issues make it harder for people to engage with your site and for your institution to uphold its mission of equity and inclusion.

This post breaks down the top five accessibility mistakes universities make online and shows precisely how to fix them, using clear, WCAG-aligned steps.

1. Missing or Improper Use of ALT Text

When images (photos, infographics, charts, etc.) lack proper ALT text, screen readers can’t describe them to users with visual impairments. This creates an immediate access barrier, especially for students or parents navigating key content like admissions pages or campus maps.

WCAG 2.2 guidelines require text alternatives for all meaningful images, and Section 508 standards similarly mandate that informational images have descriptive text. Missing or vague ALT text is a common mistake, and it has even triggered lawsuits when blind users cannot access visual content.

How to Fix It (Alt Text)

Add descriptive alt text to every important image: For each meaningful image or icon, include a concise but clear alt attribute describing its content or function. (E.g., <img src= “campus.jpg” alt=” Students in wheelchairs navigating campus pathways”> gives context.)
Use empty ALT (alt=” ") for decorative visuals. If an image doesn’t convey important information, leave the ALT empty so screen readers skip it.
Train content editors on alt text best practices: Ensure anyone who uploads images (web developers and content managers alike) knows how to write good alt text. Focus on the image’s purpose or the information it conveys in context.
Use CMS and audit tools: Use automated tools to identify missing or problematic ALT text across your site.

2. Poor Color Contrast in Branding and UI

Another common pitfall is insufficient color contrast – i.e., light text on a light background, or color combinations that are hard to read. Users with low vision or color blindness struggle when contrast is low, and even users with normal vision find low-contrast text straining.

To be accessible, text and background colors must have a high enough contrast ratio: WCAG 2.2 Level AA requires a contrast ratio of at least 4.5:1 for normal text (and 3:1 for large text). This ensures that nearly everyone, including those with visual impairments, can read the content.

How to Fix It (Color Contrast)

Use accessible color palettes: Choose text and background color combinations that meet contrast standards. Test your site’s color pairs using a contrast checker to ensure a 4.5:1 contrast ratio for body text.
Avoid problematic color combos: Skip combinations like light gray on white or pastel-on-pastel. Also, don’t rely solely on color to convey meaning—mark required fields with a red outline and an asterisk or label for clarity.
Test in real scenarios: Review your site on different screens and in various lighting conditions. What looks fine on a modern display may fail on older monitors or projectors. Consider input from users with color vision deficiencies.
Offer a high-contrast mode: If feasible, implement a “High Contrast” toggle or alternative stylesheet for users who need even greater contrast.
Maintain contrast in images and overlays: Ensure text overlaying images or colored sections is still readable (e.g., add a semi-transparent dark overlay behind white text on a photo). Subtitles or infographics should also use accessible color choices.

When your navigation doesn’t work without a mouse, it shuts out users who rely on screen readers or keyboard-only browsing. This includes students with motor impairments, blind users, and anyone using assistive tech. If dropdowns can’t be opened, menus vanish on focus, or tabbing skips entire sections, your site becomes a frustrating maze.

For higher ed sites—where visitors expect to find things like tuition info, program pages, or application links quickly—bad navigation isn’t just an annoyance. It’s a barrier to access. Worse, it often violates WCAG success criteria 2.1.1 (Keyboard Accessibility) and 2.4.7 (Focus Visible), making your institution vulnerable to legal risk under the ADA.

Implement ARIA roles and attributes wisely. If you’re using JavaScript for dynamic menus, ensure elements are marked with aria-expanded, aria-haspopup, and proper keyboard event listeners.
Use semantic HTML for menus. Structure your navigation using native <nav>, <ul>, and <li> elements so it behaves predictably with keyboards and screen readers. Avoid reinventing menu behavior with custom code unless you fully replicate native functionality.
Add a “Skip to Content” link. Place this at the top of the page so keyboard users can bypass the navigation and jump straight to the main content. It’s a simple fix that significantly improves usability.
Make sure the focus is always visible. Avoid CSS resets that strip the default focus outline, or replace it with a more visible custom style. Users must be able to see where they are while tabbing.
Test with real tools. Use screen readers like NVDA or VoiceOver and try navigating your menus with just a keyboard. If you can’t get to every page or get stuck, your users will too.

4. Missing Form Labels and Instructions

When form fields lack clear labels or instructions, students using screen readers are left guessing. A text box that says “Edit field” doesn’t tell someone whether to enter their name, email, or date of birth. And without guidance on required fields or input format, many users, especially those with disabilities, can’t complete the form.

This is a huge risk for higher ed websites, which rely heavily on forms for everything from admissions and financial aid to event signups and course registration. Broken or inaccessible forms don’t just frustrate users—they lead to drop-offs, complaints, and in some cases, legal action for violating WCAG criteria 1.3.1 (Info and Relationships) and 3.3.2 (Labels or Instructions).

How to Fix It (Forms & Labels)

Provide a text label for every form element: Use the <label> tag to tie labels to input fields (via the for attribute matching the input’s id). The label should clearly describe the field (“Email Address”, “Phone Number”, “Search Courses”, etc.). Screen readers will read this when the field gets focus.
Add clear instructions and input guidance. Tell users what’s required, what format to use (e.g., “MM/DD/YYYY”), and whether a field is optional or mandatory.
Accessible error messages: Ensure that form validation errors or success messages are conveyed to all users. Don’t rely on color alone (e.g., turning the field red). Tie error text to the related field using aria-describedby and provide plain messages like “Please enter a valid phone number.”
Never use empty buttons or links: Every interactive element needs an accessible name. If you have a button with just an icon (like a search magnifying glass), give it a descriptive label (e.g., <button aria-label= “Search”>🔍</button>). An “empty button” (no text or label) is an accessibility fail. Prefer text on buttons when possible (“Submit Application”) for clarity. If using images as buttons, include alt text or a hidden text label in the image.
Test forms with a screen reader: Use screen readers and keyboard-only navigation to complete each form. If you can’t tell what a field is for—or can’t submit the form—neither can your users.

5. Missing Video Captions and Transcripts

Multimedia content is increasingly prevalent on university websites – from promotional videos on the homepage to recorded lectures, webinars, and podcasts. A major accessibility mistake is failing to provide captions for videos or transcripts for audio content. Users who are deaf or hard of hearing cannot access the audio information in a video if there are no captions. This is such a critical issue that it has led to high-profile lawsuits: for example, Harvard University and MIT were sued by the National Association of the Deaf for not captioning thousands of online lecture videos and course materials. They ultimately reached a settlement to caption that content.

Section 508 and ADA Title II/III require public and federally funded institutions to ensure that all multimedia content is accessible. Without these, you not only exclude users with hearing disabilities but also others who might need captions (for example, someone in a noisy environment or a non-native English speaker can benefit significantly from captions).

How to Fix It (Multimedia)

Caption all videos: Promotional, instructional, or recorded lectures must include closed captions that accurately reflect speech and key sounds. Auto-captions are a starting point but must be reviewed for accuracy. Captions are required under Section 508 and Section 504, especially for federally funded institutions.
Provide transcripts for audio: For audio-only content like podcasts or audio announcements, offer a text transcript. This can be a simple text on the page or a downloadable document that contains all spoken content (and descriptions of meaningful sounds).
Include audio descriptions when needed: If a video has visuals not described in the audio (e.g., slides or campus tours), provide an audio-described version or a written summary. This ensures blind or low-vision users get the full context, as required by WCAG 2.2 Level AA (1.2.5).
Avoid auto-play or provide controls: Don’t auto-play media unless necessary. If used (e.g., looping background video), include clear controls to pause or stop it. Auto-play can disrupt screen reader users and those with cognitive disabilities. WCAG 2.2 requires stopping audio lasting over 3 seconds.
Use an accessible media player: Ensure all player functions—play, pause, captions, volume—are keyboard-accessible and screen reader-friendly. While platforms like YouTube, Vimeo, and HTML5 often include built-in accessibility, always test. Use proven players like AblePlayer or Video.js with caption support for self-hosted media.
Institutional captioning workflow: Set up a consistent process to caption all new videos through a third-party service or auto-captioning with manual edits. Make it policy that no media is published without a text alternative. Gradually address older content, starting with the most used, as part of an accessibility remediation plan.

Final Thoughts: Accessibility Is Ongoing, Not One-and-Done

Accessibility isn’t a checklist—it’s a practice. Every digital touchpoint should be usable for everyone, from admissions to alumni engagement. With these fixes, your institution moves closer to that goal while reducing legal risks and building a more substantial online presence.

Need Help Making Your Higher Ed Website Accessible? Let’s Build What’s Next—Together at Alliance

Creating an inclusive, compliant, and user-friendly digital experience requires more than good intentions—it requires strategy, expertise, and the right tools. That’s where Alliance Innovations comes in.

At Alliance Innovations, we do more than deliver digital solutions. We help you rethink what’s possible. Whether you’re launching a new platform, overhauling your tech stack, or accelerating transformation in a highly regulated industry, our experts bring the strategy, technical depth, and creativity to move your organization forward.

We specialize in:

Enterprise-grade digital transformation
Custom development, CMS/DXP, and mobile apps
Cloud architecture and performance optimization
UX design, messaging, and omnichannel personalization
Martech audits and roadmap planning

From healthcare and e-commerce to government, travel, and edtech, we bring decades of cross-industry insight to every engagement. If you’re ready to reduce technical debt, upgrade digital experiences, and create measurable ROI, it’s time to talk.

Ready to take the next step? Contact us to explore how we can help.