WCAG Evaluation of Steam
Accessibility evaluation: A11y evaluation of Steam website as per WCAG 2.1 Guidelines
Accessibility Evaluation of Steam Website as per WCAG 2.1 Guidelines
Evaluation tools: WAVE from WebAIM (3.1.6) & Axe DevTools from Deque (4.4.2)
Web browser: Google Chrome Version 106.0.5249.119,
Assistive Technology: Apple Voiceover
1. Executive Summary
This report describes the conformance of the Steam website with W3C’s Web Content Accessibility Guidelines (WCAG). The review process is based on the evaluation described in Accessibility Evaluation Resources.
Based on this evaluation, the Steam website does not meet WCAG 2.1, Conformance Level AA. Detailed review results are available below. Feedback on this evaluation is welcome.
2. 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 an evaluation conducted on the following date: Oct 22, 2022. The website may have changed since that time.
3. Scope of Review
Name of website: Steam (a platform for buying, playing, discussing, and creating games)
The following URLs are included in the review:
-
https://store.steampowered.com/ (Steam Home Page)
-
https://steamcommunity.com/ (Steam Community Page)
-
https://steamcommunity.com/broadcast/watch/76561199158173792 (Broadcast Page)
The evaluation results in this report are based on the web pages, as on Oct 22, 2022
The review involved both semi-automated tools and manual reviewing for all 3 webpages.
1. Perceivable
1.1 Text Alternatives
1.1.1 Non-text Content (Level A)
Observation: The search icon on the Steam Home Page, along with multiple other links, has no alt-text description (Controls, Input). Very few images on the website have alt-text descriptions. Barring the image of 'Steam Deck', no other image alt-text descriptions on the Steam Home Page were found to be meaningful.
Recommendation: Create text alternatives that serve the same purpose and present the same information as the original non-text content.
1.2 Time-based Media
1.2.2 Captions (Prerecorded) (Level A) ✅
Observation: Prerecorded videos on the Steam Community Page have embedded Youtube links that leverage Youtube's closed captioning.
1.2.3 Audio Description or Media Alternative (Prerecorded) (Level A)
Observation: No media alternative or audio description is provided for prerecorded videos.
Recommendation: Provide an accessible alternative way of presenting the information such as dialogue, sounds (natural and artificial), the setting and background, and the actions and expressions of people, animals, etc., in a synchronized media presentation.
1.2.4: Captions (Live) (Level AA)
Observation: Live streaming videos on the Broadcast page have no captions.
Recommendation: Allow users who cannot hear to be able to access real-time synchronized media broadcasts. Although it difficult to create accurate real-time captions because there is little time to correct mistakes or listen a second time or consult someone to be sure the words are accurately reproduced, AI-based systems with moderate accuracy can also help relay the information.
1.2.5 Audio Description (Prerecorded) (Level AA)
Observation: Audio description is not available in any of the embedded Youtube videos that were audited.
Recommendation: Provide an audio (spoken) version of information that is provided visually so that it is possible for people who cannot see to be able to understand audio-visual material.
1.3 Adaptable
1.3.1 Info and Relationships (Level A)
Observation: Steam Community page and Broadcast page have no heading structure. Steam Home Page has no first-level heading (h1).
Recommendation: Include proper structure and hierarchy in all web pages, as it provides a way for Assistive Technologies (AT) to identify a piece of content as a heading. Applying role="heading" to an element causes an AT (like a screen reader) to treat it as though it were a heading.
1.3.3: Sensory Characteristics (Level A)
Observation: Buttons have labels in general. But the search button on the home page contains only the search logo and the alt-text is missing.
Recommendation: Ensure that items within a web page are properly referenced in the content, especially not only by shape, size, sound, or location but also in ways that do not depend on that sensory perception.
1.3.4: Orientation (Level AA) ✅
Observation: The design of webpages and video player on the Broadcast page is responsive to the device orientation.
1.4 Distinguishable
1.4.3 Contrast (Minimum) (Level AA)
Observation: Contrast ratios of 2.64:1 and 2.22:1 were recorded for normal text (using WebAIM Contrast Checker)
Recommendation: The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for
-
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
-
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.
-
Text that is part of a logo or brand name has no contrast requirement.
1.4.4: Resize text (Level AA) ✅
Observation: Scales up to 500%.
1.4.5: Images of Text Level AA
Observation: Images of texts are frequently used instead of text. Eg: Posters/banners used on the homepage to convey important information cannot be identified by a screen reader. The special offers section on the home page does not mention the names of games in alt-text making it impossible for blind users to figure out which game they are at.
Recommendation: It is better to use real text for the text portion of graphical elements, and a combination of semantic markup and style sheets to create the appropriate visual presentation.
1.4.11: Non-text Contrast Level AA
Observation: The contrast between the 'Back to Top' component and the background is 2.56:1 The contrast between the search components and the background is 2.06:1. Although the search component has a thin border it provides a contrast of only 1.93:1
Recommendation: Ensure graphical icons provide enough contrast for people with vision impairments. When choosing the colors for graphics, consider the color(s) adjacent to that graphic, and test that the contrast ratio is at least 3:1
1.4.13: Content on Hover or Focus Level AA
Observation: Additional content popups when hovering over almost all of the game content on the Steam homepage. They are not dismissable or hoverable.
Recommendation: Ensure users are able to move the pointer over additional content that appears on hover. For users of screen magnification software, the new content is often not fully visible in the current magnified section. In order to perceive it, it is therefore critical for these users to be able to move the pointer away from the trigger and over the additional content, and thereby change the position of the magnified section, without this content disappearing.
2. Operable
2.1 Keyboard Accessible
Observation: The 'language' and 'cart' UI components on the Steam Home page are not keyboard accessible. The submenu of 'Your Store' in the home page navigation bar is not keyboard accessible.
Recommendation: Provide keyboard operation for all the functionality of the page. When all functionality of content can be operated through a keyboard or keyboard interface, it can be operated by those with no vision as well as by those who must use alternate keyboards or input devices that act as keyboard emulators like speech input software or on-screen keyboards.
2.1.2: No Keyboard Trap Level A (Cannot tell)
Observation: On the Broadcast page, users can get trapped in the comments sections and will have to run through all comments, which could be in the range of 100s or 1000s, to get out of the component. However, the user is not eternally trapped and, therefore, the website does not technically ‘fail’ in this criteria.
Recommendation: Ensure that keyboard users do not become trapped in a subset of the content. Provide options to skip a content type.
2.2 Enough Time
2.2.2: Pause, Stop, Hide Level A
Observation: The hover pop-up for games on the Steam Home page has images that keep changing at an interval of 1 second and cannot be paused/stopped. The Steam Deck ad banner on the home page is continuously moving with no option to pause/stop.
Recommendation: Provide a way to pause movement or scrolling of content. If the user needs to pause the movement, to reduce distraction, or to have time to read it, they can do so, and then restart it as needed. This mechanism can be provided either through interactive controls that conform to WCAG or through keyboard shortcuts.
2.4 Navigable
Observation: No ARIA on the Home page and Community page. Regions are not defined. Navigating each page requires going over global and local navigation links before arriving at the main content. No 'Skip' link is provided at the top of the webpage.
Recommendation: Provide a mechanism to bypass blocks of material that are repeated on multiple web pages by skipping directly to the main content of the web page. The first interactive item on the web page can be a link to the beginning of the main content. Activating the link sets the focus beyond the other content to the main content.
Observation: On the Broadcast page, comments on the video appear first in the keyboard navigation, before the video itself.
Recommendation: Ensure that interactive elements receive focus in an order that follows sequences and relationships in the content.
2.4.4 Link Purpose (In Context) (Level A)
Observation: The search button on the Steam Home page has no link text or alt-text and cannot be programmatically determined. Also, adjacent links go to the same URL, making keyboard navigation more cumbersome.
Recommendation: Describe the purpose of a link in the text of the link. The description lets a user distinguish this link from links on the Web page that lead to other destinations and helps the user determine whether to follow the link.
2.4.6 Headings and Labels (Level AA) ✅
Observation: Headings and labels are descriptive of their content on all three web pages.
Observation: The first 8 keyboard focuses on the home page are not visible. The games on the home page carousel have no indication of keyboard focus.
Recommendation: Ensure that the focused component can be visually identified by the user by relying on user agent support.
2.5 Input Modalities
Observation: The visual labels of some UI components are not conveyed in the HTML code. Eg: The local navigation links on the left side of the Steam Home page have no labels mentioned in the code. However, all the buttons on the Home page have been labeled.
Recommendation: Ensure that the “accessible” name matches the visible labels of icons or links, so that speech input users can operate web content reliably.
3. Understandable
3.1 Readable
3.1.1: Language of Page Level A ✅
Observation: <html class=" responsive" lang="en"> Language represented in HTML code
3.2 Predictable
3.2.4: Consistent Identification Level AA
Observation: Webpages have a 'login' link in the global top bar, while the buttons on the Steam Home page and Community page are labeled 'sign in'. Similarly, the Home page has a 'sign up' link while the Community page has 'Join Steam' button.
Recommendation: Ensure the same labels on user interface components that have the same function. This helps users with cognitive disabilities, blindness, and vision loss to understand what will happen when they interact with a function on a webpage.
3.3 Input Assistance
3.3.1: Error Identification Level A
Observation: On the Steam Community page, 'searching a hub name that is not present in the database does not generate any feedback or error identification. Searching for a friend's name that is not present in the database gives an error message in the code (Custom URL: steamcommunity.com/id/54654653) which is not descriptive of the error.
Recommendation: Provide a text description that indicates the fact that there was a validation problem, describes the nature of the problem and provides ways to locate the field(s) with a problem easily. When errors are detected in users’ input, the nature of the error needs to be described to the user in a manner they can access.
