Browser zoom unit for accessibility [css-values-and-units] #6869
Description
Currently all browsers scale the size of a pixel in order to zoom into a page by default. As a result, a zoomed in viewport is indistinguishable from a narrower viewport. This may result in unintended layout shifts as media queries are triggered as well as problems scaling responsive typography to be compatible with SC 1.4.4.
CSS authors need a way to identify zoom level so that we can create affordances for accessibility issues that may arise as a result of how zoom is currently implemented.
Two possible solutions:
- A CSS keyword value that is effectively a unitless scale factor and can be used in calc functions.
h1 {
font-size: calc(6vw * zoom);
}- Setting a standard for browsers to zoom the root font size instead of the size of a pixel. This will enable people to have finite control over what scales using relative units. Scale factor can be discovered with
calc(1rem / 16px).
Note: I don’t expect this to be an acceptable solution as the web has tried this and moved away from it to create a more consistent experience as many websites don’t use relative units.