Accessibility Evaluation

GOALS

The goals of this project were to conduct an accessibility evaluation of Modcloth.com using three evaluation methods:

Automated code inspection: 

As the name suggests, this method is automated. This test is done by entering the URL of each page on a code checking software (SortSite) and CSS codes on the page in accordance with the WCAG Guidelines and will identify the WCAG conformance on the standards levels A, AA and AAA. 

Manual code inspection: 

Manual code inspection is done to support the automated code inspection to rule out any qualitative measurements that the automated check must have missed out for example: Do the ‘Alt’ text added to the pictures correctly defines it?  

Manual evaluation also evaluates keyboard navigation and screen reader functionalities. 

Experience walkthrough: 

Experience walkthrough provides a clearer view of how accessible the website is to people with disabilities. To conduct this test we will perform tasks using keyboard-only navigation along with a screen reader. When running these tests we are trying to find how accessible the website is when only the keyboard and screen reader is used.

RESULTS – INSPECTION & WCAG 2.1 CHECKPOINTS

Summary Results – Automated and Manual Code Inspection

Few pages of my Code Inspection documentation, click on the pictures to see details

Summary Results – Experience Walkthrough

RECOMMENDATIONS

Web Content Accessibility Guidelines (WCAG) has 12 guidelines divided into 4 basic principles for accessibility also known as the P.O.U.R guidelines. We have divided the issues we identified according to the guidelines. 

PERCEIVABLE

  • Some Images are not labeled for Screen Readers, making them inaccessible to users with vision issues
  • Recommendation: Alt tags on these images are missing, they need to be added in HTML code
  • Incorrect HTML structure in form fields makes it confusing for blind people to perceive what they are working with
  • Recommendation: Adding correct HTML structure

OPERABLE 

  • Some content is not accessible by Keyboard, which makes it inaccessible and some users. For example, keyboard and screen readers were not able to identify a checkbox that asked for email communication, and selecting product reviews took them to a popup, which clicked with a mouse took them to the actual reviews
  • Recommendation: Provisions should be made in the code to make sure each content is accessible through the keyboard
  • Skip to Content and Skip Navigation option are not available on any pages which make the process very tedious, as example if the user clicked on a product to see details, he has to tab through the header and nav links to actually read the product description 
  • Recommendation: Skip to Content link and Skip Navigation Link should be added to assist people who are using Keyboard only navigation
  • Check out page has dynamic content, the screen reader does not read new content added. Instead moves on to the next item in the order. This is confusing for the blind and people with low visibility to find out that they have missed out on the process. 
  • Recommendation: Dynamic content code should be reviewed and added to the focus order to conform to ARIA guidelines 
  • Navigation is accessible through a screen reader/keyboard as well as a mouse but the screen reader reads through each dropdown item before moving to the next menu option. There are a total of 172 links on the navigation, it’s a tedious as well as frustrating process to go through for any user. 
  • Recommendation: provisions should be made in the nav code to read top-level menu items, and only read dropdown links if the menu item is selected 

UNDERSTANDABLE 

  • The pages passed these guidelines, no level A issues were found 

ROBUST

  • Some pages have multiple content with same IDs which is not allowed in HTML
  • Recommendation: Each ID should be unique to a content, IDs need to be updated 
  • Form names are missing in some pages which makes it difficult for a blind person to identify the purpose of the form since screen readers can’t read it
  • Recommendation: Add Form names in correct HTML structure

–x–