Changeset 47521

Timestamp:

03/27/2020 11:39:37 PM (5 years ago)

Author:

SergeyBiryukov

Message:

Help/About: Improve accessibility of the 5.4 About page:

• Remove vertical text and unnecessary italics.
• Update H1 headings on About, Credits, Freedoms, Privacy pages to be unique to each page.

Props sabernhardt, ryelle, melchoyce, karmatosed, audrasjb, afercia, davidbaumwald, SergeyBiryukov.
See #49295.

Location:

trunk/src/wp-admin

Files:

• about.php (modified) (3 diffs)
• credits.php (modified) (2 diffs)
• css/about.css (modified) (9 diffs)
• freedoms.php (modified) (2 diffs)
• privacy.php (modified) (2 diffs)

trunk/src/wp-admin/about.php

@@ -21 +21 @@
         <div class="about__header">
             <div class="about__header-title">
-                <h1>
+                <p>
                     <?php _e( 'WordPress' ); ?>
                     <span><?php echo $display_version; ?></span>
-                </h1>
+                </p>
             </div>
 
@@ -42 +42 @@
 
         <div class="about__section is-feature has-accent-background-color">
-            <p><?php _e( 'Say hello to more and better.' ); ?></p>
+            <h1><?php _e( 'Say hello to more and better.' ); ?></h1>
+
             <p><?php _e( 'More ways to make your pages come alive. With easier ways to get it all done and looking better than ever&mdash;and boosts in speed you can feel.' ); ?></p>
         </div>
@@ -106 +107 @@
                     <li><?php _e( 'Know at a glance whether you&#8217;re in a block&#8217;s Edit or Navigation mode. Or, if you have restricted vision, your screen reader will tell you which mode you&#8217;re in.' ); ?></li>
                 </ul>
-                <p><em><?php _e( 'Of course, if you want to work with the very latest tools and features, install the <a href="https://wordpress.org/plugins/gutenberg/">Gutenberg plugin</a>. You&#8217;ll get to be the first to use new and exciting features in the block editor, before anyone else has seen them!' ); ?></em></p>
+                <p><?php _e( 'Of course, if you want to work with the very latest tools and features, install the <a href="https://wordpress.org/plugins/gutenberg/">Gutenberg plugin</a>. You&#8217;ll get to be the first to use new and exciting features in the block editor, before anyone else has seen them!' ); ?></p>
             </div>
             <div class="column is-edge-to-edge">

trunk/src/wp-admin/credits.php

@@ -23 +23 @@
     <div class="about__header">
         <div class="about__header-title">
-            <h1>
+            <p>
                 <?php _e( 'WordPress' ); ?>
                 <span><?php echo $display_version; ?></span>
-            </h1>
+            </p>
         </div>
 
@@ -43 +43 @@
     </div>
 
-    <div class="about__section">
+    <div class="about__section is-feature">
         <div class="column">
-            <h2><?php _e( 'WordPress is created by a worldwide team of passionate individuals.' ); ?></h2>
+            <h1><?php _e( 'Credits' ); ?></h1>
+
+            <?php if ( ! $credits ) : ?>
 
             <p>
                 <?php
-                if ( ! $credits ) {
-                    printf(
-                        /* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */
-                        __( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ),
-                        __( 'https://wordpress.org/about/' ),
-                        __( 'https://make.wordpress.org/' )
-                    );
-                } else {
-                    printf(
-                        /* translators: %s: https://make.wordpress.org/ */
-                        __( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ),
-                        __( 'https://make.wordpress.org/' )
-                    );
-                }
+                printf(
+                    /* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */
+                    __( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ),
+                    __( 'https://wordpress.org/about/' ),
+                    __( 'https://make.wordpress.org/' )
+                );
                 ?>
             </p>
+
+            <?php else : ?>
+
+            <p>
+                <?php _e( 'WordPress is created by a worldwide team of passionate individuals.' ); ?>
+            </p>
+            <p>
+                <?php
+                printf(
+                    /* translators: %s: https://make.wordpress.org/ */
+                    __( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ),
+                    __( 'https://make.wordpress.org/' )
+                );
+                ?>
+            </p>
+
+            <?php endif; ?>
         </div>
 

trunk/src/wp-admin/css/about.css

@@ -100 +100 @@
     background: #f3f4f5;
     background: var(--background);
+    clear: both;
 }
 
@@ -304 +305 @@
 
 .about__container h1 {
-    font-size: 5em;
-    line-height: 1;
-}
-
+    margin: 0 0 1em;
+    padding: 0;
+    font-weight: 600;
+    color: inherit;
+}
+
+.about__container h1,
 .about__container h2 {
     margin-top: 0;
     font-size: 1.4em;
+    line-height: 1.4;
 }
 
@@ -396 +401 @@
 }
 
-@media screen and (max-width: 782px) {
-    .about__container h1 {
-        font-size: 4em;
-    }
-}
-
 @media screen and (max-width: 480px) {
-    .about__container h1 {
-        font-size: 3.2em;
-    }
-
     .about__section.is-feature {
         font-size: 1.4em;
@@ -416 +411 @@
 
 .about__header {
-    display: -ms-grid;
-    display: grid;
-    -ms-grid-columns: 1fr 1fr;
-    grid-template-columns: 1fr 1fr;
-    -ms-grid-rows: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    min-height: 30em;
-    max-height: 42em;
-    height: 90vh;
     margin-bottom: 32px;
     background-color: #f3f4f5;
     background-color: var(--background);
     background-repeat: no-repeat;
-    background-position: top center;
+    background-position: top right;
     background-size: contain;
-    background-image: url('https://wordpress.org/images/core/5.4/header.svg');
+    background-image: url('https://wordpress.org/images/core/5.4/header-diagonal.svg');
+}
+
+.rtl .about__header {
+    background-image: url('https://wordpress.org/images/core/5.4/header-diagonal-rtl.svg');
 }
 
@@ -443 +433 @@
 
 .about__header-title {
-    -ms-grid-column: 1;
-    grid-column: 1;
-    -ms-grid-row: 1;
-    -ms-grid-row-span: 2;
-    grid-row: 1/span 2;
-    padding: 32px;
-    -webkit-writing-mode: vertical-rl;
-    -ms-writing-mode: tb-rl;
-    writing-mode: vertical-rl;
-    transform: rotate(180deg);
-}
-
-/* Needs to be inline-block to use vertical-align, needs specificity to override flex. */
-.about__header .about__header-title {
-    display: inline-block;
-    vertical-align: top;
-}
-
-.about__header-title h1 {
+    min-height: 24em;
+    max-height: 32em;
+    height: 80vh;
+    padding: 0 32px;
+}
+
+.about__header-title p {
+    margin: 0;
     padding: 0;
+    font-size: 4em;
+    line-height: 1;
+    font-weight: 500;
     color: #1730e5;
     color: var(--accent-1);
 }
 
-.about__header-title h1 span {
-    display: block;
-    font-weight: 600;
-    font-size: 1.2em;
-    line-height: 1;
+.about__header-title p span {
+    display: inline-block;
     color: #216bce;
     color: var(--accent-2);
@@ -477 +456 @@
 
 .about__header-text {
-    -ms-grid-column: 2;
-    grid-column: 2;
-    -ms-grid-row: 2;
-    grid-row: 2;
-    padding: 32px;
+    padding: 16px 32px 32px;
     font-size: 1.5em;
     line-height: 1.4;
-    text-align: right;
-    justify-self: flex-end;
 }
 
@@ -493 +466 @@
 
 .about__header-navigation {
-    -ms-grid-column: 1;
-    -ms-grid-column-span: 2;
-    grid-column: 1/span 2;
-    -ms-grid-row: 3;
-    grid-row: 3;
     padding-top: 0;
     background: #216bce;
@@ -544 +512 @@
         font-size: 1.4em;
     }
-}
-
-@media screen and (max-width: 600px) {
-    .about__header {
-        display: block;
-        min-height: unset;
-        max-height: unset;
+
+    .about__header-title {
+        min-height: 0;
+        max-height: none;
         height: auto;
-    }
-
-    .about__header-title {
         /*
-         * 80% is a "magic" number to create a top offset approx-equal to the height of the background image,
+         * 60% is a "magic" number to create a top offset approx-equal to the height of the background image,
          * which scales to match the container width.
          */
-        padding-top: 80%;
-        padding-bottom: 0;
-        -webkit-writing-mode: initial;
-        -ms-writing-mode: initial;
-        writing-mode: initial;
-        transform: none;
-    }
-
-    .about__header-text {
-        text-align: left;
+        padding-top: 60%;
     }
 
@@ -579 +532 @@
 
 @media screen and (max-width: 480px) {
+    .about__header-title p {
+        font-size: 3.2em;
+    }
+
     .about__header-navigation .nav-tab {
         float: none;

trunk/src/wp-admin/freedoms.php

@@ -26 +26 @@
     <div class="about__header">
         <div class="about__header-title">
-            <h1>
+            <p>
                 <?php _e( 'WordPress' ); ?>
                 <span><?php echo $display_version; ?></span>
-            </h1>
+            </p>
         </div>
 
@@ -47 +47 @@
 
     <div class="about__section has-subtle-background-color is-feature">
-        <h2><?php _e( 'Freedoms' ); ?></h2>
+        <h1><?php _e( 'Freedoms' ); ?></h1>
 
         <p class="about-description">

trunk/src/wp-admin/privacy.php

@@ -20 +20 @@
     <div class="about__header">
         <div class="about__header-title">
-            <h1>
+            <p>
                 <?php _e( 'WordPress' ); ?>
                 <span><?php echo $display_version; ?></span>
-            </h1>
+            </p>
         </div>
 
@@ -42 +42 @@
     <div class="about__section">
         <div class="column">
-            <h2><?php _e( 'Privacy' ); ?></h2>
+            <h1><?php _e( 'Privacy' ); ?></h1>
 
             <p><?php _e( 'From time to time, your WordPress site may send data to WordPress.org &#8212; including, but not limited to &#8212; the version of WordPress you are using, and a list of installed plugins and themes.' ); ?></p>