And Now She Rises is a non-profit dedicated to helping abused women reclaim their lives. The founders asked me to identify any accessibility issues visitors to their website might encounter. I reviewed four key pages (Home, Press, Impact, Panel Talks).
.png)
A closer look at missing visible focus indicators: Users with disabilities, such as motor impairments, often rely on the keyboard to navigate websites. As they press the Tab key to move through interactive elements like buttons, links, and form fields, they expect a clear visual indicator (such as a border or highlight) to show which element is currently in focus. Without a focus indicator, navigation becomes difficult or impossible.
I tested the contrast of 3 prominent color combinations and found their contrast ratios were well under the minimum accessible contrast ratio of 4.5:1.
.png)
AXE analyzes the coding of websites. When inspecting the 4 main pages, I found a number of serious and critical issues:
.png)
Using a screen reader allowed me to experience firsthand several errors that made navigating the website and understanding the content challenging.
.png)
A closer look at missing alt text for images: Images throughout the And Now She Rises website play a key role in telling the non-profit's story by showing community involvement, event scale, and the impact of its activities. Without alt text to describe the image, visually impaired users miss out on this visual story and the important data that illustrates the non-profit's amazing impact.
.png)
.png)
The text doesn’t stand out enough from the background because the colors are too similar. Low contrast can make reading difficult for everyone, but it’s especially challenging for people with visual impairments.
To address this, replace the text color #D0D0D0 with #515151 in order to raise the contrast to 7.6:1. To make the text on the homepage more readable, I would replace the current background and text colors #FD7076 and #FE5E78 with #C40D65 to raise the contrast to 5.79:1.
Alt text is crucial for users who can’t see images, as it allows them to understand the content through a screen reader.
To address this, add descriptive alt attributes to all meaningful images, and use empty alt for decorative images
The carousel (slideshow) moves automatically and doesn’t have buttons to pause or control it. Auto-rotating content can be frustrating and hard to follow, especially for users with cognitive or motor disabilities.
To address this, add control buttons and a pause function to the carousel to give users more control over the content.
Forms use placeholder text inside the input fields instead of clear labels outside. Labels outside the input fields are crucial because placeholder text disappears when users type, which can be confusing, especially for people with cognitive disabilities or who use screen readers.
To address this, ensure each form field has a clear, visible label outside the input field to improve clarity and usability.
The embedded podcast clip doesn’t offer subtitles or a transcript. Without these options, users who can’t hear the audio won’t know what’s being said, excluding them from the content.
To address this, provide a link to a transcript directly below the player or use an alternative media player that supports captions
When navigating with a keyboard, it’s hard to see which part of the page is currently selected or “in focus”. People who use keyboards instead of a mouse rely on focus indicators to know where they are on a page.
To address this, implement visible focus indicators using CSS to ensure that all interactive elements are easily identifiable when navigated by keyboard.
The SoundCloud player uses incorrect ARIA roles and attributes (e.g., aria-role="img" and role="bar"), which can confuse assistive technologies and hinder accessibility.
To address this, replace aria-role="img" with the correct role="img" attribute. Replace role="bar" with role="progressbar", and include relevant ARIA attributes like aria-valuenow, aria-valuemin, and aria-valuemax to fully describe the progress bar's state.
The iframe containing the SoundCloud player does not have a title, making it difficult for screen reader users to understand what content is embedded.
To address this, add a descriptive title to the iframe, such as "Podcast clip: Interview with John Doe," to provide context for screen readers.