SC 1.4.10: What is the minimum height for vertically scrolling content?

[JAWS-test]

If I check SC 1.4.10: What display height at 320 px width for vertically scrolling content should I assume? This is relevant if e.g. fixed headers and footers cover the content. Unfortunately I can't find any information about this. If the 256 px defined for horizontally scrolling content apply, this should be explicitly formulated.

C34 is very vague:

Check whether the sticky header and footer will be un-fixed at specific sizes depending on the existing media query settings

Which sizes?

What percentage of the page may be covered by the footer and header, so: "without loss of information or functionality" (1.4.10) applies: 25%, 50%, 75%...?

[alastc]

That is a very difficult question to answer, which is why C34 is an advisory technique.

[JAWS-test]

The answer may be difficult, but it is still necessary. I am often faced with this question during the test. If it has not yet been answered, I suggest the following:

• Since 1.4.10 refers to 400% for desktop browsers, the height would be 256 px (equivalent to 1024 px without zoom)
• With less than 5 visible lines of text (or lines with form fields or single line table rows etc.), I would consider the operation and functionality to be no longer given.

This should also apply to SC 1.4.4 (starting from 1280x1024px with 200% zoom and check if at least 5 lines of text remain visible).

SC 1.3.4 should also check whether at least 5 lines of text remain visible when the orientation is changed. A mobile device with 320x256 px or 256x320 px should be assumed as the minimum size (see #877 (comment)).

[mraccess77]

I personally run into this issue on a often enough basis for this to be further discussed. Less than 5 lines of text seems reasonable.

[patrickhlauke]

i would say that it would be sensible to define the viewport as minimum of 320 CSS px × 256 CSS px, since this is already anchored roughly on those sizes. though have that height only as the absolute minimum (i.e. in theory it's 320 CSS px width by whatever height / 256 CSS px height by whatever width, but say that testing should happen down to that specific width/height combo)

[Myndex]

If I check SC 1.4.10: What display height at 320 px width for vertically scrolling content should I assume?

This is determined by the size of the device. One might assume that the 320px came from the original iphone which was 320 wide by 480 tall.

Nevertheless, I've seen some phones with screens of 240 x 320, but those were a decade ago.

Hi Jonathan @mraccess77

I personally run into this issue on a often enough basis for this to be further discussed. Less than 5 lines of text seems reasonable.

5 lines might be, three lines though when we think about low vision needs:

Assuming a screen 320x480, and assuming a nominal font of 18px (the critical font size for average 20/20 vision), someone with 20/100 would want that font 5 times larger for the same critical size vs acuity, which is 90 px - but with line spacing could be 135 per line, so you can fit three lines in that 480... This is not to say that someone with low vision would have such a small phone, which is a useful consideration, as well as would they be reading in portrait mode?

I know I certainly don't — on my small iPhone 5s, I more likely read in landscape, while it has fewer lines, it can have more characters per line. Ideally, we want lines with 50-60 characters per line for best use of horizontal span.

In the case of a small iPhone, that's 480 wide but only 320 tall, so not much more than two lines for 20/100 critical size.

SPEAKING OF CRITICAL SIZE:

Per this chart, we see the minimum font size for normal vision is 14px (assuming a large x-height) and that someone with low vision would want to be able to increase that 5 to 6 times. We also see that above 5 to 6 times increase, reading speed is actually reduced, as the font becomes too large vs visual span.

A reasonable set of minimums then would read:

Minimum font size is 14px
-> More ideally, minimum x-height of 8px

Recommended font size of 20px
-> Recommended x-height of 10px

User ability to scale font up, limited to: the lesser of 5 times larger, or such that the smallest content font is increased to 94px. All without breaking content nor requiring scroll in more than one axis.

Key missing technology: Relative scaling, such that the smallest content font is scaled more than the larger fonts like headlines, which should be scaled less to avoid becoming too large.