![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png){kind=logo}
Opened 5 weeks ago
Closed 3 days ago
#65464 closed defect (bug) (fixed)
Language switcher: always use visible label and icon
| Reported by: | afercia | Owned by: | afercia |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.1 |
| Component: | Login and Registration | Version: | |
| Severity: | normal | Keywords: | has-screenshots a11y-visible-labels has-patch |
| Cc: | Focuses: | ui, accessibility, administration |
Description
As a general rule, for best accessibility and usability, form labels should be visible and only be visually hidden for very good reasons e.g. hard space constraints and such.
On the login screen, the language switcher output by wp_dropdown_languages() only shows an icon. The select label is visually hidden.
There is no good reason to make this label visually hidden. Without a visible label, the UI doesn't tell users what to do. The cognitive load to parse the icon and understand the next step is pretty high and a visible label would make everything much clearer.
To be clear, I'm not opposed to the usage of the icon: it helps especially when the current language is in a language the user cannot parse, for example a language htat uses a different alphabet. That is the reason why the icon was introduced: provide a visual clue to identify the language select. Still, there is no reaon tho hide the label.
There's a few inconsistencies across the various usages of wp_dropdown_languages().
On the login page, the label is visually hidden.
On the following pages, it is always visible together with the icon:
- Users > Edit User
- Users > Add User
- Users > Profile
- Settings > General
On Multisite usage is inconsistent:
- With registration and site creation enabled,
src/wp-signup.phpshows the language dropdown where the label "Site Language" is visible but the icon is missing. - Multisite > Network Admin > Sites > Add Site: visible label "Site Language", the icon is missing.
- Multisite > Network Admin > Settings: visible label "Default Language" the icon is present.
I would like to propose to always show the label and the icon everywhere.
In the attached screenshot:
- Login page in a non-western language.
- Login page in English.
- WP Admin > General settings.
- WP Admin > Users > Profile.
Attachments (2)
Change History (11)
#3
@
4 weeks ago
@abcd95 thanks! I suggest waiting for some feedback from the accessibility team and if no objections from their side yes, please do feel free to submit a PR!
Couple notes:
- On the login page the visible label should likely be vertically stacked befor ethe select and not placed inline.
and the globe icon
- Just for clarity, please note it's not a 'globe' icon. It's the 'dashicons-translation', see https://developer.wordpress.org/resource/dashicons/#translation
#4
@
4 weeks ago
- Summary Language switcher: alwayse use visible label and icon → Language switcher: always use visible label and icon
#5
@
2 weeks ago
- Milestone Awaiting Review → 7.1
- Owner set to
- Status new → assigned
Given the ongoing work on the login screen see for example #65075 I'd like to propose thie ticket for 7.1 consideration. Cc @joedolson
This ticket was mentioned in PR #12422 on WordPress/wordpress-develop by @abcd95.
11 days ago
#7
- Keywords has-patch added
Hi @afercia!
I looked into this and agree that standardizing on both a visible text label and the globe icon is the most usable approach.
I've tested a solution locally where I remove the
screen-reader-textclass from the label inwp-login.php, and append the missingdashicons-translationspan to the labels inwp-signup.phpandsite-new.php. It looks great, resolves the cognitive load issue, and behaves consistently with the rest of the settings screens. This is also the most simpelst fix I can think of for this, ATM.If we're all aligned on this, I'd be happy to raise a PR for it!