Merge pull request #5996 from freedomofpress/img-alts-first-pass

normalizes decorative and functional `img` `alt` attributes
freedomofpress · Jun 29, 2021 · 0589168 · 0589168
2 parents 337eb9d + b486c9a
commit 0589168
Show file tree

Hide file tree

Showing 20 changed files with 51 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="/securedrop/static/i/logo.png" width="350" height="314">
+  <img src="/securedrop/static/i/logo.png" alt="SecureDrop" width="350" height="314">
 </p>
 
 > [There are many ways to contribute to SecureDrop, and we welcome your help!](CONTRIBUTING.md) By contributing to this project, you agree to abide by our [Code of Conduct](https://github.com/freedomofpress/.github/blob/main/CODE_OF_CONDUCT.md).

diff --git a/securedrop/journalist_templates/_confirmation_modal.html b/securedrop/journalist_templates/_confirmation_modal.html
@@ -1,7 +1,7 @@
 <div id="{{ modal_data.modal_id }}" class="modal-dialog">
   <a href="#close" class="external"></a>
   <div>
-    <a href="#close" title="{{ gettext('Close') }}" class="close"> <img src="{{ url_for('static', filename='i/modal-x-white.png') }}" height="24" width="24"></a>
+    <a href="#close" title="{{ gettext('Close') }}" class="close"> <img src="{{ url_for('static', filename='i/modal-x-white.png') }}" alt="{{ gettext('Close') }}" height="24" width="24"></a>
     <h2>{{ modal_data.modal_header }}</h2>
     <p>{{ modal_data.modal_body }}</p>
     {% if modal_data.modal_warning is defined %}

diff --git a/securedrop/journalist_templates/_source_row.html b/securedrop/journalist_templates/_source_row.html
@@ -5,16 +5,16 @@
   <div class="designation">
     {% if source.star.starred %}
       <button class="button-star starred" type="submit" formaction="{{ url_for('col.remove_star', filesystem_id=source.filesystem_id) }}">
-        <img src="{{ url_for('static', filename='icons/starred.png') }}" class="icon-drop icon-star-source" width="16" height="15" alt="{{ gettext('starred icon') }}">
+        <img src="{{ url_for('static', filename='icons/starred.png') }}" class="icon-drop icon-star-source" width="16" height="15" alt="{{ gettext('Un-star {designation}').format(designation=source.journalist_designation) }}">
       </button>
       <input type="checkbox" name="cols_selected" value="{{ source.filesystem_id }}">
       <a href="/col/{{ source.filesystem_id }}" id="starred-source-link-{{ loop_index }}" class="code-name {% if source.num_unread != 0 %}unread{% else %}read{% endif %}">
         {{ source.journalist_designation }}
       </a>
     {% else %}
       <button class="button-star un-starred" type="submit" formaction="{{ url_for('col.add_star', filesystem_id=source.filesystem_id) }}">
-        <img src="{{ url_for('static', filename='icons/unstarred.png') }}" class="icon-drop icon-star-source off-hover" width="16" height="15" alt="{{ gettext('unstarred icon') }}">
-        <img src="{{ url_for('static', filename='icons/starred.png') }}" class="icon-drop icon-star-source on-hover" width="16" height="15" alt="{{ gettext('starred icon') }}">
+        <img src="{{ url_for('static', filename='icons/unstarred.png') }}" class="icon-drop icon-star-source off-hover" width="16" height="15" alt="{{ gettext('Star {designation}').format(designation=source.journalist_designation) }}">
+        <img src="{{ url_for('static', filename='icons/starred.png') }}" class="icon-drop icon-star-source on-hover" width="16" height="15" alt="{{ gettext('Star {designation}').format(designation=source.journalist_designation) }}">
       </button>
       <input type="checkbox" name="cols_selected" value="{{ source.filesystem_id }}">
       <a href="/col/{{ source.filesystem_id }}" id="un-starred-source-link-{{ loop_index }}" class="code-name {% if source.num_unread != 0 %}unread{% else %}read{% endif %}">
@@ -35,7 +35,7 @@
     {% if source.num_unread > 0 %}
       <span class="unread">
         <a class="btn small" href="/download_unread/{{ source.filesystem_id }}">
-          <img src="{{ url_for('static', filename='icons/download.png') }}" class="icon" width="11" height="13" alt="{{ gettext('download icon') }}">
+          <img src="{{ url_for('static', filename='icons/download.png') }}" class="icon" width="11" height="13" alt="{{ gettext('Download') }}">
           {{ ngettext('1 unread', '{num} unread', source.num_unread).format(num=source.num_unread) }}
         </a>
       </span>

diff --git a/securedrop/journalist_templates/admin.html b/securedrop/journalist_templates/admin.html
@@ -28,20 +28,20 @@ <h1>{{ gettext('Admin Interface') }}</h1>
         <td>
           <a href="/admin/edit/{{ user.id }}" class="plain" data-username="{{ user.username }}">
             <i title="{{ gettext('Edit user {username}').format(username=user.username) }}">
-              <img src="{{ url_for('static', filename='icons/edit-user.png') }}" class="icon" width="18" height="16" alt="{{ gettext('edit user icon') }}">
+              <img src="{{ url_for('static', filename='icons/edit-user.png') }}" class="icon" width="18" height="16" alt="{{ gettext('Edit user {username}').format(username=user.username) }}">
             </i>
           </a>
         </td>
 	{% if user.id == g.user.id %}
         <td>
-          <img src="{{ url_for('static', filename='icons/trash-disabled.png') }}" width="14" height="16" alt="{{ gettext('trash icon disabled') }}">
+          <img src="{{ url_for('static', filename='icons/trash-disabled.png') }}" width="14" height="16" alt="{{ gettext('User deletion disabled') }}">
         </td>
 	{% else %}
         <td>
           <button type="submit" class="plain delete-user" formaction="/admin/delete/{{ user.id }}" data-username="{{ user.username}}">
             <i title="{{ gettext('Delete user {username}').format(username=user.username) }}">
-              <img src="{{ url_for('static', filename='icons/trash.png') }}" class="off-hover" width="14" height="16" alt="{{ gettext('trash icon') }}">
-              <img src="{{ url_for('static', filename='icons/trash-hover-red.png') }}" class="on-hover" width="14" height="16" alt="{{ gettext('trash icon') }}">
+              <img src="{{ url_for('static', filename='icons/trash.png') }}" class="off-hover" width="14" height="16" alt="{{ gettext('Delete user {username}').format(username=user.username) }}">
+              <img src="{{ url_for('static', filename='icons/trash-hover-red.png') }}" class="on-hover" width="14" height="16" alt="{{ gettext('Delete user {username}').format(username=user.username) }}">
             </i>
           </button>
         </td>

diff --git a/securedrop/journalist_templates/col.html b/securedrop/journalist_templates/col.html
@@ -30,23 +30,23 @@
               {% if not doc.deleted_by_source %}
                 <input type="checkbox" name="doc_names_selected" value="{{ doc.filename }}" class="doc-check">
                 <span title="{{ gettext('Reply') }}" class="icon">
-                  <img src="{{ url_for('static', filename='icons/reply.png') }}" class="icon" width="16" height="16" alt="{{ gettext('reply icon') }}">
+                  <img src="{{ url_for('static', filename='icons/reply.png') }}" class="icon" width="16" height="16" alt="{{ gettext('Reply') }}">
                 </span>
               {% else %}
                 <input type="checkbox" name="doc_names_selected" value="{{ doc.filename }}" class="doc-check">
                 <span title="{{ gettext('Read') }}" class="icon">
-                  <img src="{{ url_for('static', filename='icons/check.png') }}" class="icon" width="16" height="12" alt="{{ gettext('check icon') }}">
+                  <img src="{{ url_for('static', filename='icons/check.png') }}" class="icon" width="16" height="12" alt="{{ gettext('Reply read') }}">
                 </span>
               {% endif %}
             {% elif not doc.seen %}
               <input type="checkbox" name="doc_names_selected" value="{{ doc.filename }}" class="doc-check unread-cb">
               <span title="{{ gettext('Unread') }}" class="icon">
-                <img src="{{ url_for('static', filename='icons/envelope-closed.png') }}" class="icon" width="16" height="15" alt="{{ gettext('closed envelope icon') }}">
+                <img src="{{ url_for('static', filename='icons/envelope-closed.png') }}" class="icon" width="16" height="15" alt="{{ gettext('Unread') }}">
               </span>
             {% else %}
               <input type="checkbox" name="doc_names_selected" value="{{ doc.filename }}" class="doc-check">
               <span title="{{ gettext('Read') }}" class="icon">
-                <img src="{{ url_for('static', filename='icons/envelope-open.png') }}" class="icon" width="16" height="15" alt="{{ gettext('open envelope icon') }}">
+                <img src="{{ url_for('static', filename='icons/envelope-open.png') }}" class="icon" width="16" height="15" alt="{{ gettext('Read') }}">
               </span>
             {% endif %}
             <a class="file {% if not doc.seen and not doc.filename.endswith('reply.gpg') %}unread{% else %}read{% endif %}" href="{{ url_for('col.download_single_file', filesystem_id=filesystem_id, fn=doc.filename) }}">
@@ -56,15 +56,15 @@
 
             {% if doc.filename.endswith('-doc.gz.gpg') %}
               <i title="{{ gettext('Uploaded Document') }}" class="pull-right">
-                <img src="{{ url_for('static', filename='icons/files.png') }}" width="14" height="16" alt="{{ gettext('files icon') }}">
+                <img src="{{ url_for('static', filename='icons/files.png') }}" width="14" height="16" alt="{{ gettext('Uploaded Document') }}">
               </i>
             {% elif doc.filename.endswith('-reply.gpg') %}
               <i title="{{ gettext('Reply') }}" class="pull-right">
-                <img src="{{ url_for('static', filename='icons/reply.png') }}" width="16" height="16" alt="{{ gettext('reply icon') }}">
+                <img src="{{ url_for('static', filename='icons/reply.png') }}" width="16" height="16" alt="{{ gettext('Reply') }}">
               </i>
             {% else %}
               <i title="{{ gettext('Message') }}" class="pull-right">
-                <img src="{{ url_for('static', filename='icons/messages.png') }}" width="15" height="13" alt="{{ gettext('messages icon') }}">
+                <img src="{{ url_for('static', filename='icons/messages.png') }}" width="15" height="13" alt="{{ gettext('Message') }}">
               </i>
             {% endif %}
           </li>

diff --git a/securedrop/journalist_templates/flashed.html b/securedrop/journalist_templates/flashed.html
@@ -4,11 +4,11 @@
     {% if category not in ["banner-warning","logo-success","logo-error","submission-preferences-success","submission-preferences-error","org-name-success","org-name-error", "testalert-success", "testalert-error", "testalert-notification"] %}
       <div class="flash {{ category }}">
         {% if category == "notification" %}
-        <img src="{{ url_for('static', filename='i/flash-notification.png') }}" height="35" width="15">
+        <img src="{{ url_for('static', filename='i/flash-notification.png') }}" alt="{{ gettext('Notification') }}" height="35" width="15">
         {% elif category == "success" %}
-        <img src="{{ url_for('static', filename='i/flash-success.png') }}" height="15" width="20">
+        <img src="{{ url_for('static', filename='i/flash-success.png') }}" alt="{{ gettext('Success') }}" height="15" width="20">
         {% elif category == "error" %}
-        <img src="{{ url_for('static', filename='i/flash-error.png') }}" height="30" width="9">
+        <img src="{{ url_for('static', filename='i/flash-error.png') }}" alt="{{ gettext('Error') }}" height="30" width="9">
         {% endif %}
         {{ message }}
       </div>

diff --git a/securedrop/journalist_templates/locales.html b/securedrop/journalist_templates/locales.html
@@ -3,13 +3,13 @@
   <input id="menu-1-checkbox" class="menu__checkbox visually-hidden" type="checkbox" >
   <label for="menu-1-checkbox" class="menu__trigger">
     <div class="menu-icon-container">
-      <img class="menu__trigger-icon" src="/static/i/languages_globe.png" width="18" height="18">
+      <img class="menu__trigger-icon" src="/static/i/languages_globe.png" alt="" width="18" height="18">
     </div>
     <div class="menu-text-container">
       <span class="menu__trigger-text">{{ g.locales[g.localeinfo.id] }}</span>
     </div>
     <div class="menu-trigger-container">
-      <img class="menu__trigger-icon" src="/static/i/languages_arrow.png" width="12" height="18">
+      <img class="menu__trigger-icon" src="/static/i/languages_arrow.png" alt="" width="12" height="18">
     </div>
   </label>
 

diff --git a/securedrop/journalist_templates/preferences_saved_flash.html b/securedrop/journalist_templates/preferences_saved_flash.html
@@ -6,11 +6,11 @@
         {% set category_status = category.split('-')|last %}
           <div class="flash {{ category_status }}">
           {% if category_status == "success" %}
-              <img src="{{ url_for('static', filename='i/flash-success.png') }}" height="15" width="20">
+              <img src="{{ url_for('static', filename='i/flash-success.png') }}" alt="{{ gettext('Success') }}" height="15" width="20">
           {% elif category_status == "error" %}
-              <img src="{{ url_for('static', filename='i/flash-error.png') }}" height="30" width="9">
+              <img src="{{ url_for('static', filename='i/flash-error.png') }}" alt="{{ gettext('Error') }}" height="30" width="9">
           {% elif category_status == "notification" %}
-              <img src="{{ url_for('static', filename='i/flash-notification.png') }}" height="35" width="15">
+              <img src="{{ url_for('static', filename='i/flash-notification.png') }}" alt="{{ gettext('Notification') }}" height="35" width="15">
           {% endif %}
               {{ message }}
           </div>

diff --git a/securedrop/source_templates/banner_warning_flashed.html b/securedrop/source_templates/banner_warning_flashed.html
@@ -1,7 +1,7 @@
 {# these are flash messages that appear at the top and are really scary, like if you're using tor2web #}
 {% with messages = get_flashed_messages(with_categories=True, category_filter=["banner-warning"]) %}
   {% for category, message in messages %}
-  <p class="flash {{ category }}"><img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/exclamation-triangle-black.png') }}" width="20" height="17">
+  <p class="flash {{ category }}"><img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/exclamation-triangle-black.png') }}" alt="{{ gettext('Warning') }}" width="20" height="17">
  {{ message }}</p>
   {% endfor %}
 {% endwith %}
diff --git a/securedrop/source_templates/first_submission_flashed_message.html b/securedrop/source_templates/first_submission_flashed_message.html
@@ -1,4 +1,4 @@
-<img src="{{ url_for('static', filename='i/success_checkmark.png') }}" height="64" width="74">
+<img src="{{ url_for('static', filename='i/success_checkmark.png') }}" alt="{{ gettext('Success') }}" height="64" width="74">
 <div class="message"><strong>{{ gettext('Success!') }}</strong>
   <p>{{ gettext('Thank you for sending this information to us. Please check back later for replies.') }}
     <a href="#codename-hint-visible">

diff --git a/securedrop/source_templates/flashed.html b/securedrop/source_templates/flashed.html
@@ -4,11 +4,11 @@
     {% if category != 'banner-warning' %}
       <div class="flash {{ category }}">
         {% if category == 'notification' %}
-        <img src="{{ url_for('static', filename='i/font-awesome/info-circle-black.png') }}" width="20" height="16">
+        <img src="{{ url_for('static', filename='i/font-awesome/info-circle-black.png') }}" alt="{{ gettext('Notification') }} width="20" height="16">
         {% elif category == 'error' %}
-        <img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/exclamation-triangle-black.png') }}" width="20" height="17">
+        <img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/exclamation-triangle-black.png') }}" alt="{{ gettext('Error') }}" width="20" height="17">
         {% elif category == 'important' %}
-        <img src="{{ url_for('static', filename='i/bang-stop.png') }}" width="22" height="22">
+        <img src="{{ url_for('static', filename='i/bang-stop.png') }}" alt="{{ gettext('Important') }}" width="22" height="22">
         {% endif %}
         {{ message }}
       </div>

diff --git a/securedrop/source_templates/footer.html b/securedrop/source_templates/footer.html
@@ -1,7 +1,7 @@
 <hr class="footer-separator">
 <footer>
   <div id="footer-powered-by">
-    <img id="footer-logo" src="{{url_for('static', filename='i/logo-footer.png') }}" width="20" height="23">{{ gettext('Powered by') }} <strong>SecureDrop {{ version }}</strong>.
+    <img id="footer-logo" src="{{url_for('static', filename='i/logo-footer.png') }}" alt="" width="20" height="23">{{ gettext('Powered by') }} <strong>SecureDrop {{ version }}</strong>.
   </div>
   <div id="footer-advisory">
     {{ gettext('Please note: Sharing sensitive documents may put you at risk, even when using Tor and SecureDrop.') }}

diff --git a/securedrop/source_templates/generate.html b/securedrop/source_templates/generate.html
@@ -12,15 +12,15 @@ <h1>{{ gettext('Welcome') }}</h1>
 <hr class="no-line">
 
 <div class="code">
-  <img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/lock-black.png') }}" width="20" height="23">
+  <img class="pull-left" src="{{ url_for('static', filename='i/font-awesome/lock-black.png') }}" alt="" width="20" height="23">
   <p id="codename" class="codename">{{ codename }}</p>
   <div class="pull-right">
 
     <form id="regenerate-form" method="post">
       <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
       <button type="submit" id="regenerate-submit" class="small">
-        <img class="icon pull-left off-hover" src="{{ url_for('static', filename='i/font-awesome/refresh-white.png') }}" width="20" height="20">
-        <img class="icon pull-left on-hover" src="{{ url_for('static', filename='i/font-awesome/refresh-white.png') }}"  width="20" height="20">
+        <img class="icon pull-left off-hover" src="{{ url_for('static', filename='i/font-awesome/refresh-white.png') }}" alt="{{ gettext('Refresh codename') }}" width="20" height="20">
+        <img class="icon pull-left on-hover" src="{{ url_for('static', filename='i/font-awesome/refresh-white.png') }}"  alt="{{ gettext('Refresh codename') }}" width="20" height="20">
       </button>
     </form>
   </div>