Skip to content
GPU Ninja

Accessibility

Last updated

Our commitment#

GPU Ninja aims to meet the Web Content Accessibility Guidelines (WCAG) 2.2 at level AA on every page it renders for people. That covers:

  • the website at gpuninja.com: catalogs, detail pages, the buyer's guide, the blog, the docs, the legal pages and the digest pages;
  • the account, sign-in and subscription pages at app.gpuninja.com;
  • the desktop app, which renders the same pages from the same templates.

All of these share one design system, so the measures below apply everywhere rather than being re-checked page by page.

What we do#

Colour and contrast#

  • Every pair of text and background colours we use is checked against the WCAG contrast ratios every time the site is built. A colour pair that hasn't been checked can't be added to the stylesheet.
  • Our brand orange is used for text only where it passes. Small text that needs to read as orange uses a lighter shade that passes against every dark background.
  • Links in running text are underlined, so they never depend on colour alone.

Status never relies on colour alone#

Fit results ("fits", "doesn't fit", "check") and stock states always pair their colour with a text label and a distinct icon shape. You can read every status without seeing colour.

Colours#

The site has one dark colour scheme, whatever your system's light or dark setting, and tells your browser so, so form controls and scrollbars match it. Every pair of text and background colours it uses is contrast-checked. Its fonts are served from gpuninja.com itself, never from a third party.

Keyboard and focus#

  • Every page can be used with a keyboard alone, in the order the content appears. Nothing changes the natural tab order.
  • Every link, button and form control shows a clear 3-pixel orange focus ring when you reach it with the keyboard, with enough contrast against every background.
  • Every page starts with a Skip to content link.
  • Outside the buyer's guide nothing is fixed or sticky on the screen, so no header or banner can cover the control you have focused. In the guide, the filter panel stays beside the results, and the filter sheet on phones and the head-to-head view open over the page; Escape closes either, and closing the head to head returns focus to the Compare button.

Structure for assistive technology#

  • Every page has one main heading, a consistent set of landmarks (header, primary navigation, main content and footer), and a footer that is the same on every page. The footer always has a Support link, in the same place.
  • Navigation marks the page you are on.
  • Every form field has a visible label. Hints and errors are announced with the field they belong to.
  • Data tables have captions and proper row and column headers. Decorative icons are hidden from screen readers.

Motion#

Nothing on the site animates on its own: no parallax and no autoplay. Motion only answers something you did, and is brief: in the buyer's guide, cards glide to their new places when the results change, the match counter rolls to its new number, the filter sheet slides up on phones and the head-to-head view rises into place. If you have asked your system to reduce motion, all of it is switched off, along with the brief colour changes on hover.

Size, zoom and reflow#

  • Pages reflow to a width of 320 CSS pixels without scrolling sideways. Wide data tables scroll within their own area instead, and you can reach that area with the keyboard.
  • Buttons and form fields are at least 44 pixels tall, and other controls at least 24 pixels.
  • Text isn't clipped if you increase letter, word or line spacing.
  • No control needs dragging: each slider in the buyer's guide has a number box beside it for the same value, so you can type instead.

Works without JavaScript#

Every page works without JavaScript. Pages are rendered in advance, so all content and links are there when the page loads. The buyer's guide shows its first results, each linking to its card's page; only filtering and comparison need JavaScript, and the page says so.

Times are written as absolute dates and times. If JavaScript is on, the site also shows how long ago something was, such as "3 days ago".

Email#

The daily digest is sent with both an HTML and a plain-text version, so you can read it in whichever format suits your mail app or screen reader. See Daily digest.

How we check#

Every page template, every shared component in every state, and every state of the buyer's guide is tested against automated WCAG 2.2 A and AA rule checks on every change. Contrast, focus rings, target sizes and reflow rules are checked over the stylesheet itself. A failure stops the change from being published.

Some things only show in a real browser, so maintainers also check them by hand, in current desktop browsers, before launch and whenever a change materially alters the layout, the page templates or the buyer's guide: reflow at 320 pixels, text spacing, 200% zoom, focus visibility, target sizes, the logo, and that the buyer's guide announces its changes and errors to a screen reader. The result is recorded with the change.

Accessibility defects are treated with the same priority as any other bug.

Known limits#

We know about these problems and are working within them:

  • The bot check on sign-up and sign-in forms. The digest sign-up form and the sign-in page at app.gpuninja.com use Cloudflare Turnstile, a third-party widget that usually completes without you doing anything. We don't control its accessibility. If it blocks you, the form can't be sent: email support@gpuninja.com and we will help.
  • Testing in real browsers. Automated checks run in an emulated browser. Reflow, target sizes and focus visibility are checked in real browsers only by hand, as described above; automating those checks is still an open decision. Screen-reader testing by hand covers the buyer's guide, not yet every page.
  • The favicon in Firefox. Firefox shows the same browser-tab icon in both light and dark tab bars, because it ignores our per-scheme icon. In a dark tab bar the icon may be harder to see. Nothing else on the page is affected.
  • Live filtering in the buyer's guide needs JavaScript. Without it you still get the first results and every card's page.

Reporting a problem#

If anything on GPU Ninja is hard to use with your browser settings, keyboard, screen reader or other assistive technology, please tell us. Email support@gpuninja.com with:

  • the page URL;
  • what you were trying to do, and what got in the way;
  • your browser and operating system, and any assistive technology you use.

We will reproduce the problem, add a case for it to our automated checks, and fix it. See Support for other ways to reach us.