WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
03/15/2019 10:42:35 AM (6 years ago)
Author:
afercia
Message:

Accessibility: improve the "URL" and "Alt text" fields in the media modals.

Many users found the attachment URL field confusing: it says "URL" so it may appear like a field meant to paste a URL into.
Also, the Alt text field is the most important one in terms of content, while the Title field needs to be de-emphasized.

  • changes the URL field label to "Copy link"
  • moves the alt text field to the top as first field
  • avoids to set initial focus on the alt text field
  • adds an explanatory text with a link pointing to the W3C "alt decision tree" tutorial
  • adds aria-describedby to target the explanatory text
  • adjusts the CSS accordingly
  • updates the QUnit index.html file

Props melchoyce, audrasjb, afercia.
Fixes #41612.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/tests/qunit/index.html

    r44796 r44900  
    11191119                <# if ( 'image' === data.type && ! data.uploading ) { #>
    11201120                    <# if ( data.width && data.height ) { #>
    1121                         <div class="dimensions"><strong>Dimensions:</strong> {{ data.width }} &times; {{ data.height }}</div>
     1121                        <div class="dimensions"><strong>Dimensions:</strong>
     1122                            {{ data.width }} by {{ data.height }} pixels                        </div>
    11221123                    <# } #>
    11231124                <# } #>
    11241125
    1125                 <# if ( data.fileLength ) { #>
    1126                     <div class="file-length"><strong>Length:</strong> {{ data.fileLength }}</div>
     1126                <# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
     1127                    <div class="file-length"><strong>Length:</strong>
     1128                        <span aria-hidden="true">{{ data.fileLength }}</span>
     1129                        <span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
     1130                    </div>
    11271131                <# } #>
    11281132
    … …  
    11441148
    11451149            <div class="settings">
    1146                 <label class="setting" data-setting="url">
    1147                     <span class="name">URL</span>
    1148                     <input type="text" value="{{ data.url }}" readonly />
    1149                 </label>
    11501150                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
     1151                <# if ( 'image' === data.type ) { #>
     1152                    <label class="setting" data-setting="alt">
     1153                        <span class="name">Alternative Text</span>
     1154                        <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     1155                    </label>
     1156                    <p class="description" id="alt-text-description">Describe <a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
     1157                <# } #>
    11511158                                <label class="setting" data-setting="title">
    11521159                    <span class="name">Title</span>
    … …  
    11671174                    <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    11681175                </label>
    1169                 <# if ( 'image' === data.type ) { #>
    1170                     <label class="setting" data-setting="alt">
    1171                         <span class="name">Alt Text</span>
    1172                         <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
    1173                     </label>
    1174                 <# } #>
    11751176                <label class="setting" data-setting="description">
    11761177                    <span class="name">Description</span>
    11771178                    <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
    11781179                </label>
    1179                 <label class="setting">
     1180                <div class="setting">
    11801181                    <span class="name">Uploaded By</span>
    11811182                    <span class="value">{{ data.authorName }}</span>
    1182                 </label>
     1183                </div>
    11831184                <# if ( data.uploadedToTitle ) { #>
    1184                     <label class="setting">
     1185                    <div class="setting">
    11851186                        <span class="name">Uploaded To</span>
    11861187                        <# if ( data.uploadedToLink ) { #>
    … …  
    11891190                            <span class="value">{{ data.uploadedToTitle }}</span>
    11901191                        <# } #>
    1191                     </label>
    1192                 <# } #>
     1192                    </div>
     1193                <# } #>
     1194                <label class="setting" data-setting="url">
     1195                    <span class="name">Copy Link</span>
     1196                    <input type="text" value="{{ data.url }}" readonly />
     1197                </label>
    11931198                <div class="attachment-compat"></div>
    11941199            </div>
    … …  
    11971202                <a class="view-attachment" href="{{ data.link }}">View attachment page</a>
    11981203                <# if ( data.can.save ) { #> |
    1199                     <a href="post.php?post={{ data.id }}&action=edit">Edit more details</a>
     1204                    <a href="{{ data.editLink }}">Edit more details</a>
    12001205                <# } #>
    12011206                <# if ( ! data.uploading && data.can.remove ) { #> |
    … …  
    12811286                <# if ( 'image' === data.type && ! data.uploading ) { #>
    12821287                    <# if ( data.width && data.height ) { #>
    1283                         <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
     1288                        <div class="dimensions">
     1289                            {{ data.width }} by {{ data.height }} pixels                        </div>
    12841290                    <# } #>
    12851291
    … …  
    12891295                <# } #>
    12901296
    1291                 <# if ( data.fileLength ) { #>
    1292                     <div class="file-length">Length: {{ data.fileLength }}</div>
     1297                <# if ( data.fileLength && data.fileLengthHumanReadable ) { #>
     1298                    <div class="file-length">Length:                        <span aria-hidden="true">{{ data.fileLength }}</span>
     1299                        <span class="screen-reader-text">{{ data.fileLengthHumanReadable }}</span>
     1300                    </div>
    12931301                <# } #>
    12941302
    … …  
    13051313        </div>
    13061314
    1307         <label class="setting" data-setting="url">
    1308             <span class="name">URL</span>
    1309             <input type="text" value="{{ data.url }}" readonly />
    1310         </label>
    13111315        <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
     1316        <# if ( 'image' === data.type ) { #>
     1317            <label class="setting" data-setting="alt">
     1318                <span class="name">Alt Text</span>
     1319                <input type="text" value="{{ data.alt }}" aria-describedby="alt-text-description" {{ maybeReadOnly }} />
     1320            </label>
     1321            <p class="description" id="alt-text-description">Describe <a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
     1322        <# } #>
    13121323                <label class="setting" data-setting="title">
    13131324            <span class="name">Title</span>
    … …  
    13281339            <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
    13291340        </label>
    1330         <# if ( 'image' === data.type ) { #>
    1331             <label class="setting" data-setting="alt">
    1332                 <span class="name">Alt Text</span>
    1333                 <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
    1334             </label>
    1335         <# } #>
    13361341        <label class="setting" data-setting="description">
    13371342            <span class="name">Description</span>
    13381343            <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
     1344        </label>
     1345        <label class="setting" data-setting="url">
     1346            <span class="name">Copy Link</span>
     1347            <input type="text" value="{{ data.url }}" readonly />
    13391348        </label>
    13401349    </script>
    … …  
    15981607        </div>
    15991608
     1609        <label class="setting alt-text has-description">
     1610            <span>Alternative Text</span>
     1611            <input type="text" data-setting="alt" aria-describedby="alt-text-description" />
     1612        </label>
     1613        <p class="description" id="alt-text-description">Describe <a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
     1614
    16001615                    <label class="setting caption">
    16011616                <span>Caption</span>
    16021617                <textarea data-setting="caption" />
    16031618            </label>
    1604 
    1605         <label class="setting alt-text">
    1606             <span>Alt Text</span>
    1607             <input type="text" data-setting="alt" />
    1608         </label>
    16091619
    16101620        <div class="setting align">
    … …  
    16521662                </div>
    16531663                <div class="column-settings">
     1664                    <label class="setting alt-text has-description">
     1665                        <span>Alternative Text</span>
     1666                        <input type="text" data-setting="alt" value="{{ data.model.alt }}" aria-describedby="alt-text-description" />
     1667                    </label>
     1668                    <p class="description" id="alt-text-description">Describe <a href="https://www.w3.org/WAI/tutorials/images/decision-tree" target="_blank" rel="noopener noreferrer">the purpose of the image<span class="screen-reader-text"> (opens in a new tab)</span></a>. Leave empty if the image is purely decorative.</p>
     1669
    16541670                                            <label class="setting caption">
    16551671                            <span>Caption</span>
    16561672                            <textarea data-setting="caption">{{ data.model.caption }}</textarea>
    16571673                        </label>
    1658 
    1659                     <label class="setting alt-text">
    1660                         <span>Alternative Text</span>
    1661                         <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
    1662                     </label>
    16631674
    16641675                    <h2>Display Settings</h2>
    … …  
    17621773                                <label class="setting link-rel">
    17631774                                    <span>Link Rel</span>
    1764                                     <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
     1775                                    <input type="text" data-setting="linkRel" value="{{ data.model.linkRel }}" />
    17651776                                </label>
    17661777                                <label class="setting link-class-name">
Note: See TracChangeset for help on using the changeset viewer.