WestonThayer

x-height test while zooming

A basic algorithm to check if any given webpage has "accessible" text scaling, based on w3c/silver#506 (comment), which approximates x-height as ~50% of font-size (so the min and max x-height sizes from user research have been 2x'd):

• All text can reach a rendered font-size of least ~88 CSS px
• No text exceeds a rendered font-size of ~120 CSS px

By "rendered font-size", I mean the computed CSS font-size value multiplied by the current zoom level (100%, 150%, etc). So for example, assuming linear scaling, 17.6px would be the minimum acceptable size because browsers have a max zoom of 500% and 17.6 * 5 = 88.

1. Start at some "desktop" viewport, say 1280px wide, and 100% zoom

WestonThayer

<button aria-pressed="false">
   <span aria-hidden>13</span>
   <span class="visually-hidden">
     13 December
  </span>
</button>
<!-- Read as "13 13 December" -->

WestonThayer

name: test
on:
  push:
    branches: [main]
jobs:
  test:
    runs-on: windows-latest
    steps:
      - run: "& 'C:\\Windows\\Resources\\Ease of Access Themes\\hc1.theme'"
      # Will upload an artifact to the run with a desktop screenshot

WestonThayer

// https://github.com/microsoft/playwright/issues/27130

/**
 * Turn a single string character into KeyboardEvent.code and whether a Shift
 * modifier is required.
 *
 * I have no idea how this works if your local keyboard layout isn't US.
 *
 * @param {string} char
 *