Text is not justifiedis explicitly mentioned in Success Criterion 1.4.8. -Narrow viewports ----------------- +Small viewports and zoom +------------------------ + +Users use a variety of zoom levels and viewport sizes. Page structure must be simple enough to handle these layouts smoothly. + +### Narrow viewports A single element wider than the viewport will trigger horizontal scrolling for the entire page. This is especially problematic for long pages that already require excessive vertical scrolling. @@ -620,6 +626,25 @@ Designers often use figures to "break up" their content, and provide negative sp There's an ideal range somewhere between "cramped" and "spaced-apart" content. Finding this range is difficult. The best way to resolve such difficult and subjective issues is to ask your readers for feedback, giving disproportionate weight to readers with under-represented needs (especially readers with disabilities). +### Zoom and size-adjustment + +Browsers allow users to zoom by adjusting size metrics. Additionally, most browsers allow users to specify a minimum font size. Minimum sizes don't always work; setting size values in `px` can override these settings. + +In your stylesheets, _avoid using `px`_ where possible. Define sizes and dimensions using relative units (preferably `em`). Exceptions exist for some decorations[^4] (e.g. borders), but they are uncommon. + + + Tor --- @@ -778,7 +803,7 @@ Your page should easily pass the harshest of tests without any extra effort if i These tests begin reasonably, but gradually grow absurd. Once again, use your judgement. -1. Evaluate the heaviness and complexity of your scripts (if any) by testing with your browser's JIT compilation disabled.[^4] +1. Evaluate the heaviness and complexity of your scripts (if any) by testing with your browser's JIT compilation disabled.[^5] 2. Test using the Tor browser with the safest security level enabled (disables JS and other features). 3. Load just the HTML. No CSS, no images, etc. Try loading without inline CSS as well for good measure. 4. Print out the site in black-and-white, preferably with a simple laser printer. @@ -910,6 +935,8 @@ A special thanks goes out to GothAlice for the questions she answered in `#webde [^3]: Here's an [overview of PE](https://en.wikipedia.org/wiki/Progressive_enhancement) and [my favorite write-up on the subject](https://whalecoiner.com/articles/progressive-enhancement). -[^4]:
Consider disabling the JIT for your normal browsing too; doing so removes whole classes of vulnerabilities. In Firefox, navigate to `about:config` and toggle these options:
javascript.options.ion
javascript.options.baselinejit
javascript.options.native_regexp
javascript.options.asmjs
javascript.options.wasm
In Chromium and derivatives, run the browser with `--js-flags='--jitless'`; in the Tor Browser, set the security level to "Safer". +[^4]: Decoration is more than cosmetic. The [color overrides and accessibility](#color-overrides-and-accessibility) sub-section describes how some decorations, like borders, improve accessibility. + +[^5]:
Consider disabling the JIT for your normal browsing too; doing so removes whole classes of vulnerabilities. In Firefox, navigate to `about:config` and toggle these options:
javascript.options.ion
javascript.options.baselinejit
javascript.options.native_regexp
javascript.options.asmjs
javascript.options.wasm
In Chromium and derivatives, run the browser with `--js-flags='--jitless'`; in the Tor Browser, set the security level to "Safer".