#a11y-headings - Headings install screens fixes

[rianrietveld]

At the moment the H1 for the WordPress install screens is the logo with a link to WordPress.org. A menadingful heading is missing. Some error message screens have a double H1, one for the logo and one for the error.

Suggestions:

Change the container element for the logo from an h1 into a p

<p id="logo"><a href="https://wordpress.org/" tabindex="-1">WordPress</a></p>

Add a meaningful heading to the set up screens.
The new headings can be visually hidden by the screen-reader-text class.
The error screens with a double H1 will become meaningful and semantically correct.

New headings:

Choose language screen:
Heading: Select a default language

Before getting started screen:
Heading: Before getting started

Welcome to WordPress screen:
Heading: Setup your database connection
Change second H1 'Information needed' into an h2, and adopted style for H1 to this

All right, sparky:
Heading: Successful database connection

Headings in the error messages
<h1>Error: PHP is not running</h1> (change from h2 into h1)
Add to user info form (form id="setup”) with errors:

 <h1><?php _e( 'Welcome' ); ?></h1>

If the welcome screen has errors, the heading of the install screen now stays the same and is not left out.

Discussion:

Maybe the new headings don’t need to be screen-reader-text hidden, because they add to the understanding of the install screens, also for sighted users.

Displaying error messages
There are now 4 different ways of error message display with die()
Some have an H1 heading, others a <strong>ERROR</strong>, and some only the error message.
Maybe a more uniform display of error messages would be more elegant.

For example:

wp_die( __( '<strong>ERROR</strong>: "Table Prefix" must not be empty.' . $tryagain_link ) );

wp_die( $wpdb->error->get_error_message() . $tryagain_link );

wp_die( __( 'Sorry, I need a wp-config-sample.php file to work from. Please re-upload this file to your WordPress installation.' ) );

display_header();
	die( '<h1>' . __( 'Configuration Error' ) . '</h1><p>' . __( 'The constant DO_NOT_UPGRADE_GLOBAL_TABLES cannot be defined when installing WordPress.' ) . '</p></body></html>' );

I suggest the last one.

#a11y-headings

[rianrietveld]

Heading changes

[rianrietveld]

New refreshed patch 34519.2
Included heading changes for /wp-admin/maint/repair.php and /wp-admin/upgrade.php and readme.html
because they also use install.css too and have only the logo in the H1.

For readme.html:
I suggest to keep this as is for now:

<h1 id="logo">
    <a href="https://wordpress.org/"><img alt="WordPress" src="wp-admin/images/wordpress-logo.png"></a>
    <br> Version 4.4
</h1>

And figure out for a later release how to remove the link out of the h1 without ruining the install screens css.
Now in the heading list, this reads as "WordPress Version 4.4" and that's ok.

[rianrietveld]

New patch 34519.3.patch

After discussion with @afercia:
changed the H1 heading in

echo '<h1 class="screen-reader-text">' . __( 'Check secret keys' ) . '</h1>'

into an H2 to prevent a double H1 in repair.php

[afercia]

Since the patch touches readme.html and we've noticed there's a unit test for this file, we would appreciate some help in testing the patch. Unfortunately, at the moment we're unable to run the tests for software (Rian) and hardware (me) issues :) Maybe @jorbin ? Thanks!

[jorbin]

In 35508:

Adjust heading structure for pages using wp-admin/css/install.css

The readme, installation, upgrade, and repair pages use a common css file. The heading structure for these pages was inconstant with h2s where there should be h1s, h1s where there is no relevant info and sometimes, no h1s at all.

Fixes #34519
Props rianrietveld

[ocean90]

"Select a default language" isn't translatable. Seems like the Translation API has to return the string as well...

[rianrietveld]

@ocean90 about: Select a default language" isn't translatable

The label for the id="setup" form, to choose a language is/was also not translatable and I took the H1 text from this form.
In this screen there is no language chosen yet, is there a use for a translation here, before a language is chosen?
Not sure how to solve this.

[afercia]

The existing form label already used a non translatable string "Select a default language" that makes sense since as a user at this point you haven't choose a language yet, so it uses English.

[ocean90]

Replying to rianrietveld:
OK, haven't seen the label for it. Since it's not visible I'm fine with leaving it in English.

[SergeyBiryukov]

Some strings here look weird to me.

Would 34519.4.patch​ be more correct?

[SergeyBiryukov]

In 35519:

Adjust some of the strings added in [35508].

Fixes #34519.