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

[WordPress Trac]

#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           |   Keywords:  has-patch
  Focuses:  accessibility    |
-----------------------------+-----------------------------
 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.

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