By mparker17 on
Change record status: 
Published (View all published change records)
Project: 
Drupal core
Introduced in branch: 
8.x
Introduced in version: 
8.0-alpha2
Issue links: 
https://www.drupal.org/node/1363112
Description: 

Summary

  • The element-hidden, element-invisible and element-focusable classes were changed to better describe what they do.
  • The new names were derived from the names used for these styles in the HTML5 Boilerplate, a popular and well-known starting point for HTML 5 themes.
  • An invisible class was added to hide elements visually and from screen-readers, but maintain the (visual) layout.
Drupal 8 Drupal 7
<div class="hidden"> <div class="element-hidden">
<div class="visually-hidden"> <div class="element-invisible">
<div class="visually-hidden focusable"> <div class="element-invisible element-focusable">
<div class="invisible"> <div style="visibility: hidden;">

 

When to use these classes

class="hidden"
Do not show to anyone; same as display: none;. Not accessible.

class="visually-hidden"
Do not visually show to anyone, but leave the contents accessible.

class="visually-hidden focusable"
Same as "visually-hidden", but visually show when the element has focus (e.g. when keyboard navigation is used.)

class="invisible"
Render this element as normal, but make everything about it invisible; same as visibility: hidden;. Not accessible.

Impacts: 
Themers