A comprehensive WCAG 2.2 AA evaluation of riotgames.com, assessing 53 success criteria across four key pages to identify barriers for users with disabilities.
Riot Games is the official website of Riot Games, the video game company behind titles like League of Legends and Valorant. It serves as a central hub for game news, esports information, user accounts, and customer support, with millions of users across diverse ability profiles.
The site targets a global gaming audience — a demographic that skews young but includes players with a wide range of visual, motor, and cognitive needs, many of whom may use assistive technologies.
The audit followed the W3C WCAG-EM methodology, evaluating four representative pages: the Home, Who We Are, Work With Us, and News pages.
Tools used included the WAVE accessibility checker for automated detection of contrast issues and missing alt text, alongside manual keyboard navigation testing and visual inspection of the site's HTML structure.
The evaluation used a multi-method approach combining automated tooling with manual expert review, following the W3C Website Accessibility Conformance Evaluation Methodology (WCAG-EM).
WAVE (Web Accessibility Evaluation Tool) was used to automatically flag missing alt text, contrast failures, structural issues, and ARIA problems across all four sample pages. Automated tools catch surface-level issues quickly but cannot assess context, meaning, or interaction quality.
Each page was navigated exclusively using a keyboard (Tab, Shift+Tab, Enter, Space, arrow keys) to verify focus order, keyboard traps, visible focus indicators, and whether all interactive elements were reachable without a pointing device.
All 55 WCAG 2.2 AA success criteria were reviewed against each sampled page. Each criterion was rated as Passed, Failed, Cannot Tell, Not Present, or Not Checked, with written observations documenting the reasoning behind each judgment.
Seven success criteria failed across the audit sample. These represent real barriers for users relying on assistive technologies or with specific sensory or motor needs.
Multiple images across the Home, Who We Are, and News pages are missing descriptive alt text. Screen reader users receive no information about what these images depict. Additionally, some text boxes use white text but the underlying HTML declares a white background, confusing automated contrast checkers.
Background videos on the Who We Are and Work With Us pages play without audio descriptions, captions, or any media alternative. Users who are blind or deaf-blind receive no information about what the video communicates. No synchronized audio description exists for any video element on the site.
Insufficient text-to-background contrast was found on the Home and Work With Us pages. WAVE flagged multiple instances where text did not meet the required 4.5:1 contrast ratio for normal text. Some failures were caused by transparent backgrounds rendered visually over imagery but coded as white in HTML.
Background videos on Home, Who We Are, and Work With Us auto-play on page load with no controls provided to pause, stop, or hide the content. Users with vestibular disorders, attention difficulties, or cognitive disabilities cannot stop motion that is distracting or disorienting.
While some ARIA labels exist on the site, not all interactive components have fully descriptive name, role, or value attributes. Custom UI elements without proper semantic markup are invisible or confusing to screen readers, preventing assistive technology users from understanding or operating them.
Several areas demonstrated strong accessibility practices, indicating that Riot Games has invested in some aspects of inclusive design.
All pages can be navigated sequentially by keyboard, with no keyboard traps. Focus order is logical and follows the visual layout.
Content reflows correctly across screen sizes and orientations. Zoom up to 200% preserves all content and functionality without horizontal scrolling.
The navigation bar and footer are consistent across all pages, with clear headings and labels that accurately describe page content.
Beyond strict WCAG compliance, the site was evaluated through the lens of Nielsen's 10 usability heuristics to capture broader interaction quality issues.
The site provides clear feedback for user actions — search returns result counts, job applications confirm submissions, and the active navigation item is highlighted. Status messages are communicated via ARIA live regions in some areas.
Language and iconography align well with user expectations. Buttons use natural language ("Apply Now", "Learn More"), and the globe icon for language selection is universally understood. Navigation labels are clear and jargon-free.
Auto-playing background videos cannot be paused, stopped, or hidden. This is a significant violation — users who find motion distracting, are prone to vestibular disorders, or need to focus on text content have no recourse. No "reduce motion" preference is respected.
Visual design is highly consistent across pages — typography, button styles, spacing, and color use follow a clear system. The footer is identical across all pages, and section headings follow predictable patterns throughout the site.
The job application form on Work With Us prevents users from selecting unavailable filter options, reducing errors at the interaction level. Search provides clear "no results" states. However, the site lacks form validation patterns on most input fields.
Navigation options are always visible in the persistent header. Job listings show full context in the list view, reducing the need to click into individual postings. However, the language-selector globe icon relies solely on icon recognition without a text label.
Multiple paths to the same content exist via the nav, search, and footer links. Power users can use keyboard shortcuts throughout. The site does not appear to offer personalization or content filtering beyond the job listings page.
The site's visual design is polished and on-brand. However, some pages use heavy visual backgrounds behind text, creating decorative noise that competes with content readability. The contrast failures identified in WCAG 1.4.3 partly stem from this aesthetic approach.
Search errors display clear "no results" messaging. Login failures inform users of incorrect credentials. Error messages are written in plain language, not error codes. The site does not expose technical errors to end users.
The consistent footer provides links to support pages, community forums, and documentation across all pages. A persistent help link is accessible from any point in the user journey, and a search bar is always available in the main navigation.
Recommendations are ordered by impact — addressing critical failures first, followed by improvements that would meaningfully improve the experience for users with disabilities.
Every non-decorative image needs a meaningful alt attribute. For hero and background images that convey context, write descriptive alt text explaining what the image communicates. Purely decorative images should use alt="" to be ignored by screen readers. Audit all images using WAVE and a manual pass to ensure no meaningful content is communicated only through imagery.
Every background video must have a mechanism to pause, stop, or hide it — a floating button in the corner of each video section is the most common pattern. Consider also implementing prefers-reduced-motion media query support so users with that OS preference automatically see static images instead of motion content.
Identify all instances where text falls below 4.5:1 contrast (normal text) or 3:1 (large text/UI components). For text overlaid on images or video, add a semi-transparent dark overlay behind the text, or use a solid color panel. Fix the HTML/CSS mismatch where backgrounds are declared as white but render as transparent — this creates both real contrast issues and false positives in automated tools.
Critical — WCAG 1.4.3For decorative videos (pure atmosphere), confirm this with aria-hidden="true" so screen readers skip them. For videos that communicate meaning, add either captions (for speech/sound content) or a text alternative describing what the video shows. Even a brief visible caption block under the video section would satisfy this criterion.
Audit all custom components — carousels, dropdowns, modals, tabs — against the ARIA authoring practices guide. Every interactive element needs a programmatic name (via aria-label or associated <label>), a role, and appropriate state communication. The unlabeled globe/language icon button should receive an aria-label="Select language" at minimum.
While keyboard navigation works and focus is technically visible, the current focus indicators could be stronger. Implement a high-contrast focus ring (2px solid outline with 3:1 contrast against adjacent colors) on all interactive elements. Avoid outline: none without a custom replacement. Users navigating by keyboard benefit significantly from a clear, consistent focus indicator.
Riot Games' website demonstrates a solid foundation in many areas of accessibility — the site is responsive, keyboard navigable, consistently structured, and free of keyboard traps. These are non-trivial achievements for a site of this scale and visual complexity.
However, the seven identified failures are meaningful barriers. The absence of video controls (2.2.2), missing alt text (1.1.1), and contrast failures (1.4.3) represent real obstacles for users with visual impairments, vestibular disorders, and cognitive disabilities. Notably, the video-related failures (1.2.1–1.2.5, 2.2.2) are closely related — addressing autoplay and adding appropriate media alternatives would resolve a cluster of failures simultaneously.
Given Riot Games' global scale — tens of millions of active users — even incremental improvements to accessibility would meaningfully improve the experience for a large number of people. The issues identified are fixable, and the site's strong design system suggests the team has the capability to implement these changes systematically.
Critical failures identified across the four sampled pages, all addressable through targeted development effort
Of evaluated criteria passed — a reasonable baseline, but insufficient for WCAG 2.2 AA conformance
Criteria passed, indicating the site already meets accessibility standards in many fundamental areas