[wp-trac] [WordPress Trac] #34519: #a11y-headings - Headings install screens fixes

[WordPress Trac]

#34519: #a11y-headings - Headings install screens fixes
-----------------------------+--------------------------------
 Reporter:  rianrietveld     |       Owner:  afercia
     Type:  defect (bug)     |      Status:  assigned
 Priority:  normal           |   Milestone:  Awaiting Review
Component:  Upgrade/Install  |     Version:  4.3
 Severity:  normal           |  Resolution:
 Keywords:  has-patch        |     Focuses:  ui, accessibility
-----------------------------+--------------------------------

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.
>
> #a11y-headings

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>' );
 }}}

 I suggest the last one.

 #a11y-headings

--

Comment (by 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.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/34519#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform