Contrib.social

Accordions on content form are difficult to understand when using system or browser zoom preferences

Open on Drupal.org →
Created on 12 August 2020, over 4 years ago
Updated 15 December 2023, 11 months ago

Problem/Motivation

A user who has low vision may use any combination of approaches to increase the size of their experience, including browser preferences (zoom settings and font size), system accessibility preferences, and third party assistive software.

The accordion/single-column tab style on page edit and create forms have a beautiful but subtle visual adjustment to help the user identify where the content of one element ends, and the next begins.

When using significant page zoom, however, this delineation is too subtle, and it is difficult to understand that one element contains content and form items, while the next is an accordion to be expanded to reveal more form items:

Steps to reproduce

  1. If using Chrome, go to Chrome -> Preferences -> Appearance and set page zoom to 400%
  2. Navigate to a content creation form and look at the vertical tabs

Proposed resolution

Consider providing a more distinct visual difference between the content and title elements.

🐛 Bug report
Status

Active

Version

11.0 🔥

Component
Claro  →

Last updated about 21 hours ago

Created by

🇺🇸United States rainbreaw

Live updates comments and jobs are added and updated live.
  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment 11 months ago →
    🇮🇳India Akhil Babu Chengannur

    Not sure if I understood the issue correctly. I followed the steps in the IS and observed that individual dropdowns are being highlighted when the user hovers from one to another. Additionally, each dropdown has a \/ symbol next to the title. Won't these features help in distinguishing the dropdowns in the content add/edit form?

  • Comment 11 months ago →
    🇮🇳India Akhil Babu Chengannur
  • Comment 11 months ago →
    🇩🇪Germany rkoller Nürnberg, Germany

    If the next accordion is not expanded yet then the potential problem @rainbrew raised is definitely still valid.

    For the screenshot i've zoomed in with 500% and narrowed down the window width plus made the window height smaller. without the carrot or hovering the mouse pointer over one of the visible interface components it is challenging to distinguish between expanded content and a summary. but how to improve and solve the problem i am not sure. one option might be to make the separator lines in light grey darker?

    without any hovering the separator (#DEDFE4) has a contrast of 1.3:1 against the white background (#fff) of a collapsed summary and also 1.3:1 (which is surprising and odd) against the slight greyish background (#FAFBFD) of expanded content. if that could be increased towards 3:1 maybe? but would probably break the design in regards of aesthetics.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024