diff --git a/core/includes/form.inc b/core/includes/form.inc
index e5433f5..5e42cfe 100644
--- a/core/includes/form.inc
+++ b/core/includes/form.inc
@@ -2875,7 +2875,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'][] = 'visuallyhidden';
   }
 
   $output = '<fieldset' . new Attribute($element['#attributes']) . '>';
@@ -4812,7 +4812,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'] = 'visuallyhidden';
   }
 
   if (!empty($element['#id'])) {
diff --git a/core/includes/menu.inc b/core/includes/menu.inc
index fb11da2..f535adf 100644
--- a/core/includes/menu.inc
+++ b/core/includes/menu.inc
@@ -1634,7 +1634,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="visuallyhidden">' . 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().
@@ -2253,13 +2253,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="visuallyhidden">' . 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="visuallyhidden">' . 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..90a422c 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="visuallyhidden">' . 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 721453a..cc2a890 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1715,7 +1715,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="visuallyhidden">' . $status_heading[$type] . "</h2>\n";
     }
     if (count($messages) > 1) {
       $output .= " <ul>\n";
@@ -1782,7 +1782,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 'visuallyhidden' 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
@@ -1950,8 +1950,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 .visuallyhidden.
+    $output .= '<h2 class="visuallyhidden">' . t('You are here') . '</h2>';
     $output .= '<ol><li>' . implode('</li><li>', $breadcrumb) . '</li></ol>';
     $output .= '</nav>';
   }
diff --git a/core/includes/theme.maintenance.inc b/core/includes/theme.maintenance.inc
index 9215957..a8c245e 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="visuallyhidden">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="visuallyhidden">' . $status . '</span>' : '');
     $output .= '</li>';
   }
   $output .= '</ol>';
diff --git a/core/misc/announce.js b/core/misc/announce.js
index ed02038..b10b08d 100644
--- a/core/misc/announce.js
+++ b/core/misc/announce.js
@@ -29,7 +29,7 @@
       if (!liveElement) {
         liveElement = document.createElement('div');
         liveElement.id = 'drupal-live-announce';
-        liveElement.className = 'element-invisible';
+        liveElement.className = 'visuallyhidden';
         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..a6260be 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="visuallyhidden" 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..b5ae8dd 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 visuallyhidden"></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..69bca5e 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="visuallyhidden">' + options.title + '</span></span></button></li>';
   }
 });
 
diff --git a/core/misc/vertical-tabs.js b/core/misc/vertical-tabs.js
index 1421533..872f96c 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="visuallyhidden">' + Drupal.t('(active tab)') + '</span>');
   },
 
   /**
diff --git a/core/modules/aggregator/templates/aggregator-summary-items.tpl.php b/core/modules/aggregator/templates/aggregator-summary-items.tpl.php
index 8f19fe1..193ba29 100644
--- a/core/modules/aggregator/templates/aggregator-summary-items.tpl.php
+++ b/core/modules/aggregator/templates/aggregator-summary-items.tpl.php
@@ -20,5 +20,5 @@
 <h3><?php print $title; ?></h3>
 <?php print render($summary_list); ?>
 <div class="links">
-  <a href="<?php print $source_url; ?>"><?php print t("More<span class=\"element-invisible\"> posts about %title</span>", array('%title' => $title)); ?></a>
+  <a href="<?php print $source_url; ?>"><?php print t("More<span class=\"visuallyhidden\"> posts about %title</span>", array('%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 ef499c0..c11696e 100644
--- a/core/modules/block/lib/Drupal/block/BlockFormController.php
+++ b/core/modules/block/lib/Drupal/block/BlockFormController.php
@@ -100,7 +100,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="visuallyhidden">' . $title . '</span>',
         '#default_value' => !empty($visibility['path']['pages']) ? $visibility['path']['pages'] : '',
         '#description' => $description,
       );
diff --git a/core/modules/book/templates/book-navigation.tpl.php b/core/modules/book/templates/book-navigation.tpl.php
index cdc1278..e10d891 100644
--- a/core/modules/book/templates/book-navigation.tpl.php
+++ b/core/modules/book/templates/book-navigation.tpl.php
@@ -35,7 +35,7 @@
   <nav id="book-navigation-<?php print $book_id; ?>" class="book-navigation">
     <?php print $tree; ?>
     <?php if ($has_links): ?>
-      <h2 class="element-invisible"><?php print t('Book Navigation'); ?></h2>
+      <h2 class="visuallyhidden"><?php print t('Book Navigation'); ?></h2>
       <ul class="book-pager">
       <?php if ($prev_url): ?>
         <li class="previous">
diff --git a/core/modules/ckeditor/ckeditor.admin.inc b/core/modules/ckeditor/ckeditor.admin.inc
index 0dff9f5..0cb2e35 100644
--- a/core/modules/ckeditor/ckeditor.admin.inc
+++ b/core/modules/ckeditor/ckeditor.admin.inc
@@ -118,7 +118,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="visuallyhidden" 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.tpl.php b/core/modules/comment/templates/comment.tpl.php
index 5a8a37e..f8561d8 100644
--- a/core/modules/comment/templates/comment.tpl.php
+++ b/core/modules/comment/templates/comment.tpl.php
@@ -56,7 +56,7 @@
  *   from $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.
+ *   sighted users using the class visuallyhidden.
  *
  * These two variables are provided for context:
  * - $comment: Full comment object.
@@ -88,7 +88,7 @@
       // reader without this information.
       if ($parent):
     ?>
-      <p class="parent element-invisible"><?php print $parent; ?></p>
+      <p class="parent visuallyhidden"><?php print $parent; ?></p>
     <?php endif; ?>
     <?php print $permalink; ?>
   </footer>
diff --git a/core/modules/contextual/contextual.base.css b/core/modules/contextual/contextual.base.css
index 4d8d908..3b3a552 100644
--- a/core/modules/contextual/contextual.base.css
+++ b/core/modules/contextual/contextual.base.css
@@ -7,7 +7,7 @@
   position: relative;
 }
 .contextual .trigger:focus {
-  /* Override the .element-focusable position: static */
+  /* Override the .visuallyhidden.focusable position: static */
   position: relative !important;
 }
 .contextual-links {
diff --git a/core/modules/contextual/contextual.js b/core/modules/contextual/contextual.js
index 18a5be1..25306e1 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 .visuallyhidden class have no dimensions, so this
     // class must be temporarily removed to the calculate the height.
-    $trigger.removeClass('element-invisible');
+    $trigger.removeClass('visuallyhidden');
     height = $nestedContextual.height();
-    $trigger.addClass('element-invisible');
+    $trigger.addClass('visuallyhidden');
 
     // 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('visuallyhidden', !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 visuallyhidden focusable" type="button"></button>';
 };
 
 })(jQuery, Drupal, drupalSettings, Backbone, Modernizr);
diff --git a/core/modules/contextual/contextual.module b/core/modules/contextual/contextual.module
index 2505e77..03c5678 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..4a10e23 100644
--- a/core/modules/contextual/contextual.theme.css
+++ b/core/modules/contextual/contextual.theme.css
@@ -34,7 +34,7 @@
   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 the .visuallyhidden.focusable height: auto */
   height: 28px !important;
   float: right; /* LTR */
   margin: 0;
@@ -42,7 +42,7 @@
   padding: 0 2px;
   position: relative;
   right: 2px; /* LTR */
-  /* Override the .element-focusable height: auto */
+  /* Override the .visuallyhidden.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 0059868..a49ab2d 100644
--- a/core/modules/contextual/contextual.toolbar.js
+++ b/core/modules/contextual/contextual.toolbar.js
@@ -148,7 +148,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 36c884f..7c90512 100644
--- a/core/modules/edit/js/edit.js
+++ b/core/modules/edit/js/edit.js
@@ -237,7 +237,7 @@ function fetchMissingMetadata (callback) {
     $(window).ready(function () {
       var id = 'edit-load-metadata';
       // 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: drupalSettings.edit.metadataURL,
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..34f5c61 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('visuallyhidden'))
     );
 
     $form['actions'] = array('#type' => 'actions');
diff --git a/core/modules/forum/forum.module b/core/modules/forum/forum.module
index ef2865f..a28b582 100644
--- a/core/modules/forum/forum.module
+++ b/core/modules/forum/forum.module
@@ -1075,7 +1075,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="visuallyhidden"> in forum %title</span>', '@count new posts<span class="visuallyhidden"> 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');
@@ -1139,7 +1139,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="visuallyhidden"> in topic %title</span>', '@count new posts<span class="visuallyhidden"> 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.tpl.php b/core/modules/forum/templates/forum-icon.tpl.php
index 8b70eb3..6f7820e 100644
--- a/core/modules/forum/templates/forum-icon.tpl.php
+++ b/core/modules/forum/templates/forum-icon.tpl.php
@@ -21,6 +21,6 @@
   <a id="new"></a>
 <?php endif; ?>
 
-  <span class="element-invisible"><?php print $icon_title ?></span>
+  <span class="visuallyhidden"><?php print $icon_title ?></span>
 
 </div>
diff --git a/core/modules/forum/templates/forum-list.tpl.php b/core/modules/forum/templates/forum-list.tpl.php
index da8a12d..792147d 100644
--- a/core/modules/forum/templates/forum-list.tpl.php
+++ b/core/modules/forum/templates/forum-list.tpl.php
@@ -52,7 +52,7 @@
                */ ?>
         <?php print str_repeat('<div class="indent">', $forum->depth); ?>
           <div class="icon forum-status-<?php print $forum->icon_class; ?>" title="<?php print $forum->icon_title; ?>">
-            <span class="element-invisible"><?php print $forum->icon_title; ?></span>
+            <span class="visuallyhidden"><?php print $forum->icon_title; ?></span>
           </div>
           <div class="name"><a href="<?php print $forum->link; ?>"><?php print $forum->label(); ?></a></div>
           <?php if ($forum->description->value): ?>
diff --git a/core/modules/locale/locale.pages.inc b/core/modules/locale/locale.pages.inc
index a109f5f..b2ee77e 100644
--- a/core/modules/locale/locale.pages.inc
+++ b/core/modules/locale/locale.pages.inc
@@ -780,7 +780,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 visuallyhidden">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..ce57934 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="visuallyhidden"> 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 b461492..48fc6ed 100644
--- a/core/modules/node/lib/Drupal/node/Tests/PageEditTest.php
+++ b/core/modules/node/lib/Drupal/node/Tests/PageEditTest.php
@@ -55,7 +55,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="visuallyhidden">' . 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..7fc1f53 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('a.focusable').removeClass('visuallyhidden');
       })
       .focusout(function () {
         $(this).removeClass('overlay-disable-message-focused')
-          .find('a.element-focusable').addClass('element-invisible');
+          .find('a.focusable').addClass('visuallyhidden');
       });
   }
 };
@@ -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('visuallyhidden: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..44dd1cb 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
+ * visuallyhidden 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..e801a71 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('visuallyhidden').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 1566740..fa0d196 100644
--- a/core/modules/overlay/overlay.module
+++ b/core/modules/overlay/overlay.module
@@ -433,9 +433,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'][] = 'visuallyhidden';
     if (overlay_get_mode() == 'child') {
-      $element[$key]['#options']['attributes']['class'][] = 'element-focusable';
+      $element[$key]['#options']['attributes']['class'][] = 'focusable';
     }
   }
 
@@ -444,7 +444,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="visuallyhidden">' . 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.tpl.php b/core/modules/overlay/templates/overlay.tpl.php
index 2b342ba..8c65116 100644
--- a/core/modules/overlay/templates/overlay.tpl.php
+++ b/core/modules/overlay/templates/overlay.tpl.php
@@ -28,9 +28,9 @@
       <h1 id="overlay-title"<?php print $title_attributes; ?>><?php print $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"><?php print t('Close overlay'); ?></span></a>
+      <a id="overlay-close" href="#" class="overlay-close" role="button" aria-controls="overlay-content"><span class="visuallyhidden"><?php print t('Close overlay'); ?></span></a>
     </div>
-    <?php if ($tabs): ?><h2 class="element-invisible"><?php print t('Primary tabs'); ?></h2><ul id="overlay-tabs"><?php print render($tabs); ?></ul><?php endif; ?>
+    <?php if ($tabs): ?><h2 class="visuallyhidden"><?php print t('Primary tabs'); ?></h2><ul id="overlay-tabs"><?php print render($tabs); ?></ul><?php endif; ?>
   </div>
   <div id="overlay-content"<?php print $content_attributes; ?>>
     <?php print $page; ?>
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..251df7f 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="visuallyhidden"]');
+    $this->assertTrue(isset($elements[0]), 'Label preceding field and label class is visuallyhidden.');
 
     $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 1566c80..8e351d2 100644
--- a/core/modules/system/system.admin.inc
+++ b/core/modules/system/system.admin.inc
@@ -963,7 +963,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="visuallyhidden">Enabled</span>'), 'class' => array('checkbox')),
         array('data' => t('Name'), 'class' => array('name')),
         array('data' => t('Description'), 'class' => array('description', RESPONSIVE_PRIORITY_LOW)),
       ),
@@ -1598,7 +1598,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="visuallyhidden">';
   $output .= '<th>' . t('Status') . '</th><th>' . t('Component') . '</th><th>' . t('Details') . '</th>';
   $output .= '</tr></thead><tbody>';
 
@@ -1618,7 +1618,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="visuallyhidden">' . $severity['title'] . '</span></div>';
 
       // Output table rows.
       $output .= '<tr class="' . $severity['class'] . '">';
@@ -1695,7 +1695,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 visuallyhidden">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..5ec72ca 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 {
+.visuallyhidden {
   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 .focusable class extends the .visuallyhidden class to allow
  * the element to be focusable when navigated to via the keyboard.
  */
-.element-invisible.element-focusable:active,
-.element-invisible.element-focusable:focus {
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
   position: static !important;
   clip: auto;
   overflow: visible;
diff --git a/core/modules/system/templates/html.tpl.php b/core/modules/system/templates/html.tpl.php
index 893d8a0..2cda56f 100644
--- a/core/modules/system/templates/html.tpl.php
+++ b/core/modules/system/templates/html.tpl.php
@@ -51,7 +51,7 @@
   </head>
   <body class="<?php print $attributes['class']; ?>" <?php print $attributes;?>>
     <div id="skip-link">
-      <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
+      <a href="#main-content" class="visuallyhidden focusable"><?php print t('Skip to main content'); ?></a>
     </div>
     <?php print $page_top; ?>
     <?php print $page; ?>
diff --git a/core/modules/system/templates/page.tpl.php b/core/modules/system/templates/page.tpl.php
index 6ddeeed..b5ae97d 100644
--- a/core/modules/system/templates/page.tpl.php
+++ b/core/modules/system/templates/page.tpl.php
@@ -108,8 +108,8 @@
 
     <?php if ($main_menu || $secondary_menu): ?>
       <nav role="navigation">
-        <?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => array('text' => t('Main menu'), 'class' => array('element-invisible')))); ?>
-        <?php print theme('links__system_secondary_menu', array('links' => $secondary_menu, 'attributes' => array('id' => 'secondary-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => array('text' => t('Secondary menu'), 'class' => array('element-invisible')))); ?>
+        <?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => array('text' => t('Main menu'), 'class' => array('visuallyhidden')))); ?>
+        <?php print theme('links__system_secondary_menu', array('links' => $secondary_menu, 'attributes' => array('id' => 'secondary-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => array('text' => t('Secondary menu'), 'class' => array('visuallyhidden')))); ?>
       </nav>
     <?php endif; ?>
 
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index 50c6cdd..ac208ca 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -342,7 +342,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="visuallyhidden" 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..ddb3e08 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="visuallyhidden">' . t('Test tray') . '</h2>',
         '#attributes' => array(
           'class' => array('menu'),
         ),
diff --git a/core/modules/toolbar/toolbar.module b/core/modules/toolbar/toolbar.module
index 5bc4534..823243b 100644
--- a/core/modules/toolbar/toolbar.module
+++ b/core/modules/toolbar/toolbar.module
@@ -230,7 +230,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="visuallyhidden">' . $element['#bar']['#heading'] . '</h2>'
       . $element['#children'] . '</div>' . $trays . '</nav>';
   }
 }
@@ -372,7 +372,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="visuallyhidden">' . $element['#heading'] . '</h3>' . $element['#children'];
   }
 }
 
diff --git a/core/modules/tour/css/tour.css b/core/modules/tour/css/tour.css
index a732acd..0c70e85 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 .bar .tour-toolbar-tab.tab.element-hidden {
+.js .toolbar .bar .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 8c184b5..bf01ea9 100644
--- a/core/modules/translation_entity/translation_entity.admin.inc
+++ b/core/modules/translation_entity/translation_entity.admin.inc
@@ -169,7 +169,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="visuallyhidden">',
                 '#suffix' => '</span> ',
                 '#markup' => check_plain($element[$bundle]['settings']['#label']),
               ),
@@ -203,12 +203,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="visuallyhidden">',
                     '#suffix' => '</span> ',
                     '#markup' => check_plain($element[$bundle]['settings']['#label']),
                   ),
                   'field' => array(
-                    '#prefix' => '<span class="element-invisible">',
+                    '#prefix' => '<span class="visuallyhidden">',
                     '#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..4a65eef 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('visuallyhidden');
   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/ViewEditFormController.php b/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php
index 9f3e0b6..79f59a8 100644
--- a/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php
+++ b/core/modules/views_ui/lib/Drupal/views_ui/ViewEditFormController.php
@@ -673,7 +673,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="visuallyhidden">' . t('Secondary tabs') . '</h2><ul id = "views-display-menu-tabs" class="tabs secondary">';
       $tabs['#suffix'] = '</ul>';
       $element['tabs'] = $tabs;
     }
@@ -902,7 +902,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="visuallyhidden">@type</span>', array('@type' => $types[$type]['ltitle']));
 
     $actions['add'] = array(
       'title' => $add_text,
@@ -912,7 +912,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="visuallyhidden">filter criteria</span>') : t('Rearrange <span class="visuallyhidden">@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 89e4fd4..7b09270 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 .visuallyhidden */
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
   overflow: hidden;
@@ -885,7 +885,7 @@ ul.links {
   margin-top: 0;
 }
 #footer .block > h2 {
-  /* @extend .element-invisible */
+  /* @extend .visuallyhidden */
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
   overflow: hidden;
diff --git a/core/themes/bartik/templates/comment.tpl.php b/core/themes/bartik/templates/comment.tpl.php
index a8c4924..d6cd714 100644
--- a/core/themes/bartik/templates/comment.tpl.php
+++ b/core/themes/bartik/templates/comment.tpl.php
@@ -54,7 +54,7 @@
  *   from $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.
+ *   sighted users using the class visuallyhidden.
  *
  * These two variables are provided for context:
  * - $comment: Full comment object.
@@ -91,7 +91,7 @@
           // reader without this information.
           if ($parent):
         ?>
-        <p class="comment-parent element-invisible">
+        <p class="comment-parent visuallyhidden">
           <?php print $parent; ?>
         </p>
         <?php endif; ?>
diff --git a/core/themes/bartik/templates/maintenance-page.tpl.php b/core/themes/bartik/templates/maintenance-page.tpl.php
index 8e56378..a0f7e12 100644
--- a/core/themes/bartik/templates/maintenance-page.tpl.php
+++ b/core/themes/bartik/templates/maintenance-page.tpl.php
@@ -24,23 +24,23 @@
 <body class="<?php print $attributes['class']; ?>" <?php print $attributes;?>>
 
   <div id="skip-link">
-    <a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
+    <a href="#main-content" class="visuallyhidden focusable"><?php print t('Skip to main content'); ?></a>
   </div>
 
   <div id="page-wrapper"><div id="page">
 
     <header id="header" role="banner"><div class="section clearfix">
       <?php if ($site_name || $site_slogan): ?>
-        <div id="name-and-slogan"<?php if ($hide_site_name && $hide_site_slogan) { print ' class="element-invisible"'; } ?>>
+        <div id="name-and-slogan"<?php if ($hide_site_name && $hide_site_slogan) { print ' class="visuallyhidden"'; } ?>>
           <?php if ($site_name): ?>
-            <div id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
+            <div id="site-name"<?php if ($hide_site_name) { print ' class="visuallyhidden"'; } ?>>
               <strong>
                 <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
               </strong>
             </div>
           <?php endif; ?>
           <?php if ($site_slogan): ?>
-            <div id="site-slogan"<?php if ($hide_site_slogan) { print ' class="element-invisible"'; } ?>>
+            <div id="site-slogan"<?php if ($hide_site_slogan) { print ' class="visuallyhidden"'; } ?>>
               <?php print $site_slogan; ?>
             </div>
           <?php endif; ?>
diff --git a/core/themes/bartik/templates/page.tpl.php b/core/themes/bartik/templates/page.tpl.php
index 8b31e55..0c14746 100644
--- a/core/themes/bartik/templates/page.tpl.php
+++ b/core/themes/bartik/templates/page.tpl.php
@@ -29,10 +29,10 @@
  * - $site_slogan: The slogan of the site, empty when display has been disabled
  *   in theme settings.
  * - $hide_site_name: TRUE if the site name has been toggled off on the theme
- *   settings page. If hidden, the "element-invisible" class is added to make
+ *   settings page. If hidden, the "visuallyhidden" class is added to make
  *   the site name visually hidden, but still accessible.
  * - $hide_site_slogan: TRUE if the site slogan has been toggled off on the
- *   theme settings page. If hidden, the "element-invisible" class is added to
+ *   theme settings page. If hidden, the "visuallyhidden" class is added to
  *   make the site slogan visually hidden, but still accessible.
  *
  * Navigation:
@@ -101,7 +101,7 @@
           'heading' => array(
             'text' => t('Secondary menu'),
             'level' => 'h2',
-            'class' => array('element-invisible'),
+            'class' => array('visuallyhidden'),
           ),
         )); ?>
       </nav> <!-- /#secondary-menu -->
@@ -115,24 +115,24 @@
     <?php endif; ?>
 
     <?php if ($site_name || $site_slogan): ?>
-      <div id="name-and-slogan"<?php if ($hide_site_name && $hide_site_slogan) { print ' class="element-invisible"'; } ?>>
+      <div id="name-and-slogan"<?php if ($hide_site_name && $hide_site_slogan) { print ' class="visuallyhidden"'; } ?>>
 
         <?php if ($site_name): ?>
           <?php if ($title): ?>
-            <div id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
+            <div id="site-name"<?php if ($hide_site_name) { print ' class="visuallyhidden"'; } ?>>
               <strong>
                 <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
               </strong>
             </div>
           <?php else: /* Use h1 when the content title is empty */ ?>
-            <h1 id="site-name"<?php if ($hide_site_name) { print ' class="element-invisible"'; } ?>>
+            <h1 id="site-name"<?php if ($hide_site_name) { print ' class="visuallyhidden"'; } ?>>
               <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
             </h1>
           <?php endif; ?>
         <?php endif; ?>
 
         <?php if ($site_slogan): ?>
-          <div id="site-slogan"<?php if ($hide_site_slogan) { print ' class="element-invisible"'; } ?>>
+          <div id="site-slogan"<?php if ($hide_site_slogan) { print ' class="visuallyhidden"'; } ?>>
             <?php print $site_slogan; ?>
           </div>
         <?php endif; ?>
@@ -153,7 +153,7 @@
           'heading' => array(
             'text' => t('Main menu'),
             'level' => 'h2',
-            'class' => array('element-invisible'),
+            'class' => array('visuallyhidden'),
           ),
         )); ?>
       </nav> <!-- /#main-menu -->
diff --git a/core/themes/seven/templates/page.tpl.php b/core/themes/seven/templates/page.tpl.php
index d1a290c..2034da7 100644
--- a/core/themes/seven/templates/page.tpl.php
+++ b/core/themes/seven/templates/page.tpl.php
@@ -34,7 +34,7 @@
     <?php endif; ?>
 
     <main id="content" class="clearfix" role="main">
-      <div class="element-invisible"><a id="main-content"></a></div>
+      <div class="visuallyhidden"><a id="main-content"></a></div>
       <?php if ($messages): ?>
         <div id="console" class="clearfix"><?php print $messages; ?></div>
       <?php endif; ?>