Make WordPress Core

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: afercia's profile afercia 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 lang attribute. 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 where get_option( 'html_type' ) may be false and end up returning both a lang and an xml:lang attribute, which is not what we want.
  • When using language_attributes(), the handling of the dir attribute and the related CSS class on the setup page should be refactored.

Attachments (2)

setup-config.png (289.5 KB) - added by afercia 10 hours ago.
before after and Deutsch.png (407.0 KB) - added by afercia 7 hours ago.

Download all attachments as: .zip

Change History (7)

@afercia
10 hours ago

This ticket was mentioned in PR #12163 on WordPress/wordpress-develop by @afercia.


7 hours ago
#2

  • Keywords has-patch added

Trac ticket: https://core.trac.wordpress.org/ticket/65454

## Use of AI Tools

None.

#3 @afercia
7 hours ago

In the linked PR:

  • Uses language_attributes(). which also handles the dir attribute as well as the lang attribute.
  • 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.

#4 @afercia
7 hours ago

Reminder that to test the setup-config.php page your installation should not have a wp-config.php file. Either move it away from your WP directory or temporarily rename it so that you can restore it later.

The language chooser select should be tested also in the install.php page.

Last edited 6 hours ago by afercia (previous) (diff)

#5 @sabernhardt
6 hours ago

  • Milestone changed from Awaiting Review to 7.1
  • Summary changed from Improve accessibility of the setup-config.php page to Improve accessibility of the setup-config.php page (and install.php)
Note: See TracTickets for help on using tickets.