Chineme Ozumba

Section 508 Audit of Women Enabled International website

The Story

The website of Women Enabled International was redesigned by Experience Dynamics. The process involved accessibility testing in compliance with the United States Government legislation, that mandates all electronic and information technology be made accessible to persons with disabilities. 

I conducted accessibility testing analyzed to identify potential accessibility issues on the website. I also carried out usability testing with blind and vision impaired users. The analysis was done between  June and July 2021.

The audit was done in 5 stages:

  1. Observation based on WCAG2 guidelines.

  2. Screen reader compatibility test.

  3. Analysis with ANDI accessibility tool.

  4. Analysis with WAVE accessibility tool.

  5. Usability testing with Blind and vision impaired users.

Stage 1 

Observations based on WCAG 2.1

Observations were made in line with Web Content Accessibility Guidelines, which defines how to make web content more accessible to people with disabilities . 
Collage of two pages showing inconsistent focus state styles

Keyboard Test

Tabbing through the site was difficult because some elements had invisible keyboard focus state.
Focus state on home page search button

No Focus

Several elements did not have keyboard or hover focus. 
screenshot of 3D tour

Multimedia

There were no multimedia content which would require transcripts or captioning.
Form with green and white color scheme

Red - Green Colors

There were no red or green colors in the color scheme of the website
Home page of apartments.com

Dynamic content

There was no automatic dynamic content, which could lead to seizures.
Apartments.com home page

Clutter

The pages was not cluttered which will give a good screen reading experience for the visually impaired
Footer of home page showing unordered list of links

Lists

Unordered lists were used in the footer of the home page. This could increase difficulty for people with cognitive disabilities.
Some sections of the home page showing links that are not underlined

Links

Some links were not underlined, while some opened on a new browser tab. This is not good practice because blind users find it difficult to access new browser tabs.
search results page showing absence of appropriate headings

Headings

The use of H1 and H2 headings was inconsistent on the website which will make it difficult for screen readers to differentiate between sections.
Search result page

Fonts

Font family used throughout the page was 'Inter Var', a sans serif font which is good for reading from computer screens. 
section of footer with dark grey on light grey background

Reflow

For different screen sizes, there was no loss of information or functionality and no need to scroll in two dimension. 
screenshot of video

Resize text

Text can be resized without assistive technology up to 200 percent without loss of content or functionality.

Stage 2

Screen reader compatibility check
home page showing Chromevox focus state

Checking compatibility with screen readers using ChromeVox, VoiceOver and TalkBack

The site was compatible with screen readers however, it is still necessary to test with Blind and vision impaired users, who rely completely on screen readers for access.

Stage 3

Analysis using ANDI Tool

The website was evaluated using ANDI Accessibility Tool .

Errors identified include missing and empty heading tags, empty and redundant links, empty alt text, missing form labels among others.
summary of issues identified on the home page
Summary of issues identified on home page
summary of issues identified on the search page
Summary of issues identified on the search result page
poor contrast labels
Poor contrast
empty header labels
Empty headers

Stage 4

Analysis using WAVE accessibility tool
Screen shot of Chicago, IL apartments
Screenshot of search results for apartments in Chicago, IL

Stage 5

Usability testing with Blind and Visually impaired users

The HTML code of the website was analyzed using W3C Markup Validator to identify errors that can affect accessibility.

Errors identified include:
  1. The absence of 'lang' attributes.
  2. The absence of heading (H2-H6) elements, which can confuse users using screen readers.
  3. The absence of alt text on images.
  4. Empty links.

Recommended Actions

Based on the findings of the 7 stages of analysis, I have made the following recommendations:

  1. For the footer, black or very dark grey would give better contrast with the light grey background.
  2. Focus states should be thick solid lines with glow property for better visibility.
  3. Empty or redundant buttons and links should be removed
  4. All pictures should have appropriate alt text.
  5. All tab index attributes should be checked to ensure that they have a value of 0. All aria items should be appropriately labeled 
Screen shot of contrast checker analysis of search button with recommended colors
Using white on a darker shade of green in the search buttons can increase the contrast.
To meet the contrast specifications but remain similar to the original colors, I suggest the color combination as follows:
  • Background color:
    #528401 / RGB 82, 132, 1
  • Foreground/Writing:
    #FFFFFF / RGB 255, 255, 255
  • Contrast ratio: 4.51

Reflections
Carrying out this analysis, has helped me become more conscious, of the ways accessibility issues could be addressed at the design stage.

I also learnt that although screen readers aid accessibility, it is important to go beyond the use of various screen readers in determining accessibility of a web or mobile app.

Most importantly, it is essential to include users with disabilities in user research and testing, to ensure a good accessibility experience for all. 

Thank you for viewing my case study

I would like to create great experiences with you. 

Contact Me
Name E-mail Message Submit