Pizza Hut’s Website Accessibility Evaluation | Proposed Accessibility Changes
Executive Summary
This report describes the conformance of the Pizza Hut website with W3C’s Web Content Accessibility Guidelines (WCAG). The review process is described below and is based on the evaluation described in Accessibility Evaluation Resources.
Based on this evaluation, the Pizza Hut website does not meet WCAG 2.0, Conformance Level A. Detailed review results are available below. Resources for follow-up study are listed as well. Feedback on this evaluation is welcome.
Background about Evaluation
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 evaluation conducted on the following date: 02/07/2018. The website may have changed since that time.
URLs of the Web Application
The website’s main purpose is to check the current deals offered and order food online from a store near the user.
Base URL of site: https://www.pizzahut.com/index.php#/home
URL’s included in the review:
Homepage https://www.pizzahut.com/index.php#/home
Wings page under Menu Dropdown https://www.pizzahut.com/index.php#/menu/wings/wingstreet-wings
Join page (Registration) https://www.pizzahut.com/index.php#/hutrewards-Registration
URL’s excluded from the review: All other webpages of the site that are not mentioned above
Review Process
WCAG 2.0 Level for which conformance was tested: WCAG 2.0 A
Evaluation and validation tools used: WAVE Web Accessibility Evaluation Tool (Version 1.0.9), Voiceover
Description of manual reviews (usability testing of accessibility features) used
Using the WAVE tool, I inspected the code of the three webpages manually, containing accessibility issues to identify and recommend solutions.
I used the inbuilt Voiceover on a Mac to check how the screen reader reads these webpages. There are a number of hidden links which the screen reader reads on all the three webpages evaluated.
Results and Recommended Actions
Interpretative summary of review results: This website does not meet WCAG 2.0 Level A.
Accessibility features in which this site is strong include
The role=button has been implemented. The screen reader is able to identify buttons easily.
Headers have been implemented well. The screen reader is able to convey the heading levels (example- heading level four)
Recommended priorities for addressing inaccessible features of the site
Content Related
Missing alternative text for static images
Missing alternative text in linked images
Empty links
Design Related
Color contrast
Code Related
Missing form label
Missing document language
Three Selected Problems
Problem 1
Content based
https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=111#qr-text-equiv-all
Missing alternative text for static images on the homepage, Wings page under the Menu dropdown section.
Missing alternative text for linked images on the homepage, Wings page under the Menu dropdown section and the Join (registration) page.
Problem 2
Design based
https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=143#qr-visual-audio-contrast-contrast
Very low contrast between the foreground and background colors for all buttons, form fields and text on images.
Problem 3
Code based
https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=311#qr-meaning-doc-lang-id
Missing form label on the Join page of the site.
Missing document language on the homepage, Wings page and the Join page.
Solutions for Content Based Problems
Provide alternative text to static images describing the image such that the screen reader can read through the text to make images accessible to the blind users. An <alt> tag is used. <img src = “link” alt = “description”>
Image advertising a $7.99 large two-topping pizza that can be ordered online.
Image displaying a heart-shaped pepperoni pizza, a Choco-chip pie and a few stacked brownies in a bowl.
Image showing a container with four different types of soda bottles the customer could choose from.
Image of a zoomed-in photo of five breadsticks served with tomato ketchup in a bowl placed on a wooden tray.
Provide alternative text to linked images because a linked image without alternative text is an empty link. The screen reader would not be able to let the user know that it is a linked image.
Linked image having the logo of Pizza Hut.
Solutions for Design Based Problems
A foreground color of #000000 is recommended on a #FFFFFF background color.
A background color of #A9131A is recommended for a #FFFFFF foreground color.
A foreground color of #AD1219 is recommended for the asterisk symbol on a #FFFFFF background color.
Solutions for Code Based Problems
The registration form does not have a label tag. This can be corrected by using the <label> element to associate it with a form control. Also, the document language is missing which can be corrected using the <html lang> tag.
Code Snippet for Text Area
<div>
<label for= “fullName”> First Name: </label>
<input id= “fullName” aria-describedby= “nameFormat” type= “text”/>
<p id= “nameFormat”> First Name </p>
</div>
Code Snippet for Radio Buttons
<div>
<label for= “exclusiveOffers”> Want Exclusive Offers? </label>
<input
id= “exclusiveOffers”
aria-labelledby= “option1”
aria-lebelledby= “option2”
aria-labelledby= “option3”
aria-labelledby= “option4”
type= “radio button”/>
<label id= “option1”>Emails</label>
<label id= “option2”>Text</label>
<label id= “option3”>Emails and Text</label>
<label id= “option4”>No Thanks</label>
</div>
Code Syntax to Identify Document Language
<html lang= “en”>
This is placed in the first line of the code for each webpage.
On-going monitoring of Web Accessibility
The website of Pizza Hut is expected to have updates and upgrades of the version of the site often.
This could possibly break some accessibility while shifting from a current version to an advanced version.
It is recommended to monitor the website for its accessibility each time a new feature or upgrade is launched.
This could be achieved by hiring a Web Accessibility Specialist, who would work alongside the design and development teams in order to advise and give appropriate suggestions to make new features accessible.