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

* Remove vertical text and unnecessary italics.
* Update H1 headings to be unique for each of the About, Credits, Freedoms, Privacy pages.

Props sabernhardt, ryelle, melchoyce, karmatosed, audrasjb, afercia, davidbaumwald, SergeyBiryukov.
Reviewed by ryelle, SergeyBiryukov.
Merges [47521] to the 5.4 branch.
See #49295.
Built from https://develop.svn.wordpress.org/branches/5.4@47522


git-svn-id: http://core.svn.wordpress.org/branches/5.4@47297 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/about.php

@@ -20,10 +20,10 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 
 		<div class="about__header">
 			<div class="about__header-title">
-				<h1>
+				<p>
 					<?php _e( 'WordPress' ); ?>
 					<span><?php echo $display_version; ?></span>
-				</h1>
+				</p>
 			</div>
 
 			<div class="about__header-text">
@@ -41,7 +41,8 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 		</div>
 
 		<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>
 
@@ -105,7 +106,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 					<li><?php _e( 'Tips are gone. In their place, a Welcome Guide window you can bring up when you need it&mdash;and only when you need it&mdash;again and again.' ); ?></li>
 					<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">
 				<div class="about__image aligncenter">

wp-admin/credits.php

@@ -22,10 +22,10 @@ $credits = wp_credits();
 
 	<div class="about__header">
 		<div class="about__header-title">
-			<h1>
+			<p>
 				<?php _e( 'WordPress' ); ?>
 				<span><?php echo $display_version; ?></span>
-			</h1>
+			</p>
 		</div>
 
 		<div class="about__header-text">
@@ -42,28 +42,39 @@ $credits = wp_credits();
 		</nav>
 	</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(
-					printf(
+					/* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */
-						/* 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>.' ),
-						__( '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://wordpress.org/about/' ),
+					__( 'https://make.wordpress.org/' )
-						__( '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/' )
-					);
-				}
 				?>
 			</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>
 
 		<div class="about__image aligncenter">

wp-admin/css/about-rtl.css

@@ -100,6 +100,7 @@
 .about__section {
 	background: #f3f4f5;
 	background: var(--background);
+	clear: both;
 }
 
 .about__container .has-accent-background-color {
@@ -304,13 +305,17 @@
 }
 
 .about__container h1 {
-	font-size: 5em;
+	margin: 0 0 1em;
-	line-height: 1;
+	padding: 0;
+	font-weight: 600;
+	color: inherit;
 }
 
+.about__container h1,
 .about__container h2 {
 	margin-top: 0;
 	font-size: 1.4em;
+	line-height: 1.4;
 }
 
 .about__container h3 {
@@ -396,17 +401,7 @@
 	text-align: center;
 }
 
-@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;
 		font-weight: 500;
@@ -416,22 +411,17 @@
 /* 1.3 - Header */
 
 .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 left;
 	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');
 }
 
 .about__header > div {
@@ -443,49 +433,32 @@
 }
 
 .about__header-title {
-	-ms-grid-column: 1;
+	min-height: 24em;
-	grid-column: 1;
+	max-height: 32em;
-	-ms-grid-row: 1;
+	height: 80vh;
-	-ms-grid-row-span: 2;
+	padding: 0 32px;
-	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-title p {
-.about__header .about__header-title {
+	margin: 0;
-	display: inline-block;
-	vertical-align: top;
-}
-
-.about__header-title h1 {
 	padding: 0;
+	font-size: 4em;
+	line-height: 1;
+	font-weight: 500;
 	color: #1730e5;
 	color: var(--accent-1);
 }
 
-.about__header-title h1 span {
+.about__header-title p span {
-	display: block;
+	display: inline-block;
-	font-weight: 600;
-	font-size: 1.2em;
-	line-height: 1;
 	color: #216bce;
 	color: var(--accent-2);
 }
 
 .about__header-text {
-	-ms-grid-column: 2;
+	padding: 16px 32px 32px;
-	grid-column: 2;
-	-ms-grid-row: 2;
-	grid-row: 2;
-	padding: 32px;
 	font-size: 1.5em;
 	line-height: 1.4;
-	text-align: left;
-	justify-self: flex-end;
 }
 
 .about__header-text p {
@@ -493,11 +466,6 @@
 }
 
 .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;
 	background: var(--nav-background);
@@ -544,31 +512,16 @@
 	.about__container .about__header-text {
 		font-size: 1.4em;
 	}
-}
-
-@media screen and (max-width: 600px) {
-	.about__header {
-		display: block;
-		min-height: unset;
-		max-height: unset;
-		height: auto;
-	}
 
 	.about__header-title {
+		min-height: 0;
+		max-height: none;
+		height: auto;
 		/*
-		 * 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-top: 60%;
-		padding-bottom: 0;
-		-webkit-writing-mode: initial;
-		-ms-writing-mode: initial;
-		writing-mode: initial;
-		transform: none;
-	}
-
-	.about__header-text {
-		text-align: right;
 	}
 
 	.about__header-navigation .nav-tab {
@@ -579,6 +532,10 @@
 }
 
 @media screen and (max-width: 480px) {
+	.about__header-title p {
+		font-size: 3.2em;
+	}
+
 	.about__header-navigation .nav-tab {
 		float: none;
 		display: block;

wp-admin/css/about.css

@@ -99,6 +99,7 @@
 .about__section {
 	background: #f3f4f5;
 	background: var(--background);
+	clear: both;
 }
 
 .about__container .has-accent-background-color {
@@ -303,13 +304,17 @@
 }
 
 .about__container h1 {
-	font-size: 5em;
+	margin: 0 0 1em;
-	line-height: 1;
+	padding: 0;
+	font-weight: 600;
+	color: inherit;
 }
 
+.about__container h1,
 .about__container h2 {
 	margin-top: 0;
 	font-size: 1.4em;
+	line-height: 1.4;
 }
 
 .about__container h3 {
@@ -395,17 +400,7 @@
 	text-align: center;
 }
 
-@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;
 		font-weight: 500;
@@ -415,22 +410,17 @@
 /* 1.3 - Header */
 
 .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');
 }
 
 .about__header > div {
@@ -442,49 +432,32 @@
 }
 
 .about__header-title {
-	-ms-grid-column: 1;
+	min-height: 24em;
-	grid-column: 1;
+	max-height: 32em;
-	-ms-grid-row: 1;
+	height: 80vh;
-	-ms-grid-row-span: 2;
+	padding: 0 32px;
-	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-title p {
-.about__header .about__header-title {
+	margin: 0;
-	display: inline-block;
-	vertical-align: top;
-}
-
-.about__header-title h1 {
 	padding: 0;
+	font-size: 4em;
+	line-height: 1;
+	font-weight: 500;
 	color: #1730e5;
 	color: var(--accent-1);
 }
 
-.about__header-title h1 span {
+.about__header-title p span {
-	display: block;
+	display: inline-block;
-	font-weight: 600;
-	font-size: 1.2em;
-	line-height: 1;
 	color: #216bce;
 	color: var(--accent-2);
 }
 
 .about__header-text {
-	-ms-grid-column: 2;
+	padding: 16px 32px 32px;
-	grid-column: 2;
-	-ms-grid-row: 2;
-	grid-row: 2;
-	padding: 32px;
 	font-size: 1.5em;
 	line-height: 1.4;
-	text-align: right;
-	justify-self: flex-end;
 }
 
 .about__header-text p {
@@ -492,11 +465,6 @@
 }
 
 .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;
 	background: var(--nav-background);
@@ -543,31 +511,16 @@
 	.about__container .about__header-text {
 		font-size: 1.4em;
 	}
-}
-
-@media screen and (max-width: 600px) {
-	.about__header {
-		display: block;
-		min-height: unset;
-		max-height: unset;
-		height: auto;
-	}
 
 	.about__header-title {
+		min-height: 0;
+		max-height: none;
+		height: auto;
 		/*
-		 * 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-top: 60%;
-		padding-bottom: 0;
-		-webkit-writing-mode: initial;
-		-ms-writing-mode: initial;
-		writing-mode: initial;
-		transform: none;
-	}
-
-	.about__header-text {
-		text-align: left;
 	}
 
 	.about__header-navigation .nav-tab {
@@ -578,6 +531,10 @@
 }
 
 @media screen and (max-width: 480px) {
+	.about__header-title p {
+		font-size: 3.2em;
+	}
+
 	.about__header-navigation .nav-tab {
 		float: none;
 		display: block;

wp-admin/freedoms.php

@@ -25,10 +25,10 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 
 	<div class="about__header">
 		<div class="about__header-title">
-			<h1>
+			<p>
 				<?php _e( 'WordPress' ); ?>
 				<span><?php echo $display_version; ?></span>
-			</h1>
+			</p>
 		</div>
 
 		<div class="about__header-text">
@@ -46,7 +46,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 	</div>
 
 	<div class="about__section has-subtle-background-color is-feature">
-		<h2><?php _e( 'Freedoms' ); ?></h2>
+		<h1><?php _e( 'Freedoms' ); ?></h1>
 
 		<p class="about-description">
 		<?php

wp-admin/privacy.php

@@ -19,10 +19,10 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 
 	<div class="about__header">
 		<div class="about__header-title">
-			<h1>
+			<p>
 				<?php _e( 'WordPress' ); ?>
 				<span><?php echo $display_version; ?></span>
-			</h1>
+			</p>
 		</div>
 
 		<div class="about__header-text">
@@ -41,7 +41,7 @@ require_once ABSPATH . 'wp-admin/admin-header.php';
 
 	<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>
 

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.4-RC4-47518';
+$wp_version = '5.4-RC4-47522';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.