Overview
Role
Tools
Approach
For this audit, I focused on the home page, the primary entry point for all users. Ensuring accessibility at this central touchpoint is essential to creating an inclusive and seamless user experience.
The landing page of SFSU's CS Department provides important information & resources for current & prospective students. How can we ensure that the content is accessible and inclusive for all users?
Step 1
Perform automated accessibility checks to establish a baseline — using WAVE, Lighthouse and aXe Devtools.
Step 2
Conduct manual testing for keyboard navigation, semantic HTML, and alt text.
Step 3
Cross-referenced findings with WCAG 2.1 AA success criteria.
Step 4
Document findings and prioritize issues based on severity + proposed solutions.
Process
The automated tools returned decent accessibility ratings. Lighthouse gave a score of 96, aXe Devtools 100% (0 issues detected). WAVE was able to point out some missing elements and issues related to semantic HTML.
Automated tools establish a baseline, however, manual checks are crucial to ensure compatibility with screen readers and keyboard navigation.
After digging deeper with issues raised by the WAVE tool and manual checklists, I found the following issues:
Key Findings
Keyboard trap in header (2.1.2)
When navigating via keyboard, the focus becomes trapped in the site header within the first few interactions with the website. The focus loops through the search input bar, search icon and the radio buttons.
*Cross-Testing Browsers: The keyboard trap is only present in Google Chrome, not in Safari. It is critical to ensure accessibility across multiple browsers and account for all use cases.
Impact
This creates a critical barrier for keyboard-only and assistive technology users, preventing them from advancing to the main content on the website and accessing primary information such as course listings and department resources.
Recommendation
These issues may be caused by JavaScript event handlers and custom modals that don’t allow focus to leave.
Ensure proper focus management in JavaScript.
Manage tab focus correctly, ensuring correct logical focus order in HTML.
Avoid tabindex values > 0.
Missing fieldset value for radio buttons (1.3.1)
The HTML is missing a <fieldset> and <legend> element for these two radio buttons that affect search results. There is no descriptive grouping present that informs users on what the options are intended for.
Impact
<fieldset> structure provides visual and structural grouping of related input/elements. A <legend> is required for a screen reader to identify the function of the group. Without these elements, users using screen readers or other AT may not have an optimized interaction with the form and be presented with illogical grouping.
Recommendation
Put the description of the group (SF state, this state) in a <legend> element.
Give an informative description on what these radio button elements are meant to toggle.
Wrap the content in a <fieldset> element.
(Additional) Change "This Site" to a more descriptive label.
Before
After
Results
<fieldset> and <legend> elements group the radio buttons in a logical manner, improving accessibility with assistive technology and overall user experience.
Before
After
Empty h2 header
An empty h2 element is present in the home page. The sequential headers jump into h3. Headers are being used for style and not structure.
Impact
Empty h2 elements disrupt the heading hierarchy, causing screen reader confusion with no useful content provided.
Recommendation
Remove the empty h2 line from code.
Replace the following headers with proper sequential headings (h2) and style in CSS.
Text as an image + poor alt text (1.1.1, 1.4.5)
The main title of the website ("Department of Computer Science") is currently embedded in an image, not conveyed through semantic HTML text.
Impact
Screen readers cannot parse text that’s baked into an image. This limits scalability as well for low-vision users. In addition to the image-embedded text, the alt-text for the photo does not provide any useful meaning.
Recommendation
Use real HTML text to convey words, stylize in CSS for decoration and design.
If the photo must be used, revise alt-text to: “A computer on a blue background, with text ‘Department of Computer science’”
Before
After
Opportunity for higher conformance in text contrast (1.4.3), low-quality images
Text color contrast in the footer achieves the WCAG 2.1 AA standards (5.74:1), however can be easily fixed for higher conformance. In addition, the landing splash photo is pixelated and low quality, even without zoom in.
Impact
To help low vision users, using a darker background against white text would help readability. AAA standards can be achieved with an easy fix in background color. Low quality images, especially in this case with embedded title text is not accessible and negatively impacts the overall user experience.
Recommendation
Increase color contrast in footer element by using a darker background
Use a higher quality landing image, or even better, use semantic HTML text to convey the main title.
Example mockup of increased contrast (16.1:1)
Summary + Next Steps
Overall, San Francisco State’s CS Department website has strong content organization and achieves baseline accessibility criteria. However, there are critical issues with keyboard traps and heading structure, creating barriers for keyboard navigation and screen-reader users. Addressing these issues, along with minor improvements on image quality, proper HTML for radio buttons / grouped functionality sections will improve usability for individuals with disabilities and move closer towards 2.1AA compliance.
Back to Projects