#34519: #a11y-headings - Headings install screens fixes
-----------------------------+------------------------------
Reporter: rianrietveld | Owner:
Type: defect (bug) | Status: new
Priority: normal | Milestone: Awaiting Review
Component: Upgrade/Install | Version: trunk
Severity: normal | Resolution:
Keywords: has-patch | Focuses: accessibility
-----------------------------+------------------------------
Description changed by rianrietveld:
Old description:
> 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>' );
> }}}
>
> A more uniform display of error messages would be more elegant, I suggest
> the last one.
New description:
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>' );
}}}
A more uniform display of error messages would be more elegant, I suggest
the last one.
#a11y-headings
--
--
Ticket URL: <https://core.trac.wordpress.org/ticket/34519#comment:1>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform