diff --git a/securedrop/journalist_app/forms.py b/securedrop/journalist_app/forms.py
index a66547b679..9f074effdb 100644
--- a/securedrop/journalist_app/forms.py
+++ b/securedrop/journalist_app/forms.py
@@ -93,9 +93,13 @@ class NewUserForm(FlaskForm):
     username = StringField('username', validators=[
         InputRequired(message=gettext('This field is required.')),
         minimum_length_validation, check_invalid_usernames
-    ])
-    first_name = StringField('first_name', validators=[name_length_validation, Optional()])
-    last_name = StringField('last_name', validators=[name_length_validation, Optional()])
+        ],
+        render_kw={'aria-describedby': 'username-notes'},
+    )
+    first_name = StringField('first_name', validators=[name_length_validation, Optional()],
+                             render_kw={'aria-describedby': 'name-notes'})
+    last_name = StringField('last_name', validators=[name_length_validation, Optional()],
+                            render_kw={'aria-describedby': 'name-notes'})
     password = HiddenField('password')
     is_admin = BooleanField('is_admin')
     is_hotp = BooleanField('is_hotp')
diff --git a/securedrop/journalist_templates/_confirmation_modal.html b/securedrop/journalist_templates/_confirmation_modal.html
index 198ac291f7..bc8b5607a8 100644
--- a/securedrop/journalist_templates/_confirmation_modal.html
+++ b/securedrop/journalist_templates/_confirmation_modal.html
@@ -1,17 +1,20 @@
 <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') }}" alt="{{ gettext('Close') }}" height="24" width="24"></a>
-    <h2>{{ modal_data.modal_header }}</h2>
-    <p>{{ modal_data.modal_body }}</p>
+  <a href="#close" class="external" aria-label="{{ gettext('Close') }}"></a>
+  <dialog open aria-labelledby="{{ modal_data.modal_id }}-heading">
+    <a href="#close" title="{{ gettext('Close') }}" class="close">
+      <span>{{ gettext('Close') }}</span>
+    </a>
+    <h2 id="{{ modal_data.modal_id }}-heading">{{ modal_data.modal_header }}</h2>
+    {{ modal_data.modal_body }}
     {% if modal_data.modal_warning is defined %}
-      <p><em>{{ modal_data.modal_warning }}</em></p>
+    <p class="warning">{{ modal_data.modal_warning }}</p>
     {% endif %}
-    <center>
-      <div class="btn-row">
-        <a href="#close" id="{{ modal_data.cancel_id }}" title="{{ gettext('Cancel') }}" class="btn cancel small">{{ gettext('Cancel') }}</a>
-        <button type="submit" id="{{ modal_data.submit_id }}" name="action" value="delete" {% if modal_data.modal_action is defined %} formaction="{{ modal_data.modal_action }}" {% endif %} class="btn small {{ modal_data.submit_btn_type }}">{{ modal_data.submit_btn_text }}</button>
-      </div>
-    </center>
-  </div>
+    <div class="btn-row">
+      <a href="#close" id="{{ modal_data.cancel_id }}" title="{{ gettext('Cancel') }}"
+        class="btn cancel small">{{ gettext('Cancel') }}</a>
+      <button type="submit" id="{{ modal_data.submit_id }}" name="action" value="delete"
+        {% if modal_data.modal_action is defined %} formaction="{{ modal_data.modal_action }}" {% endif %}
+        class="btn small {{ modal_data.submit_btn_type }}">{{ modal_data.submit_btn_text }}</button>
+    </div>
+  </dialog>
 </div>
diff --git a/securedrop/journalist_templates/_source_row.html b/securedrop/journalist_templates/_source_row.html
index 2d7a29e5f2..3a53e3f3c7 100644
--- a/securedrop/journalist_templates/_source_row.html
+++ b/securedrop/journalist_templates/_source_row.html
@@ -1,44 +1,55 @@
 {% set docs = source.documents_messages_count()['documents'] %}
 {% set msgs = source.documents_messages_count()['messages'] %}
-<li class="source {% if source.num_unread != 0 %}unread{% else %}read{% endif %}" data-source-designation="{{ source.journalist_designation|lower }}">
-  <time class="date" title="{{ source.last_updated|rel_datetime_format }}" datetime="{{ source.last_updated|html_datetime_format }}">{{ source.last_updated|rel_datetime_format(relative=True) }}</time>
-  <div class="designation">
+<tr class="source {% if source.num_unread != 0 %}unread{% else %}read{% endif %}"
+  data-source-designation="{{ source.journalist_designation|lower }}">
+  <th class="designation" scope="row">
     {% if source.star.starred %}
-      <button class="button-star starred" type="submit" formaction="{{ url_for('col.remove_star', filesystem_id=source.filesystem_id) }}" aria-label="{{ gettext('Un-star {designation}').format(designation=source.journalist_designation) }}">
-        <img src="{{ url_for('static', filename='icons/starred.png') }}" class="icon-drop icon-star-source" width="16" height="15" alt="{{ gettext('{designation} is starred').format(designation=source.journalist_designation) }}">
-      </button>
-      <input type="checkbox" name="cols_selected" value="{{ source.filesystem_id }}" aria-labelledby="starred-source-link-{{ loop_index }}">
-      <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>
+    <button class="button-star starred" type="submit"
+      formaction="{{ url_for('col.remove_star', filesystem_id=source.filesystem_id) }}"
+      aria-label="{{ gettext('Un-star {designation}').format(designation=source.journalist_designation) }}">
+      <span>Unstar</span>
+    </button>
+    <input type="checkbox" name="cols_selected" value="{{ source.filesystem_id }}"
+      aria-labelledby="starred-source-link-{{ loop_index }}">
+    <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) }}" aria-label="{{ gettext('Star {designation}' ).format(designation=source.journalist_designation) }}">
-        <img src="{{ url_for('static', filename='icons/unstarred.png') }}" class="icon-drop icon-star-source off-hover" width="16" height="15" alt="{{ gettext('{designation} is not starred').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('{designation} is not starred').format(designation=source.journalist_designation) }}">
-      </button>
-      <input type="checkbox" name="cols_selected" value="{{ source.filesystem_id }}" aria-labelledby="un-starred-source-link-{{ loop_index }}">
-      <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 %}">
-        {{ source.journalist_designation }}
-      </a>
+    <button class="button-star un-starred" type="submit"
+      formaction="{{ url_for('col.add_star', filesystem_id=source.filesystem_id) }}"
+      aria-label="{{ gettext('Star {designation}' ).format(designation=source.journalist_designation) }}">
+      <span>Star</span>
+    </button>
+    <input type="checkbox" name="cols_selected" value="{{ source.filesystem_id }}"
+      aria-labelledby="un-starred-source-link-{{ loop_index }}">
+    <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 %}">
+      {{ source.journalist_designation }}
+    </a>
     {% endif %}
-  </div>
-  <div class="submission-count">
-    <input type="hidden" name="count-{{ source.journalist_designation|lower|replace(" ", "_") }}" class="submission-count-element" value="{{ docs + msgs }}">
-    <span>
-      <img src="{{ url_for('static', filename='icons/files.png') }}" class="icon-drop" width="14" height="16" alt="">
-      {{ ngettext('1 doc', '{num} docs', docs).format(num=docs) }}
-    </span>
-    <span>
-      <img src="{{ url_for('static', filename='icons/messages.png') }}" class="icon-drop" width="16" height="14" alt="">
-      {{ ngettext('1 message', '{num} messages', msgs).format(num=msgs) }}
-    </span>
+    <input type="hidden" name="count-{{ source.journalist_designation|lower|replace(" ", "_") }}"
+      class="submission-count-element" value="{{ docs + msgs }}">
+  </th>
+  <td class="submission-count files">
+    {{ ngettext('1 doc', '{num} docs', docs).format(num=docs) }}
+  </td>
+  <td class="submission-count messages">
+    {{ ngettext('1 message', '{num} messages', msgs).format(num=msgs) }}
+  </td>
+  <td class="unread">
     {% 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') }}">
-          {{ ngettext('1 unread', '{num} unread', source.num_unread).format(num=source.num_unread) }}
-        </a>
-      </span>
+    <a class="btn small icon download" href="/download_unread/{{ source.filesystem_id }}">
+      {{ ngettext('1 unread', '{num} unread', source.num_unread).format(num=source.num_unread) }}
+    </a>
+    {% else %}
+    <span class="visually-hidden">
+      {{ ngettext('1 unread', '{num} unread', source.num_unread).format(num=source.num_unread) }}
+    </span>
     {% endif %}
-  </div>
-</li>
+  </td>
+  <td class="date" aria-label="{{ source.last_updated|rel_datetime_format(relative=True) }}"><time
+      title="{{ source.last_updated|rel_datetime_format }}"
+      datetime="{{ source.last_updated|html_datetime_format }}">{{ source.last_updated|rel_datetime_format(relative=True) }}</time>
+  </td>
+</tr>
diff --git a/securedrop/journalist_templates/_sources_confirmation_final_modal.html b/securedrop/journalist_templates/_sources_confirmation_final_modal.html
index 7742a53553..2753b3c8d4 100644
--- a/securedrop/journalist_templates/_sources_confirmation_final_modal.html
+++ b/securedrop/journalist_templates/_sources_confirmation_final_modal.html
@@ -1,19 +1,20 @@
 <div id="{{ modal_data.modal_id }}" class="menu-modal-dialog">
-  <a href="#close" class="external"></a>
-  <div id="delete-confirm-menu-dialog">
-    <p>
+  <a href="#close" class="external" aria-label="{{ gettext('Close') }}"></a>
+  <dialog open id="delete-confirm-menu-dialog" aria-labelledby="confirm-heading">
+    <h2 id="confirm-heading" class="paragraph-spacing">
       {{ gettext('When the account for a source is deleted:') }}
-      <ul>
-        <li>{{ gettext('The source will no longer be able to log in with their codename.') }}</li>
-        <li>{{ gettext('You will not be able to send them replies.') }}</li>
-        <li>{{ gettext('All files and messages from that source will also be destroyed.') }}</li>
-      </ul>
-    </p>
-    <p>
-      <span class="modal-danger-text">{{ gettext('Are you sure this is what you want?') }}</span</p>
+    </h2>
+    <ul>
+      <li>{{ gettext('The source will no longer be able to log in with their codename.') }}</li>
+      <li>{{ gettext('You will not be able to send them replies.') }}</li>
+      <li>{{ gettext('All files and messages from that source will also be destroyed.') }}</li>
+    </ul>
+    <p class="modal-danger-text">{{ gettext('Are you sure this is what you want?') }}</p>
     <div class="btn-row">
-      <a href="#close" id="cancel-collections-deletions" title="{{ gettext('Cancel') }}" class="btn cancel small">{{ gettext('Cancel') }}</a>
-      <button type="submit" id="delete-collections-confirm" name="action" value="delete" class="btn small danger">{{ gettext('Yes, Delete Selected Source Accounts') }}</button>
+      <a href="#close" id="cancel-collections-deletions" title="{{ gettext('Cancel') }}"
+        class="btn cancel small">{{ gettext('Cancel') }}</a>
+      <button type="submit" id="delete-collections-confirm" name="action" value="delete"
+        class="btn small danger">{{ gettext('Yes, Delete Selected Source Accounts') }}</button>
     </div>
-  </div>
+  </dialog>
 </div>
diff --git a/securedrop/journalist_templates/_sources_confirmation_modal.html b/securedrop/journalist_templates/_sources_confirmation_modal.html
index 7a705d9b7e..5e1513242f 100644
--- a/securedrop/journalist_templates/_sources_confirmation_modal.html
+++ b/securedrop/journalist_templates/_sources_confirmation_modal.html
@@ -1,32 +1,24 @@
 <div id="{{ modal_data.modal_id }}" class="menu-modal-dialog">
-  <a href="#close" class="external"></a>
-  <div id="delete-menu-dialog">
-    <div id="delete-menu-no-select">
-      <p class="modal-danger-text">
-      <span class="modal-danger-text">{{ gettext("Nothing Selected") }}</span>
-      </p>
-      <p>
-      {{ gettext("You must select one or more items for deletion.") }}
-      </p>
+  <a href="#close" class="external" aria-label="{{ gettext('Close') }}"></a>
+  <dialog open id="delete-menu-dialog">
+    <div id="delete-menu-no-select" aria-labelledby="nothing-selected-heading">
+      <h2 id="nothing-selected-heading" class="modal-danger-text paragraph-spacing">{{ gettext("Nothing Selected") }}
+      </h2>
+      <p>{{ gettext("You must select one or more items for deletion.") }}</p>
     </div>
-    <div id="delete-menu-cta">
-    <p>
-      <span id="delete-menu-summary"></span>
-    </p>
-    <p>
-    {{ gettext("What would you like to delete?") }}
-    </p>
-    <p>
-      <button id="delete-files-and-messages" type="submit" name="action" value="delete-data" class="small btn danger modal-stacked">{{ gettext('Files and Messages') }}</button>
-    </p>
-    <p>
-      <a href="#delete-sources-confirm-modal" id="delete-collections">
-        <button type="button" class="small danger btn modal-stacked">{{ gettext('Source Accounts') }}</button>
-      </a>
-    </p>
+    <div id="delete-menu-cta" aria-labelledby="delete-heading">
+      <p id="delete-menu-summary"></p>
+      <h2 id="delete-heading" class="paragraph-spacing">{{ gettext("What would you like to delete?") }}</h2>
+      <ul class="modal-stacked">
+        <li><button id="delete-files-and-messages" type="submit" name="action" value="delete-data"
+            class="small btn danger">{{ gettext('Files and Messages') }}</button></li>
+        <li>
+          <a href="#delete-sources-confirm-modal" id="delete-collections" class="small danger btn">
+            {{ gettext('Source Accounts') }}
+          </a>
+        </li>
+      </ul>
     </div>
-    <p>
-      <a href="#close" id="delete-menu-dialog-cancel">{{ gettext('Cancel') }}</a>
-    </p>
-  </div>
+    <a href="#close" id="delete-menu-dialog-cancel" class="paragraph-spacing">{{ gettext('Cancel') }}</a>
+  </dialog>
 </div>
diff --git a/securedrop/journalist_templates/account_edit_hotp_secret.html b/securedrop/journalist_templates/account_edit_hotp_secret.html
index 131fc3a231..e007783cd0 100644
--- a/securedrop/journalist_templates/account_edit_hotp_secret.html
+++ b/securedrop/journalist_templates/account_edit_hotp_secret.html
@@ -1,11 +1,14 @@
 {% extends "base.html" %}
 {% block body %}
+<h1>{{ gettext('Change Secret') }}</h1>
 <form method="post">
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <p>
+  <div>
     <label for="otp_secret">{{ gettext('Change Secret') }}</label>
-    <input name="otp_secret" type="text" placeholder="{{ gettext('HOTP Secret') }}"><br>
-  </p>
-  <button type="submit">{{ gettext('CONTINUE') }}</button>
+    <input id="otp_secret" name="otp_secret" type="text" placeholder="{{ gettext('HOTP Secret') }}">
+  </div>
+  <div class="section-spacing">
+    <button type="submit" aria-label="{{ gettext('Continue to change secret') }}">{{ gettext('CONTINUE') }}</button>
+  </div>
 </form>
 {% endblock %}
diff --git a/securedrop/journalist_templates/account_new_two_factor.html b/securedrop/journalist_templates/account_new_two_factor.html
index 5448345d18..8431eaf16e 100644
--- a/securedrop/journalist_templates/account_new_two_factor.html
+++ b/securedrop/journalist_templates/account_new_two_factor.html
@@ -2,17 +2,22 @@
 {% block body %}
 {% if user.is_totp %}
 <h1>{{ gettext('Enable FreeOTP') }}</h1>
-<p>{{ gettext("You're almost done! To finish resetting your two-factor authentication, follow the instructions below to set up FreeOTP. Once you've added the entry for your account in the app, enter one of the 6-digit codes from the app to confirm that two-factor authentication is set up correctly.") }}</p>
+<p>
+  {{ gettext("You're almost done! To finish resetting your two-factor authentication, follow the instructions below to set up FreeOTP. Once you've added the entry for your account in the app, enter one of the 6-digit codes from the app to confirm that two-factor authentication is set up correctly.") }}
+</p>
 
 <ol>
   <li>{{ gettext('Install FreeOTP on your phone') }}</li>
   <li>{{ gettext('Open the FreeOTP app') }}</li>
   <li>{{ gettext('Tap the QR code symbol at the top') }}</li>
-  <li>{{ gettext('Your phone will now be in "scanning" mode. When you are in this mode, scan the barcode below:') }}</li>
+  <li>{{ gettext('Your phone will now be in "scanning" mode. When you are in this mode, scan the barcode below:') }}
+  </li>
 </ol>
 <div id="qrcode-container">{{ user.shared_secret_qrcode }}</div>
-<p>{{ gettext("Can't scan the barcode? You can manually pair FreeOTP with your SecureDrop account by entering the following two-factor secret into the app:") }}
-<p class="center"><span id="shared-secret">{{ user.formatted_otp_secret }}</span></p>
+<p>
+  {{ gettext("Can't scan the barcode? You can manually pair FreeOTP with your SecureDrop account by entering the following two-factor secret into the app:") }}
+</p>
+<mark id="shared-secret">{{ user.formatted_otp_secret }}</mark>
 <p>{{ gettext("Once you have paired FreeOTP with this account, enter the 6-digit verification code below:") }}</p>
 {% else %}
 <h1>{{ gettext('Enable YubiKey (OATH-HOTP)') }}</h1>
@@ -22,6 +27,6 @@ <h1>{{ gettext('Enable YubiKey (OATH-HOTP)') }}</h1>
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
   <label for="token">{{ gettext('Verification code') }}</label>
   <input name="token" id="token" type="text" placeholder="123456">
-  <button type="submit">{{ gettext('SUBMIT') }}</button>
+  <button type="submit" aria-label="{{ gettext('Submit verification code') }}">{{ gettext('SUBMIT') }}</button>
 </form>
 {% endblock %}
diff --git a/securedrop/journalist_templates/admin.html b/securedrop/journalist_templates/admin.html
index 32b889b15f..0c9d46f945 100644
--- a/securedrop/journalist_templates/admin.html
+++ b/securedrop/journalist_templates/admin.html
@@ -2,64 +2,64 @@
 {% block body %}
 <h1>{{ gettext('Admin Interface') }}</h1>
 
-<form action="{{ url_for('admin.add_user') }}">
-  <button type="submit" id="add-user">
-    <img src="{{ url_for('static', filename='icons/plus.png') }}" class="icon" width="13" height="15" alt="">
-    {{ gettext('ADD USER') }}
-  </button>
-</form>
-
-<hr class="no-line">
+<a href="{{ url_for('admin.add_user') }}" id="add-user" class="btn icon icon-plus"
+  aria-label="{{ gettext('Add User') }}">
+  {{ gettext('ADD USER') }}
+</a>
 
-{% if users %}
-<form id="user-actions" method="post">
-  <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <table id="users">
-    <tr>
-      <th>{{ gettext('Username') }}</th>
-      <th>{{ gettext('Edit') }}</th>
-      <th>{{ gettext('Delete') }}</th>
-      <th>{{ gettext('Created') }}</th>
-      <th>{{ gettext('Last login') }}</th>
-    </tr>
-    {% for user in users %}
+<section aria-labelledby="users-heading">
+  <h2 id="users-heading" class="visually-hidden">Users</h2>
+  {% if users %}
+  <form id="user-actions" method="post">
+    <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
+    <table id="users" aria-labelledby="users-heading">
+      <thead>
+        <tr>
+          <th scope="col">{{ gettext('Username') }}</th>
+          <th scope="col">{{ gettext('Edit') }}</th>
+          <th scope="col">{{ gettext('Delete') }}</th>
+          <th scope="col">{{ gettext('Created') }}</th>
+          <th scope="col">{{ gettext('Last login') }}</th>
+        </tr>
+      </thead>
+      {% for user in users %}
       <tr class="user">
-        <td>{{ user.username }}</td>
-        <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 {username}').format(username=user.username) }}">
-            </i>
+        <th scope="row">{{ user.username }}</th>
+        <td class="edit-user">
+          <a href="/admin/edit/{{ user.id }}" class="plain edit-user" data-username="{{ user.username }}"
+            aria-label="{{ gettext('Edit user {username}').format(username=user.username) }}">
+            {{ gettext('Edit') }}
           </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('User deletion disabled') }}">
+        {% if user.id == g.user.id %}
+        <td class="delete-user-disabled">
+          <span>{{ gettext('User deletion disabled') }}</span>
         </td>
-	{% else %}
-        <td>
-          <a href="?user_id={{ user.id }}#delete-user-confirmation-modal">
-            <button type="button" class="plain delete-user" 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('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>
+        {% else %}
+        <td class="delete-user">
+          <a href="?user_id={{ user.id }}#delete-user-confirmation-modal" class="plain"
+            data-username="{{ user.username}}"
+            aria-label="{{ gettext('Delete user {username}').format(username=user.username) }}">
+            {{ gettext('Delete') }}
           </a>
         </td>
-	{% endif %}
-        <td><time class="date" title="{{ user.created_on }}">{{ user.created_on|rel_datetime_format(relative=True) }}</time></td>
+        {% endif %}
+        <td class="date" aria-label="{{ user.created_on|rel_datetime_format(relative=True) }}"><time
+            datetime="{{ user.created_on|html_datetime_format }}"
+            title="{{ user.created_on }}">{{ user.created_on|rel_datetime_format(relative=True) }}</time></td>
         {% if user.last_access %}
-          <td><time class="date" title="{{ user.last_access }}">{{ user.last_access|rel_datetime_format(relative=True) }}</time></td>
+        <td class="date" aria-label="{{ user.last_access|rel_datetime_format(relative=True) }}"><time
+            datetime="{{ user.last_access|html_datetime_format }}"
+            title="{{ user.last_access }}">{{ user.last_access|rel_datetime_format(relative=True) }}</time></td>
         {% else %}
-          <td><time class="date">{{ gettext('never') }}</time></td>
+        <td class="date">{{ gettext('never') }}</td>
         {% endif %}
       </tr>
-    {% endfor %}
-  </table>
+      {% endfor %}
+    </table>
 
-  <!-- Delete Confirmation modal for user -->
-  {% with %}
+    <!-- Delete Confirmation modal for user -->
+    {% with %}
     {% set modal_data = {
                           "modal_id": "delete-user-confirmation-modal",
                           "modal_header": gettext('Delete Confirmation'),
@@ -72,20 +72,17 @@ <h1>{{ gettext('Admin Interface') }}</h1>
                         }
     %}
     {% include '_confirmation_modal.html' %}
-  {% endwith %}
-
-</form>
-{% else %}
-<p>{{ gettext('No users to display') }}</p>
-{% endif %}
+    {% endwith %}
 
-<hr class="no-line">
+  </form>
+  {% else %}
+  <p>{{ gettext('No users to display') }}</p>
+  {% endif %}
+</section>
 
-<a href="{{ url_for('admin.manage_config') }}" class="btn" id="update-instance-config">
-  <img src="{{ url_for('static', filename='icons/pencil-alt.png') }}" class="icon" width="15" height="15" alt="">
+<a href="{{ url_for('admin.manage_config') }}" class="btn icon icon-edit section-spacing-inline"
+  id="update-instance-config" aria-label="{{ gettext('Update instance config') }}">
   {{ gettext('INSTANCE CONFIG') }}
 </a>
 
-<hr class="no-line">
-
 {% endblock %}
diff --git a/securedrop/journalist_templates/admin_add_user.html b/securedrop/journalist_templates/admin_add_user.html
index 35523aa311..930578b44b 100644
--- a/securedrop/journalist_templates/admin_add_user.html
+++ b/securedrop/journalist_templates/admin_add_user.html
@@ -1,80 +1,69 @@
 {% extends "base.html" %}
 {% block body %}
-<p>
-  <img src="{{ url_for('static', filename='icons/chevron-left.png') }}" class="icon" width="9" height="14" alt="">
-  <a href="/admin">{{ gettext('Back to admin interface') }}</a>
-</p>
-<form method="post">
-  <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <p>
+<nav class="back" aria-labelledby="back-link">
+  <a id="back-link" href="/admin">{{ gettext('Back to admin interface') }}</a>
+</nav>
+<section aria-labelledby="add-user-heading">
+  <h1 id="add-user-heading">Add User</h1>
+  <form method="post">
+    <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
     {{ form.password(value=password, id=False) }}
-  </p>
-  <div class="container flex-end">
-    <div>
-      <p>
-        <label for="first_name">{{ gettext('Username') }}</label>
+    <div class="container flex-end">
+      <div>
+        <label for="username">{{ gettext('Username') }}</label>
         {{ form.username() }}
-        <br>
         {% for error in form.username.errors %}
-          <span class="form-validation-error">{{ error }}</span>
+        <span class="form-validation-error" role="alert">{{ error }}</span>
         {% endfor %}
-      </p>
-    </div>
-    <div>
-        <ul class="journalist-username__notes">
-            <li>{{gettext("Username can contain spaces")}}</li>
-            <li>{{gettext("Username is case-sensitive")}}</li>
+      </div>
+      <div>
+        <ul id="username-notes" class="journalist-username__notes">
+          <li>{{gettext("Username can contain spaces")}}</li>
+          <li>{{gettext("Username is case-sensitive")}}</li>
         </ul>
+      </div>
     </div>
-  </div>
-  <div class="container flex-end">
-    <div>
-      <p>
+    <div class="container flex-end">
+      <div>
         <label for="first_name">{{ gettext('First name') }}</label>
         {{ form.first_name() }}
-        <br>
         {% for error in form.first_name.errors %}
-          <span class="form-validation-error">{{ error }}</span>
+        <span class="form-validation-error" role="alert">{{ error }}</span>
         {% endfor %}
-      </p>
-    </div>
-    <div>
-      <p>
+      </div>
+      <div>
         <label for="last_name">{{ gettext('Last name') }}</label>
         {{ form.last_name() }}
-        <br>
         {% for error in form.last_name.errors %}
-          <span class="form-validation-error">{{ error }}</span>
+        <span class="form-validation-error" role="alert">{{ error }}</span>
         {% endfor %}
-      </p>
+      </div>
+      <div>
+        <ul id="name-notes" class="journalist-username__notes">
+          <li>{{gettext("First name and last name are optional")}}</li>
+        </ul>
+      </div>
     </div>
+    <p>{{ gettext("The user's password will be:") }} <mark class="password" id="password">{{ password }}</mark></p>
     <div>
-        <ul class="journalist-username__notes">
-            <li>{{gettext("First name and last name are optional")}}</li>
-        </ul>
+      {{ form.is_admin(id="is-admin") }}
+      <label for="is-admin">{{ gettext('Is Admin') }}</label>
+      {% for error in form.is_admin.errors %}
+      <span class="form-validation-error" role="alert">{{ error }}</span>
+      {% endfor %}
+    </div>
+    <div>
+      {{ form.is_hotp(id="is-hotp") }}
+      <label for="is-hotp">{{ gettext("Is using a YubiKey [HOTP]") }} </label>
+      <label for="otp_secret" class="visually-hidden">{{ gettext('HOTP Secret') }}</label>
+      {{ form.otp_secret(placeholder=gettext('HOTP Secret'), size="60") }}
+      {% for error in form.is_hotp.errors + form.otp_secret.errors %}
+      <span class="form-validation-error" role="alert">{{ error }}</span><br>
+      {% endfor %}
     </div>
-  </div>
-  <p>{{ gettext("The user's password will be:") }} <span class="password" id="password">{{ password }}</span></p>
-  <p>
-    {{ form.is_admin(id="is-admin") }}
-    <label for="is-admin">{{ gettext('Is Admin') }}</label>
-    <br>
-    {% for error in form.is_admin.errors %}
-      <span class="form-validation-error">{{ error }}</span>
-    {% endfor %}
-  </p>
-  <p>
-    {{ form.is_hotp(id="is-hotp") }}
-    <label for="is-hotp">{{ gettext("Is using a YubiKey [HOTP]") }} </label>
-    {{ form.otp_secret(placeholder=gettext('HOTP Secret'), size="60") }}
-    <br>
-    {% for error in form.is_hotp.errors + form.otp_secret.errors %}
-      <span class="form-validation-error">{{ error }}</span><br>
-    {% endfor %}
-  </p>
-  <button type="submit">
-    <img src="{{ url_for('static', filename='icons/plus.png') }}" class="icon" width="13" height="15" alt="">
-    {{ gettext('ADD USER') }}
-  </button>
-</form>
+    <button type="submit" class="icon icon-plus" aria-label="{{ gettext('Add User') }}">
+      {{ gettext('ADD USER') }}
+    </button>
+  </form>
+</section>
 {% endblock %}
diff --git a/securedrop/journalist_templates/admin_edit_hotp_secret.html b/securedrop/journalist_templates/admin_edit_hotp_secret.html
index 9774f6d000..c6ce6b474c 100644
--- a/securedrop/journalist_templates/admin_edit_hotp_secret.html
+++ b/securedrop/journalist_templates/admin_edit_hotp_secret.html
@@ -5,9 +5,12 @@ <h1>{{ gettext('Change HOTP Secret')}}</h1>
 <form method="post">
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
   <input type="hidden" name="uid" value="{{ uid }}">
-  <p>
-    <input name="otp_secret" type="text" placeholder="{{ gettext('HOTP Secret') }}"><br>
-  </p>
-  <button type="submit">{{ gettext('CONTINUE') }}</button>
+  <div>
+    <label for="otp_secret">{{ gettext('Change Secret') }}</label>
+    <input id="otp_secret" name="otp_secret" type="text" placeholder="{{ gettext('HOTP Secret') }}">
+  </div>
+  <div class="section-spacing">
+    <button type="submit" aria-label="{{ gettext('Continue to change secret') }}">{{ gettext('CONTINUE') }}</button>
+  </div>
 </form>
 {% endblock %}
diff --git a/securedrop/journalist_templates/admin_new_user_two_factor.html b/securedrop/journalist_templates/admin_new_user_two_factor.html
index 4bf665ddbe..e8ab541b36 100644
--- a/securedrop/journalist_templates/admin_new_user_two_factor.html
+++ b/securedrop/journalist_templates/admin_new_user_two_factor.html
@@ -3,17 +3,22 @@
 {% block body %}
 {% if user.is_totp %}
 <h1>{{ gettext('Enable FreeOTP') }}</h1>
-<p>{{ gettext("You're almost done! To finish adding this new user, have them follow the instructions below to set up two-factor authentication with FreeOTP. Once they've added an entry for this account in the app, have them enter one of the 6-digit codes from the app to confirm that two-factor authentication is set up correctly.") }}</p>
+<p>
+  {{ gettext("You're almost done! To finish adding this new user, have them follow the instructions below to set up two-factor authentication with FreeOTP. Once they've added an entry for this account in the app, have them enter one of the 6-digit codes from the app to confirm that two-factor authentication is set up correctly.") }}
+</p>
 
 <ol>
   <li>{{ gettext('Install FreeOTP on your phone') }}</li>
   <li>{{ gettext('Open the FreeOTP app') }}</li>
   <li>{{ gettext('Tap the QR code symbol at the top') }}</li>
-  <li>{{ gettext('Your phone will now be in "scanning" mode. When you are in this mode, scan the barcode below:') }}</li>
+  <li>{{ gettext('Your phone will now be in "scanning" mode. When you are in this mode, scan the barcode below:') }}
+  </li>
 </ol>
 <div id="qrcode-container">{{ user.shared_secret_qrcode }}</div>
-<p>{{ gettext("Can't scan the barcode? You can manually pair FreeOTP with this account by entering the following two-factor secret into the app:") }}</p>
-<p class="center"><span id="shared-secret">{{ user.formatted_otp_secret }}</span></p>
+<p>
+  {{ gettext("Can't scan the barcode? You can manually pair FreeOTP with this account by entering the following two-factor secret into the app:") }}
+</p>
+<mark id="shared-secret">{{ user.formatted_otp_secret }}</mark>
 
 <p>{{ gettext('Once you have paired FreeOTP with this account, enter the 6-digit verification code below:') }}</p>
 {% else %}
@@ -24,6 +29,6 @@ <h1>{{ gettext('Enable YubiKey (OATH-HOTP)') }}</h1>
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
   <label for="token">{{ gettext('Verification code') }}</label>
   <input name="token" id="token" type="text" placeholder="123456">
-  <button type="submit">{{ gettext('SUBMIT') }}</button>
+  <button type="submit" aria-label="{{ gettext('Submit verification code') }}">{{ gettext('SUBMIT') }}</button>
 </form>
 {% endblock %}
diff --git a/securedrop/journalist_templates/base.html b/securedrop/journalist_templates/base.html
index d889f50bce..e3f54be82e 100644
--- a/securedrop/journalist_templates/base.html
+++ b/securedrop/journalist_templates/base.html
@@ -1,58 +1,61 @@
 <!DOCTYPE html>
 <html lang="{{ g.localeinfo.language_tag }}" dir="{{ g.localeinfo.text_direction }}">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>{{ g.organization_name }}</title>
-
-    <link rel="stylesheet" href="/static/css/journalist.css">
-
-    <link rel="icon" type="image/png" href="/static/i/favicon.png">
-
-    {% include 'js-strings.html' %}
-
-    {% assets filters="jsmin", output="gen/journalist.js", "js/journalist.js" %}
-      <script src="{{ ASSET_URL }}"></script>
-    {% endassets %}
-    {% block extrahead %}{% endblock %}
-  </head>
-  <body>
-
-    {% if g.user %}
-    <div id="logout">
-      {{ gettext('Logged on as') }} <a href="{{ url_for('account.edit') }}" id="link-edit-account">{{ g.user.username }}</a> |
-      {% if g.user and g.user.is_admin %}
-      <a href="{{ url_for('admin.index') }}" id="link-admin-index">{{ gettext('Admin') }}</a> |
-      {% endif %}
-      <a href="{{ url_for('main.logout') }}" id="link-logout">{{ gettext('Log Out') }}</a>
-    </div>
-    <div class="clearfix"></div>
-    {% endif %}
 
-    <div class="content">
-      <div class="container">
-        {% block header %}
-        <div id="header">
-          <a href="{{ url_for('main.index') }}" class="no-bottom-border"><img src="{{ g.logo }}" class="logo small" alt="{{ g.organization_name }} | Home" width="250"></a>
-          {% include 'locales.html' %}
-        </div>
-        {% endblock %}
-        <div class="panel-container column">
-          <div class="flash-panel">
-            {% include 'flashed.html' %}
-          </div>
-          <div class="panel selected">
-
-            {% block body %}{% endblock %}
-          </div>
-        </div>
-      </div>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>{{ g.organization_name }}</title>
+
+  <link rel="stylesheet" href="/static/css/journalist.css">
+
+  <link rel="icon" type="image/png" href="/static/i/favicon.png">
+
+  {% assets filters="jsmin", output="gen/journalist.js", "js/journalist.js" %}
+  <script src="{{ ASSET_URL }}"></script>
+  {% endassets %}
+  {% block extrahead %}{% endblock %}
+</head>
 
-      {% block footer %}
-      <footer>
-        {{ gettext("Powered by <em>SecureDrop {version}</em>.").format(version=version)|safe }}
-      </footer>
+<body>
+
+  {% if g.user %}
+  <nav aria-label="{{ gettext('Navigation') }}">
+    {{ gettext('Logged on as') }}
+    <a href="{{ url_for('account.edit') }}" id="link-edit-account">{{ g.user.username }}</a> |
+    {% if g.user and g.user.is_admin %}
+    <a href="{{ url_for('admin.index') }}" id="link-admin-index">{{ gettext('Admin') }}</a> |
+    {% endif %}
+    <a href="{{ url_for('main.logout') }}" id="link-logout">{{ gettext('Log Out') }}</a>
+  </nav>
+  {% endif %}
+
+  <div class="content">
+    <div class="container">
+      {% block header %}
+      <header>
+        <a href="{{ url_for('main.index') }}" class="no-bottom-border"><img src="{{ g.logo }}" class="logo small"
+            alt="{{ g.organization_name }} logo" width="250"></a>
+        {% include 'locales.html' %}
+      </header>
       {% endblock %}
+      <div class="panel-container column">
+        <div class="flash-panel">
+          {% include 'flashed.html' %}
+        </div>
+        <main>
+
+          {% block body %}{% endblock %}
+        </main>
+      </div>
     </div>
-  </body>
+
+    {% block footer %}
+    <footer>
+      {{ gettext("Powered by <b>SecureDrop {version}</b>.").format(version=version)|safe }}
+    </footer>
+    {% endblock %}
+  </div>
+  {% include 'js-strings.html' %}
+</body>
+
 </html>
diff --git a/securedrop/journalist_templates/col.html b/securedrop/journalist_templates/col.html
index 2cbe1adf35..fd467813b5 100644
--- a/securedrop/journalist_templates/col.html
+++ b/securedrop/journalist_templates/col.html
@@ -2,64 +2,98 @@
 {% block body %}
 <div id="content" class="journalist-view-single">
 
-  <p class="breadcrumbs">
-    <a href="/">{{ gettext('All Sources') }}</a>
-    <img src="{{ url_for('static', filename='icons/chevron-right.png') }}" class="icon" width="9" height="14" alt="">
-    <strong>{{ source.journalist_designation }}</strong>
-  </p>
+  <nav class="breadcrumbs">
+    <h2 id="breadcrumbs-heading" class="visually-hidden">{{ gettext('You are here:') }}</h2>
+    <ul>
+      <li><a href="/">{{ gettext('All Sources') }}</a></li>
+      <li>{{ source.journalist_designation }}</li>
+    </ul>
+  </nav>
+
+  <h1 class="visually-hidden">{{ source.journalist_designation }}</h1>
 
   {% if source.collection %}
-    <p>{{ gettext('All messages, files, and replies from sources are stored as encrypted files for security. To read them, you will need to decrypt them on your Secure Viewing Station.') }}</p>
-    <form action="/bulk" method="post">
-      <p>
-        <div id="select-container"></div>
-        <button type="submit" name="action" value="download" class="small">
-          <img src="{{ url_for('static', filename='icons/download.png') }}" class="icon" width="11" height="13" alt=""> {{ gettext('Download Selected') }}
-        </button>
-        <a href="#delete-selected-confirmation-modal" id="delete-selected-link">
-          <button type="button" class="small danger">
-            {{ gettext('Delete Selected') }}
-          </button>
-        </a>
-      </p>
+  <p>
+    {{ gettext('All messages, files, and replies from sources are stored as encrypted files for security. To read them, you will need to decrypt them on your Secure Viewing Station.') }}
+  </p>
+  <form action="/bulk" method="post">
+    <div>
+      <div id="select-container"></div>
+      <button type="submit" name="action" value="download" class="small icon">
+        {{ gettext('Download Selected') }}
+      </button>
+      <a href="#delete-selected-confirmation-modal" id="delete-selected-link" class="btn small danger">
+        {{ gettext('Delete Selected') }}
+      </a>
+    </div>
 
-      <ul id="submissions" class="plain submissions">
-        {% for doc in source.collection %}
-          <li class="submission {% if not doc.seen and not doc.filename.endswith('reply.gpg') %}unread{% endif %}" aria-labelledby="doc-link-{{ loop.index }} status-icon-{{ loop.index }} type-icon-{{ loop.index }}">
-            {% if doc.filename.endswith('reply.gpg') %}
-              {% if not doc.deleted_by_source %}
-                <input type="checkbox" name="doc_names_selected" value="{{ doc.filename }}" class="doc-check" aria-labelledby="doc-link-{{ loop.index }}">
-                <img id="status-icon-{{ loop.index }}" src="{{ url_for('static', filename='icons/reply.png') }}" class="icon" width="16" height="16" alt="{{ gettext('Unread') }}" title="{{ gettext('Unread') }}">
-              {% else %}
-                <input type="checkbox" name="doc_names_selected" value="{{ doc.filename }}" class="doc-check" aria-labelledby="doc-link-{{ loop.index }}">
-                <img id="status-icon-{{ loop.index }}" src="{{ url_for('static', filename='icons/check.png') }}" class="icon" width="16" height="12" alt="{{ gettext('Read') }}" title="{{ gettext('Read') }}">
-              {% endif %}
-            {% elif not doc.seen %}
-              <input type="checkbox" name="doc_names_selected" value="{{ doc.filename }}" class="doc-check unread-cb" aria-labelledby="doc-link-{{ loop.index }}">
-              <img id="status-icon-{{ loop.index }}" src="{{ url_for('static', filename='icons/envelope-closed.png') }}" class="icon" width="16" height="15" alt="{{ gettext('Unread') }}" title="{{ gettext('Unread') }}">
-            {% else %}
-              <input type="checkbox" name="doc_names_selected" value="{{ doc.filename }}" class="doc-check" aria-labelledby="doc-link-{{ loop.index }}">
-              <img id="status-icon-{{ loop.index }}" src="{{ url_for('static', filename='icons/envelope-open.png') }}" class="icon" width="16" height="15" alt="{{ gettext('Read') }}" title="{{ gettext('Read') }}">
-            {% endif %}
-            <a id="doc-link-{{ loop.index }}" 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) }}">
-              <span class="filename">{{ doc.filename }}</span>
-            </a>
-            <span class="info"><span title="{{ doc.size }} bytes">{{ doc.size|filesizeformat() }}</span></span>
+    <table id="submissions" class="plain submissions">
+      <thead hidden aria-hidden="false">
+        <tr>
+          <th scope="col">{{ gettext('Status') }}</th>
+          <th scope="col">{{ gettext('Filename') }}</th>
+          <th scope="col">{{ gettext('Size') }}</th>
+          <th scope="col">{{ gettext('Type') }}</th>
+        </tr>
+      </thead>
+      {% for doc in source.collection %}
+      <tr class="submission {% if not doc.seen and not doc.filename.endswith('reply.gpg') %}unread{% endif %}">
+        {% with %}
+        {% if doc.filename.endswith('reply.gpg') %}
+        {% if not doc.deleted_by_source %}
+        {% set status = gettext('Unread') %}
+        {% set icon = 'reply' %}
+        {% else %}
+        {% set status = gettext('Read') %}
+        {% set icon = 'check' %}
+        {% endif %}
+        {% elif not doc.seen %}
+        {% set status = gettext('Unread') %}
+        {% set icon = 'envelope-closed' %}
+        {% set extra_classes = 'unread-cb' %}
+        {% else %}
+        {% set status = gettext('Read') %}
+        {% set icon = 'envelope-open' %}
+        {% endif %}
+        <td class="status">
+          <input type="checkbox" id="doc-cb-{{ loop.index }}" name="doc_names_selected" value="{{ doc.filename }}"
+            class="doc-check {{ extra_classes }}">
+          <label for="doc-cb-{{ loop.index }}" class="icon-{{ icon }}">
+            {{ status }}
+          </label>
+        </td>
+        {% endwith %}
+        <th scope="row" class="filename">
+          <a id="doc-link-{{ loop.index }}"
+            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) }}">{{ doc.filename }}</a>
+        </th>
+        <td class="info" title="{{ doc.size }} bytes">
+          {{ doc.size|filesizeformat() }}
+        </td>
 
-            {% if doc.filename.endswith('-doc.gz.gpg') %}
-              <img id="type-icon-{{ loop.index }}" src="{{ url_for('static', filename='icons/files.png') }}" class="pull-right" width="14" height="16" alt="{{ gettext('Uploaded Document') }}" title="{{ gettext('Uploaded Document') }}">
-            {% elif doc.filename.endswith('-reply.gpg') %}
-              <img id="type-icon-{{ loop.index }}" src="{{ url_for('static', filename='icons/reply.png') }}" class="pull-right" width="16" height="16" alt="{{ gettext('Reply') }}" title="{{ gettext('Reply') }}">
-            {% else %}
-              <img id="type-icon-{{ loop.index }}" src="{{ url_for('static', filename='icons/messages.png') }}" class="pull-right" width="15" height="13" alt="{{ gettext('Message') }}" title="{{ gettext('Message') }}">
-            {% endif %}
-          </li>
-        {% endfor %}
-      </ul>
+        {% with %}
+        {% if doc.filename.endswith('-doc.gz.gpg') %}
+        {% set type = gettext('Uploaded Document') %}
+        {% set icon = 'files' %}
+        {% elif doc.filename.endswith('-reply.gpg') %}
+        {% set type = gettext('Reply') %}
+        {% set icon = 'reply' %}
+        {% else %}
+        {% set type = gettext('Message') %}
+        {% set icon = 'messages' %}
+        {% endif %}
+        <td class="type icon-{{ icon }}">
+          {{ type }}
+        </td>
+        {% endwith %}
+      </tr>
+      {% endfor %}
+    </table>
 
-      <!-- Confirmation modal for selected documents -->
-      {% with %}
-        {% set modal_data = {
+    <!-- Confirmation modal for selected documents -->
+    {% with %}
+    {% set modal_data = {
                               "modal_id": "delete-selected-confirmation-modal",
                               "modal_header": gettext('Delete Confirmation'),
                               "modal_body": gettext('Are you sure you want to delete the selected submissions?'),
@@ -69,58 +103,60 @@
                               "submit_btn_text": gettext('DELETE')
                             }
         %}
-        {% include '_confirmation_modal.html' %}
-      {% endwith %}
+    {% include '_confirmation_modal.html' %}
+    {% endwith %}
 
-      <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-      <input type="hidden" name="filesystem_id" value="{{ filesystem_id }}">
+    <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
+    <input type="hidden" name="filesystem_id" value="{{ filesystem_id }}">
 
-    </form>
+  </form>
   {% else %}
-    <p><br>{{ gettext('No submissions to display.') }}</p>
+  <p>{{ gettext('No submissions to display.') }}</p>
   {% endif %}
 
-  <hr class="cut-out">
-  <hr class="no-line">
-  <h3>{{ gettext('Reply') }}</h3>
-  {% if source.has_key %}
+  <section aria-labelledby="replies-heading" class="cut-out">
+    <h2 id="replies-heading">{{ gettext('Reply') }}</h2>
+    {% if source.has_key %}
     <p>{{ gettext('You can write a secure reply to the person who submitted these messages and/or files:') }}</p>
     <form action="{{ url_for('main.reply') }}" method="post" autocomplete="off">
       <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
       <input type="hidden" name="filesystem_id" value="{{ filesystem_id }}">
-      {{ form.message(id="reply-text-field", rows='10', class="journalist-reply__input") }}
-      <hr class="no-line">
-      <button id="reply-button" class="button pull-right" type="submit">{{ gettext('SUBMIT') }}</button>
+      {{ form.message(id="reply-text-field", rows='10', class="journalist-reply__input", placeholder=gettext('Write a reply.'), **{'aria-label': gettext('Write a reply.')}) }}
+      <div class="pull-right section-spacing">
+        <button id="reply-button" class="button" type="submit"
+          aria-label="{{ gettext('Submit reply') }}">{{ gettext('SUBMIT') }}</button>
+      </div>
     </form>
-  {% else %}
+    {% else %}
     <p class="notification">{{ gettext("This source has no encryption key.") }}</p>
-    <p>{{ gettext("An encryption key will be generated for the source the next time they log in, after which you will be able to reply to the source here.") }}</p>
-  {% endif %}
-  <hr class="no-line">
+    <p>
+      {{ gettext("An encryption key will be generated for the source the next time they log in, after which you will be able to reply to the source here.") }}
+    </p>
+    {% endif %}
+  </section>
+
   <form id="delete-collection" action="{{ url_for('col.delete_single', filesystem_id=filesystem_id) }}" method="post">
     <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
     <input type="hidden" name="filesystem_id" value="{{ filesystem_id }}">
     <input type="hidden" name="col_name" value="{{ source.journalist_designation }}">
     <div class="center highlight">
-      <a href="#delete-collection-confirmation-modal" id="delete-collection-link">
-        <button type="button" class="danger">
-          {{ gettext('Delete Source Account') }}
-        </button>
+      <a href="#delete-collection-confirmation-modal" id="delete-collection-link" class="btn danger">
+        {{ gettext('Delete Source Account') }}
       </a>
     </div>
 
     <!-- Confirmation modal for entire collection deletion -->
     {% with %}
-      {% set modal_data = {
+    {% set modal_data = {
                             "modal_id": "delete-collection-confirmation-modal",
                             "modal_header": gettext('Are you sure?'),
                             "modal_body": gettext('<p>
 Deleting the account for <b>{source}</b> will:
+</p>
 <ul>
 <li>prevent them from logging in with their codename again
 <li>prevent your organization from sending replies
 </ul>
-</p>
 <p>
 All files, messages, and replies will also be deleted when their account is deleted.
 </p>'.format(source=source.journalist_designation)),
@@ -130,7 +166,7 @@ <h3>{{ gettext('Reply') }}</h3>
                             "submit_btn_text": gettext('Yes, Delete Source Account')
                           }
       %}
-      {% include '_confirmation_modal.html' %}
+    {% include '_confirmation_modal.html' %}
     {% endwith %}
   </form>
 
diff --git a/securedrop/journalist_templates/config.html b/securedrop/journalist_templates/config.html
index 9387560cca..98d8dcf253 100644
--- a/securedrop/journalist_templates/config.html
+++ b/securedrop/journalist_templates/config.html
@@ -1,89 +1,90 @@
 {% extends "base.html" %}
 {% block body %}
-<p>
-  <img src="{{ url_for('static', filename='icons/chevron-left.png') }}" class="icon" width="9" height="14" alt="">
-  <a href="/admin">{{ gettext('Back to admin interface') }}</a>
-</p>
+<nav class="back" aria-labelledby="back-link">
+  <a id="back-link" href="/admin">{{ gettext('Back to admin interface') }}</a>
+</nav>
 
 <h1>{{ gettext('Instance Configuration') }}</h1>
 
-<h2 id="config-orgname">{{ gettext('Organization Name') }}</h2>
-
-<form action="{{ url_for('admin.update_org_name') }}" method="post">
-  <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <p>
-    <label for="organization_name">{{ gettext('Set the organization name used on the SecureDrop web interfaces:') }}</label><br>
-    {{ organization_name_form.organization_name() }}
-  </p>
-  <button type="submit" id="submit-update-org-name">
-    <img src="{{ url_for('static', filename='icons/pencil-alt.png') }}" class="icon" width="15" height="15" alt="">
-    {{ gettext('SET ORGANIZATION NAME') }}
-  </button>
-  {% set prefs_filter = ["org-name-error","org-name-success"] %}
-  {% include 'preferences_saved_flash.html' %}
-</form>
-
-<hr class="no-line">
-
-<h2 id="config-logoimage">{{ gettext('Logo Image') }}</h2>
-
-<p>{{ gettext('Here you can update the image displayed on the SecureDrop web interfaces:') }}</p>
-
-<p>
-  <img src="{{ g.logo }}" class="logo small" alt="{{ g.organization_name }}" width="250">
-</p>
-
-<form method="post" enctype="multipart/form-data">
-  <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <p>
-    {{ logo_form.logo(id="logo-upload") }}
-    <br>
-  </p>
-  <h5>
-    {{ gettext('Recommended size: 500px * 450px') }}
-  </h5>
-  <button type="submit" id="submit-logo-update">
-    <img src="{{ url_for('static', filename='icons/pencil-alt.png') }}" class="icon" width="15" height="15" alt="">
-    {{ gettext('UPDATE LOGO') }}
-  </button>
-  {% set prefs_filter = ["logo-success","logo-error"] %}
-  {% include 'preferences_saved_flash.html' %}
-</form>
-
-<hr class="no-line">
+<section aria-labelledby="config-orgname">
+  <h2 id="config-orgname">{{ gettext('Organization Name') }}</h2>
+
+  <form action="{{ url_for('admin.update_org_name') }}" method="post">
+    <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
+    <div><label
+        for="organization_name">{{ gettext('Set the organization name used on the SecureDrop web interfaces:') }}</label>
+    </div>
+    <div>{{ organization_name_form.organization_name() }}</div>
+    <div class="section-spacing">
+      <button type="submit" id="submit-update-org-name" class="icon icon-edit"
+        aria-label="{{ gettext('Set Organization Name') }}">
+        {{ gettext('SET ORGANIZATION NAME') }}
+      </button>
+    </div>
+    {% set prefs_filter = ["org-name-error","org-name-success"] %}
+    {% include 'preferences_saved_flash.html' %}
+  </form>
+</section>
+
+<section aria-labelledby="config-logoimage">
+  <h2 id="config-logoimage">{{ gettext('Logo Image') }}</h2>
+
+  <p>{{ gettext('Here you can update the image displayed on the SecureDrop web interfaces:') }}</p>
+
+  <img id="current-logo" src="{{ g.logo }}" class="logo small" alt="{{ g.organization_name }}" width="250">
+
+  <form method="post" enctype="multipart/form-data">
+    <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
+    <label for="logo-upload" class="visually-hidden">{{ gettext('Logo image:') }}</label>
+    {{ logo_form.logo(id="logo-upload", **{'aria-controls': 'current-logo', 'aria-describedby': 'size-instructions'}) }}
+    <p id="size-instructions">
+      {{ gettext('Recommended size: 500px * 450px') }}
+    </p>
+    <div class="section-spacing">
+      <button type="submit" id="submit-logo-update" class="icon icon-edit" aria-label="{{ gettext('Update Logo') }}">
+        {{ gettext('UPDATE LOGO') }}
+      </button>
+    </div>
+    {% set prefs_filter = ["logo-success","logo-error"] %}
+    {% include 'preferences_saved_flash.html' %}
+  </form>
+</section>
 
-<h2 id="config-preventuploads">{{ gettext('Submission Preferences') }}</h2>
+<section aria-labelledby="config-preventuploads">
+  <h2 id="config-preventuploads">{{ gettext('Submission Preferences') }}</h2>
 
-<form action="{{ url_for('admin.update_submission_preferences') }}" method="post">
-  <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <p>
+  <form action="{{ url_for('admin.update_submission_preferences') }}" method="post">
+    <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
     {{ submission_preferences_form.prevent_document_uploads() }}
-    <label for="prevent_document_uploads">{{ gettext('Prevent sources from uploading documents. Sources will still be able to send messages.') }}</label>
-  </p>
-  <button type="submit" id="submit-submission-preferences">
-    <img src="{{ url_for('static', filename='icons/pencil-alt.png') }}" class="icon" width="15" height="15" alt="">
-    {{ gettext('UPDATE SUBMISSION PREFERENCES') }}
-  </button>
-  {% set prefs_filter = ["submission-preferences-success","submission-preferences-error"] %}
-  {% include 'preferences_saved_flash.html' %}
-</form>
-
-<hr class="no-line">
-
-<h2 id="config-testalert">{{ gettext('Alerts') }}</h2>
-
-<p>{{ gettext('Send an encrypted email to verify if OSSEC alerts work correctly:') }}</p>
-
-<form method="post" action="{{ url_for('admin.ossec_test') }}">
-  <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <p>
-    <button type="submit" id="test-ossec-alert">
-      <img src="{{ url_for('static', filename='icons/bell.png') }}" class="icon" width="13" height="15" alt="">
-      {{ gettext('SEND TEST OSSEC ALERT') }}
-    </button>
+    <label
+      for="prevent_document_uploads">{{ gettext('Prevent sources from uploading documents. Sources will still be able to send messages.') }}</label>
+    <div class="section-spacing">
+      <button type="submit" id="submit-submission-preferences" class="icon icon-edit"
+        aria-label="{{ gettext('Update Submission Preferences') }}">
+        {{ gettext('UPDATE SUBMISSION PREFERENCES') }}
+      </button>
+    </div>
+    {% set prefs_filter = ["submission-preferences-success","submission-preferences-error"] %}
+    {% include 'preferences_saved_flash.html' %}
+  </form>
+</section>
+
+<section aria-labelledby="config-testalert">
+  <h2 id="config-testalert">{{ gettext('Alerts') }}</h2>
+
+  <p>{{ gettext('Send an encrypted email to verify if OSSEC alerts work correctly:') }}</p>
+
+  <form method="post" action="{{ url_for('admin.ossec_test') }}">
+    <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
+    <div class="section-spacing">
+      <button type="submit" id="test-ossec-alert" class="icon icon-bell"
+        aria-label="{{ gettext('Send Test OSSEC Alert') }}">
+        {{ gettext('SEND TEST OSSEC ALERT') }}
+      </button>
+    </div>
     {% set prefs_filter = ["testalert-success","testalert-error","testalert-notification"] %}
     {% include 'preferences_saved_flash.html' %}
-  </p>
-</form>
+  </form>
+</section>
 
 {% endblock %}
diff --git a/securedrop/journalist_templates/delete.html b/securedrop/journalist_templates/delete.html
index a821520212..52321d599b 100644
--- a/securedrop/journalist_templates/delete.html
+++ b/securedrop/journalist_templates/delete.html
@@ -2,23 +2,28 @@
 {% block body %}
 
 {% with count=items_selected|length %}
-<p>{{ ngettext('The following file has been selected for <strong>permanent deletion</strong>:', 'The following {num} files have been selected for <strong>permanent deletion</strong>:', count).format(num=count)|safe }}</p>
+<p>
+  {{ ngettext('The following file has been selected for <strong>permanent deletion</strong>:', 'The following {num} files have been selected for <strong>permanent deletion</strong>:', count).format(num=count)|safe }}
+</p>
 {% endwith %}
 
 <form action="/bulk" method="post">
   <ul>
-  {% for item in items_selected %}
+    {% for item in items_selected %}
     <li>
       {{ item.filename }}
       <input type="hidden" name="doc_names_selected" value="{{ item.filename }}">
     </li>
-  {% endfor %}
+    {% endfor %}
   </ul>
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
   <input type="hidden" name="filesystem_id" value="{{ filesystem_id }}" autocomplete="off">
   <input type="hidden" name="confirm_delete" value="true">
-  <p><button type="submit" name="action" value="delete" id="confirm-delete">{{ gettext('PERMANENTLY DELETE FILES') }}</button></p>
+  <button type="submit" name="action" value="delete" id="confirm-delete"
+    aria-label="{{ gettext('Permanently Delete Files') }}">{{ gettext('PERMANENTLY DELETE FILES') }}</button></p>
 </form>
 
-<p><a href="/col/{{ filesystem_id }}">{{ gettext('Return to the list of documents for {source_name}…').format(source_name=source.journalist_designation) }}</a></p>
+<nav class="back" aria-labelledby="back-link"><a id="back-link"
+    href="/col/{{ filesystem_id }}">{{ gettext('Return to the list of documents for {source_name}…').format(source_name=source.journalist_designation) }}</a>
+</nav>
 {% endblock %}
diff --git a/securedrop/journalist_templates/edit_account.html b/securedrop/journalist_templates/edit_account.html
index 3556be9d04..75f14ea2cd 100644
--- a/securedrop/journalist_templates/edit_account.html
+++ b/securedrop/journalist_templates/edit_account.html
@@ -2,124 +2,153 @@
 {% block body %}
 
 {% if user %}
-  {# Only admins may edit usernames and admin status #}
-  <h1>{{ gettext('Edit user "{user}"').format(user=user.username) }}</h1>
-  <p>
-    <img src="{{ url_for('static', filename='icons/chevron-left.png') }}" class="icon" width="9" height="14" alt="">
-    <a href="/admin">{{ gettext('Back to admin interface') }}</a>
-  </p>
-  <h2>{{ gettext('Change Name and Admin Status') }}</h2>
+{# Only admins may edit usernames and admin status #}
+<h1>{{ gettext('Edit user "{user}"').format(user=user.username) }}</h1>
+<nav aria-labelledby="back-link" class="back">
+  <a id="back-link" href="/admin">{{ gettext('Back to admin interface') }}</a>
+</nav>
+<section aria-labeledby="change-heading">
+  <h2 id="change-heading">{{ gettext('Change Name and Admin Status') }}</h2>
   <form method="post">
     <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-    <p>
+    <div>
       <label for="username">{{ gettext('Username') }}</label>
       <input name="username" id="username" type="text" value="{{ user.username }}">
-    </p>
-    <p>
+    </div>
+    <div>
       <label for="first_name">{{ gettext('First name') }}</label>
       {% set first_name = user.first_name or '' %}
       <input name="first_name" id="first_name" type="text" value="{{ first_name }}">
       <label for="last_name">{{ gettext('Last name') }}</label>
       {% set last_name = user.last_name or '' %}
       <input name="last_name" id="last_name" type="text" value="{{ last_name }}">
-    </p>
-    <p>
+    </div>
+    <div>
       <input name="is_admin" id="is-admin" type="checkbox" {% if user.is_admin %}checked{% endif %}>
       <label for="is-admin">{{ gettext('Is Admin') }}</label>
-    </p>
-    <button type="submit" id="update">{{ gettext('UPDATE') }}</button>
+    </div>
+    <button type="submit" id="update" aria-label="{{ gettext('Update account') }}">{{ gettext('UPDATE') }}</button>
   </form>
+</section>
 {% else %}
-  <h1>{{ gettext('Edit your account') }}</h1>
-  <h2>{{ gettext('Change Name') }}</h2>
+<h1>{{ gettext('Edit your account') }}</h1>
+<section aria-labelledby="change-heading">
+  <h2 id="change-heading">{{ gettext('Change Name') }}</h2>
   {% set change_name_url = url_for('account.change_name') %}
-  <form action="{{ change_name_url }}" method="post" id="change-name">
-    <p>
+  <form action="{{ change_name_url }}" method="post" id="change-name-form">
+    <div>
       <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
       <label for="first_name">{{ gettext('First name') }}</label>
       {% set first_name = g.user.first_name or '' %}
-      <input name="first_name" id="first_name" value = "{{ first_name }}">
+      <input name="first_name" id="first_name" value="{{ first_name }}">
       <label for="last_name">{{ gettext('Last name') }}</label>
       {% set last_name = g.user.last_name or '' %}
-      <input name="last_name" id="last_name" value = "{{ last_name }}"">
-    </p>
-    <button type="submit" id="change-name">{{ gettext('UPDATE') }}</button>
+      <input name="last_name" id="last_name" value="{{ last_name }}">
+    </div>
+    <div class="section-spacing">
+      <button type="submit" id="change-name-button"
+        aria-label="{{ gettext('Update your account') }}">{{ gettext('UPDATE') }}</button>
+    </div>
   </form>
+</section>
 {% endif %}
 
-<h2>{{ gettext('Reset Password') }}</h2>
+<section aria-labelledby="password-heading">
+  <h2 id="password-heading">{{ gettext('Reset Password') }}</h2>
 
-<p>{{ gettext('SecureDrop uses automatically generated diceware passwords.') }}</p>
-<p>{{ gettext('Your password will be changed immediately, so you will need to save it before pressing the "Reset Password" button.') }}</p>
+  <p>{{ gettext('SecureDrop uses automatically generated diceware passwords.') }}</p>
+  <p>
+    {{ gettext('Your password will be changed immediately, so you will need to save it before pressing the "Reset Password" button.') }}
+  </p>
 
-{% if user and g.user != user %}
+  {% if user and g.user != user %}
   {% set password_reset_url = url_for('admin.new_password', user_id=user.id) %}
-{% else %}
+  {% else %}
   {% set password_reset_url = url_for('account.new_password') %}
-  <p>{{ gettext('Please enter your current password and two-factor code.') }}</p>
-{% endif %}
+  {% set legend = gettext('Please enter your current password and two-factor code.') %}
+  {% endif %}
 
-<form action="{{ password_reset_url }}" method="post" id="new-password" class="login-form">
-   {% if not user or g.user == user %}
-  <p><input type="password" name="current_password" placeholder="{{ gettext('Current Password') }}"></p>
-  <p><input name="token" id="token" type="text" placeholder="{{ gettext('Two-factor Code') }}"></p>
+  <form action="{{ password_reset_url }}" method="post" id="new-password" class="login-form">
+    {% if not user or g.user == user %}
+    <fieldset>
+      <legend>{{ legend }}</legend>
+      <div>
+        <label for="current_password" class="visually-hidden">{{ gettext('Current Password') }}</label>
+        <input type="password" id="current_password" name="current_password"
+          placeholder="{{ gettext('Current Password') }}">
+      </div>
+      <div>
+        <label for="token" class="visually-hidden">{{ gettext('Two-factor Code') }}</label>
+        <input name="token" id="token" type="text" placeholder="{{ gettext('Two-factor Code') }}">
+      </div>
+    </fieldset>
+    {% endif %}
+    <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
+    <input name="password" type="hidden" value="{{ password }}">
+    <fieldset>
+      <legend>
+        {% if user %}
+        {{ gettext("The user's password will be changed to:") }}
+        {% else %}
+        {{ gettext('Your password will be changed to:') }}
+        {% endif %}
+      </legend>
+      <mark id="password" class="password">{{ password }}</mark>
+    </fieldset>
+    <button type="submit" id="reset-password" class="upper icon icon-reset"
+      aria-label="{{ gettext('Reset Password') }}">
+      {{ gettext('Reset Password') }}
+    </button>
+  </form>
+</section>
+
+<section aria-labelledby="2fa-heading">
+  <h2 id="2fa-heading">{{ gettext('Reset Two-Factor Authentication') }}</h2>
+  {% if user %}
+  <p>
+    {{ gettext("If a user's two-factor authentication credentials have been lost or compromised, you can reset them here. <em>If you do this, make sure the user is present and ready to set up their device with the new two-factor credentials. Otherwise, they will be locked out of their account.</em>") }}
+  </p>
+  {% else %}
+  <p>
+    {{ gettext('If your two-factor authentication credentials have been lost or compromised, or you got a new device, you can reset your credentials here. <em>If you do this, make sure you are ready to set up your new device, otherwise you will be locked out of your account.</em>') }}
+  </p>
   {% endif %}
-  <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <input name="password" type="hidden" value="{{ password }}">
   <p>
-    {% if user %}
-      {{ gettext("The user's password will be changed to:") }}
-    {% else %}
-      {{ gettext('Your password will be changed to:') }}
-    {% endif %}
-    <br>
-    <span id="password" class="password">{{ password }}</span>
+    {{ gettext('To reset two-factor authentication for mobile apps such as FreeOTP, choose the first option. For security keys like the YubiKey, choose the second one.') }}
   </p>
-  <button type="submit" id="reset-password" class="upper">
-    <img src="{{ url_for('static', filename='icons/sync.png') }}" class="icon" width="15" height="15" alt="">
-    {{ gettext('Reset Password') }}
-  </button>
-</form>
-
-<hr class="no-line">
 
-<h2>{{ gettext('Reset Two-Factor Authentication') }}</h2>
-
-{% if user %}
-<p>{{ gettext("If a user's two-factor authentication credentials have been lost or compromised, you can reset them here. <em>If you do this, make sure the user is present and ready to set up their device with the new two-factor credentials. Otherwise, they will be locked out of their account.</em>") }}</p>
-{% else %}
-<p>{{ gettext('If your two-factor authentication credentials have been lost or compromised, or you got a new device, you can reset your credentials here. <em>If you do this, make sure you are ready to set up your new device, otherwise you will be locked out of your account.</em>') }}</p>
-{% endif %}
-<p>{{ gettext('To reset two-factor authentication for mobile apps such as FreeOTP, choose the first option. For security keys like the YubiKey, choose the second one.') }}</p>
-
-{% if user %}
+  {% if user %}
   {% set totp_reset_url = url_for('admin.reset_two_factor_totp') %}
   {% set hotp_reset_url = url_for('admin.reset_two_factor_hotp') %}
-{% else %}
+  {% else %}
   {% set totp_reset_url = url_for('account.reset_two_factor_totp') %}
   {% set hotp_reset_url = url_for('account.reset_two_factor_hotp') %}
-{% endif %}
+  {% endif %}
 
-{% macro twofa_reset(user, reset_url, type, tooltip_text, button_text) %}
-{% if user %}
+  {% macro twofa_reset(user, reset_url, type, tooltip_text, button_text, button_aria_label) %}
+  {% if user %}
   {% set username = user.username %}
-{% else %}
+  {% else %}
   {% set username = g.user.username %}
-{% endif %}
-<form method="post" action="{{ reset_url }}" id="reset-two-factor-{{ type }}" class="reset-two-factor" data-username="{{ username }}">
-  {% if user %}
-  <input name="uid" type="hidden" value="{{ user.id }}">
   {% endif %}
-  <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <button id="button-reset-two-factor-{{ type }}" tooltip="{{ tooltip_text }}" type="submit" class="pull-right">
-    <img src="{{ url_for('static', filename='icons/sync.png') }}" class="icon" width="15" height="15" alt="">
-    {{ button_text }}
-    <span class="tooltip">{{ tooltip_text }}</span>
-  </button>
-</form>
-{%- endmacro %}
+  <form method="post" action="{{ reset_url }}" id="reset-two-factor-{{ type }}" class="reset-two-factor"
+    data-username="{{ username }}">
+    {% if user %}
+    <input name="uid" type="hidden" value="{{ user.id }}">
+    {% endif %}
+    <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
+    <button id="button-reset-two-factor-{{ type }}" data-tooltip="{{ tooltip_text }}" type="submit"
+      class="pull-right icon icon-reset" aria-label="{{ button_aria_label }}">
+      <span class="label">
+        {{ button_text }}
+      </span>
+      <span class="tooltip">{{ tooltip_text }}</span>
+    </button>
+  </form>
+  {%- endmacro %}
 
-{{ twofa_reset(user, totp_reset_url, "totp", gettext("Reset two-factor authentication for mobile apps, such as FreeOTP"), gettext("RESET MOBILE APP CREDENTIALS"))}}
-{{ twofa_reset(user, hotp_reset_url, "hotp", gettext("Reset two-factor authentication for security keys, like a YubiKey"), gettext("RESET SECURITY KEY CREDENTIALS"))}}
+  {{ twofa_reset(user, totp_reset_url, "totp", gettext("Reset two-factor authentication for mobile apps, such as FreeOTP"), gettext("RESET MOBILE APP CREDENTIALS"), gettext('Reset Mobile App Credentials'))}}
+  {{ twofa_reset(user, hotp_reset_url, "hotp", gettext("Reset two-factor authentication for security keys, like a YubiKey"), gettext("RESET SECURITY KEY CREDENTIALS"), gettext('Reset Security Key Credentials'))}}
+</section>
 
 {% endblock %}
diff --git a/securedrop/journalist_templates/error.html b/securedrop/journalist_templates/error.html
index 205cb51d65..1064b89610 100644
--- a/securedrop/journalist_templates/error.html
+++ b/securedrop/journalist_templates/error.html
@@ -2,6 +2,6 @@
 {% block body %}
 <h1>{{ error.code }}: {{ error.name }}</h1>
 {% if error.description %}
-  <p>{{ error.description }}</p>
+<p>{{ error.description }}</p>
 {% endif %}
 {% endblock %}
diff --git a/securedrop/journalist_templates/flashed.html b/securedrop/journalist_templates/flashed.html
index 845aabfb46..7df91ed2da 100644
--- a/securedrop/journalist_templates/flashed.html
+++ b/securedrop/journalist_templates/flashed.html
@@ -1,18 +1,12 @@
 {% with messages = get_flashed_messages(with_categories=true) %}
 {% if messages %}
-  {% for category, message in messages %}
-    {% 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') }}" alt="{{ gettext('Notification') }}" height="35" width="15">
-        {% elif category == "success" %}
-        <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') }}" alt="{{ gettext('Error') }}" height="30" width="9">
-        {% endif %}
-        {{ message }}
-      </div>
-    {% endif %}
-  {% endfor %}
+{% for category, message in messages %}
+{% 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"] %}
+{% set category_status = category.split('-')|last %}
+<section class="flash {{ category_status }}" role="alert">
+  {{ message }}
+</section>
+{% endif %}
+{% endfor %}
 {% endif %}
 {% endwith %}
diff --git a/securedrop/journalist_templates/index.html b/securedrop/journalist_templates/index.html
index 24177d3960..0ee6add2d4 100644
--- a/securedrop/journalist_templates/index.html
+++ b/securedrop/journalist_templates/index.html
@@ -1,76 +1,83 @@
 {% extends "base.html" %}
 {% block body %}
 <div id="content" class="journalist-view-all">
-  <h1><span class="headline">{{ gettext('All Sources') }}</span></h1>
+  <h1 id="all-sources-heading" class="headline">{{ gettext('All Sources') }}</h1>
   {% if unstarred or starred %}
-    <div id="filter-container"></div>
-    <form id="process-collections" action="{{ url_for('col.process') }}" method="post">
-      <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-      <p>
-        <div id="index-select-container"></div>
-        <button type="submit" name="action" value="download-unread" class="small">
-          <img src="{{ url_for('static', filename='icons/download.png') }}" class="icon" width="11" height="13" alt="">
-          {{ gettext('Download Unread') }}
-        </button>
-        <button type="submit" name="action" value="download-all" class="small">
-          <img src="{{ url_for('static', filename='icons/download.png') }}" class="icon" width="11" height="13" alt="">
-          {{ gettext('Download') }}
-        </button>
-        <button type="submit" name="action" value="star" class="small">
-          <img src="{{ url_for('static', filename='icons/star.png') }}" class="icon" width="15" height="14" alt="">
-          {{ gettext('Star') }}
-        </button>
-        <button type="submit" name="action" value="un-star" class="small">
-          <img src="{{ url_for('static', filename='icons/unstar.png') }}" class="icon" width="15" height="14" alt="">
-          {{ gettext('Un-star') }}
-        </button>
-        <div class="delete-menu-button"><a href="#delete-sources-modal" id="delete-collections-link">
-          <button type="button" id="btn-delete-sources" class="small danger"> {{ gettext('Delete') }} </button> </a>
-      <!-- Delete confirmation modal -->
-      {% with %}
+  <div id="filter-container"></div>
+  <form id="process-collections" action="{{ url_for('col.process') }}" method="post">
+    <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
+    <div>
+      <div id="index-select-container"></div>
+      <button type="submit" name="action" value="download-unread" class="small icon">
+        {{ gettext('Download Unread') }}
+      </button>
+      <button type="submit" name="action" value="download-all" class="small icon">
+        {{ gettext('Download') }}
+      </button>
+      <button type="submit" name="action" value="star" class="small icon">
+        {{ gettext('Star') }}
+      </button>
+      <button type="submit" name="action" value="un-star" class="small icon">
+        {{ gettext('Un-star') }}
+      </button>
+      <div class="delete-menu-button"><a href="#delete-sources-modal" id="delete-collections-link"
+          class="btn small danger">
+          {{ gettext('Delete') }} </a>
+        <!-- Delete confirmation modal -->
+        {% with %}
         {% set modal_data = {
                               "modal_id": "delete-sources-modal",
                             }
         %}
         {% include '_sources_confirmation_modal.html' %}
-      {% endwith %}
-      <!-- Delete confirmation modal -->
-      {% with %}
+        {% endwith %}
+        <!-- Delete confirmation modal -->
+        {% with %}
         {% set modal_data = {
                               "modal_id": "delete-sources-confirm-modal",
                             }
         %}
         {% include '_sources_confirmation_final_modal.html' %}
-      {% endwith %}
+        {% endwith %}
       </div>
 
-      </p>
+    </div>
 
+    <table id="collections" aria-labelledby="all-sources-heading">
+      <thead hidden aria-hidden="false">
+        <tr>
+          <th scope="col">{{ gettext('Designation') }}</th>
+          <th scope="col">{{ gettext('Documents') }}</th>
+          <th scope="col">{{ gettext('Messages') }}</th>
+          <th scope="col">{{ gettext('Unread') }}</th>
+          <th scope="col">{{ gettext('Date') }}</th>
+        </tr>
+      </thead>
       {% if starred %}
-        <ul id="cols" class="plain starred">
-          {% for source in starred %}
-            {% with %}
-              {% set loop_index = loop.index %}
-              {% include '_source_row.html' %}
-            {% endwith %}
-          {% endfor %}
-        </ul>
+      <tbody class="cols starred">
+        {% for source in starred %}
+        {% with %}
+        {% set loop_index = loop.index %}
+        {% include '_source_row.html' %}
+        {% endwith %}
+        {% endfor %}
+      </tbody>
       {% endif %}
 
       {% if unstarred %}
-        <ul id="cols" class="plain unstarred">
-          {% for source in unstarred %}
-            {% with %}
-              {% set loop_index = loop.index %}
-              {% include '_source_row.html' %}
-            {% endwith %}
-          {% endfor %}
-        </ul>
+      <tbody class="cols unstarred">
+        {% for source in unstarred %}
+        {% with %}
+        {% set loop_index = loop.index %}
+        {% include '_source_row.html' %}
+        {% endwith %}
+        {% endfor %}
+      </tbody>
       {% endif %}
-
-    </form>
+    </table>
+  </form>
   {% else %}
-    <p>{{ gettext('No documents have been submitted!') }}</p>
+  <p>{{ gettext('No documents have been submitted!') }}</p>
   {% endif %}
 </div>
 {% endblock %}
diff --git a/securedrop/journalist_templates/js-strings.html b/securedrop/journalist_templates/js-strings.html
index 8c1f1edb3b..0aa7cda360 100644
--- a/securedrop/journalist_templates/js-strings.html
+++ b/securedrop/journalist_templates/js-strings.html
@@ -4,6 +4,7 @@
   <div id="select-all-string" hidden>{{ gettext('Select All') }}</div>
   <div id="select-unread-string" hidden>{{ gettext('Select Unread') }}</div>
   <div id="select-none-string" hidden>{{ gettext('Select None') }}</div>
-  <div id="reset-user-mfa-confirm-string" hidden>{{ gettext('Are you sure you want to reset two-factor authentication for {username}?') }}</div>
+  <div id="reset-user-mfa-confirm-string" hidden>
+    {{ gettext('Are you sure you want to reset two-factor authentication for {username}?') }}</div>
   <div id="sources-selected" hidden>{{ gettext('Sources selected: ') }}</div>
 </div>
diff --git a/securedrop/journalist_templates/locales.html b/securedrop/journalist_templates/locales.html
index c517057ed0..c902662aa0 100644
--- a/securedrop/journalist_templates/locales.html
+++ b/securedrop/journalist_templates/locales.html
@@ -1,35 +1,34 @@
 {% if g.locales|length > 1 %}
-<div class="menu">
-  <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" alt="" width="18" height="18">
-    </div>
-    <div class="menu-text-container">
-      <span class="menu__trigger-text">{{ g.locales[g.localeinfo.id].display_name }}</span>
-    </div>
-    <div class="menu-trigger-container">
-      <img class="menu__trigger-icon" src="/static/i/languages_arrow.png" alt="" width="12" height="18">
-    </div>
+<section class="menu" aria-labelledby="locale-menu-heading">
+  <h2 id="locale-menu-heading" hidden>
+    {{ gettext('Selected language')}}: {{ g.locales[g.localeinfo.id].display_name }}
+  </h2>
+  <label id="locale-menu-trigger" for="menu-1-checkbox" class="menu__trigger" aria-hidden="true">
+    {{ g.locales[g.localeinfo.id].display_name }}
   </label>
+  <input id="menu-1-checkbox" class="menu__checkbox visually-hidden" type="checkbox" role="button"
+    aria-label="{{ gettext('Choose language') }}" aria-haspopup="menu" aria-controls="locales-menu" aria-pressed="true">
 
-  <ul class="menu__items">
-    {% for locale in g.locales %}
-      <li class="menu__item">
-        {% if locale != g.localeinfo.id %}
-          {% set args = {} %}
-          {% set _ = args.update(request.args or {}) %}
-          {% set _ = args.update(request.view_args or {}) %}
-          {% set _ = args.update({'l': locale}) %}
-          {% set url = url_for(request.endpoint or 'main.index', **args) %}
-        {% else %}
-          {% set url = '' %}
-        {% endif %}
-        <a href="{{ url }}" rel="nofollow" class="no-bottom-border">
-          <span>{{ g.locales[locale].display_name }}</span>
-        </a>
-      </li>
+  <ul id="locales-menu" class="menu__items" role="menu" aria-labelledby="menu-1-checkbox">
+    {% for locale in g.locales.keys() %}
+    <li class="menu__item" role="none">
+      {% if locale != g.localeinfo.id %}
+      {% set args = {} %}
+      {% set _ = args.update(request.args or {}) %}
+      {% set _ = args.update(request.view_args or {}) %}
+      {% set _ = args.update({'l': locale}) %}
+      {% set checked = 'false' %}
+      {% set url = url_for(request.endpoint or 'main.index', **args) %}
+      {% else %}
+      {% set url = '' %}
+      {% set checked = 'true' %}
+      {% endif %}
+      <a href="{{ url }}" rel="nofollow" class="no-bottom-border" lang="{{ g.locales[locale].language_tag }}"
+        hreflang="{{ g.locales[locale].language_tag }}" role="menuitemradio" aria-checked="{{ checked }}">
+        {{ g.locales[locale].display_name }}
+      </a>
+    </li>
     {% endfor %}
   </ul>
-</div>
+</section>
 {% endif %}
diff --git a/securedrop/journalist_templates/login.html b/securedrop/journalist_templates/login.html
index 462e9ae41c..f5098c615a 100644
--- a/securedrop/journalist_templates/login.html
+++ b/securedrop/journalist_templates/login.html
@@ -5,11 +5,23 @@ <h1>{{ gettext('Login to access the journalist interface') }}</h1>
 
 <form method="post" action="/login" autocomplete="off" class="login-form">
   <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
-  <p><input class="login-username" type="text" name="username" autocomplete="off" placeholder="{{ gettext('Username') }}" autofocus></p>
-  <p><input class="login-password" id="login-form-password" type="password" name="password" placeholder="{{ gettext('Password') }}"></p>
-  <p class="show-password-checkbox-container"><label><input id="show-password-check" type="checkbox">{{ gettext('Show password') }}</label></p>
-  <p><input class="login-token" name="token" id="token" type="text" placeholder="{{ gettext('Two-factor Code') }}"></p>
-  <button type="submit">{{ gettext('LOG IN') }}</button>
+  <div>
+    <label for="username" class="visually-hidden">{{ gettext('Username') }}</label>
+    <input class="login-username" type="text" id="username" name="username" autocomplete="off"
+      placeholder="{{ gettext('Username') }}" autofocus>
+  </div>
+  <div>
+    <label for="login-form-password" class="visually-hidden">{{ gettext('Password') }}</label>
+    <input class="login-password" id="login-form-password" type="password" name="password"
+      placeholder="{{ gettext('Password') }}">
+  </div>
+  <div class="show-password-checkbox-container"><label><input id="show-password-check"
+        type="checkbox">{{ gettext('Show password') }}</label></div>
+  <div>
+    <label for="token" class="visually-hidden">{{ gettext('Two-factor Code') }}</label>
+    <input class="login-token" name="token" id="token" type="text" placeholder="{{ gettext('Two-factor Code') }}">
+  </div>
+  <button type="submit" aria-label="{{ gettext('Log In') }}">{{ gettext('LOG IN') }}</button>
 </form>
 
 {% endblock %}
diff --git a/securedrop/journalist_templates/preferences_saved_flash.html b/securedrop/journalist_templates/preferences_saved_flash.html
index 57e294a487..34040f9a5d 100644
--- a/securedrop/journalist_templates/preferences_saved_flash.html
+++ b/securedrop/journalist_templates/preferences_saved_flash.html
@@ -1,19 +1,12 @@
 {% if prefs_filter is defined  and prefs_filter|length %}
-    {% with messages = get_flashed_messages(with_categories=True, category_filter=prefs_filter) %}
-      {% for category, message in messages %}
-    {#  Get the end of the of the category message which
+{% with messages = get_flashed_messages(with_categories=True, category_filter=prefs_filter) %}
+{% for category, message in messages %}
+{#  Get the end of the of the category message which
         contains the category status.(success/error/notification)#}
-        {% 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') }}" alt="{{ gettext('Success') }}" height="15" width="20">
-          {% elif category_status == "error" %}
-              <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') }}" alt="{{ gettext('Notification') }}" height="35" width="15">
-          {% endif %}
-              {{ message }}
-          </div>
-      {% endfor %}
-    {% endwith %}
+{% set category_status = category.split('-')|last %}
+<section class="flash {{ category_status }}" role="alert" aria-label="{{ gettext(category_status) }}">
+  {{ message }}
+</section>
+{% endfor %}
+{% endwith %}
 {% endif %}
diff --git a/securedrop/sass/_base.sass b/securedrop/sass/_base.sass
index 3bcc5aa6b5..289412a7b6 100644
--- a/securedrop/sass/_base.sass
+++ b/securedrop/sass/_base.sass
@@ -78,8 +78,6 @@
 @import "modules/submissions"
 // Submission - an individual submission
 @import "modules/submission"
-// List plain and starred - two types of lists
-@import "modules/list-plain-and-starred"
 // Logout - the logout button (top right)
 @import "modules/logout"
 // Label - forces a cursor pointer on label. Seems unnecessary if label 'for' attr is used, remove?
@@ -143,7 +141,6 @@
   +logo
   +submissions
   +submission
-  +list-plain-and-starred
   +logout
   +label
   +em-light-gray-emphasised-text
diff --git a/securedrop/sass/journalist.sass b/securedrop/sass/journalist.sass
index 31576599ba..b373832d38 100644
--- a/securedrop/sass/journalist.sass
+++ b/securedrop/sass/journalist.sass
@@ -5,6 +5,7 @@
 @import modules/menu-modal
 @import libraries/font-awesome-iconography
 @import modules/flash-journalist
+@import modules/locales
 
 +base_rules
 +font-awesome-iconography
@@ -12,6 +13,9 @@
 .grid
   letter-spacing: -0.31em
 
+.content div
+  align-content: center
+
 #replies
   .reply
     border: 1px solid $color_grey_medium
@@ -53,7 +57,24 @@ p#no-replies
 #replies blockquote
   margin: 1em 1em
 
-p.breadcrumbs
+nav.back
+  display: inline-block
+
+  &:before
+    content: ""
+
+    border: none
+    text-decoration: none
+
+    display: inline-block
+    width: 9px
+    height: 14px
+
+    background:
+      image: url(/static/icons/chevron-left.png)
+      size: contain
+
+nav.breadcrumbs
   text-align: left
   position: relative
   color: #000c6c
@@ -61,6 +82,27 @@ p.breadcrumbs
   &:dir(rtl)
     text-align: right
 
+  ul
+    list-style-type: none
+    padding: 0
+
+    li
+      display: inline-block
+      padding-left: 9px + 5px
+
+      background:
+        image: url(/static/icons/chevron-right.png)
+        position: left center
+        repeat: no-repeat
+        size: 9px 14px
+
+    li:first-of-type
+      padding-left: 0
+      background: none
+
+    li:last-of-type
+      font-weight: bold
+
 p#max-file-size
   font-size: 10px
   font-style: italic
@@ -78,10 +120,6 @@ button.small-danger, a.btn.small-danger, .btn.small-danger
   display: inline-block
   margin-right: 3px
 
-#cols li.source
-  .button-star
-    background-color: transparent
-
 .login-form
   max-width: 550px
   .login-username, .login-token
@@ -89,6 +127,11 @@ button.small-danger, a.btn.small-danger, .btn.small-danger
   .login-password
     width: 100%
 
+form div
+  align-self: center
+  display: block
+  margin-bottom: 16px
+
 .journalist-reply__input
   width: 100%
 
@@ -128,3 +171,69 @@ button.small-danger, a.btn.small-danger, .btn.small-danger
 
     &:hover
       border-color: $color_urgent_coral
+
+footer
+  b
+    font-weight: normal
+    font-style: italic
+
+form, table
+  margin-top: 1em
+
+button[value^="download"], a.icon.download
+  &:before
+    background-image: url(/static/icons/download.png)
+    width: 11px
+    height: 13px
+
+button[value="star"]
+  &:before
+    background-image: url(/static/icons/star.png)
+    width: 15px
+    height: 14px
+
+button[value="un-star"]
+  &:before
+    background-image: url(/static/icons/unstar.png)
+    width: 15px
+    height: 14px
+
+button.button-star.un-starred
+  span:before
+    background-image: url(/static/icons/unstarred.png)
+    width: 16px
+    height: 15px
+  
+  &:active, &:hover
+    span:before
+      background-image: url(/static/icons/starred.png)
+
+button.button-star.starred
+  span:before
+    background-image: url(/static/icons/starred.png)
+    width: 16px
+    height: 15px
+
+button.icon-reset:not([data-tooltip]), button.icon-reset[data-tooltip] > span.label
+  &:before
+    background-image: url(/static/icons/sync.png)
+    width: 15px
+    height: 15px
+
+.icon-plus
+  &:before
+    background-image: url(/static/icons/plus.png)
+    width: 13px
+    height: 15px
+
+.icon-edit
+  &:before
+    background-image: url(/static/icons/pencil-alt.png)
+    width: 15px
+    height: 15px
+
+.icon-bell 
+  &:before
+    background-image: url(/static/icons/bell.png)
+    width: 13px
+    height: 15px
\ No newline at end of file
diff --git a/securedrop/sass/modules/_button.sass b/securedrop/sass/modules/_button.sass
index 01d15067dd..2221e23be4 100644
--- a/securedrop/sass/modules/_button.sass
+++ b/securedrop/sass/modules/_button.sass
@@ -104,7 +104,7 @@
     background: white
     border: 2px solid $color_urgent_coral
 
-  button.danger, a.danger, .btn.danger
+  button.danger, a.danger, .btn.danger, .btn.small.danger
     color: $color_urgent_coral
     background: white
     border: 2px solid $color_urgent_coral
@@ -124,28 +124,31 @@
   .full-width
     width: 100%
 
-  a > img.on-hover, button img.on-hover
-    display: none
+  a.icon, button.icon:not([data-tooltip]), button.button-star > span, button.icon[data-tooltip] > span.label
+    &:before
+      content: ""
+      display: inline-block
+      opacity: .9
 
-  a:hover > img.off-hover, button:hover img.off-hover
-    display: none
+      margin-right: 3px
+      margin-bottom: 2px
+      vertical-align: middle
 
-  a:hover > img.on-hover, button:hover img.on-hover
-    display: inline
-
-  a > img.icon, button > img.icon
-    vertical-align: middle
-    margin-right: 3px
-    margin-bottom: 2px
-    opacity: .9
-
-  // The source star icon must not inherit the vertical alignment of other button icons
-  button > img.icon-star-source
-    margin-right: 3px
+      background:
+        origin: content-box
+        position: center
+        repeat: no-repeat
+        size: contain
 
   .button-star
-    padding: 0
+    background: transparent
     border: none
+    font-size: 0
+    padding: 0
+    vertical-align: middle
+
+    &:hover
+      background: transparent
 
   .btn--space
     margin-bottom: 5px
diff --git a/securedrop/sass/modules/_center-text-align.sass b/securedrop/sass/modules/_center-text-align.sass
index be0dfec1bf..c5b1cf11bd 100644
--- a/securedrop/sass/modules/_center-text-align.sass
+++ b/securedrop/sass/modules/_center-text-align.sass
@@ -6,3 +6,7 @@
   .highlight
     background-color: $color_grey_xlight
     padding: 12px
+
+    & > a
+      display: inline-block
+      padding: 10px
diff --git a/securedrop/sass/modules/_codename-and-password.sass b/securedrop/sass/modules/_codename-and-password.sass
index 842d762849..3f3754ea6b 100644
--- a/securedrop/sass/modules/_codename-and-password.sass
+++ b/securedrop/sass/modules/_codename-and-password.sass
@@ -1,5 +1,10 @@
 =codename-and-password
-  .codename, .password
+  mark.password
+    background-color: transparent
     font-family: monospace
     letter-spacing: 0.15em
     font-weight: normal
+    // Direction is explicitly set to ltr until rtl wordlists
+    // are available.
+    direction: ltr
+    display: block
\ No newline at end of file
diff --git a/securedrop/sass/modules/_cols.sass b/securedrop/sass/modules/_cols.sass
index 1ad2fc05c5..846cbd0942 100644
--- a/securedrop/sass/modules/_cols.sass
+++ b/securedrop/sass/modules/_cols.sass
@@ -1,12 +1,21 @@
 =cols
-  #cols
+  #collections
     padding: 0
+    width: 100%
 
-    li.source
+    // Adapted from <https://stackoverflow.com/a/10762599>.
+    tbody.starred:after
+      content: ""
+      display: block
+      height: 1.33em
+
+    tr.source
       border-bottom: 1px solid #ddd
-      padding: 6px
       text-align: left
 
+      td, th
+        padding: 6px
+
       &.unread
         background: white
 
@@ -20,24 +29,20 @@
         border-top: 1px solid #ddd
 
       .date
-        float: right
-        &:dir(rtl)
-          float: left
         color: #7d7d7d
         font-size: 10px
         font-weight: bold
-        padding: 5px
-        margin: 5px
+        text-align: right
 
       .designation
-        display: inline-block
         min-width: 35%
+        white-space: nowrap
 
         a
           color: #333
+          display: inline-block
           font-weight: bold
           margin: 5px
-          display: inline-block
 
       .code-name
         text-decoration: none
@@ -54,22 +59,22 @@
           color: $color_securedrop_blue
 
       .submission-count
-        display: inline-block
+        font-size: 0.9em
+        color: #3d3d3d
 
-        span
-          padding: 3px
-          margin-right: 5px
-          font-size: 0.9em
-          color: #3d3d3d
+        background:
+          position: left center
+          repeat: no-repeat
 
-          &.unread
-            border: 0
+        &.files
+          background-image: url(/static/icons/files.png)
+          background-size: 14px 16px
+          padding-left: 14px + 5px
 
-      img.icon-drop
-        margin-bottom: -2px
-        margin-right: 2px
+        &.messages
+          background-image: url(/static/icons/messages.png)
+          background-size: 16px 14px
+          padding-left: 16px + 5px
 
       input
-        vertical-align: middle
-        margin-bottom: 2px
-
+        vertical-align: middle
\ No newline at end of file
diff --git a/securedrop/sass/modules/_confirm-modal.sass b/securedrop/sass/modules/_confirm-modal.sass
index 4e83b076c5..db91225af5 100644
--- a/securedrop/sass/modules/_confirm-modal.sass
+++ b/securedrop/sass/modules/_confirm-modal.sass
@@ -6,10 +6,11 @@
   left: 0
   background: rgba(0, 0, 0, 0.3)
   z-index: 99999
-  opacity: 0
   -moz-transition: opacity 100ms ease-in
   transition: opacity 100ms ease-in
   pointer-events: none
+  visibility: hidden
+  overflow: hidden
 
 
   .btn:not([lang="ar"])
@@ -17,13 +18,16 @@
 
   .btn-row
     all: unset
+    margin-left: auto
     margin-top: 2em
+    margin-right: auto
     display: flex
     width: 50%
 
   &:target
-    opacity: 1
     pointer-events: auto
+    visibility: visible
+    overflow: visible
 
   .external
     position: fixed
@@ -32,7 +36,7 @@
     width: 100%
     height: 100%
 
-  div
+  dialog
     left: 84px
     width: 650px
     position: relative
@@ -66,3 +70,19 @@
     text-decoration: none
     font-weight: bold
     border: none
+
+    span
+      font-size: 0
+
+      &:before
+        content: ""
+        display: inline-block
+
+        width: 24px
+        height: 24px
+
+        background:
+          image: url(/static/i/modal-x-white.png)
+          position: center
+          repeat: no-repeat
+          size: contain
diff --git a/securedrop/sass/modules/_flash-journalist.sass b/securedrop/sass/modules/_flash-journalist.sass
index e5991abbe1..9247ce4650 100644
--- a/securedrop/sass/modules/_flash-journalist.sass
+++ b/securedrop/sass/modules/_flash-journalist.sass
@@ -17,17 +17,30 @@
       font-size: 18pt
 
     &.success
-      background-color: $color_success_background
+      padding-left: 20px + 20px + 8px  // outer padding + width + inner padding
+      background:
+        color: $color_success_background
+        image: url(/static/i/flash-success.png)
+        position: 20px center  // X outer padding
+        repeat: no-repeat
+        size: 20px 15px
 
       b
         color: $color_success_text_strong
         padding-right: 0.5em
 
     &.notification
-      background-color: $color_notification_background
       font-size: medium
       font-weight: normal
 
+      padding-left: 20px + 15px + 8px  // outer padding + width + inner padding
+      background:
+        color: $color_notification_background
+        image: url(/static/i/flash-notification.png)
+        position: 20px center  // X outer padding
+        repeat: no-repeat
+        size: 15px 35px
+
       i
         color: $color_notification_text_strong
       b
@@ -35,7 +48,13 @@
         padding-right: 0.5em
 
     &.error
-      background-color: $color_error_background
+      padding-left: 20px + 9px + 8px  // outer padding + width + inner padding
+      background:
+        color: $color_error_background
+        image: url(/static/i/flash-error.png)
+        position: 20px center  // X outer padding
+        repeat: no-repeat
+        size: 9px 30px
 
       i
         color: $color_error_text_strong
@@ -73,6 +92,3 @@
 
       p
         color: #555555
-
-    img
-      margin-right: 8px
diff --git a/securedrop/sass/modules/_hr-horizontal-rule-line.sass b/securedrop/sass/modules/_hr-horizontal-rule-line.sass
index 9bfe94bec5..4d097c08e4 100644
--- a/securedrop/sass/modules/_hr-horizontal-rule-line.sass
+++ b/securedrop/sass/modules/_hr-horizontal-rule-line.sass
@@ -1,9 +1,5 @@
 =hr-horizontal-rule-line
   hr
-    &.cut-out
-      border-style: dotted
-      border-bottom: none
-      border-color: #c3c3c3
 
     &.no-line
       clear: both
@@ -14,3 +10,6 @@
       clear: both
       border: none
       height: 30px
+
+  section.cut-out
+    border-top: dotted 1px #c3c3c3
\ No newline at end of file
diff --git a/securedrop/sass/modules/_list-plain-and-starred.sass b/securedrop/sass/modules/_list-plain-and-starred.sass
deleted file mode 100644
index 39774cd400..0000000000
--- a/securedrop/sass/modules/_list-plain-and-starred.sass
+++ /dev/null
@@ -1,6 +0,0 @@
-=list-plain-and-starred
-  ul.plain
-    list-style: none
-
-  ul.starred
-    margin-bottom: 1.33em
diff --git a/securedrop/sass/modules/_logout.sass b/securedrop/sass/modules/_logout.sass
index 3236904a21..c3ae2f5240 100644
--- a/securedrop/sass/modules/_logout.sass
+++ b/securedrop/sass/modules/_logout.sass
@@ -1,4 +1,4 @@
 =logout
-  div#logout
+  body > nav
     float: right
     margin: 1em 1em 0 1em
diff --git a/securedrop/sass/modules/_main-content-area.sass b/securedrop/sass/modules/_main-content-area.sass
index f69ebd3d0b..637ff34d96 100644
--- a/securedrop/sass/modules/_main-content-area.sass
+++ b/securedrop/sass/modules/_main-content-area.sass
@@ -1,5 +1,6 @@
 =main-content-area
   .content
+    clear: both
     position: relative
     margin: 15px auto
     max-width: 980px
diff --git a/securedrop/sass/modules/_menu-modal.sass b/securedrop/sass/modules/_menu-modal.sass
index 3677a0056a..fb55c2b706 100644
--- a/securedrop/sass/modules/_menu-modal.sass
+++ b/securedrop/sass/modules/_menu-modal.sass
@@ -11,14 +11,16 @@
     left: 0
     background: rgba(0, 0, 0, 0.3)
     z-index: 99999
-    opacity: 0
     -moz-transition: opacity 100ms ease-in
     transition: opacity 100ms ease-in
     pointer-events: none
+    visibility: hidden
+    overflow: hidden
 
     &:target
-      opacity: 1
       pointer-events: auto
+      visibility: visible
+      overflow: visible
 
     .external
       position: fixed
@@ -27,8 +29,14 @@
       width: 100%
       height: 100%
 
-    button.modal-stacked
-      width: 70%
+    .modal-stacked
+      li
+        margin-top: 1em
+        margin-bottom: 1em
+
+      .btn
+        display: block
+        width: 70%
 
     .btn-row
       all: unset
@@ -40,7 +48,7 @@
       letter-spacing: 0px
       font-weight: bold
 
-    div
+    dialog
       position: relative
       margin: 250px auto
       padding: 10px 20px 10px 20px
@@ -52,18 +60,25 @@
     #delete-menu-cta
       all: unset
 
+      ul.modal-stacked
+        list-style: none
+        padding: 0
+
     #delete-menu-no-select
       all: unset
       display: none
 
-    p,li,span
+    p, li, .paragraph-spacing
       font-size: 0.9em
-      line-height: 1.4em
-      color: #303030
+      font-weight: normal
 
-    a
-      font-size: 0.9em
+    p, .paragraph-spacing
       line-height: 1.4em
+      margin-top: 1em
+      margin-bottom: 1em
+
+    p, li, h2.paragraph-spacing
+      color: #303030
 
     b
       color: #000000
@@ -78,6 +93,9 @@
     #delete-confirm-menu-dialog
       width: 400px
 
-    span.modal-danger-text
+    .modal-danger-text, .paragraph-spacing.modal-danger-text
       color: $color_urgent_coral
       font-weight: bold
+
+  dialog > a
+    display: inline-block
\ No newline at end of file
diff --git a/securedrop/sass/modules/_panel.sass b/securedrop/sass/modules/_panel.sass
index 8d16c030ef..bd6f4a5885 100644
--- a/securedrop/sass/modules/_panel.sass
+++ b/securedrop/sass/modules/_panel.sass
@@ -1,6 +1,6 @@
 =panel
   body:not(#source-index)
-    main, div.panel
+    main
       max-width: 800px
       width: 100%
       margin: 0 auto
@@ -8,10 +8,13 @@
       border: 1px solid #e1e1e1
       float: right
 
-      section, article, .section-spacing
+      section, article, .section-spacing, .section-spacing-inline
         display: flow-root
         margin-top: 10px + 2*8px  // cf. hr.no-line
 
+      .section-spacing-inline
+        display: inline-block
+
   li
     section, article, .section-spacing
       margin-top: 0 !important
\ No newline at end of file
diff --git a/securedrop/sass/modules/_shared-secret.sass b/securedrop/sass/modules/_shared-secret.sass
index 878f4e3c64..5fce3e94df 100644
--- a/securedrop/sass/modules/_shared-secret.sass
+++ b/securedrop/sass/modules/_shared-secret.sass
@@ -1,8 +1,13 @@
 =shared-secret
-  span#shared-secret
+  #shared-secret
     background-color: $color_grey_light
     color: #555
     padding: 8px 16px
     font-family: monospace
     font-size: 1.15em
     font-weight: bold
+    
+    display: block
+    width: max-content
+    margin-left: auto
+    margin-right: auto
\ No newline at end of file
diff --git a/securedrop/sass/modules/_submission.sass b/securedrop/sass/modules/_submission.sass
index e40b3668fb..2551c144ab 100644
--- a/securedrop/sass/modules/_submission.sass
+++ b/securedrop/sass/modules/_submission.sass
@@ -1,27 +1,31 @@
 =submission
-  .submission
+  tr.submission
     background: $color_grey_xlight
     border-bottom: 1px solid #ddd
-    padding: 10px
+    border-top: 1px solid #ddd
     text-align: left
 
+    td, th
+      padding: 10px
+
+      &.filename
+        min-width: 300px
+        white-space: nowrap
+        width: min-content
+
     &:dir(rtl)
       text-align: right
 
-    &:first-child
-      border-top: 1px solid #ddd
-
-    .file
-      min-width: 300px
-      display: inline-block
-      text-decoration: none
+    a.file
       border: 0
+      text-decoration: none
 
       &.unread
         font-weight: bold
         color: $color_button_blue
 
       &.read
+        font-weight: normal
         color: $color_grimace_blue
 
       &:hover
@@ -36,3 +40,71 @@
 
     &.unread
       background: white
+
+    td.status
+      label
+        font-size: 0
+
+        &:after
+          content: ""
+          display: inline-block
+
+          background:
+            position: center
+            repeat: no-repeat
+            size: contain
+
+        &.icon-check:after
+          width: 16px
+          height: 12px
+
+          background-image: url(/static/icons/check.png)
+
+        &.icon-envelope-closed:after
+          width: 16px
+          height: 15px
+
+          background-image: url(/static/icons/envelope-closed.png)
+
+        &.icon-envelope-open:after
+          width: 16px
+          height: 15px
+
+          background-image: url(/static/icons/envelope-open.png)
+
+        &.icon-reply:after
+          width: 16px
+          height: 16px
+
+          background-image: url(/static/icons/reply.png)
+
+    td.type
+      font-size: 0
+      text-align: right
+
+      &:before
+        content: ""
+        display: inline-block
+        
+        background:
+          position: center
+          repeat: no-repeat
+          size: contain
+
+      &.icon-files:before
+        width: 14px
+        height: 16px
+
+        background-image: url(/static/icons/files.png)
+
+      &.icon-reply:before
+        width: 16px
+        height: 16px
+
+        background-image: url(/static/icons/reply.png)
+
+      &.icon-messages:before
+        width: 15px
+        height: 13px
+
+        background-image: url(/static/icons/messages.png)
\ No newline at end of file
diff --git a/securedrop/sass/modules/_submissions.sass b/securedrop/sass/modules/_submissions.sass
index e18f93f34f..64d4229289 100644
--- a/securedrop/sass/modules/_submissions.sass
+++ b/securedrop/sass/modules/_submissions.sass
@@ -1,6 +1,3 @@
 =submissions
   .submissions
-    padding-left: 0px
-
-    &:dir(rtl)
-      padding-right: 0px
+    width: 100%
\ No newline at end of file
diff --git a/securedrop/sass/modules/_tooltip.sass b/securedrop/sass/modules/_tooltip.sass
index 100d78b14f..fde101ebed 100644
--- a/securedrop/sass/modules/_tooltip.sass
+++ b/securedrop/sass/modules/_tooltip.sass
@@ -1,6 +1,6 @@
 =tooltip
 
-  [tooltip]
+  [data-tooltip]
     position: relative
 
     /* Applies to all tooltips */
@@ -45,32 +45,32 @@
         white-space: unset
 
   /* don't show empty tooltips */
-  [tooltip='']::before,
-  [tooltip=''] .tooltip
+  [data-tooltip='']::before,
+  [data-tooltip=''] .tooltip
     display: none !important
 
   /* FLOW: UP */
-  [tooltip]:not([flow])::before,
-  [tooltip][flow^="up"]::before
+  [data-tooltip]:not([flow])::before,
+  [data-tooltip][flow^="up"]::before
     bottom: 100%
     border-bottom-width: 0
     border-top-color: #333
 
-  [tooltip]:not([flow]) .tooltip,
-  [tooltip][flow^="up"] .tooltip
+  [data-tooltip]:not([flow]) .tooltip,
+  [data-tooltip][flow^="up"] .tooltip
     bottom: calc(100% + 0.3em)
 
-  [tooltip]:not([flow])::before,
-  [tooltip]:not([flow]) .tooltip,
-  [tooltip][flow^="up"]::before,
-  [tooltip][flow^="up"] .tooltip
+  [data-tooltip]:not([flow])::before,
+  [data-tooltip]:not([flow]) .tooltip,
+  [data-tooltip][flow^="up"]::before,
+  [data-tooltip][flow^="up"] .tooltip
     left: 50%
     transform: translate(-50%, -.5em)
 
-  [tooltip]:not([flow]):hover::before,
-  [tooltip]:not([flow]):hover .tooltip,
-  [tooltip][flow^="up"]:hover::before,
-  [tooltip][flow^="up"]:hover .tooltip
+  [data-tooltip]:not([flow]):hover::before,
+  [data-tooltip]:not([flow]):hover .tooltip,
+  [data-tooltip][flow^="up"]:hover::before,
+  [data-tooltip][flow^="up"]:hover .tooltip
     animation: tooltips-vert 300ms ease-out forwards
 
   /* KEYFRAMES */
diff --git a/securedrop/sass/modules/_users-table.sass b/securedrop/sass/modules/_users-table.sass
index 8ce0396276..d9ff1eb249 100644
--- a/securedrop/sass/modules/_users-table.sass
+++ b/securedrop/sass/modules/_users-table.sass
@@ -2,8 +2,59 @@
   table#users
     width: 100%
 
+    th
+      white-space: nowrap
+
     th, td
       padding-bottom: .85em
 
     td
       text-align: center
+
+    tr.user
+      th 
+        font-weight: normal
+
+    td.edit-user a
+      font-size: 0
+
+      &:before
+        content: ""
+        display: inline-block
+
+        width: 18px
+        height: 16px
+
+        background:
+          image: url(/static/icons/edit-user.png)
+          position: center
+          repeat: no-repeat
+          size: contain
+
+    td.delete-user-disabled span, td.delete-user a
+      font-size: 0
+
+      &:before
+        content: ""
+        display: inline-block
+
+        width: 14px
+        height: 16px
+
+        background:
+          origin: content-box
+          position: center
+          repeat: no-repeat
+          size: contain
+
+    td.delete-user-disabled span
+      &:before
+        background-image: url(/static/icons/trash-disabled.png)
+
+    td.delete-user a
+      &:before
+        background-image: url(/static/icons/trash.png)
+
+      &:active, &:hover
+        &:before
+          background-image: url(/static/icons/trash-hover-red.png)
\ No newline at end of file
diff --git a/securedrop/static/js/journalist.js b/securedrop/static/js/journalist.js
index d95b22b393..55afdd755a 100644
--- a/securedrop/static/js/journalist.js
+++ b/securedrop/static/js/journalist.js
@@ -3,6 +3,9 @@
  * confusing users, this function dynamically adds elements that require JS.
  */
 
+const COLLECTION_SELECTOR_PREFIX = "table";
+const ROW_SELECTOR_PREFIX = COLLECTION_SELECTOR_PREFIX + " tr"
+
 function closest(element, selector) {
   let parent = element.parentNode;
   let closest = null;
@@ -23,7 +26,7 @@ function hide(selector) {
   });
 }
 
-function show(selector, displayStyle = "block") {
+function show(selector, displayStyle = "revert") {
   let nodelist = document.querySelectorAll(selector);
   Array.prototype.forEach.call(nodelist, function(element) {
     element.style.display = displayStyle;
@@ -36,6 +39,8 @@ function enhance_ui() {
   let filterContainer = document.getElementById("filter-container");
   if (filterContainer) {
     filterContainer.innerHTML = '<input id="filter" type="text" placeholder="' +
+      get_string("filter-by-codename-placeholder-string") +
+      '" aria-label="' +
       get_string("filter-by-codename-placeholder-string") +
       '" autofocus >';
   }
@@ -84,11 +89,11 @@ String.prototype.supplant = function (o) {
 
 function filter_codenames(value) {
   if(value == ""){
-    show('ul#cols li');
+    show(ROW_SELECTOR_PREFIX);
   } else {
-    hide('ul#cols li');
+    hide(ROW_SELECTOR_PREFIX);
     show(
-      'ul#cols li[data-source-designation*="' + value.replace(/"/g, "").toLowerCase() + '"]'
+      ROW_SELECTOR_PREFIX + '[data-source-designation*="' + value.replace(/"/g, "").toLowerCase() + '"]'
     );
   }
 }
@@ -109,7 +114,7 @@ ready(function() {
   if (selectAll) {
     selectAll.style.cursor = "pointer";
     selectAll.addEventListener("click", function() {
-      let checkboxes = document.querySelectorAll(".panel li:not(.hidden) input[type=checkbox]");
+      let checkboxes = document.querySelectorAll(ROW_SELECTOR_PREFIX + ":not(.hidden) input[type=checkbox]");
       for (let i = 0; i < checkboxes.length; i++) {
         checkboxes[i].checked = true;
       }
@@ -120,7 +125,7 @@ ready(function() {
   if (selectNone) {
     selectNone.style.cursor = "pointer";
     selectNone.addEventListener("click", function() {
-      let checkboxes = document.querySelectorAll(".panel li:not(.hidden) input[type=checkbox]");
+      let checkboxes = document.querySelectorAll(ROW_SELECTOR_PREFIX + ":not(.hidden) input[type=checkbox]");
       for (let i = 0; i < checkboxes.length; i++) {
         checkboxes[i].checked = false;
       }
@@ -131,7 +136,7 @@ ready(function() {
   if (selectUnread) {
     selectUnread.style.cursor = "pointer";
     selectUnread.addEventListener("click", function() {
-      let checkboxes = document.querySelectorAll(".submission > input[type='checkbox']:not(.hidden)");
+      let checkboxes = document.querySelectorAll(ROW_SELECTOR_PREFIX + " input[type='checkbox']:not(.hidden)");
       for (let i = 0; i < checkboxes.length; i++) {
         if (checkboxes[i].classList.contains("unread-cb")) {
           checkboxes[i].checked = true;
@@ -196,7 +201,7 @@ ready(function() {
       });
   }
 
-  let deleteSourcesButton = document.getElementById('btn-delete-sources');
+  let deleteSourcesButton = document.getElementById('delete-collections-link');
   if (deleteSourcesButton) {
     deleteSourcesButton.onclick = function() {
       var checkboxes = document.querySelectorAll('input[name="cols_selected"]:checked');
@@ -207,11 +212,11 @@ ready(function() {
               deleteMenuCTA.style.display = "none"
           }
           if (deleteMenuNoSelect) {
-              deleteMenuNoSelect.style.display = "block"
+              deleteMenuNoSelect.style.display = "revert"
           }
       } else {
           if (deleteMenuCTA) {
-              deleteMenuCTA.style.display = "block"
+              deleteMenuCTA.style.display = "revert"
           }
           if (deleteMenuNoSelect) {
               deleteMenuNoSelect.style.display = "none"
diff --git a/securedrop/tests/functional/journalist_navigation_steps.py b/securedrop/tests/functional/journalist_navigation_steps.py
index 5f9294ba9c..1a9d296142 100644
--- a/securedrop/tests/functional/journalist_navigation_steps.py
+++ b/securedrop/tests/functional/journalist_navigation_steps.py
@@ -93,7 +93,7 @@ def _login_user(self, username, password, otp, maxtries=3):
             self._try_login_user(username, password, token)
             # Successful login should redirect to the index
             self.wait_for(
-                lambda: self.driver.find_element_by_id("logout"), timeout=self.timeout * 2
+                lambda: self.driver.find_element_by_id("link-logout"), timeout=self.timeout * 2
             )
             if self.driver.current_url != self.journalist_location + "/":
                 new_token = str(otp.now())
@@ -122,11 +122,11 @@ def _journalist_logs_in(self):
         assert self._is_on_journalist_homepage()
 
     def _journalist_visits_col(self):
-        self.wait_for(lambda: self.driver.find_element_by_id("cols"))
+        self.wait_for(lambda: self.driver.find_element_by_css_selector("table#collections"))
 
         self.safe_click_by_id("un-starred-source-link-1")
 
-        self.wait_for(lambda: self.driver.find_element_by_css_selector("ul#submissions"))
+        self.wait_for(lambda: self.driver.find_element_by_css_selector("table#submissions"))
 
     def _journalist_selects_first_doc(self):
         self.safe_click_by_css_selector('input[type="checkbox"][name="doc_names_selected"]')
@@ -197,7 +197,7 @@ def _journalist_clicks_delete_link(self, click_id, displayed_id):
         self.wait_for(lambda: self.driver.find_element_by_id(displayed_id))
 
     def _journalist_clicks_delete_selected_link(self):
-        self.safe_click_by_css_selector("a#delete-selected-link > button.danger")
+        self.safe_click_by_css_selector("a#delete-selected-link")
         self.wait_for(lambda: self.driver.find_element_by_id("delete-selected-confirmation-modal"))
 
     def _journalist_clicks_delete_collections_link(self):
@@ -298,9 +298,9 @@ def one_source_no_files():
                 flash_msg = self.driver.find_element_by_css_selector(".flash")
                 assert "The files and messages have been deleted" in flash_msg.text
             if not self.accept_languages:
-                count_div = self.driver.find_element_by_css_selector(".submission-count")
-                assert "0 docs" in count_div.text
-                assert "0 messages" in count_div.text
+                counts = self.driver.find_elements_by_css_selector(".submission-count")
+                assert "0 docs" in counts[0].text
+                assert "0 messages" in counts[1].text
 
         self.wait_for(one_source_no_files)
         time.sleep(5)
@@ -471,7 +471,7 @@ def user_token_added():
     def _admin_deletes_user(self):
         for i in range(CLICK_ATTEMPTS):
             try:
-                self.safe_click_by_css_selector(".delete-user")
+                self.safe_click_by_css_selector(".delete-user a")
                 self.wait_for(
                     lambda: expected_conditions.element_to_be_clickable((By.ID, "delete-selected"))
                 )
@@ -570,11 +570,8 @@ def edit_page_loaded():
     def _edit_user(self, username, is_admin=False):
         self.wait_for(lambda: self.driver.find_element_by_id("users"))
 
-        new_user_edit_links = [
-            el
-            for el in self.driver.find_elements_by_tag_name("a")
-            if el.get_attribute("data-username") == username
-        ]
+        selector = 'a.edit-user[data-username="{}"]'.format(username)
+        new_user_edit_links = self.driver.find_elements_by_css_selector(selector)
 
         assert 1 == len(new_user_edit_links)
         new_user_edit_links[0].click()
@@ -622,15 +619,12 @@ def _admin_editing_invalid_username(self):
         # Go to the admin interface
         self.safe_click_by_id("link-admin-index")
 
-        self.wait_for(lambda: self.driver.find_element_by_css_selector("button#add-user"))
+        self.wait_for(lambda: self.driver.find_element_by_id("add-user"))
 
         # Click the "edit user" link for the new user
         # self._edit_user(self.new_user['username'])
-        new_user_edit_links = [
-            el
-            for el in self.driver.find_elements_by_tag_name("a")
-            if (el.get_attribute("data-username") == self.new_user["username"])
-        ]
+        selector = 'a.edit-user[data-username="{}"]'.format(self.new_user["username"])
+        new_user_edit_links = self.driver.find_elements_by_css_selector(selector)
         assert len(new_user_edit_links) == 1
         new_user_edit_links[0].click()
 
@@ -665,15 +659,12 @@ def _admin_can_edit_new_user(self):
         # Go to the admin interface
         self.safe_click_by_id("link-admin-index")
 
-        self.wait_for(lambda: self.driver.find_element_by_css_selector("button#add-user"))
+        self.wait_for(lambda: self.driver.find_element_by_id("add-user"))
 
         # Click the "edit user" link for the new user
         # self._edit_user(self.new_user['username'])
-        new_user_edit_links = [
-            el
-            for el in self.driver.find_elements_by_tag_name("a")
-            if (el.get_attribute("data-username") == self.new_user["username"])
-        ]
+        selector = 'a.edit-user[data-username="{}"]'.format(self.new_user["username"])
+        new_user_edit_links = self.driver.find_elements_by_css_selector(selector)
         assert len(new_user_edit_links) == 1
         new_user_edit_links[0].click()
 
@@ -723,9 +714,9 @@ def can_edit_user2():
         # Go to the admin interface
         self.safe_click_by_id("link-admin-index")
 
-        self.wait_for(lambda: self.driver.find_element_by_css_selector("button#add-user"))
+        self.wait_for(lambda: self.driver.find_element_by_id("add-user"))
 
-        selector = 'a[data-username="{}"]'.format(self.new_user["username"])
+        selector = 'a.edit-user[data-username="{}"]'.format(self.new_user["username"])
         new_user_edit_links = self.driver.find_elements_by_css_selector(selector)
         assert len(new_user_edit_links) == 1
         self.safe_click_by_css_selector(selector)
@@ -760,7 +751,7 @@ def _journalist_checks_messages(self):
 
         if not self.accept_languages:
             # There should be a "1 unread" span in the sole collection entry
-            unread_span = self.driver.find_element_by_css_selector("span.unread")
+            unread_span = self.driver.find_element_by_css_selector("tr.unread")
             assert "1 unread" in unread_span.text
 
     def _journalist_stars_and_unstars_single_message(self):
@@ -808,7 +799,7 @@ def _journalist_selects_all_documents(self):
     def _journalist_downloads_message(self):
         self._journalist_selects_the_first_source()
 
-        self.wait_for(lambda: self.driver.find_element_by_css_selector("ul#submissions"))
+        self.wait_for(lambda: self.driver.find_element_by_css_selector("table#submissions"))
 
         submissions = self.driver.find_elements_by_css_selector("#submissions a")
         assert 1 == len(submissions)
@@ -840,7 +831,7 @@ def cookie_string_from_selenium_cookies(cookies):
     def _journalist_downloads_message_missing_file(self):
         self._journalist_selects_the_first_source()
 
-        self.wait_for(lambda: self.driver.find_element_by_css_selector("ul#submissions"))
+        self.wait_for(lambda: self.driver.find_element_by_css_selector("table#submissions"))
 
         submissions = self.driver.find_elements_by_css_selector("#submissions a")
         assert 1 == len(submissions)
@@ -915,14 +906,14 @@ def _visit_edit_totp_secret(self):
         )
 
     def _admin_visits_add_user(self):
-        add_user_btn = self.driver.find_element_by_css_selector("button#add-user")
+        add_user_btn = self.driver.find_element_by_id("add-user")
         self.wait_for(lambda: add_user_btn.is_enabled() and add_user_btn.is_displayed())
         add_user_btn.click()
 
         self.wait_for(lambda: self.driver.find_element_by_id("username"))
 
     def _admin_visits_edit_user(self):
-        selector = 'a[data-username="{}"]'.format(self.new_user["username"])
+        selector = 'a.edit-user[data-username="{}"]'.format(self.new_user["username"])
         new_user_edit_links = self.driver.find_elements_by_css_selector(selector)
         assert len(new_user_edit_links) == 1
         self.safe_click_by_css_selector(selector)
@@ -972,9 +963,9 @@ def _admin_visits_reset_2fa_hotp_step():
             time.sleep(1)
 
             tip_opacity = self.driver.find_elements_by_css_selector(
-                "#button-reset-two-factor-hotp span")[0].value_of_css_property('opacity')
+                "#button-reset-two-factor-hotp span.tooltip")[0].value_of_css_property('opacity')
             tip_text = self.driver.find_elements_by_css_selector(
-                "#button-reset-two-factor-hotp span")[0].text
+                "#button-reset-two-factor-hotp span.tooltip")[0].text
 
             assert tip_opacity == "1"
 
@@ -1005,9 +996,9 @@ def _admin_visits_reset_2fa_totp_step():
             time.sleep(1)
 
             tip_opacity = self.driver.find_elements_by_css_selector(
-                "#button-reset-two-factor-totp span")[0].value_of_css_property('opacity')
+                "#button-reset-two-factor-totp span.tooltip")[0].value_of_css_property('opacity')
             tip_text = self.driver.find_elements_by_css_selector(
-                "#button-reset-two-factor-totp span")[0].text
+                "#button-reset-two-factor-totp span.tooltip")[0].text
 
             assert tip_opacity == "1"
             if not self.accept_languages:
@@ -1068,7 +1059,7 @@ def _journalist_delete_none(self):
 
     def _journalist_delete_all_confirmation(self):
         self.safe_click_all_by_css_selector("[name=doc_names_selected]")
-        self.safe_click_by_css_selector("a#delete-selected-link > button.danger")
+        self.safe_click_by_css_selector("a#delete-selected-link")
 
     def _journalist_delete_one(self):
         self.safe_click_by_css_selector("[name=doc_names_selected]")
@@ -1209,7 +1200,7 @@ def _journalist_sees_missing_file_error_message(self, single_file=False):
             )
 
         if self.accept_languages is None:
-            assert notification.text == error_msg
+            assert notification.text in error_msg
 
     def _journalist_is_on_collection_page(self):
         return self.wait_for(
@@ -1217,7 +1208,9 @@ def _journalist_is_on_collection_page(self):
         )
 
     def _journalist_clicks_source_unread(self):
-        self.driver.find_element_by_css_selector("span.unread a").click()
+        self.driver.find_element_by_css_selector(
+            "table#collections tr.source > td.unread a"
+            ).click()
 
     def _journalist_selects_first_source_then_download_all(self):
         checkboxes = self.driver.find_elements_by_name("cols_selected")
diff --git a/securedrop/tests/test_integration.py b/securedrop/tests/test_integration.py
index 62babcaef3..4404c9828b 100644
--- a/securedrop/tests/test_integration.py
+++ b/securedrop/tests/test_integration.py
@@ -68,19 +68,19 @@ def test_submit_message(journalist_app, source_app, test_journo):
 
         # The source should have a "download unread" link that
         # says "1 unread"
-        col = soup.select('ul#cols > li')[0]
-        unread_span = col.select('span.unread a')[0]
+        col = soup.select('table#collections tr.source')[0]
+        unread_span = col.select('td.unread a')[0]
         assert "1 unread" in unread_span.get_text()
 
-        col_url = soup.select('ul#cols > li a')[0]['href']
+        col_url = soup.select('table#collections th.designation a')[0]['href']
         resp = app.get(col_url)
         assert resp.status_code == 200
         text = resp.data.decode('utf-8')
         soup = BeautifulSoup(text, 'html.parser')
-        submission_url = soup.select('ul#submissions li a')[0]['href']
+        submission_url = soup.select('table#submissions th.filename a')[0]['href']
         assert "-msg" in submission_url
-        span = soup.select('ul#submissions li span.info span')[0]
-        assert re.compile(r'\d+ bytes').match(span['title'])
+        size = soup.select('table#submissions td.info')[0]
+        assert re.compile(r'\d+ bytes').match(size['title'])
 
         resp = app.get(submission_url)
         assert resp.status_code == 200
@@ -97,7 +97,8 @@ def test_submit_message(journalist_app, source_app, test_journo):
         text = resp.data.decode('utf-8')
         soup = BeautifulSoup(text, 'html.parser')
         doc_name = soup.select(
-            'ul > li > input[name="doc_names_selected"]')[0]['value']
+            'table#submissions > tr.submission > td.status input[name="doc_names_selected"]'
+            )[0]['value']
         resp = app.post('/bulk', data=dict(
             action='confirm_delete',
             filesystem_id=filesystem_id,
@@ -170,19 +171,19 @@ def test_submit_file(journalist_app, source_app, test_journo):
 
         # The source should have a "download unread" link that says
         # "1 unread"
-        col = soup.select('ul#cols > li')[0]
-        unread_span = col.select('span.unread a')[0]
+        col = soup.select('table#collections tr.source')[0]
+        unread_span = col.select('td.unread a')[0]
         assert "1 unread" in unread_span.get_text()
 
-        col_url = soup.select('ul#cols > li a')[0]['href']
+        col_url = soup.select('table#collections th.designation a')[0]['href']
         resp = app.get(col_url)
         assert resp.status_code == 200
         text = resp.data.decode('utf-8')
         soup = BeautifulSoup(text, 'html.parser')
-        submission_url = soup.select('ul#submissions li a')[0]['href']
+        submission_url = soup.select('table#submissions th.filename a')[0]['href']
         assert "-doc" in submission_url
-        span = soup.select('ul#submissions li span.info span')[0]
-        assert re.compile(r'\d+ bytes').match(span['title'])
+        size = soup.select('table#submissions td.info')[0]
+        assert re.compile(r'\d+ bytes').match(size['title'])
 
         resp = app.get(submission_url)
         assert resp.status_code == 200
@@ -206,7 +207,8 @@ def test_submit_file(journalist_app, source_app, test_journo):
         text = resp.data.decode('utf-8')
         soup = BeautifulSoup(text, 'html.parser')
         doc_name = soup.select(
-            'ul > li > input[name="doc_names_selected"]')[0]['value']
+            'table#submissions > tr.submission > td.status input[name="doc_names_selected"]'
+            )[0]['value']
         resp = app.post('/bulk', data=dict(
             action='confirm_delete',
             filesystem_id=filesystem_id,
@@ -273,7 +275,7 @@ def _helper_test_reply(journalist_app, source_app, config, test_journo,
         text = resp.data.decode('utf-8')
         assert "Sources" in text
         soup = BeautifulSoup(resp.data, 'html.parser')
-        col_url = soup.select('ul#cols > li a')[0]['href']
+        col_url = soup.select('table#collections tr.source > th.designation a')[0]['href']
 
         resp = app.get(col_url)
         assert resp.status_code == 200
@@ -458,7 +460,7 @@ def test_delete_collection(mocker, source_app, journalist_app, test_journo):
         resp = app.get('/')
         # navigate to the collection page
         soup = BeautifulSoup(resp.data.decode('utf-8'), 'html.parser')
-        first_col_url = soup.select('ul#cols > li a')[0]['href']
+        first_col_url = soup.select('table#collections tr.source > th.designation a')[0]['href']
         resp = app.get(first_col_url)
         assert resp.status_code == 200
 
@@ -561,7 +563,7 @@ def test_filenames(source_app, journalist_app, test_journo):
         _login_user(app, test_journo)
         resp = app.get('/')
         soup = BeautifulSoup(resp.data.decode('utf-8'), 'html.parser')
-        first_col_url = soup.select('ul#cols > li a')[0]['href']
+        first_col_url = soup.select('table#collections tr.source > th.designation a')[0]['href']
         resp = app.get(first_col_url)
         assert resp.status_code == 200
 
@@ -569,7 +571,7 @@ def test_filenames(source_app, journalist_app, test_journo):
         soup = BeautifulSoup(resp.data.decode('utf-8'), 'html.parser')
         submission_filename_re = r'^{0}-[a-z0-9-_]+(-msg|-doc\.gz)\.gpg$'
         for i, submission_link in enumerate(
-                soup.select('ul#submissions li a .filename')):
+                soup.select('table#submissions tr.submission > th.filename a')):
             filename = str(submission_link.contents[0])
             assert re.match(submission_filename_re.format(i + 1), filename)
 
@@ -588,7 +590,7 @@ def test_filenames_delete(journalist_app, source_app, test_journo):
         _login_user(app, test_journo)
         resp = app.get('/')
         soup = BeautifulSoup(resp.data.decode('utf-8'), 'html.parser')
-        first_col_url = soup.select('ul#cols > li a')[0]['href']
+        first_col_url = soup.select('table#collections tr.source > th.designation a')[0]['href']
         resp = app.get(first_col_url)
         assert resp.status_code == 200
         soup = BeautifulSoup(resp.data.decode('utf-8'), 'html.parser')
@@ -601,13 +603,13 @@ def test_filenames_delete(journalist_app, source_app, test_journo):
         # test filenames and sort order
         submission_filename_re = r'^{0}-[a-z0-9-_]+(-msg|-doc\.gz)\.gpg$'
         filename = str(
-            soup.select('ul#submissions li a .filename')[0].contents[0])
+            soup.select('table#submissions tr.submission > th.filename a')[0].contents[0])
         assert re.match(submission_filename_re.format(1), filename)
         filename = str(
-            soup.select('ul#submissions li a .filename')[1].contents[0])
+            soup.select('table#submissions tr.submission > th.filename a')[1].contents[0])
         assert re.match(submission_filename_re.format(3), filename)
         filename = str(
-            soup.select('ul#submissions li a .filename')[2].contents[0])
+            soup.select('table#submissions tr.submission > th.filename a')[2].contents[0])
         assert re.match(submission_filename_re.format(4), filename)