UX Prototyping Mini-Project 1
Accessibility Report on UT Austin Campus Computer Store
1. Overview
The guidelines and Success Criteria are organized around the following four principles, which lay the foundation necessary for anyone to access and use Web content. Anyone who wants to use the Web must have content that is:
Perceivable: Information and user interface components must be presentable to users in ways they can perceive.
This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses)
Operable: User interface components and navigation must be operable.
This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)
Understandable: Information and the operation of the user interface must be understandable.
This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)
Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)
The project was done in collaboration with Vasupradha Bhat B, Hazel Dunn and Vignesh S.
2. Executive Summary
This report describes the conformance of the Campus Computer Store’s website with W3C’s Web Content Accessibility Guidelines (WCAG). This review process is described in Section below and is based on the evaluation described in Accessibility Evaluation Resources.
This evaluation and the subsequent redesign covered three unique WCAG 2.1 criteria for each page evaluated: Landing page, Store page, and Authentication page. Based on this evaluation, the Campus Computer Store’s website does not meet certain criteria in WCAG 2.1, Conformance Level A, AA. Detailed review results are available in the section below. Resources for the follow-up study are listed in the References below. Feedback on this evaluation is welcome
3. Background about Evaluation
Conformance evaluation of web accessibility requires a combination of semi-automated evaluation tools and manual evaluation by reviewers. The evaluation results in this report are based on an evaluation conducted on the following dates: January 21, 2023 - January 23, 2023.
4. Scope of Review
Website: UT Austin Campus Computer Store
Purpose of the site: The Campus Computer Store provides hardware and software sales and services to The University of Texas at Austin community and is an authorized Apple and Dell Service Center. Students, faculty, staff, and university affiliates can purchase software and hardware for educational discounts and can purchase Microsoft software in person under the Microsoft Campus Agreement (MSCA).
Base URL of site: https://campuscomputer.com/campuscomputer/
URLs included in the review:
Landing Page: https://campuscomputer.com/campuscomputer/
Reviewed manually and using the WAVE evaluation tool.
Store Page: https://store.hied.com/?ref=select
Reviewed manually and using the WAVE evaluation tool.
Authentication Page: https://store.hied.com/my_account/login
Reviewed manually and using the WAVE evaluation tool.
Date: January 21, 2023 - January 23, 2023
Natural languages of the website: English (default)
5. Reviewers
Reviewers:
Hazel Krystine Dunn
Samarth Nayyar
Siqi Chen
Vasupradha B Belman
Vignesh Sankaran
Organization: The University of Texas at Austin
6. Review Process
WCAG 2.1 Level for which conformance was tested: WCAG 2.1 Level A, AA
Pages evaluated:
Landing Page
Store Page
Authentication Page
Tools and technologies used: (*)
Evaluation tools: WAVE version
Figma Plugins: A11y Contrast checker, Contrast
Web browser: Google Chrome
Description of manual reviews used:
Visual observation
Keyboard navigation
7. Reviewed Screens
7.1. Overview
Landing Page:
1.4.3 Contrast (Minimum) - Perceivable
3.2.3 Consistent Navigation - Understable
2.4.7 Focus Visible - Operable
Store Page:
1.1.1 Non-text content - Perceivable
1.4.12 Text Spacing - Perceivable
1.4.13 Content on Hover or Focus - Perceivable
Authentication Page:
3.3.1 Error identification - Understandable
3.3.3 Error Suggestion - Understandable
1.4.1 Color of Text - Perceivable
7.2. Screen 1 - Landing Page
Page URL: https://campuscomputer.com/campuscomputer/
For the Landing page, the following WCAG 2.1 Criteria were evaluated:
1.4.3: Contrast (Minimum) - Level AA
Outcome - Did not pass
3.2.3: Consistent Navigation - Level AA
Outcome - Did not pass
2.4.7: Focus Visible - Level AA
Outcome - Did not pass
1.4.3: Contrast (Minimum) - Level AA
Outcome: Did not pass
Principle: Perceivable
Overview:
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 is 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 minimum contrast requirement.
Description of the criteria:
People with low vision may have difficulty reading when the color of the text does not contrast sufficiently with the color of the background. Having color blindness lowers the contrast even further.
Ensuring minimum contrast ratios between text and background increases the legibility of text for individuals who do not see the full range of colors. The contrast ratios also work for individuals who see no color, and for many older people who have reduced visual acuity.
The recommended contrast ratios are
Fonts that are 18 points or larger: 3:1
Fonts that are 14 points bold or larger: 3:1
All other text and images of text: 4.5:1
Issue:
The landing page deviates this criteria - has 24 contrast errors when evaluated using the WAVE tool. Overall, the page has very low contrasts between text and background colors.
Evaluations Observations:
3.2.3: Consistent Navigation - Level AA
Outcome: Did not pass
Principle: Understandable
Overview:
Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated unless a change is initiated by the user.
Description of the criteria:
When designing a Web site, keeping information that is repeated on every page in the same order is a best practice.
Content is easier to find when the location of repeated information is predictable. The phrase "same order" does not imply that expanding and contracting navigation menus must be avoided. By adding or removing links between existing navigation links, navigation within a subsection is enabled, and the relative order is maintained.
Conforming to 3.2.3 helps users predict the location of the content they are looking for and find content more quickly when they encounter it again. Consistencies in site layout are especially helpful to individuals who rely on visual cues or their spatial memory. People with low vision who use screen magnification software, and see only a small portion of the screen at one time, can take advantage of page boundaries and other cues to quickly locate repeated content.
Issue:
There were certain issues regarding the consistency of the navigation across the landing page.
No consistent search bar - On some pages the search bar appears on some pages it is not there.
Missing Navigation Functionality - No way to browse through the various sections of the website from the navigation bar at the top.
Improper Routing within different pages - Clicking on buttons with similar context takes you to different pages based on which page you are looking at the navigation from.
Evaluations Observations:
2.4.7: Focus visible - Level AA
Outcome: Did not pass
Principle: Operable
Overview:
Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible.
Description of the criteria:
"Keyboard focus" is the one point within a window that receives information from the keyboard. Only one component can have focus at a time. When keyboard-only users press keystrokes to navigate around a Web page, they are moving focus from one component to another.
People who rely on a keyboard to interact with Web pages must know which component has focus. By complying with 2.4.7 keyboard users can tell, at a glance, exactly what they are interacting with on a Web page.
Issue:
If a user navigates a webpage using a keyboard, there is no cue to emphasize or focus on what they are doing. Users may find it challenging to understand what is being selected because the commonly used keyboard navigation key, "tab," cannot be used to scroll through the website.
Evaluations Observations:
7.3. Screen 2 - Store Page
Page URL: https://store.hied.com/?ref=select
For the Store page, the following WCAG 2.1 Criteria were evaluated:
1.1.1: Non-text Content - Level A
Outcome - Did not pass
1.4.12: Text Spacing - Level AA
Outcome - Did not pass
1.4.13: Content on Hover or Focus - Level AA
Outcome - Did not pass
1.1.1: Non-text Content - Level A
Outcome: Did not pass
Principle: Perceivable
Overview:
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.
Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.)
Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
Description of the criteria:
Adding text alternatives is an easy way to make the site that has photographs, artwork, drawings, and other graphic elements accessible to people with certain disabilities. In addition, text alternatives benefit people who use text-based browsers and who have slow internet connections. Finally, text alternatives make it possible to search the Web for images.
Issue:
All of the products are listed on the page, but none of them have alternative texts. This makes navigating the website with screen readers challenging for users.
Evaluation observations:
1.4.12: Text Spacing - Level AA
Outcome: Did not pass
Principle: Perceivable
Overview:
In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:
Line height (line spacing) to at least 1.5 times the font size;
Spacing following paragraphs to at least 2 times the font size;
Letter spacing (tracking) to at least 0.12 times the font size;
Word spacing to at least 0.16 times the font size.
Issue:
There are product cards with irregular text spacing between the product name and its price. It can be difficult for users to understand some since the price and the item description merge together because of unclear spacing.
Evaluation observations:
1.4.13: Content on Hover or Focus - Level AA
Outcome: Did not pass
Principle: Perceivable
Overview:
Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true: Show full description
Dismissible: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus unless the additional content communicates an input error or does not obscure or replace other content;
Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;
Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.
Issue:
The search bar includes focus states, but there is no hover state to provide the user with a visual indication of what they are hovering over or where their mouse is.
Evaluation observations:
7.4. Screen 3 - Authentication Page
Page URL: https://store.hied.com/my_account/login
For the Authentication page, the following WCAG 2.1 Criteria were evaluated:
3.3.1: Error Identification - Level A
Outcome - Did not pass
3.3.3: Error Suggestion - Level AA
Outcome - Did not pass
1.4.1: Color of Text - Level A
Outcome - Did not pass
3.3.1: Error Identification - Level A
Outcome: Did not pass
Principle: Operable
Overview:
If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
Description of the criteria:
It is generally advised to include text along with other indicators (color, icons) to indicate and describe errors when designing a website or online form. It is OK to signal errors with images and color changes provided there are also text descriptions.
Issue:
No automatic identification of the error - A user needs to submit the “create a new account” button in the form which redirects them to a new screen showing all error messages.
Evaluation observations:
3.3.3: Error Suggestion - Level AA
Outcome: Did not pass
Principle: Operable
Overview:
If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user unless it would jeopardize the security or purpose of the content. When designing online forms, provide suggestions for fixing problems when input errors are detected.
Description of the criteria:
Explaining how to correct input errors may help people who, due to disability, have difficulties completing and submitting online forms. This includes people with learning disabilities, cognitive disabilities, visual impairments, and motor impairments.
For example, an input field asks users to type a month's name. If a user enters "12," suggestions for correction may include:
A list of the acceptable values:
Choose one of January, February, March, April, May, June, July, August, September, October, November, or December.
A reworded prompt: Type the month name:
A conversion of the input data in an interactive pop-up window: Do you mean "December?"
Issue:
The authentication page does not provide possible error suggestions. The page could provide a suggestion like - janedoe@xxx.com as a placeholder for the email id input field.
Evaluation observations:
1.4.1: Color of Text - Level A
Outcome: Did not pass
Principle: Operable
Overview:
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
Description of the criteria:
Color is an important aspect of Web content design. But information communicated exclusively through color may not be accessible to users who are blind, have low-vision or color blindness, or use black and white instead of color displays. Furthermore, some older users may not be able to distinguish certain colors. (As people age, they tend to see colors less well.)
Issue:
The errors displayed in the login page are displayed only in red color but there are no other visual indicators like icons displayed as a suffix to provide more clear context.
Evaluation observations:
8. Redesign of Pages
8.1. Landing page
Issues fixed from redesigning the landing page:
Contrast fixes in buttons - Buttons have been redesigned and it has been made to the contrast ratio standard.
Contrast fixes in the page - The landing page has been redesigned and the colors have been simplified in the home page. All text has met the contrast ratio standard.
Consistent navigation fixes - A consistent navigation has been made but making it into two rows:
First row, everything that takes you to other pages for information and actions.
Second row, everything related to the actions the user might need to find things on the page.
Redesign:
8.2. Store page
Issues fixed from redesigning the store page:
Text Spacing - On some product cards the spacing between the pricing and the item descriptions is not clear, making both the items merge with each other.
No hover state - The search bar has focus states but no hover state to help the user understand what they are hovering over or give them a visual idea about where their cursor is.
Redesign:
Other Suggestions for fixes:
Most of the images on the page do not have an alt text attached to them here are some suggestions of alt text for images on the page which would help the user understand what the image is if the image does not load or if a person has issues in seeing the image.
Blue colored iMac
Black Apple watch with white strap
Space grey MacBook pro with touch ID.
etc.
8.3. Authentication page
Issues fixed from redesigning the authentication page:
Contrast fixes - The click actions on the search and the drop down have been made more acceptable to the contrast standard with bigger touch areas to make them easier to see as well as interact with.
Search fixes - The search bar has been more consistent with the standards of contrast as well as combined into a box to add more context to what is being interacted with. Interaction states for the search are added:
Inactive
Hovered
Active
Error Message context - Error message for the sign in section has been fixed to add more context to it with better verbiage as well an action to make sure the user understands it is an error. Overall design of the error state has also been changed from just a line of text to a container pointing to where the error can be resolved.
Error suggestions - Live feedback design states have been added for the create an account section. Highlighting where the error is for the user as well changing the verbiage of the error messages to help the user understand how they can fix the error.
General Design Fixes - The whole page has been given a small design lifting with the following:
Making text boxes bigger to make them easier to click.
Making the buttons bigger and with better contrast ratio to be easily seen and as well be easier to interact with.
Removal of repeated textual content on the page.
Redesign:
General Fixes which were made on all pages:
The Team
