Problem/Motivation

Users might have customized their font sizes in their browser to larger default sizes. When this is done, the form layout, even on a wide-screen, is defaulting to the single column layout. This causes the text paragraphs and the field widths to be untenably wide.

For users with low vision, or even subtle near-field vision decline, increasing default font sizes is often something they. will do to make browsing easier. Since it is a system-level preference, they may not even recall that they have made this settings change at some point.

Extremely wide paragraphs and text fields are difficult to read and use.

I would consider this issue a "should" fix instead of a "must" fix because the experience is still technically usable, but it becomes more difficult.

Steps to reproduce

In your browser settings, adjust your default font size to one of the larger options. E.g., in Chrome:

  1. Chrome -> Preferences
  2. Scroll down to "Appearance"
  3. Find "Font size" and change it to "Very Large"
  4. Chrome should update dynamically

Proposed resolution

Maintain the two column layout when the width is still over 900, or set a max width on the content area so that it won't get too wide.

screenshot of really wide fields and text when font size is at very large

CommentFileSizeAuthor
#12 Font-very-large- and-zoom-150%.png232.88 KBpreeti.chawla
#12 Font-very-large- and-zoom-100%.png233.37 KBpreeti.chawla
screenshot-claro.dd_8443-2020.07.16-07_01_24.png305.27 KBrainbreaw

Comments

rainbreaw created an issue. See original summary.

andrewmacpherson’s picture

andrewmacpherson commented

It's gonna have to reflow to a single column at some point. 200% zoom isn't the limit of what users will employ. Firefox allows browser zoom up to 300%, and Chrome allows up to 500%.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +vpat

Linking open issues from the CivicActions Accessibility - VPAT.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: +wcag21, +sc1410, +reflow

Adding reference to WCAG 2.1 SC 1.4.10

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mgifford’s picture

mgifford
he/him
Primary language English
commented
Issue tags: -sc1410 +wcag1410

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

preeti.chawla’s picture

preeti.chawla commented
StatusFileSize
new Font-very-large- and-zoom-100%.png233.37 KB
new Font-very-large- and-zoom-150%.png232.88 KB

I attempted to troubleshoot and resolve this issue locally using various methods, such as applying max-width and utilizing media queries.

I discovered a potential solution that involves using media queries specifically for cases where the font size is set to large or very large.

CSS for Font Size-Specific Adjustments
To detect when the user has changed their default font size, I recommend using the @supports rule. This allows for adjustments to the form layout or text styles accordingly:

css
@supports (font-size: var(--font-size-large)) {

.layout-form {
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: minmax(0, 3fr) minmax(22.5rem, 1fr);
gap: var(--space-l);
}

.layout-region--main,
.layout-region--footer {
grid-column: 1;
margin-inline: auto;
width: var(--layout-region-edit-width);
}

/* When the layout has vertical tabs */
.layout-region--main:has(.vertical-tabs),
.layout-region--main:has(.vertical-tabs) ~ .layout-region--footer {
width: var(--layout-region-edit-extended-width);
}

/* Push sidebar down to horizontal align with form section. */
.layout-region--secondary {
grid-row: span 2;
margin-block-start: var(--space-l);
}

@media (max-width: 40rem) {
.layout-form {
grid-template-columns: 1fr;
}
}
}

I have tested the above solution locally, and it is working well. Please refer to the screenshot for reference.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.