WCAG Accessability Review:

'store.steampowered.com'

  1. Executive Summary
  2. Background about Evaluation
  3. Scope of Review
  4. Reviewer(s)
  5. Review Process
  6. Results and Recommended Actions
  7. References
  8. Appendices

  1. Executive Summary

    This report describes the conformance of the 'store.steampowered.com' website with W3C’s Web Content Accessibility Guidelines (WCAG). The review process is described in Section 5 below and is based on evaluation described in Accessibility Evaluation Resources.

    Based on this evaluation, the 'store.steampowered.com' website [meets/ does not meet / is close to meeting] WCAG 2.1, Conformance Level AA. Detailed review results are available in Section 6 below. Resources for follow-up study are listed in Section 7 below. Feedback on this evaluation is welcome.

    Return to top

  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 evaluation conducted on the following date(s): 10/01/2022. The website will have changed since that time.

    Return to top

  3. Scope of Review

    • store.steampowered.com
      Steam is a Point Of Sale site for distribution and cataloguing of video games. A security id is assigned to each registered user with which they are allowed/barred from using individual games in Steam's library based on purchase.
    • Base URL of site: https://store.steampowered.com/
    • URLs included in review: https://store.steampowered.com/, https://store.steampowered.com/app/1657630/Slime_Rancher_2/

      Sample Screen captures:

      Steam's Main Page
      (Right click and select 'Open Image In New Tab' to see full size)
      Steam Front Page Screencap 1 Steam Front Page Screencap 2 Steam Front Page Screencap 3 Steam Front Page Screencap 4 Steam Front Page Screencap 5 Steam Front Page Screencap 6
    • All pages were reviewed manually as opposed to using automated evaluation tools.
    • Several sub-page category pages were excluded from review, due to the expansive nature of the site; examples include Publisher pages, onboarding pages, purchasing pages, legal pages, and help pages. This report only reviews the Steam store page.
    • Review conducted on Saturday, October 1 from 1730 to 2133.
    • Website is based in the United States of America and is initially in American English, but it also has language options for many other countries as well.

    Return to top

  4. Reviewer(s)

    • Primary Reviewer: Aura de Anda for Sacramento City College's CISW 306 course.
    • Reviewer can be contacted via e-mail by colleagues and staff/faculty of SCC.
    • Reviewer's areas of expertise differ from recommended areas, but is lightly versed in Accessibility, and has been "getting better, I think."
    • Reviewer is fluent in English, Java, C++, MS68000, Pascal, Actionscript, CSS and HTML. She is learning Japanese, and can read and speak Spanish cursorily.

    Return to top

  5. Review Process

    • Conformance was tested for WCAG 2.1 level A to AA.
    • Evaluation tools included manual navigation, code-checking, and use of Mozilla Firefox's "DevTools" add-on.
    • Review included manual navigation via the Tab key, testing images for alt tags, checking the code for section headers or other descriptors, then running the entire thing through the W3C validator and hoping for the best.

    Return to top

  6. Results and Recommended Actions

    Interpretative summary of review results

    • Upon review, this website appears to [meet/ not meet / be close to meeting] WCAG 2.1 A standards.
    • The accessibility features in which this site is strongest are basic keyboard navigation and color contrast, which, when checked with an appropriate Color Contrast checker, returned excellent results. Unfortunately, short of keeping their menus in screen-readable plaintext, these are their only real successes with WCAG.
    • Using the search bar to find something specifically is highly recommended for accessing more inaccessible features of the site, since I couldn't find a sitemap page, and the tab button is unpredictable for navigation.

    Detailed results

    Accessibility flaws

    1. Navigation via the Tab button is non-linear, goes to unlisted elements on the page, and slow to respond initially.
    2. Images have neither alt text nor do they have labels or mouseover text.
    3. Document sections are unlabeled, although the document is visually sectioned off into several sub-sections.
    4. Code is not cleaned up for easy screen-reading, having several commented-out bits of unused code.

    Methods of address
    1. Code cleanup and section labeling, as well as information restructuring to eliminate repitition would go a long way to addressing the tab issue. Increasing keyboard control to include horizontal section navigation could help users navigate a non-linear layout more efficiently.
    2. Having a group go in and label each image would be ideal, but that method runs into a problem if your site pages are automatically generated via a growing database. Solution - modify the database to contain an image description string, and output the string into the generated page where necessary.
    3. Document templates should have areas re-labeled where necessary. See Item 1.
    4. Clean up code, removing commented code before page goes live. Can be done via small script. Maintain notes in background.

    WCAG reports in question
    1. "2.1.1 Keyboard: 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. (Level A)"
    2. "1.1.1 Non-text Content: 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. (Level A)"
      "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.)"
    3. A.) "2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages. (Level A) "
      B.) "2.4.3 Focus Order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A) "
    4. A.) "1.1.1 Non-text Content: 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. (Level A) "
      "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."
      B.) "1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.(Level A)"

    Due to the volume of pages needed to be edited, it is recommended that Valve hire a full-time accessibility coder and review team, as well as looking into automated site checking developer tools that can comb hundreds of pages at once.

    Return to top

  7. References

    Web Content Accessibility Guidelines (WCAG) Overview
    https://www.w3.org/WAI/intro/wcag
    Web Content Accessibility Guidelines 2.1
    https://www.w3.org/TR/WCAG21/
    Techniques for WCAG 2.1
    https://www.w3.org/WAI/WCAG21/Techniques/
    Accessibility Evaluation Resources
    http://www.w3.org/WAI/eval/
    Web Accessibility Evaluation Tools List
    https://www.w3.org/WAI/ER/tools/
    Using Combined Expertise to Evaluate Web Accessibility
    https://www.w3.org/WAI/eval/reviewteams
    Color Contrast Accessibility Validator
    https://color.a11y.com/Contrast/
    A-Tester's Web Accessibility Compliance Checker
    https://www.webaccessibility.com/
    Firefox's DevTools https://firefox-dev.tools/

    Return to top

  8. Appendices

    Detailed validator and evaluation tool reports

    WebAccessibility.com's site checker
    Webaccessibility.com site checker results
    Color Contrast Accessibility Validator results
    Color Contrast Accessibility Validator results
    Devtools by Firefox showing unlabeled images via code
    Devtools by Firefox screencap of non-labeled image
Return to top