Opened 10 hours ago
Last modified 6 hours ago
#65454 new defect (bug)
Improve accessibility of the setup-config.php page (and install.php)
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | 7.1 | Priority: | normal |
| Severity: | normal | Version: | |
| Component: | Upgrade/Install | Keywords: | has-screenshots has-patch |
| Focuses: | accessibility | Cc: |
Description
On a fresh install of WordPress, the first page users will get is the setup-config.php page. That's the page with the big select element to choose the default language. See attached screenshot.
On this page:
- The HTML element misses the
langattribute. The lang attribute is necessary for assistive technology, most notably screen readers, to correctly announce the page content. - The big select element has a visually hidden label
Select a default language. There is no good reason to make this label visually hidden. Without a visible label, the UI doesn't tell users what to do on this page. The cognitive load to parse the page and understand the next step is pretty high and a visible label would make everything much clearer.
As a general rule, for best accessibility and usability, label should only be visually hidden for very good reasons e.g. hard space constraints and such.
Re: the lang attribute, this page should hanle it much like wp-login.php does by using language_attributes() with two caveats:
- It appears
get_language_attributes()doesn't handle well the case whereget_option( 'html_type' )may befalseand end up returning both alangand anxml:langattribute, which is not what we want. - When using
language_attributes(), the handling of thedirattribute and the related CSS class on the setup page should be refactored.
Attachments (2)
Change History (7)
This ticket was mentioned in PR #12163 on WordPress/wordpress-develop by @afercia.
7 hours ago
#2
- Keywords has-patch added
#3
@
7 hours ago
In the linked PR:
- Uses
language_attributes(). which also handles thedirattribute as well as thelangattribute. - Makes the select element label visible. See attached screenshot for comparison.
- Changes the visually hidden H1 heading to
Welcome to WordPress, to avoid duplication with the (now visible) label.
Note that on this page the strings aren't really translatable.
Only the 'Continue' button text is, in a way, translated as in: when a language other than English is selected, the button text is updated via JavaScript. See third image in the screenshot. The actual translation comes from the .org API https://api.wordpress.org/translations/core/1.0/. If we want to make also the visually hidden H1 and label change on the fly when users select a language, their translations should be added to the API. Personally, I'd think it would be a bit overkill.
Related: #63008