Problem/Motivation

Some of the smallest font sizes in the installer theme are too small for people with impaired vision to read (12px or less).
This is an accessibility issue and we should be aiming to keep font sizes at 1em or larger.

Proposed resolution

Similar to how Seven's font sizes were improved in #2045473: Improve visibility of Seven's smallest font elements, I propose we remove any styles reducing font sizes below 1em, whether this involves flattening the font size hierarchy remains unsure.

Remaining tasks

Create a patch.
Screenshots.

User interface changes

The font size of the progress bar appears to be the main area that needs to be increased from 0.875em.

BEFORE

AFTER

Beta phase evaluation

Reference: https://www.drupal.org/core/beta-changes
Issue category Task because not a new feature or a bug.
Issue priority Normal
Unfrozen changes Unfrozen because it only changes CSS
Prioritized changes The main goal of this issue is usability/accessibility.
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

njbarrett’s picture

garzouille’s picture

Hi, I suggest I can work on this issue.
I am at the drupal dev days in a mentoring class so thanks for your patience ;)

garzouille’s picture

@njbarrett
I did what you suggested : I deleted all 'font-size' value below than 1em in the system.module folder.
We can see the difference in the module page (cf screenshots).

garzouille’s picture

Status: Active » Needs review
bogdan.racz’s picture

+++ b/core/modules/system/css/system.diff.css
@@ -9,7 +9,6 @@
 .diff-inline-legend {
-  font-size:11px;

You can also remove this selector, as now it is not needed.

bogdan.racz’s picture

Status: Needs review » Needs work
garzouille’s picture

Ok, it's done.

garzouille’s picture

Status: Needs work » Needs review
bogdan.racz’s picture

Reviewed, looks good. I have checked it on Chrome, Firefox, Safari latest versions.

bogdan.racz’s picture

Status: Needs review » Reviewed & tested by the community
njbarrett’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs screenshots

We are going to need screenshots of every element that changed here. There is a lot more than just the module page that the patch will impact.

bogdan.racz’s picture

Issue tags: +drupaldevdays
garzouille’s picture

For now the patch concern css rules that are only on the system.module component and I can't find "a lot" of more other elements on pages directly impact by these css.

.admin-requirements => used in the HTML module form (cf screenshots)
.update-results => update result page
.progress__percentage => on a progress bar page
.form-item .description => always overriding by the selected theme in my research
.admin-required,
.diff-inline-legend,
table.diff .diff-section-title,
.diff-inline-legend => seems to be no more used or these classes are constructed in the code

Do you have examples of pages that are directly impact from these rules ?
Do you think we need to modify other css files ?

njbarrett’s picture

@garzouille we need to see the screenshots for the progress bar, and the update result page then.
The form item description is overridden in themes except for the installer, and there are forms on that, so we need screenshots of these forms.

The other stuff I am not sure about, if they aren't used anymore perhaps thats a seperate issue to remove unrequired CSS.

LewisNyman’s picture

Issue tags: +frontend, +CSS
njbarrett’s picture

Issue summary: View changes
Status: Needs work » Needs review
Issue tags: -Needs screenshots
FileSize
402 bytes
4.31 KB
3.62 KB

The only real change I have found needed in the installer is the progress bar, which is at 0.875em.

I have attached a patch and screenshots to reflect this.

The other CSS is not related to the installer.

njbarrett’s picture

njbarrett’s picture

Status: Needs review » Needs work

Forcing testbot

njbarrett’s picture

Status: Needs work » Needs review

Forcing testbot

njbarrett’s picture

Issue summary: View changes
Dom.’s picture

Hello !
Just to mention for impact evaluation :
#7 seems too global compared to issue summary and is not
#16 will actually impact every progress bar, not only installer one.
The whole point however would be better to define if Bartik would need to be bigger overall as suggested here : #2247319: Improve visibility of Bartik's smallest font elements and not actually changing this on system module. My concern is that the ratio of information now looks tricked, since "Completed 6 on 31." now seems as important as "Installed Filter module" while it's less. Changing the overall font size would keep the ratio while improving readability.
@emma.maria, can we have an opinion on this ?

LewisNyman’s picture

Title: Improve visibility of installer's smallest font elements » Improve visibility of the progress bar component's smallest font elements
Component: system.module » CSS
Issue tags: +Needs issue summary update

This is not just on the installer, the progress bar appears in other areas of core, can we update this issue summary to reflect this?

I'm not very happy with the visual hierarchy of the progress bar with the patch applied. This is probably a won't fix for me, but we should run it past Bojhan when he has a minute.

Bojhan’s picture

Status: Needs review » Closed (won't fix)

The whole point is that there is a size difference between the top text and the bottom text. Because on typography level, we want to significantly decrease the prominence. I don't think we should make the top text bigger, since that disconnects this style with the overall Seven style.

Given that this issue is inherent, to the whole solution here. I am marking this won't fix.

yoroy’s picture

Agreed on won't fix. The hierarchy is intentional.
Bartik does have small type sizes here and there. #2247319: Improve visibility of Bartik's smallest font elements for that.

njbarrett’s picture

Coming back to this issue I agree with the won't fix.

mgifford’s picture

Issue tags: -accesibility +Accessibility