WordPress.org

Make WordPress Core

Changeset 47521


Ignore:
Timestamp:
03/27/2020 11:39:37 PM (2 months 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:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/about.php

    r47500 r47521  
    2121        <div class="about__header">
    2222            <div class="about__header-title">
    23                 <h1>
     23                <p>
    2424                    <?php _e( 'WordPress' ); ?>
    2525                    <span><?php echo $display_version; ?></span>
    26                 </h1>
     26                </p>
    2727            </div>
    2828
     
    4242
    4343        <div class="about__section is-feature has-accent-background-color">
    44             <p><?php _e( 'Say hello to more and better.' ); ?></p>
     44            <h1><?php _e( 'Say hello to more and better.' ); ?></h1>
     45
    4546            <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>
    4647        </div>
     
    106107                    <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>
    107108                </ul>
    108                 <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>
     109                <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>
    109110            </div>
    110111            <div class="column is-edge-to-edge">
  • trunk/src/wp-admin/credits.php

    r47475 r47521  
    2323    <div class="about__header">
    2424        <div class="about__header-title">
    25             <h1>
     25            <p>
    2626                <?php _e( 'WordPress' ); ?>
    2727                <span><?php echo $display_version; ?></span>
    28             </h1>
     28            </p>
    2929        </div>
    3030
     
    4343    </div>
    4444
    45     <div class="about__section">
     45    <div class="about__section is-feature">
    4646        <div class="column">
    47             <h2><?php _e( 'WordPress is created by a worldwide team of passionate individuals.' ); ?></h2>
     47            <h1><?php _e( 'Credits' ); ?></h1>
     48
     49            <?php if ( ! $credits ) : ?>
    4850
    4951            <p>
    5052                <?php
    51                 if ( ! $credits ) {
    52                     printf(
    53                         /* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */
    54                         __( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ),
    55                         __( 'https://wordpress.org/about/' ),
    56                         __( 'https://make.wordpress.org/' )
    57                     );
    58                 } else {
    59                     printf(
    60                         /* translators: %s: https://make.wordpress.org/ */
    61                         __( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ),
    62                         __( 'https://make.wordpress.org/' )
    63                     );
    64                 }
     53                printf(
     54                    /* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */
     55                    __( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ),
     56                    __( 'https://wordpress.org/about/' ),
     57                    __( 'https://make.wordpress.org/' )
     58                );
    6559                ?>
    6660            </p>
     61
     62            <?php else : ?>
     63
     64            <p>
     65                <?php _e( 'WordPress is created by a worldwide team of passionate individuals.' ); ?>
     66            </p>
     67            <p>
     68                <?php
     69                printf(
     70                    /* translators: %s: https://make.wordpress.org/ */
     71                    __( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ),
     72                    __( 'https://make.wordpress.org/' )
     73                );
     74                ?>
     75            </p>
     76
     77            <?php endif; ?>
    6778        </div>
    6879
  • trunk/src/wp-admin/css/about.css

    r47475 r47521  
    100100    background: #f3f4f5;
    101101    background: var(--background);
     102    clear: both;
    102103}
    103104
     
    304305
    305306.about__container h1 {
    306     font-size: 5em;
    307     line-height: 1;
    308 }
    309 
     307    margin: 0 0 1em;
     308    padding: 0;
     309    font-weight: 600;
     310    color: inherit;
     311}
     312
     313.about__container h1,
    310314.about__container h2 {
    311315    margin-top: 0;
    312316    font-size: 1.4em;
     317    line-height: 1.4;
    313318}
    314319
     
    396401}
    397402
    398 @media screen and (max-width: 782px) {
    399     .about__container h1 {
    400         font-size: 4em;
    401     }
    402 }
    403 
    404403@media screen and (max-width: 480px) {
    405     .about__container h1 {
    406         font-size: 3.2em;
    407     }
    408 
    409404    .about__section.is-feature {
    410405        font-size: 1.4em;
     
    416411
    417412.about__header {
    418     display: -ms-grid;
    419     display: grid;
    420     -ms-grid-columns: 1fr 1fr;
    421     grid-template-columns: 1fr 1fr;
    422     -ms-grid-rows: 1fr 1fr;
    423     grid-template-rows: 1fr 1fr;
    424     min-height: 30em;
    425     max-height: 42em;
    426     height: 90vh;
    427413    margin-bottom: 32px;
    428414    background-color: #f3f4f5;
    429415    background-color: var(--background);
    430416    background-repeat: no-repeat;
    431     background-position: top center;
     417    background-position: top right;
    432418    background-size: contain;
    433     background-image: url('https://wordpress.org/images/core/5.4/header.svg');
     419    background-image: url('https://wordpress.org/images/core/5.4/header-diagonal.svg');
     420}
     421
     422.rtl .about__header {
     423    background-image: url('https://wordpress.org/images/core/5.4/header-diagonal-rtl.svg');
    434424}
    435425
     
    443433
    444434.about__header-title {
    445     -ms-grid-column: 1;
    446     grid-column: 1;
    447     -ms-grid-row: 1;
    448     -ms-grid-row-span: 2;
    449     grid-row: 1/span 2;
    450     padding: 32px;
    451     -webkit-writing-mode: vertical-rl;
    452     -ms-writing-mode: tb-rl;
    453     writing-mode: vertical-rl;
    454     transform: rotate(180deg);
    455 }
    456 
    457 /* Needs to be inline-block to use vertical-align, needs specificity to override flex. */
    458 .about__header .about__header-title {
    459     display: inline-block;
    460     vertical-align: top;
    461 }
    462 
    463 .about__header-title h1 {
     435    min-height: 24em;
     436    max-height: 32em;
     437    height: 80vh;
     438    padding: 0 32px;
     439}
     440
     441.about__header-title p {
     442    margin: 0;
    464443    padding: 0;
     444    font-size: 4em;
     445    line-height: 1;
     446    font-weight: 500;
    465447    color: #1730e5;
    466448    color: var(--accent-1);
    467449}
    468450
    469 .about__header-title h1 span {
    470     display: block;
    471     font-weight: 600;
    472     font-size: 1.2em;
    473     line-height: 1;
     451.about__header-title p span {
     452    display: inline-block;
    474453    color: #216bce;
    475454    color: var(--accent-2);
     
    477456
    478457.about__header-text {
    479     -ms-grid-column: 2;
    480     grid-column: 2;
    481     -ms-grid-row: 2;
    482     grid-row: 2;
    483     padding: 32px;
     458    padding: 16px 32px 32px;
    484459    font-size: 1.5em;
    485460    line-height: 1.4;
    486     text-align: right;
    487     justify-self: flex-end;
    488461}
    489462
     
    493466
    494467.about__header-navigation {
    495     -ms-grid-column: 1;
    496     -ms-grid-column-span: 2;
    497     grid-column: 1/span 2;
    498     -ms-grid-row: 3;
    499     grid-row: 3;
    500468    padding-top: 0;
    501469    background: #216bce;
     
    544512        font-size: 1.4em;
    545513    }
    546 }
    547 
    548 @media screen and (max-width: 600px) {
    549     .about__header {
    550         display: block;
    551         min-height: unset;
    552         max-height: unset;
     514
     515    .about__header-title {
     516        min-height: 0;
     517        max-height: none;
    553518        height: auto;
    554     }
    555 
    556     .about__header-title {
    557519        /*
    558          * 80% is a "magic" number to create a top offset approx-equal to the height of the background image,
     520         * 60% is a "magic" number to create a top offset approx-equal to the height of the background image,
    559521         * which scales to match the container width.
    560522         */
    561         padding-top: 80%;
    562         padding-bottom: 0;
    563         -webkit-writing-mode: initial;
    564         -ms-writing-mode: initial;
    565         writing-mode: initial;
    566         transform: none;
    567     }
    568 
    569     .about__header-text {
    570         text-align: left;
     523        padding-top: 60%;
    571524    }
    572525
     
    579532
    580533@media screen and (max-width: 480px) {
     534    .about__header-title p {
     535        font-size: 3.2em;
     536    }
     537
    581538    .about__header-navigation .nav-tab {
    582539        float: none;
  • trunk/src/wp-admin/freedoms.php

    r47475 r47521  
    2626    <div class="about__header">
    2727        <div class="about__header-title">
    28             <h1>
     28            <p>
    2929                <?php _e( 'WordPress' ); ?>
    3030                <span><?php echo $display_version; ?></span>
    31             </h1>
     31            </p>
    3232        </div>
    3333
     
    4747
    4848    <div class="about__section has-subtle-background-color is-feature">
    49         <h2><?php _e( 'Freedoms' ); ?></h2>
     49        <h1><?php _e( 'Freedoms' ); ?></h1>
    5050
    5151        <p class="about-description">
  • trunk/src/wp-admin/privacy.php

    r47475 r47521  
    2020    <div class="about__header">
    2121        <div class="about__header-title">
    22             <h1>
     22            <p>
    2323                <?php _e( 'WordPress' ); ?>
    2424                <span><?php echo $display_version; ?></span>
    25             </h1>
     25            </p>
    2626        </div>
    2727
     
    4242    <div class="about__section">
    4343        <div class="column">
    44             <h2><?php _e( 'Privacy' ); ?></h2>
     44            <h1><?php _e( 'Privacy' ); ?></h1>
    4545
    4646            <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>
Note: See TracChangeset for help on using the changeset viewer.