Remove visibility: hidden from .hidden

The `visibility: hidden` declaration was added to the `.hidden` class
in order to prevent¹ some screen readers from announcing the content:

 * JAWS:

   "Announces content in a `span` element hidden with `display: none`
    if it is in an anchor element. This only works with a `span`
    element; other inline elements used in an anchor element, such
    as `em`, `strong`, `abbr`, `code`, and so on, are not announced
    in JAWS."

    (from: http://juicystudio.com/article/screen-readers-display-none.php#jawsdisplaynone)

 * Window-Eyes:

   "if a container has a value specified for the `background-image`
    property, content hidden with `display: none` will be announced
    in Window-Eyes."

    (from http://juicystudio.com/article/screen-readers-display-none.php#wedisplaynone)

Nowadays however, both of those screen reader fixed² their issues,
therefore, the `visibility: hidden` declaration is no longer needed.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

¹ http://juicystudio.com/article/screen-readers-display-none.php
² https://github.com/h5bp/html5-boilerplate/issues/1663#issuecomment-77583110

Fix h5bp/html5-boilerplate#1663
This commit is contained in:
Cătălin Mariș
2015-03-06 18:00:06 +02:00
parent 0a40054b7e
commit 422537b96c
3 changed files with 2 additions and 4 deletions

View File

@@ -1,5 +1,7 @@
### HEAD
* Remove the `visibility: hidden` declaration from `.hidden`
([#1663](https://github.com/h5bp/html5-boilerplate/issues/1663)).
* Use `<meta http-equiv="x-ua-compatible" content="ie=edge">`<br>
instead of `<meta http-equiv="X-UA-Compatible" content="IE=edge">`
([#1656](https://github.com/h5bp/html5-boilerplate/issues/1656)).

2
dist/css/main.css vendored
View File

@@ -117,12 +117,10 @@ textarea {
/*
* Hide visually and from screen readers:
* http://juicystudio.com/article/screen-readers-display-none.php
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*

View File

@@ -115,12 +115,10 @@ textarea {
/*
* Hide visually and from screen readers:
* http://juicystudio.com/article/screen-readers-display-none.php
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*