Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • A a11yproject.com
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 40
    • Issues 40
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 10
    • Merge requests 10
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • The A11Y Project
  • a11yproject.com
  • Merge requests
  • !784

Better instructions for testing text-resize

  • Review changes

  • Download
  • Email patches
  • Plain diff
Merged Administrator requested to merge github/fork/erikgustafsson/patch-1 into gh-pages 6 years ago
  • Overview 12
  • Commits 2
  • Pipelines 0
  • Changes 1

Created by: erikgustafsson

After testing in Firefox I found that this guide needed updates. Testing on a px-based live website gave the same results as stage enviornment fix with realtive units. Firefox re-sizes regardless of usage of realtive units.

Discussions in a11y-slack https://web-a11y.slack.com/archives/C042TSFGN/p1556888503288100

Compare
  • gh-pages (base)

and
  • latest version
    da0b10d8
    2 commits, 2 years ago

1 file
+ 11
- 2

    Preferences

    File browser
    Compare changes
_posts/2018-11-26-resize-text.md
+ 11
- 2
  • View file @ da0b10d8

  • Edit in single-file editor

  • Open in Web IDE


@@ -27,18 +27,26 @@ When someone resizes text, any of the following can break the page:
* content is lost or truncated
* interactive elements overlapping each other
The importance is that [relative length units](https://developer.mozilla.org/en-US/docs/Web/CSS/length#Units) (**em**, **rem**, **%**, **vw**) are used for text.
## How to test
Testing is pretty straight forward.
1. Choose the right browser
1. Initial test in multiple browsers
1. Resize text
1. Confirm relative font usage
1. Choose a browser to do further testing in
1. Resize text
1. Check everything
### Choosing a browser
Firefox is the best browser for testing [WCAG Resize Text (Success Criterion 1.4.4)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html).
Testing text-resize needs initial testing in multiple browsers to confirm that relative units are used correctly in order to conform with [WCAG Resize Text (Success Criterion 1.4.4)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html).
Testing text-resizing can fail in Chrome but pass in Firefox since text-zoom in Firefox resizes regardless of usage of relative units. Suggested setup is to use Chrome and Firefox in initial testing.
Firefox is an easy browser for testing further:
* It makes resizing text really easy
* It informs you of the current zoom level
* It's available on all popular Operating Systems
@@ -86,6 +94,7 @@ To do a more thorough job, you should check the page at each of the zoom steps t
* Images of text won't resize
* Captions over videos likely won't resize
* Using the incorrect html `lang` code will result in no text-zoom
## Can I zoom everything instead of resizing text only?
0 Assignees
None
Assign to
Reviewer
Byte Blaze's avatar
Byte Blaze
Request review from
Labels
0
None
0
None
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
2
2 participants
Byte Blaze
Administrator
Reference: a11yproject/a11yproject.com!784
Source branch: github/fork/erikgustafsson/patch-1

Menu

Explore Projects Groups Snippets