top of page
Group 43.png

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


 


in.bookmyshow.com/explore/home/mumbai


in.bookmyshow.com/explore/c/stream

in.bookmyshow.com/buytickets/pathaan-4dx-mumbai

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

resize text_og.png

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

Home - Name Roll Value - A.png

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

Home - Time adjustable - A.png

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

Stream - Images of Text Level - AA.png

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

Stream - Pause, Stop, Hide - A.png

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

Stream - Focus Visbile - AA.png

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

Contrast (Min) - AA.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

Non-text contrast - AA.png

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

Keyboard - A.png

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. 

bottom of page