.hidden class doesn't need visibility:hidden #1663
Comments
|
To summarize, The bug as seen in Window-Eyes 5.5 has since been resolved in Windows-Eyes 9, and possibly earlier versions. I am waiting to see if the issue with JAWS 7.1 has also been resolved.
|
Test page<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.hidden {
display: none !important;
}
.bg {
background:url('https://avatars1.githubusercontent.com/u/1136800?v=3&s=200');
color: #fff;
}
</style>
</head>
<body>
<a href="https://html5boilerplate.com/">
Test 1 did
<span class="hidden">not</span>
pass
</a>
<div class="bg">
Test 2 did
<span class="hidden">not</span>
pass
</div>
</body>
</html>The page takes into consideration the test cases described in this article. If there are any problems the screen readers should say: "Test x did NOT pass". TestsI've tested using Internet Explorer 11 on Windows 7, and the results are as follow:
It seems the problems stated in this article are resolved in both JAWS (sometime before or with Note: I wanted to test for versions prior to Windows-Eyes 9, but I couldn't make them work. |
Always use the HTTPS URL when it’s available. See also: * https://github.com/konklone/cdns-to-https#conclusion-cdns-should-redirect-to-https * http://www.paulirish.com/2010/the-protocol-relative-url/ Fix #1663 Close #1694
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
² h5bp/html5-boilerplate#1663 (comment)
Fix h5bp/html5-boilerplate#1663
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
² h5bp#1663 (comment)
Fix h5bp#1663
https://twitter.com/patrick_h_lauke/status/563021544344260609
The text was updated successfully, but these errors were encountered: