diff --git a/core/includes/form.inc b/core/includes/form.inc
index b328625..46fd32f 100644
--- a/core/includes/form.inc
+++ b/core/includes/form.inc
@@ -2877,7 +2877,7 @@ function theme_fieldset($variables) {
 
   $legend_attributes = array();
   if (isset($element['#title_display']) && $element['#title_display'] == 'invisible') {
-    $legend_attributes['class'][] = 'element-invisible';
+    $legend_attributes['class'][] = 'visually-hidden';
   }
 
   $output = '<fieldset' . new Attribute($element['#attributes']) . '>';
@@ -4814,7 +4814,7 @@ function theme_form_element_label($variables) {
   }
   // Show label only to screen readers to avoid disruption in visual flows.
   elseif ($element['#title_display'] == 'invisible') {
-    $attributes['class'] = 'element-invisible';
+    $attributes['class'] = 'visually-hidden';
   }
 
   if (!empty($element['#id'])) {
diff --git a/core/includes/menu.inc b/core/includes/menu.inc
index 6209fac..8b3efc8 100644
--- a/core/includes/menu.inc
+++ b/core/includes/menu.inc
@@ -1662,7 +1662,7 @@ function theme_menu_local_task($variables) {
 
   if (!empty($variables['element']['#active'])) {
     // Add text to indicate active tab for non-visual users.
-    $active = '<span class="element-invisible">' . t('(active tab)') . '</span>';
+    $active = '<span class="visually-hidden">' . t('(active tab)') . '</span>';
 
     // If the link does not contain HTML already, check_plain() it now.
     // After we set 'html'=TRUE the link will not be sanitized by l().
@@ -2304,13 +2304,13 @@ function theme_menu_local_tasks(&$variables) {
   $output = '';
 
   if (!empty($variables['primary'])) {
-    $variables['primary']['#prefix'] = '<h2 class="element-invisible">' . t('Primary tabs') . '</h2>';
+    $variables['primary']['#prefix'] = '<h2 class="visually-hidden">' . t('Primary tabs') . '</h2>';
     $variables['primary']['#prefix'] .= '<ul class="tabs primary">';
     $variables['primary']['#suffix'] = '</ul>';
     $output .= drupal_render($variables['primary']);
   }
   if (!empty($variables['secondary'])) {
-    $variables['secondary']['#prefix'] = '<h2 class="element-invisible">' . t('Secondary tabs') . '</h2>';
+    $variables['secondary']['#prefix'] = '<h2 class="visually-hidden">' . t('Secondary tabs') . '</h2>';
     $variables['secondary']['#prefix'] .= '<ul class="tabs secondary">';
     $variables['secondary']['#suffix'] = '</ul>';
     $output .= drupal_render($variables['secondary']);
diff --git a/core/includes/pager.inc b/core/includes/pager.inc
index 4c497ba..b073e3d 100644
--- a/core/includes/pager.inc
+++ b/core/includes/pager.inc
@@ -309,7 +309,7 @@ function theme_pager($variables) {
         '#markup' => $li_last,
       );
     }
-    return '<h2 class="element-invisible">' . t('Pages') . '</h2>' . theme('item_list', array(
+    return '<h2 class="visually-hidden">' . t('Pages') . '</h2>' . theme('item_list', array(
       'items' => $items,
       'attributes' => array('class' => array('pager')),
     ));
diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 009d07e..0914f9c 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1645,7 +1645,7 @@ function theme_status_messages($variables) {
   foreach (drupal_get_messages($display) as $type => $messages) {
     $output .= "<div class=\"messages messages--$type\">\n";
     if (!empty($status_heading[$type])) {
-      $output .= '<h2 class="element-invisible">' . $status_heading[$type] . "</h2>\n";
+      $output .= '<h2 class="visually-hidden">' . $status_heading[$type] . "</h2>\n";
     }
     if (count($messages) > 1) {
       $output .= " <ul>\n";
@@ -1710,7 +1710,7 @@ function theme_link($variables) {
  *     When using a string it will be used as the text of the heading and the
  *     level will default to 'h2'. Headings should be used on navigation menus
  *     and any list of links that consistently appears on multiple pages. To
- *     make the heading invisible use the 'element-invisible' CSS class. Do not
+ *     make the heading invisible use the 'visually-hidden' CSS class. Do not
  *     use 'display:none', which removes it from screen-readers and assistive
  *     technology. Headings allow screen-reader and keyboard only users to
  *     navigate to or skip the links. See
@@ -1878,8 +1878,8 @@ function theme_breadcrumb($variables) {
   if (!empty($breadcrumb)) {
     $output .= '<nav role="navigation" class="breadcrumb">';
     // Provide a navigational heading to give context for breadcrumb links to
-    // screen-reader users. Make the heading invisible with .element-invisible.
-    $output .= '<h2 class="element-invisible">' . t('You are here') . '</h2>';
+    // screen-reader users. Make the heading invisible with .visually-hidden.
+    $output .= '<h2 class="visually-hidden">' . t('You are here') . '</h2>';
     $output .= '<ol><li>' . implode('</li><li>', $breadcrumb) . '</li></ol>';
     $output .= '</nav>';
   }
@@ -2840,7 +2840,7 @@ function template_preprocess_page(&$variables) {
       ),
       '#heading' => array(
         'text' => t('Main menu'),
-        'class' => array('element-invisible'),
+        'class' => array('visually-hidden'),
       )
     );
   }
@@ -2854,7 +2854,7 @@ function template_preprocess_page(&$variables) {
       ),
       '#heading' => array(
         'text' => t('Secondary menu'),
-        'class' => array('element-invisible'),
+        'class' => array('visually-hidden'),
       )
     );
   }
diff --git a/core/includes/theme.maintenance.inc b/core/includes/theme.maintenance.inc
index 70347c2..adea00f 100644
--- a/core/includes/theme.maintenance.inc
+++ b/core/includes/theme.maintenance.inc
@@ -124,7 +124,7 @@ function theme_task_list($variables) {
   $active = $variables['active'];
 
   $done = isset($items[$active]) || $active == NULL;
-  $output = '<h2 class="element-invisible">Installation tasks</h2>';
+  $output = '<h2 class="visually-hidden">Installation tasks</h2>';
   $output .= '<ol class="task-list">';
 
   foreach ($items as $k => $item) {
@@ -140,7 +140,7 @@ function theme_task_list($variables) {
     $output .= '<li';
     $output .= ($class ? ' class="' . $class . '"' : '') . '>';
     $output .= $item;
-    $output .= ($status ? '<span class="element-invisible">' . $status . '</span>' : '');
+    $output .= ($status ? '<span class="visually-hidden">' . $status . '</span>' : '');
     $output .= '</li>';
   }
   $output .= '</ol>';
diff --git a/core/misc/announce.js b/core/misc/announce.js
index 3037436..dbefeb6 100644
--- a/core/misc/announce.js
+++ b/core/misc/announce.js
@@ -31,7 +31,7 @@
       if (!liveElement) {
         liveElement = document.createElement('div');
         liveElement.id = 'drupal-live-announce';
-        liveElement.className = 'element-invisible';
+        liveElement.className = 'visually-hidden';
         liveElement.setAttribute('aria-live', 'polite');
         liveElement.setAttribute('aria-busy', 'false');
         document.body.appendChild(liveElement);
diff --git a/core/misc/autocomplete.js b/core/misc/autocomplete.js
index fa74a75..a11ddf4 100644
--- a/core/misc/autocomplete.js
+++ b/core/misc/autocomplete.js
@@ -19,7 +19,7 @@ Drupal.behaviors.autocomplete = {
       $($input[0].form).submit(Drupal.autocompleteSubmit);
       $input.parent()
         .attr('role', 'application')
-        .append($('<span class="element-invisible" aria-live="assertive"></span>')
+        .append($('<span class="visually-hidden" aria-live="assertive"></span>')
           .attr('id', $input[0].id + '-autocomplete-aria-live')
         );
       new Drupal.jsAC($input, acdb[uri]);
diff --git a/core/misc/collapse.js b/core/misc/collapse.js
index 9860ebf..5622d08 100644
--- a/core/misc/collapse.js
+++ b/core/misc/collapse.js
@@ -60,7 +60,7 @@ $.extend(CollapsibleDetails.prototype, {
     // Turn the summary into a clickable link.
     var $legend = this.$node.find('> summary');
 
-    $('<span class="details-summary-prefix element-invisible"></span>')
+    $('<span class="details-summary-prefix visually-hidden"></span>')
       .append(this.$node.attr('open') ? Drupal.t('Hide') : Drupal.t('Show'))
       .prependTo($legend)
       .after(' ');
diff --git a/core/misc/dropbutton/dropbutton.js b/core/misc/dropbutton/dropbutton.js
index daebca2..22fe4ef 100644
--- a/core/misc/dropbutton/dropbutton.js
+++ b/core/misc/dropbutton/dropbutton.js
@@ -154,7 +154,7 @@ $.extend(Drupal.theme, {
    *   A string representing a DOM fragment.
    */
   dropbuttonToggle: function (options) {
-    return '<li class="dropbutton-toggle"><button type="button" role="button"><span class="dropbutton-arrow"><span class="element-invisible">' + options.title + '</span></span></button></li>';
+    return '<li class="dropbutton-toggle"><button type="button" role="button"><span class="dropbutton-arrow"><span class="visually-hidden">' + options.title + '</span></span></button></li>';
   }
 });
 
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
index 1421533..acd181b 100644
--- a/core/misc/vertical-tabs.js
+++ b/core/misc/vertical-tabs.js
@@ -132,7 +132,7 @@ Drupal.verticalTab.prototype = {
     this.item.addClass('selected');
     // Mark the active tab for screen readers.
     $('#active-vertical-tab').remove();
-    this.link.append('<span id="active-vertical-tab" class="element-invisible">' + Drupal.t('(active tab)') + '</span>');
+    this.link.append('<span id="active-vertical-tab" class="visually-hidden">' + Drupal.t('(active tab)') + '</span>');
   },
 
   /**
diff --git a/core/modules/aggregator/templates/aggregator-summary-items.html.twig b/core/modules/aggregator/templates/aggregator-summary-items.html.twig
index 5376fda..12df970 100644
--- a/core/modules/aggregator/templates/aggregator-summary-items.html.twig
+++ b/core/modules/aggregator/templates/aggregator-summary-items.html.twig
@@ -20,5 +20,5 @@
 <h3>{{ title }}</h3>
 {{ summary_list }}
 <div class="links">
-  <a href="{{ source_url }}">{{ 'More<span class="element-invisible"> posts about %title</span>'|t({ '%title': title }) }}</a>
+  <a href="{{ source_url }}">{{ 'More<span class="visually-hidden"> posts about %title</span>'|t({ '%title': title }) }}</a>
 </div>
diff --git a/core/modules/block/lib/Drupal/block/BlockFormController.php b/core/modules/block/lib/Drupal/block/BlockFormController.php
index 335a9cd..828c5d4 100644
--- a/core/modules/block/lib/Drupal/block/BlockFormController.php
+++ b/core/modules/block/lib/Drupal/block/BlockFormController.php
@@ -101,7 +101,7 @@ public function form(array $form, array &$form_state) {
       );
       $form['visibility']['path']['pages'] = array(
         '#type' => 'textarea',
-        '#title' => '<span class="element-invisible">' . $title . '</span>',
+        '#title' => '<span class="visually-hidden">' . $title . '</span>',
         '#default_value' => !empty($visibility['path']['pages']) ? $visibility['path']['pages'] : '',
         '#description' => $description,
       );
diff --git a/core/modules/book/templates/book-navigation.html.twig b/core/modules/book/templates/book-navigation.html.twig
index 82e02fd..8dae15f 100644
--- a/core/modules/book/templates/book-navigation.html.twig
+++ b/core/modules/book/templates/book-navigation.html.twig
@@ -36,7 +36,7 @@
   <nav id="book-navigation-{{ book_id }}" class="book-navigation">
     {{ tree }}
     {% if has_links %}
-      <h2 class="element-invisible">{{ 'Book Navigation'|t }}</h2>
+      <h2 class="visually-hidden">{{ 'Book Navigation'|t }}</h2>
       <ul class="book-pager">
       {% if prev_url %}
         <li class="previous">
diff --git a/core/modules/ckeditor/ckeditor.admin.inc b/core/modules/ckeditor/ckeditor.admin.inc
index 8443833..e1d3645 100644
--- a/core/modules/ckeditor/ckeditor.admin.inc
+++ b/core/modules/ckeditor/ckeditor.admin.inc
@@ -119,7 +119,7 @@ function theme_ckeditor_settings_toolbar($variables) {
 
   // aria-live region for outputing aural information about the state of the
   // configuration.
-  $output .= '<div id="ckeditor-button-configuration-aria-live" class="element-invisible" aria-live="polite"></div>';
+  $output .= '<div id="ckeditor-button-configuration-aria-live" class="visually-hidden" aria-live="polite"></div>';
 
   $output .= '<div id="ckeditor-button-description" class="fieldset-description">' . t('Move a button into the <em>Active toolbar</em> to enable it, or into the list of <em>Available buttons</em> to disable it. Use dividers to create button groups. Buttons may be moved with the mouse or keyboard arrow keys.') . '</div>';
 
diff --git a/core/modules/comment/templates/comment.html.twig b/core/modules/comment/templates/comment.html.twig
index 4b441dd..857a90a 100644
--- a/core/modules/comment/templates/comment.html.twig
+++ b/core/modules/comment/templates/comment.html.twig
@@ -52,7 +52,7 @@
  *   'parent_author' and 'parent_created' during template_preprocess_comment().
  *   This information is presented to help screen readers follow lengthy
  *   discussion threads. You can hide this from sighted users using the class
- *   element-invisible.
+ *   visually-hidden.
  *
  * These two variables are provided for context:
  * - comment: Full comment object.
@@ -85,7 +85,7 @@
       reader without this information.
     #}
     {% if parent %}
-      <p class="parent element-invisible">{{ parent }}</p>
+      <p class="parent visually-hidden">{{ parent }}</p>
     {% endif %}
 
     {{ permalink }}
diff --git a/core/modules/contextual/contextual.base.css b/core/modules/contextual/contextual.base.css
index 4d8d908..1d33eee 100644
--- a/core/modules/contextual/contextual.base.css
+++ b/core/modules/contextual/contextual.base.css
@@ -6,10 +6,15 @@
 .contextual-region {
   position: relative;
 }
+
+/**
+ * Override .focusable:active and .focusable:focus set to
+ * 'position: static !important'.
+ */
 .contextual .trigger:focus {
-  /* Override the .element-focusable position: static */
   position: relative !important;
 }
+
 .contextual-links {
   display: none;
 }
diff --git a/core/modules/contextual/contextual.js b/core/modules/contextual/contextual.js
index 18a5be1..ffdb73e 100644
--- a/core/modules/contextual/contextual.js
+++ b/core/modules/contextual/contextual.js
@@ -91,11 +91,11 @@ function adjustIfNestedAndOverlapping ($contextual) {
     // Retrieve height of nested contextual link.
     var height = 0;
     var $trigger = $nestedContextual.find('.trigger');
-    // Elements with the .element-invisible class have no dimensions, so this
+    // Elements with the .visually-hidden class have no dimensions, so this
     // class must be temporarily removed to the calculate the height.
-    $trigger.removeClass('element-invisible');
+    $trigger.removeClass('visually-hidden');
     height = $nestedContextual.height();
-    $trigger.addClass('element-invisible');
+    $trigger.addClass('visually-hidden');
 
     // Adjust nested contextual link's position.
     $nestedContextual.css({ top: $nestedContextual.position().top + height });
@@ -275,7 +275,7 @@ Drupal.contextual = {
         // The open state determines if the links are visible.
         .toggleClass('open', isOpen)
         // Update the visibility of the trigger.
-        .find('.trigger').toggleClass('element-invisible', !isVisible);
+        .find('.trigger').toggleClass('visually-hidden', !isVisible);
 
       // Nested contextual region handling: hide any nested contextual triggers.
       if ('isOpen' in this.model.changed) {
@@ -411,7 +411,7 @@ Drupal.contextual.collection = new Backbone.Collection([], { model: Drupal.conte
  *   A string representing a DOM fragment.
  */
 Drupal.theme.contextualTrigger = function () {
-  return '<button class="trigger element-invisible element-focusable" type="button"></button>';
+  return '<button class="trigger visually-hidden focusable" type="button"></button>';
 };
 
 })(jQuery, Drupal, drupalSettings, Backbone, Modernizr);
diff --git a/core/modules/contextual/contextual.module b/core/modules/contextual/contextual.module
index 019efed..5c3e69e 100644
--- a/core/modules/contextual/contextual.module
+++ b/core/modules/contextual/contextual.module
@@ -39,7 +39,7 @@ function contextual_toolbar() {
       ),
     ),
     '#wrapper_attributes' => array(
-      'class' => array('element-hidden', 'contextual-toolbar-tab'),
+      'class' => array('hidden', 'contextual-toolbar-tab'),
     ),
     '#attached' => array(
       'library' => array(
diff --git a/core/modules/contextual/contextual.theme.css b/core/modules/contextual/contextual.theme.css
index fef8240..d7cc549 100644
--- a/core/modules/contextual/contextual.theme.css
+++ b/core/modules/contextual/contextual.theme.css
@@ -34,7 +34,8 @@
   border: 1px solid #ddd;
   border-radius: 13px;
   box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
-  /* Override the .element-focusable height: auto */
+  /* Override .focusable width and height set to 'auto' */
+  width: 28px !important;
   height: 28px !important;
   float: right; /* LTR */
   margin: 0;
@@ -42,8 +43,6 @@
   padding: 0 2px;
   position: relative;
   right: 2px; /* LTR */
-  /* Override the .element-focusable height: auto */
-  width: 28px !important;
   text-indent: -9999px;
   cursor: pointer;
 }
diff --git a/core/modules/contextual/contextual.toolbar.css b/core/modules/contextual/contextual.toolbar.css
index 189a07f..017b357 100644
--- a/core/modules/contextual/contextual.toolbar.css
+++ b/core/modules/contextual/contextual.toolbar.css
@@ -32,6 +32,6 @@
 }
 
 /* @todo get rid of this declaration by making toolbar.module's CSS less specific */
-.js .toolbar .bar .contextual-toolbar-tab.tab.element-hidden {
+.js .toolbar .bar .contextual-toolbar-tab.tab.hidden {
   display: none;
 }
diff --git a/core/modules/contextual/contextual.toolbar.js b/core/modules/contextual/contextual.toolbar.js
index feea0cf..ecd19d9 100644
--- a/core/modules/contextual/contextual.toolbar.js
+++ b/core/modules/contextual/contextual.toolbar.js
@@ -150,7 +150,7 @@ Drupal.contextualToolbar = {
      */
     render: function () {
       // Render the visibility.
-      this.$el.toggleClass('element-hidden', !this.model.get('isVisible'));
+      this.$el.toggleClass('hidden', !this.model.get('isVisible'));
       // Render the state.
       this.$el.find('button').toggleClass('active', !this.model.get('isViewing'));
 
diff --git a/core/modules/edit/js/edit.js b/core/modules/edit/js/edit.js
index 102fef7..0ed30c2 100644
--- a/core/modules/edit/js/edit.js
+++ b/core/modules/edit/js/edit.js
@@ -279,7 +279,7 @@ function loadMissingEditors (callback) {
   // @todo Simplify this once https://drupal.org/node/1533366 lands.
   var id = 'edit-load-editors';
   // Create a temporary element to be able to use Drupal.ajax.
-  var $el = $('<div id="' + id + '" class="element-hidden"></div>').appendTo('body');
+  var $el = $('<div id="' + id + '" class="hidden"></div>').appendTo('body');
   // Create a Drupal.ajax instance to load the form.
   Drupal.ajax[id] = new Drupal.ajax(id, $el, {
     url: Drupal.url('edit/attachments'),
diff --git a/core/modules/field_ui/lib/Drupal/field_ui/DisplayOverview.php b/core/modules/field_ui/lib/Drupal/field_ui/DisplayOverview.php
index e6caf4e..4f6193e 100644
--- a/core/modules/field_ui/lib/Drupal/field_ui/DisplayOverview.php
+++ b/core/modules/field_ui/lib/Drupal/field_ui/DisplayOverview.php
@@ -394,7 +394,7 @@ public function buildForm(array $form, array &$form_state, $entity_type = NULL,
         // spinners will be added manually by the client-side script.
         'progress' => 'none',
       ),
-      '#attributes' => array('class' => array('element-invisible'))
+      '#attributes' => array('class' => array('visually-hidden'))
     );
 
     $form['actions'] = array('#type' => 'actions');
diff --git a/core/modules/forum/forum.module b/core/modules/forum/forum.module
index 42d7326..cbc0bcf 100644
--- a/core/modules/forum/forum.module
+++ b/core/modules/forum/forum.module
@@ -1097,7 +1097,7 @@ function template_preprocess_forum_list(&$variables) {
     if ($user->uid) {
       $variables['forums'][$id]->new_topics = _forum_topics_unread($forum->id(), $user->uid);
       if ($variables['forums'][$id]->new_topics) {
-        $variables['forums'][$id]->new_text = format_plural($variables['forums'][$id]->new_topics, '1 new post<span class="element-invisible"> in forum %title</span>', '@count new posts<span class="element-invisible"> in forum %title</span>', array('%title' => $variables['forums'][$id]->label()));
+        $variables['forums'][$id]->new_text = format_plural($variables['forums'][$id]->new_topics, '1 new post<span class="visually-hidden"> in forum %title</span>', '@count new posts<span class="visually-hidden"> in forum %title</span>', array('%title' => $variables['forums'][$id]->label()));
         $variables['forums'][$id]->new_url = url('forum/' . $forum->id(), array('fragment' => 'new'));
         $variables['forums'][$id]->icon_class = 'new';
         $variables['forums'][$id]->icon_title = t('New posts');
@@ -1172,7 +1172,7 @@ function template_preprocess_forum_topic_list(&$variables) {
       $variables['topics'][$id]->new_text = '';
       $variables['topics'][$id]->new_url = '';
       if ($topic->new_replies) {
-        $variables['topics'][$id]->new_text = format_plural($topic->new_replies, '1 new post<span class="element-invisible"> in topic %title</span>', '@count new posts<span class="element-invisible"> in topic %title</span>', array('%title' => $variables['topics'][$id]->title));
+        $variables['topics'][$id]->new_text = format_plural($topic->new_replies, '1 new post<span class="visually-hidden"> in topic %title</span>', '@count new posts<span class="visually-hidden"> in topic %title</span>', array('%title' => $variables['topics'][$id]->title));
         $variables['topics'][$id]->new_url = url("node/$topic->nid", array('query' => comment_new_page_count($topic->comment_count, $topic->new_replies, $topic), 'fragment' => 'new'));
       }
 
diff --git a/core/modules/forum/templates/forum-icon.html.twig b/core/modules/forum/templates/forum-icon.html.twig
index eafbe06..986e1a6 100644
--- a/core/modules/forum/templates/forum-icon.html.twig
+++ b/core/modules/forum/templates/forum-icon.html.twig
@@ -22,5 +22,5 @@
   {% if first_new -%}
     <a id="new"></a>
   {%- endif %}
-  <span class="element-invisible">{{ icon_title }}</span>
+  <span class="visually-hidden">{{ icon_title }}</span>
 </div>
diff --git a/core/modules/forum/templates/forum-list.html.twig b/core/modules/forum/templates/forum-list.html.twig
index fd55a77..b114c3e 100644
--- a/core/modules/forum/templates/forum-list.html.twig
+++ b/core/modules/forum/templates/forum-list.html.twig
@@ -57,7 +57,7 @@
         #}
         {% for i in 1..forum.depth if forum.depth > 0 %}<div class="indent">{% endfor %}
           <div class="icon forum-status-{{ forum.icon_class }}" title="{{ forum.icon_title }}">
-            <span class="element-invisible">{{ forum.icon_title }}</span>
+            <span class="visually-hidden">{{ forum.icon_title }}</span>
           </div>
           <div class="name"><a href="{{ forum.link }}">{{ forum.label }}</a></div>
           {% if forum.description.value %}
diff --git a/core/modules/locale/locale.pages.inc b/core/modules/locale/locale.pages.inc
index 9ba7b71..e1336d7 100644
--- a/core/modules/locale/locale.pages.inc
+++ b/core/modules/locale/locale.pages.inc
@@ -781,7 +781,7 @@ function theme_locale_translation_update_info($variables) {
   }
 
   $output = '<div class="inner" tabindex="0" role="button">';
-  $output .= '<span class="update-description-prefix element-invisible">Show description</span>' . $description;
+  $output .= '<span class="update-description-prefix visually-hidden">Show description</span>' . $description;
   $output .= $details ? '<div class="details">' . $details . '</div>' : '';
   $output .= '</div>';
   return $output;
diff --git a/core/modules/node/lib/Drupal/node/NodeRenderController.php b/core/modules/node/lib/Drupal/node/NodeRenderController.php
index 6a6608a..951f02b 100644
--- a/core/modules/node/lib/Drupal/node/NodeRenderController.php
+++ b/core/modules/node/lib/Drupal/node/NodeRenderController.php
@@ -52,7 +52,7 @@ public function buildContent(array $entities, array $displays, $view_mode, $lang
       if ($view_mode == 'teaser') {
         $node_title_stripped = strip_tags($entity->label());
         $links['node-readmore'] = array(
-          'title' => t('Read more<span class="element-invisible"> about @title</span>', array(
+          'title' => t('Read more<span class="visually-hidden"> about @title</span>', array(
             '@title' => $node_title_stripped,
           )),
           'href' => 'node/' . $entity->nid,
diff --git a/core/modules/node/lib/Drupal/node/Tests/PageEditTest.php b/core/modules/node/lib/Drupal/node/Tests/PageEditTest.php
index 8d963d4..c37a227 100644
--- a/core/modules/node/lib/Drupal/node/Tests/PageEditTest.php
+++ b/core/modules/node/lib/Drupal/node/Tests/PageEditTest.php
@@ -57,7 +57,7 @@ function testPageEdit() {
     $this->assertEqual($edit_url, $actual_url, 'On edit page.');
 
     // Check that the title and body fields are displayed with the correct values.
-    $active = '<span class="element-invisible">' . t('(active tab)') . '</span>';
+    $active = '<span class="visually-hidden">' . t('(active tab)') . '</span>';
     $link_text = t('!local-task-title!active', array('!local-task-title' => t('Edit'), '!active' => $active));
     $this->assertText(strip_tags($link_text), 0, 'Edit tab found and marked active.');
     $this->assertFieldByName($title_key, $edit[$title_key], 'Title field displayed.');
diff --git a/core/modules/overlay/overlay-child.js b/core/modules/overlay/overlay-child.js
index be43628..261f02a 100644
--- a/core/modules/overlay/overlay-child.js
+++ b/core/modules/overlay/overlay-child.js
@@ -69,11 +69,11 @@ Drupal.behaviors.overlayChild = {
     $(context).find('#overlay-disable-message')
       .focusin(function () {
         $(this).addClass('overlay-disable-message-focused')
-          .find('a.element-focusable').removeClass('element-invisible');
+          .find('.focusable').removeClass('visually-hidden');
       })
       .focusout(function () {
         $(this).removeClass('overlay-disable-message-focused')
-          .find('a.element-focusable').addClass('element-invisible');
+          .find('.focusable').addClass('visually-hidden');
       });
   }
 };
@@ -157,7 +157,7 @@ Drupal.overlayChild.behaviors.tabs = function (context, settings) {
 
   $('#overlay-tabs > li > a').bind('click.drupal-overlay', function () {
     var active_tab = Drupal.t('(active tab)');
-    $tabsLinks.parent().siblings().removeClass('active').find('element-invisible:contains(' + active_tab + ')').appendTo(this);
+    $tabsLinks.parent().siblings().removeClass('active').find('visually-hidden:contains(' + active_tab + ')').appendTo(this);
     $(this).parent().addClass('active');
   });
 };
diff --git a/core/modules/overlay/overlay-parent.css b/core/modules/overlay/overlay-parent.css
index 9459a7a..8dd0ab3 100644
--- a/core/modules/overlay/overlay-parent.css
+++ b/core/modules/overlay/overlay-parent.css
@@ -43,7 +43,7 @@ html.overlay-open .displace-bottom {
 /**
  * Within the overlay parent, the message about disabling the overlay is for
  * screen-reader users only. It is always kept invisible with the
- * element-invisible class, and removed from the tab order. Overlay-child.css
+ * visually-hidden class, and removed from the tab order. Overlay-child.css
  * contains styling for the same message appearing within the overlay, and
  * intended for sighted users.
  */
diff --git a/core/modules/overlay/overlay-parent.js b/core/modules/overlay/overlay-parent.js
index a8a32d6..4f45299 100644
--- a/core/modules/overlay/overlay-parent.js
+++ b/core/modules/overlay/overlay-parent.js
@@ -342,7 +342,7 @@ Drupal.overlay.loadChild = function (event) {
 Drupal.overlay.setFocusBefore = function ($element, document) {
   // Create an anchor inside the placeholder document.
   var placeholder = document.createElement('a');
-  var $placeholder = $(placeholder).addClass('element-invisible').attr('href', '#');
+  var $placeholder = $(placeholder).addClass('visually-hidden').attr('href', '#');
   // Put the placeholder where it belongs, and set the document focus to it.
   $placeholder.insertBefore($element);
   $placeholder.attr('autofocus', true);
diff --git a/core/modules/overlay/overlay.module b/core/modules/overlay/overlay.module
index 4cf68c2..3c86ca0 100644
--- a/core/modules/overlay/overlay.module
+++ b/core/modules/overlay/overlay.module
@@ -380,9 +380,9 @@ function theme_overlay_disable_message($variables) {
   // screen-reader users, this message appears in both the parent and child
   // documents, but only the one in the child document is part of the tab order.
   foreach (array('profile_link', 'dismiss_message_link') as $key) {
-    $element[$key]['#options']['attributes']['class'][] = 'element-invisible';
+    $element[$key]['#options']['attributes']['class'][] = 'visually-hidden';
     if (overlay_get_mode() == 'child') {
-      $element[$key]['#options']['attributes']['class'][] = 'element-focusable';
+      $element[$key]['#options']['attributes']['class'][] = 'focusable';
     }
   }
 
@@ -391,7 +391,7 @@ function theme_overlay_disable_message($variables) {
 
   // Add a heading for screen-reader users. The heading doesn't need to be seen
   // by sighted users.
-  $output = '<h3 class="element-invisible">' . t('Options for the administrative overlay') . '</h3>' . $output;
+  $output = '<h3 class="visually-hidden">' . t('Options for the administrative overlay') . '</h3>' . $output;
 
   // Wrap in a container for styling.
   $output = '<div id="overlay-disable-message" class="clearfix">' . $output . '</div>';
diff --git a/core/modules/overlay/templates/overlay.html.twig b/core/modules/overlay/templates/overlay.html.twig
index f54633e..7f91d0e 100644
--- a/core/modules/overlay/templates/overlay.html.twig
+++ b/core/modules/overlay/templates/overlay.html.twig
@@ -26,10 +26,10 @@
       <h1{{ title_attributes }}>{{ title }}</h1>
     </div>
     <div id="overlay-close-wrapper">
-      <a id="overlay-close" href="#" class="overlay-close" role="button" aria-controls="overlay-content"><span class="element-invisible">{{ 'Close overlay'|t }}</span></a>
+      <a id="overlay-close" href="#" class="overlay-close" role="button" aria-controls="overlay-content"><span class="visually-hidden">{{ 'Close overlay'|t }}</span></a>
     </div>
     {% if tabs %}
-      <h2 class="element-invisible">{{ 'Primary tabs'|t }}</h2><ul id="overlay-tabs">{{ tabs }}</ul>
+      <h2 class="visually-hidden">{{ 'Primary tabs'|t }}</h2><ul id="overlay-tabs">{{ tabs }}</ul>
     {% endif %}
   </div>
   <div{{ content_attributes }}>
diff --git a/core/modules/system/lib/Drupal/system/Tests/Form/ElementsLabelsTest.php b/core/modules/system/lib/Drupal/system/Tests/Form/ElementsLabelsTest.php
index b36b3c0..feb354b 100644
--- a/core/modules/system/lib/Drupal/system/Tests/Form/ElementsLabelsTest.php
+++ b/core/modules/system/lib/Drupal/system/Tests/Form/ElementsLabelsTest.php
@@ -65,8 +65,8 @@ function testFormLabels() {
     $elements = $this->xpath('//input[@id="edit-form-textfield-test-no-title-required"]/preceding-sibling::label[@for="edit-form-textfield-test-no-title-required"]/abbr[@class="form-required"]');
     $this->assertTrue(isset($elements[0]), 'Label tag with required marker precedes required textfield with no title.');
 
-    $elements = $this->xpath('//input[@id="edit-form-textfield-test-title-invisible"]/preceding-sibling::label[@for="edit-form-textfield-test-title-invisible" and @class="element-invisible"]');
-    $this->assertTrue(isset($elements[0]), 'Label preceding field and label class is element-invisible.');
+    $elements = $this->xpath('//input[@id="edit-form-textfield-test-title-invisible"]/preceding-sibling::label[@for="edit-form-textfield-test-title-invisible" and @class="visually-hidden"]');
+    $this->assertTrue(isset($elements[0]), 'Label preceding field and label class is visually-hidden.');
 
     $elements = $this->xpath('//input[@id="edit-form-textfield-test-title"]/preceding-sibling::abbr[@class="form-required"]');
     $this->assertFalse(isset($elements[0]), 'No required marker on non-required field.');
diff --git a/core/modules/system/system.admin.inc b/core/modules/system/system.admin.inc
index 6177dfd..5d0b39d 100644
--- a/core/modules/system/system.admin.inc
+++ b/core/modules/system/system.admin.inc
@@ -914,7 +914,7 @@ function system_modules($form, $form_state = array()) {
       '#title' => t($package),
       '#theme' => 'system_modules_details',
       '#header' => array(
-        array('data' => t('<span class="element-invisible">Enabled</span>'), 'class' => array('checkbox')),
+        array('data' => t('<span class="visually-hidden">Enabled</span>'), 'class' => array('checkbox')),
         array('data' => t('Name'), 'class' => array('name')),
         array('data' => t('Description'), 'class' => array('description', RESPONSIVE_PRIORITY_LOW)),
       ),
@@ -1497,7 +1497,7 @@ function theme_status_report($variables) {
       'class' => 'error',
     ),
   );
-  $output = '<table class="system-status-report"><thead><tr class="element-invisible">';
+  $output = '<table class="system-status-report"><thead><tr class="visually-hidden">';
   $output .= '<th>' . t('Status') . '</th><th>' . t('Component') . '</th><th>' . t('Details') . '</th>';
   $output .= '</tr></thead><tbody>';
 
@@ -1517,7 +1517,7 @@ function theme_status_report($variables) {
         $severity = $severities[REQUIREMENT_INFO];
       }
 
-      $severity['icon'] = '<div title="' . $severity['title'] . '"><span class="element-invisible">' . $severity['title'] . '</span></div>';
+      $severity['icon'] = '<div title="' . $severity['title'] . '"><span class="visually-hidden">' . $severity['title'] . '</span></div>';
 
       // Output table rows.
       $output .= '<tr class="' . $severity['class'] . '">';
@@ -1594,7 +1594,7 @@ function theme_system_modules_details($variables) {
       $description .= $links;
       $description .= '</div>';
     }
-    $col4 = '<div class="inner" tabindex="0" role="button"><span class="module-description-prefix element-invisible">Show description</span> ' . $description . '</div>';
+    $col4 = '<div class="inner" tabindex="0" role="button"><span class="module-description-prefix visually-hidden">Show description</span> ' . $description . '</div>';
     $row[] = array('class' => array('description', 'expand'), 'data' => $col4);
 
     $rows[] = $row;
diff --git a/core/modules/system/system.base.css b/core/modules/system/system.base.css
index 08ff66c..b45481d 100644
--- a/core/modules/system/system.base.css
+++ b/core/modules/system/system.base.css
@@ -248,7 +248,7 @@ input {
  * from a user. The effect of this class can be toggled with the jQuery show()
  * and hide() functions.
  */
-.element-hidden {
+.hidden {
   display: none;
 }
 
@@ -260,7 +260,7 @@ input {
  * manner should be kept concise, to avoid unnecessary burden on the user.
  * "!important" is used to prevent unintentional overrides.
  */
-.element-invisible {
+.visually-hidden {
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
   overflow: hidden;
@@ -269,11 +269,11 @@ input {
 }
 
 /**
- * The .element-focusable class extends the .element-invisible class to allow
- * the element to be focusable when navigated to via the keyboard.
+ * Forces a visually hidden element to be visible when navigated to via
+ * the keyboard.
  */
-.element-invisible.element-focusable:active,
-.element-invisible.element-focusable:focus {
+.visually-hidden.focusable:active,
+.visually-hidden.focusable:focus {
   position: static !important;
   clip: auto;
   overflow: visible;
@@ -281,6 +281,13 @@ input {
   width: auto;
 }
 
+/*
+ * Hide visually and from screen-readers, but maintain layout.
+ */
+.invisible {
+  visibility: hidden;
+}
+
 /**
  * Float clearing.
  *
diff --git a/core/modules/system/templates/html.html.twig b/core/modules/system/templates/html.html.twig
index 02a542b..153ff6b 100644
--- a/core/modules/system/templates/html.html.twig
+++ b/core/modules/system/templates/html.html.twig
@@ -38,7 +38,7 @@
   </head>
   <body{{ attributes }}>
     <div id="skip-link">
-      <a href="#main-content" class="element-invisible element-focusable">
+      <a href="#main-content" class="visually-hidden focusable">
         {{ 'Skip to main content'|t }}
       </a>
     </div>
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index c069791..3e12b55 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -338,7 +338,7 @@ Drupal.theme.toolbarOrientationToggle = function () {
  *   A string representing a DOM fragment.
  */
 Drupal.theme.toolbarMessageBox = function () {
-  return '<div id="toolbar-messages" class="element-invisible" role="region" aria-live="polite"></div>';
+  return '<div id="toolbar-messages" class="visually-hidden" role="region" aria-live="polite"></div>';
 };
 
 /**
diff --git a/core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.module b/core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.module
index 5bab7a9..ab7c2ad 100644
--- a/core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.module
+++ b/core/modules/toolbar/tests/modules/toolbar_test/toolbar_test.module
@@ -35,7 +35,7 @@ function toolbar_test_toolbar() {
           l(t('link 2'), '<front>'),
           l(t('link 3'), '<front>'),
         ),
-        '#prefix' => '<h2 class="element-invisible">' . t('Test tray') . '</h2>',
+        '#prefix' => '<h2 class="visually-hidden">' . t('Test tray') . '</h2>',
         '#attributes' => array(
           'class' => array('menu'),
         ),
diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module
index e1d55f3..857b219 100644
--- a/core/modules/toolbar/toolbar.module
+++ b/core/modules/toolbar/toolbar.module
@@ -236,7 +236,7 @@ function theme_toolbar(&$variables) {
     }
     return '<nav' . new Attribute($element['#attributes']) . '>'
       . '<div' . new Attribute($element['#bar']['#attributes']) . '>'
-      . '<h2 class="element-invisible">' . $element['#bar']['#heading'] . '</h2>'
+      . '<h2 class="visually-hidden">' . $element['#bar']['#heading'] . '</h2>'
       . $element['#children'] . '</div>' . $trays . '</nav>';
   }
 }
@@ -378,7 +378,7 @@ function theme_toolbar_tray_wrapper(&$variables) {
 function theme_toolbar_tray_heading_wrapper(&$variables) {
   if (!empty($variables['element']['#children'])) {
     $element = $variables['element'];
-    return '<h3 class="element-invisible">' . $element['#heading'] . '</h3>' . $element['#children'];
+    return '<h3 class="visually-hidden">' . $element['#heading'] . '</h3>' . $element['#children'];
   }
 }
 
diff --git a/core/modules/tour/css/tour.css b/core/modules/tour/css/tour.css
index 945e9e3..07033cd 100644
--- a/core/modules/tour/css/tour.css
+++ b/core/modules/tour/css/tour.css
@@ -34,6 +34,6 @@
 }
 
 /* @todo Remove once http://drupal.org/node/1916690 is resolved. */
-.js .toolbar .tour-toolbar-tab.tab.element-hidden {
+.js .toolbar .tour-toolbar-tab.tab.hidden {
   display: none;
 }
diff --git a/core/modules/tour/js/tour.js b/core/modules/tour/js/tour.js
index fde4f58..f461bf2 100644
--- a/core/modules/tour/js/tour.js
+++ b/core/modules/tour/js/tour.js
@@ -97,7 +97,7 @@ Drupal.tour.views.ToggleTourView = Backbone.View.extend({
    */
   render: function () {
     // Render the visibility.
-    this.$el.toggleClass('element-hidden', this._getTour().length === 0);
+    this.$el.toggleClass('hidden', this._getTour().length === 0);
     // Render the state.
     var isActive = this.model.get('isActive');
     this.$el.find('button')
diff --git a/core/modules/tour/lib/Drupal/tour/TourRenderController.php b/core/modules/tour/lib/Drupal/tour/TourRenderController.php
index e1bf15d..163882d 100644
--- a/core/modules/tour/lib/Drupal/tour/TourRenderController.php
+++ b/core/modules/tour/lib/Drupal/tour/TourRenderController.php
@@ -60,7 +60,7 @@ public function viewMultiple(array $entities = array(), $view_mode = 'full', $la
           '#attributes' => array(
             'id' => 'tour',
             'class' => array(
-              'element-hidden',
+              'hidden',
             ),
           ),
         );
diff --git a/core/modules/tour/tour.module b/core/modules/tour/tour.module
index fe9bc1a..3ce0176 100644
--- a/core/modules/tour/tour.module
+++ b/core/modules/tour/tour.module
@@ -89,7 +89,7 @@ function tour_toolbar() {
       ),
     ),
     '#wrapper_attributes' => array(
-      'class' => array('tour-toolbar-tab', 'element-hidden'),
+      'class' => array('tour-toolbar-tab', 'hidden'),
       'id' => 'toolbar-tab-tour',
     ),
     '#attached' => array(
diff --git a/core/modules/translation_entity/translation_entity.admin.inc b/core/modules/translation_entity/translation_entity.admin.inc
index dd7874c..cd5ea50 100644
--- a/core/modules/translation_entity/translation_entity.admin.inc
+++ b/core/modules/translation_entity/translation_entity.admin.inc
@@ -172,7 +172,7 @@ function _translation_entity_preprocess_language_content_settings_table(&$variab
               '#prefix' => '<label for="' . $field_element['#id'] . '">',
               '#suffix' => '</label>',
               'bundle' => array(
-                '#prefix' => '<span class="element-invisible">',
+                '#prefix' => '<span class="visually-hidden">',
                 '#suffix' => '</span> ',
                 '#markup' => check_plain($element[$bundle]['settings']['#label']),
               ),
@@ -206,12 +206,12 @@ function _translation_entity_preprocess_language_content_settings_table(&$variab
                   '#prefix' => '<label for="' . $column_element[$key]['#id'] . '">',
                   '#suffix' => '</label>',
                   'bundle' => array(
-                    '#prefix' => '<span class="element-invisible">',
+                    '#prefix' => '<span class="visually-hidden">',
                     '#suffix' => '</span> ',
                     '#markup' => check_plain($element[$bundle]['settings']['#label']),
                   ),
                   'field' => array(
-                    '#prefix' => '<span class="element-invisible">',
+                    '#prefix' => '<span class="visually-hidden">',
                     '#suffix' => '</span> ',
                     '#markup' => check_plain($field_element['#label']),
                   ),
diff --git a/core/modules/views_ui/js/views-admin.js b/core/modules/views_ui/js/views-admin.js
index f695e77..9dc1075 100644
--- a/core/modules/views_ui/js/views-admin.js
+++ b/core/modules/views_ui/js/views-admin.js
@@ -627,7 +627,7 @@ Drupal.viewsUi.rearrangeFilterHandler.prototype.duplicateGroupsOperator = functi
 
   // Get rid of the explanatory text around the operator; its placement is
   // explanatory enough.
-  this.operator.find('label').add('div.description').addClass('element-invisible');
+  this.operator.find('label').add('div.description').addClass('visually-hidden');
   this.operator.find('select').addClass('form-select');
 
   // Keep a list of the operator dropdowns, so we can sync their behavior later.
diff --git a/core/modules/views_ui/lib/Drupal/views_ui/Form/Ajax/ReorderDisplays.php b/core/modules/views_ui/lib/Drupal/views_ui/Form/Ajax/ReorderDisplays.php
index 17b8fa0..cc921ae 100644
--- a/core/modules/views_ui/lib/Drupal/views_ui/Form/Ajax/ReorderDisplays.php
+++ b/core/modules/views_ui/lib/Drupal/views_ui/Form/Ajax/ReorderDisplays.php
@@ -128,7 +128,7 @@ public function buildForm(array $form, array &$form_state) {
           '#value' => TRUE,
         );
 
-        $form['displays'][$id]['#attributes']['class'][] = 'element-hidden';
+        $form['displays'][$id]['#attributes']['class'][] = 'hidden';
       }
 
     }
diff --git a/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php b/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php
index af11810..f0dbb64 100644
--- a/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php
+++ b/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php
@@ -702,7 +702,7 @@ public function renderDisplayTop(ViewUI $view) {
       if ($display_id) {
         $tabs[$display_id]['#active'] = TRUE;
       }
-      $tabs['#prefix'] = '<h2 class="element-invisible">' . t('Secondary tabs') . '</h2><ul id = "views-display-menu-tabs" class="tabs secondary">';
+      $tabs['#prefix'] = '<h2 class="visually-hidden">' . t('Secondary tabs') . '</h2><ul id = "views-display-menu-tabs" class="tabs secondary">';
       $tabs['#suffix'] = '</ul>';
       $element['tabs'] = $tabs;
     }
@@ -931,7 +931,7 @@ public function getFormBucket(ViewUI $view, $type, $display) {
     $count_handlers = count($executable->display_handler->getHandlers($type));
 
     // Create the add text variable for the add action.
-    $add_text = t('Add <span class="element-invisible">@type</span>', array('@type' => $types[$type]['ltitle']));
+    $add_text = t('Add <span class="visually-hidden">@type</span>', array('@type' => $types[$type]['ltitle']));
 
     $actions['add'] = array(
       'title' => $add_text,
@@ -941,7 +941,7 @@ public function getFormBucket(ViewUI $view, $type, $display) {
     );
     if ($count_handlers > 0) {
       // Create the rearrange text variable for the rearrange action.
-      $rearrange_text = $type == 'filter' ? t('And/Or Rearrange <span class="element-invisible">filter criteria</span>') : t('Rearrange <span class="element-invisible">@type</span>', array('@type' => $types[$type]['ltitle']));
+      $rearrange_text = $type == 'filter' ? t('And/Or Rearrange <span class="visually-hidden">filter criteria</span>') : t('Rearrange <span class="visually-hidden">@type</span>', array('@type' => $types[$type]['ltitle']));
 
       $actions['rearrange'] = array(
         'title' => $rearrange_text,
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index a3a8fe1..e39d79b 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -345,7 +345,7 @@ h1#site-name {
   padding: 0;
 }
 .region-header .block > h2 {
-  /* @extend .element-invisible */
+  /* @extend .visually-hidden */
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
   overflow: hidden;
@@ -878,7 +878,7 @@ ul.links {
   margin-top: 0;
 }
 #footer .block > h2 {
-  /* @extend .element-invisible */
+  /* @extend .visually-hidden */
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
   overflow: hidden;
diff --git a/core/themes/bartik/templates/comment.html.twig b/core/themes/bartik/templates/comment.html.twig
index 48fd391..58496aa 100644
--- a/core/themes/bartik/templates/comment.html.twig
+++ b/core/themes/bartik/templates/comment.html.twig
@@ -52,7 +52,7 @@
  *   'parent_author' and 'parent_created' during template_preprocess_comment().
  *   This information is presented to help screen readers follow lengthy
  *   discussion threads. You can hide this from sighted users using the class
- *   element-invisible.
+ *   visually-hidden.
  *
  * These two variables are provided for context:
  * - comment: Full comment object.
@@ -87,7 +87,7 @@
           // reader without this information.
         #}
         {% if parent %}
-        <p class="comment-parent element-invisible">
+        <p class="comment-parent visually-hidden">
           {{ parent }}
         </p>
         {% endif %}
diff --git a/core/themes/bartik/templates/maintenance-page.html.twig b/core/themes/bartik/templates/maintenance-page.html.twig
index 2d49784..7e03936 100644
--- a/core/themes/bartik/templates/maintenance-page.html.twig
+++ b/core/themes/bartik/templates/maintenance-page.html.twig
@@ -23,23 +23,23 @@
 <body class="{{ attributes.class }}"{{ attributes }}>
 
   <div id="skip-link">
-    <a href="#main-content" class="element-invisible element-focusable">{{ 'Skip to main content'|t }}</a>
+    <a href="#main-content" class="visually-hidden focusable">{{ 'Skip to main content'|t }}</a>
   </div>
 
   <div id="page-wrapper"><div id="page">
 
     <header id="header" role="banner"><div class="section clearfix">
       {% if site_name or site_slogan %}
-        <div id="name-and-slogan"{{ hide_site_name and hide_site_slogan ? ' class="element-invisible"' }}>
+        <div id="name-and-slogan"{{ hide_site_name and hide_site_slogan ? ' class="visually-hidden"' }}>
           {% if site_name %}
-            <div id="site-name"{{ hide_site_name ? ' class="element-invisible"' }}>
+            <div id="site-name"{{ hide_site_name ? ' class="visually-hidden"' }}>
               <strong>
                 <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
               </strong>
             </div>
           {% endif %}
           {% if site_slogan %}
-            <div id="site-slogan"{{ hide_site_slogan ? ' class="element-invisible"' }}>
+            <div id="site-slogan"{{ hide_site_slogan ? ' class="visually-hidden"' }}>
               {{ site_slogan }}
             </div>
           {% endif %}
diff --git a/core/themes/bartik/templates/page.html.twig b/core/themes/bartik/templates/page.html.twig
index 1af8907..da511eb 100644
--- a/core/themes/bartik/templates/page.html.twig
+++ b/core/themes/bartik/templates/page.html.twig
@@ -26,10 +26,10 @@
  * - site_slogan: The slogan of the site. This is empty when displaying the site
  *   slogan has been disabled in theme settings.
  * - hide_site_name: A flag indicating if the site name has been toggled off on
- *   the theme settings page. If hidden, the "element-invisible" class is added
+ *   the theme settings page. If hidden, the "visually-hidden" class is added
  *   to make the site name visually hidden, but still accessible.
  * - hide_site_slogan: A flag indicating if the site slogan has been toggled off
- *   on the theme settings page. If hidden, the "element-invisible" class is
+ *   on the theme settings page. If hidden, the "visually-hidden" class is
  *   added to make the site slogan visually hidden, but still accessible.
  *
  * Navigation:
@@ -99,24 +99,24 @@
     {% endif %}
 
     {% if site_name or site_slogan %}
-      <div id="name-and-slogan"{% if hide_site_name and hide_site_slogan %} class="element-invisible"{% endif %}>
+      <div id="name-and-slogan"{% if hide_site_name and hide_site_slogan %} class="visually-hidden"{% endif %}>
         {% if site_name %}
           {% if title %}
-            <div id="site-name"{% if hide_site_name %} class="element-invisible"{% endif %}>
+            <div id="site-name"{% if hide_site_name %} class="visually-hidden"{% endif %}>
               <strong>
                 <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
               </strong>
             </div>
           {# Use h1 when the content title is empty #}
           {% else %}
-            <h1 id="site-name"{% if hide_site_name %} class="element-invisible" {% endif %}>
+            <h1 id="site-name"{% if hide_site_name %} class="visually-hidden" {% endif %}>
               <a href="{{ front_page }}" title="{{ 'Home'|t }}" rel="home"><span>{{ site_name }}</span></a>
             </h1>
           {% endif %}
         {% endif %}
 
         {% if site_slogan %}
-          <div id="site-slogan"{% if hide_site_slogan %} class="element-invisible"{% endif %}>
+          <div id="site-slogan"{% if hide_site_slogan %} class="visually-hidden"{% endif %}>
             {{ site_slogan }}
           </div>
         {% endif %}
diff --git a/core/themes/seven/templates/page.html.twig b/core/themes/seven/templates/page.html.twig
index 3b8294e..abf824f 100644
--- a/core/themes/seven/templates/page.html.twig
+++ b/core/themes/seven/templates/page.html.twig
@@ -86,7 +86,7 @@
     {% endif %}
 
     <main id="content" class="clearfix" role="main">
-      <div class="element-invisible"><a id="main-content"></a></div>
+      <div class="visually-hidden"><a id="main-content"></a></div>
       {% if messages %}
         <div id="console" class="clearfix">{{ messages }}</div>
       {% endif %}