Examined the accessibility with screen reader and scanning tools

Duration
Nov. 2022 (2 weeks)
Skill
Accessibility evaluation, HTML
Tool
VoiceOver, WAVE, ANDI, Colour contrast analyzer
Team
Individual project

Intro

Although many shows and events now provide accessible seats, caption glasses, touch tours, etc. to cater to the diverse needs of disabled people, the process of "purchasing tickets" is still relatively inaccessible. Therefore, I conducted an accessibility evaluation for ticketmaster's website to identify its accessibility issues.

Result
  • A report with issues identified and suggested fix.
  • Evaluation of the main page and the interactive seat map.
  • Successfully identified errors in color contrast, size of the content, screen reader navigation and code labels.

Problem

Currently there are 2 issues troubling the accessibility of live performances.

01 Obstacles appear not only during the performance

While most accessibility aims to solve problems that arise during the performance, not much attention is put to how disabled people purchase the tickets or how they navigate the venue.

02 People with visual impairments are ignored

People with visual impairments are a subset that are prticularly overlooked, as many will simply assume that they don't "watch performance".

How visual impaired people buy tickets right now is a lengthy and not-so-comfortable process. With unfriendly website, they usually have to write an email or make a phone call to book a ticket. Anyone who's ever called a customer service in the U.S. will know how frustrating the long queue can be.

Goal

The goal of this project is to identify accessible problems for ticketmaster, the biggest e-ticket seller in the market. Apart from usability issues, I also used VoiceOver (a screen reader) to identify issues particularly pertain to visual-impaired users.

Method

Method 01: WCAG guideline

WCAG stands for Web Content Accessibility Guidelines. It is developed by an international organization in the hope of bringing a single shared standard to web content accessibility.

The guidelines are categorized into 3 level, from A to AAA, indicating the level of conformity.
In my evaluation, I only make sure the website follow the A and AA level of WCAG 2.1 guidelines, as this is the standard most companies hold.

Method 02: Automatic Inspection

I used WAVE and ANDI, extensions on chrome, to automaticaly inspect the page and see if there were any common errors.

I then further checked the reference of each error to see which guideline is violated.

Method 03: Manual Inspection

Eventhough WAVE served as an useful tool that helped me to identify most of the problems, I proceeded to examine the pages with VoiceOver and color contrast analyzer in case there was anything missing.

VoiceOver or other screen reader is also the most common tools people with visual impairments use and allows me to empathize with users' context.

Method 04: Code Examination

The last step of the evaluation process is to check the code.
Many issues regarding aria label and alt text need further code examination as automatic scanning tools may report false errors.

In the example above, we can see that ANDI indicated the banner was regarded as a background image and needed to be decorative only. However, if we look into the html code, we can see that there was a <img> tag with alt property inside the <div>. While we looked further into the CSS, we would find the issue happened because the <div> was assigned a background-image property.

Findings

Main Page

Empty frames over the page

When I was going through each title with Voiceover, I kept entering empty frames, and the screen would automatically scroll to the top that I had to press the down arrow key to get it back.I found there to be a lot of empty frames that were not visible and didn’t contain anything.

Violation

SC 2.4.1 (A) Bypass Blocks
SC 4.1.2 (A) Name, Role, Value

Suggestion

As the guideline provided by the University of Illinois suggests, “For frames with no visible content, explicitly identify the frame as having no information for the user.” Hence we can either use iframe instead, or give those frames a title.

Interactive seat map

Text should be used to convey important information

Although screen reader user can hear the information about the seats when they select them from the ticket list on the right-hand side, that information is not comprehensive. For example, we can see where the seat “Sec 230, Row X” is facing and how far it is from the stage on the map, yet those important details are not provided to screen reader user.

Violation

SC 1.4.5 (AA)

Suggestion

The alt text for each seat should provide the comprehensive information for user to make informed choices.

Deliverable

The final report containing the complete list of issues and possible suggestions can be found here📑.

Made by Wan-Ting
LinkedInEmailMedium