UX Research + Design
bookmyshow.com
WCAG 2.1 evaluation to identify the accessibility issues and redesign of selected webpages for bookmyshow.com
Client
Course Project
UX Prototyping | INF 385T
My Role
UX Researcher
Duration
2 weeks
February 20223
Team Size
4
Overview
The Web Content Accessibility Guidelines (WCAG) framework is considered the international standard for web accessibility. The review process is based on the evaluation described in Accessibility Evaluation Resources.
​
Book My Show or bookmyshow.com is a leading Indian moving and event ticketing website. This case study is an accessibility evaluation of the Book My Show website based on the WCAG 2.1 guidelines.
The accessibility evaluation covered three pages of the site, including Home, Stream, and List Your Show, with 3 WCAG 2.1 criteria for each page. Based on this evaluation, the website does not meet WCAG 2.1, Conformance Level AA.
​
Conformance evaluation of web accessibility requires a combination of semi-automated evaluation tools and manual evaluation by an experienced reviewer. The evaluation results in this report are based on an evaluation conducted on the following date(s): 20 Jan to 21 Jan 2022. The website may have changed since that time.
Scope of Review
All the pages that have been evaluated had many instances where the contrast between text and its background or the UI components and the background was less than the recommended 4.5:1 for small text.
Website
Purpose of site
Base URL of the site
URLs included in the review
Home
Stream
Showtime
Book My Show (desktop website)
The leading Indian movie and event ticketing website
in.bookmyshow.com/explore/home/mumbai
in.bookmyshow.com/explore/c/stream
​
Results and Recommendations
Home Page
The home page of bookmyshow.com violated the following WCAG 2.1 guidelines.
1.4.4 Resize Text Level AA
The WCAG 2.1 Guidelines for 1.4.4 Resize Text Level AA require that except for captions and images of text, text can be resized without assistive technology up to 200 per cent without loss of content or functionality.
​
Summary of issues:
The website loses its functionality once it is resized beyond 150%. The navigation bar gets completely hidden and doesn’t appear on the page in any other capacity.
Before
After
4.1.2 Name, Role, Value Level A
The WCAG 2.1 Guidelines for 4.1.2 Name, Role, Value Level A require that for all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
​
Summary of issues:
-
Most of the links, especially movies and live events categories that constitute the major interactive part of the page, do not support assistive technologies well enough with the appropriate programming markup.
-
The current code requires visual identification or takes longer time and more effort for users with screen readers to understand the content.
-
It is necessary to improve upon this criterion by adding the right name and role markup plus some meta tags to take the site’s accessibility beyond visual presentation.​
Before
After
2.2.1 Timing Adjustable Level A
The WCAG 2.1 Guidelines for 2.2.1 Timing Adjustable Level A require that for each time limit that is set by the content, at least one of the following is true:
-
Turn off: The user is allowed to turn off the time limit before encountering it; or
-
Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or
-
Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, "press the space bar"), and the user is allowed to extend the time limit at least ten times; or
-
Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or
-
Essential Exception: The time limit is essential and extending it would invalidate the activity; or
-
20-Hour Exception: The time limit is longer than 20 hours.
Summary of issues:
The home page consists of a carousel of advertisements and featured events/movies. The carousel showcases multiple cards that do not follow any of the above-mentioned requirements. The carousel changes within 5 seconds which make it very difficult for the users to read the information being presented on those cards.
Before
After
Stream
The Stream page of bookmyshow.com violated the following WCAG 2.1 guidelines.
1.4.5 Images of Text Level AA
The WCAG 2.1 Guidelines for 1.4.5 Images of Text Level AA require that if the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following:
-
Customizable: The image of text can be visually customized to the user's requirements;
-
Essential: A particular presentation of text is essential to the information being conveyed.
​
Summary of issues:
-
On the Stream page, the different events/movie cards contain only images of texts. All these cards contain important texts like the title of the event/movie, languages they are being shown in, etc.
-
This data is not displayed through HTML and is many times unreadable and of course, not customizable.
Before
After
2.2.2 Pause, Stop, Hide Level A
The WCAG 2.1 Guidelines for 2.2.2 Pause, Stop, Hide Level A require that for moving, blinking, scrolling, or auto-updating information, all of the following are true:
-
Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
-
Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
​
Summary of issues:
-
The carousel of movies on view on the Stream page offers left and right navigation controls, but lacks controls for pausing, stoping or hiding. It is also close to failing the criterion by setting the scrolling of carousel cards to approximately 5 seconds but not any longer.
-
This issue can be addressed by slowing down the scrolling speed and adding a restriction to stop the scrolling once users hover or focus on a card.
Before
After
2.4.7 Focus Visible Level AA
The WCAG 2.1 Guidelines for 2.4.7 Focus Visible Level AA require that any keyboard-operable user interface has a mode of operation where the keyboard focus indicator is visible.
​
Summary of issues:
-
This page along with the entire site lacks focus indicators for keyboard navigation. While the keyboard navigation is somewhat present, there is no way of knowing which UI element has been selected.
Before
After
Showtime
The Showtime page of bookmyshow.com violated the following WCAG 2.1 guidelines.
1.4.3 Contrast (Minimum) Level AA
The WCAG 2.1 Guidelines for 1.4.3 Contrast (Minimum) Level AA require that the visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
-
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
-
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
-
Logotypes: Text that is part of a logo or brand name has no contrast requirement.
​
Summary of issues:
-
Overall, the Showtime page doesn’t pass the Contrast (minimum) criterion. The chosen colors of icons and texts are far from passing the 4.5:1 ratio, thus not meeting the standard for visual accessibility. Most of the texts serve as buttons, and links, or convey meanings important to the purchase activity.
-
There is no added-on accessibility feature for users in need to turn on a high contrast mode.
-
The issues can be easily fixed by increasing the contrast of the elements to the background.
Before
After
%20-%20AA.png)
1.4.11 Non-text Contrast Level AA
The WCAG 2.1 Guidelines for 1.4.11 Non-text Contrast Level AA require that the visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
-
User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
-
Graphical Objects: Parts of graphics are required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
​
Summary of issues:
-
Several non-text elements used repeatedly on the Showtime page do not meet the standard despite a lower contrast ratio compared to the requirement for text. These icons function as buttons or convey meaningful information about cinemas.
-
The issues can be easily fixed by increasing the contrast of the elements to the background.
Before
After
2.1.1 Keyboard Level A
The WCAG 2.1 Guidelines for 2.1.1 Keyboard Level A require that all functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user's movement and not just the endpoints.
​
Summary of issues:
-
The Showtime page and, in fact, the whole website lack keyboard accessibility that allows users to navigate and operate through a keyboard only. Users can scroll up or down but cannot locate any single element.
-
It would be necessary to introduce keyboard control and shortcuts although it requires a lot of work based on the current website design and development.
Before
After
My Reflections
Moving on, there are a few things I would like to do next -
​
-
I would like to expand my evaluation by understanding the user experience more deeply for users with different types of assistive technologies.
-
Next, I would like to do usability studies on the website and also on the redesigns to validate my research and redesign.