Mixing
How to announce that a website has no screen reader support?
Clash Royale CLAN TAG#URR8PPP
up vote
6
down vote
favorite
We can use <noscript> to say Sorry, this website requires JavaScript to run.
What's the analogous way to announce that the site doesn't support screen readers? Something like <noscreenreader>Sorry, ...</noscreenreader>.
(Short backstory: it's an app dependent on the idea to never use words. It heavily relies on images to convey information. It wouldn't make sense to announce anything in spoken language.)
Unsure how to tag since it depends on the answer so I included both JS and HTML.
javascript html accessibility screen-readers
asked 1 hour ago
Lazar Ljubenović
7,8572349
add a comment |Â
up vote
6
down vote
favorite
We can use <noscript> to say Sorry, this website requires JavaScript to run.
What's the analogous way to announce that the site doesn't support screen readers? Something like <noscreenreader>Sorry, ...</noscreenreader>.
(Short backstory: it's an app dependent on the idea to never use words. It heavily relies on images to convey information. It wouldn't make sense to announce anything in spoken language.)
Unsure how to tag since it depends on the answer so I included both JS and HTML.
javascript html accessibility screen-readers
asked 1 hour ago
Lazar Ljubenović
7,8572349
bootstrap has an sronly class, but you should make the content accessible regardless
– dandavis
59 mins ago
add a comment |Â
up vote
6
down vote
favorite
up vote
6
down vote
favorite
We can use <noscript> to say Sorry, this website requires JavaScript to run.
What's the analogous way to announce that the site doesn't support screen readers? Something like <noscreenreader>Sorry, ...</noscreenreader>.
(Short backstory: it's an app dependent on the idea to never use words. It heavily relies on images to convey information. It wouldn't make sense to announce anything in spoken language.)
Unsure how to tag since it depends on the answer so I included both JS and HTML.
javascript html accessibility screen-readers
asked 1 hour ago
Lazar Ljubenović
7,8572349
We can use <noscript> to say Sorry, this website requires JavaScript to run.
What's the analogous way to announce that the site doesn't support screen readers? Something like <noscreenreader>Sorry, ...</noscreenreader>.
(Short backstory: it's an app dependent on the idea to never use words. It heavily relies on images to convey information. It wouldn't make sense to announce anything in spoken language.)
Unsure how to tag since it depends on the answer so I included both JS and HTML.
javascript html accessibility screen-readers
javascript html accessibility screen-readers
asked 1 hour ago
Lazar Ljubenović
7,8572349
asked 1 hour ago
Lazar Ljubenović
7,8572349
asked 1 hour ago
Lazar Ljubenović
7,8572349
asked 1 hour ago
Lazar Ljubenović
7,8572349
asked 1 hour ago
Lazar Ljubenović
7,8572349
7,8572349
bootstrap has an sronly class, but you should make the content accessible regardless
– dandavis
59 mins ago
add a comment |Â
bootstrap has an sronly class, but you should make the content accessible regardless
– dandavis
59 mins ago
bootstrap has an sronly class, but you should make the content accessible regardless
– dandavis
59 mins ago
bootstrap has an sronly class, but you should make the content accessible regardless
– dandavis
59 mins ago
add a comment |Â
4 Answers
4
active
oldest
votes
up vote
4
down vote
Screen readers work on top of the browser so there is no straightforward way (just some convoluted Flash techniques) to detect when somebody is using one.
Your best bet is to place the warning at the beginning of the content and to hide it for sighted users. This article mentions several techniques.
.hidden
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
<div class="hidden">Sorry, this website requires JavaScript to run.</div>
answered 52 mins ago
David
1,96811022
David, our suggestion re hiding the content for sighted users crossed, I just +1 yours ;)
– David Taiaroa
36 mins ago
@DavidTaiaroa Same here! It took me long time to find a reference to the (horrible and old) Flash method :)
– David
34 mins ago
add a comment |Â
up vote
3
down vote
<h1 style="text-indent: 9999;"> Sorry, this site doesn not support screen readers </h1>
answered 41 mins ago
David Taiaroa
20.2k44644
add a comment |Â
up vote
3
down vote
There is an "alert" role attribute in WAI ARIA which will act similar to a visible JS alert box for assistive technology / screenreaders (i.e. its text will be read immediately after the page is loaded)
So you could create an invisible element directly at the beginning of your <body>, similar to my example below:
(Note: Don't use display: none on a message like that - most screen readers will take that as an order to NOT read its text!)
#screenreader_alert
position: fixed;
left: -50px;
width: 1px;
height: 1px;
color: transparent;
overflow: hidden;
<div id="screenreader_alert" role="alert">Please note: This web page contains no text at all and therefore does not support screenreaders.</div>
<div>There is a DIV element <em>before</em> this one which is invisible due to its CSS settings, but will be read by screenreaders immediately when the page is loaded, due to its attribute <em>role="alert"</em></div>For further reading: https://w3c.github.io/aria-practices/#alert
answered 25 mins ago
Johannes
34.9k82662
Usingrole="alert"is a nice idea but you may not be understanding it properly. The "text will be read immediately after that attribute is added or the page is loaded" isn't accurate. The element must haverole="alert"when the page is loaded. The attribute can't be added afterwards because some screen readers won't honor it. And text is only announced if it is injected into the element that hasrole="alert"or if a child DOM element of the alert is unhidden. Note thatrole="alert"gives your element an implicitaria-live="assertive". See w3.org/TR/wai-aria/#aria-live
– slugolicious
4 mins ago
@slugolicious Yes. I erased the half-sentence about the attribute being added, so my answer should be correct now. I know aboutaria-live="assertive"- that's what is desired here, so I didn't mention it additionally.
– Johannes
1 min ago
add a comment |Â
up vote
0
down vote
Do you put the focus on an initial element? If so, you could add additional screen reader text that is not visible that will be read along with the element that has focus. As others have mentioned, do a google search for the "sr-only" class or see this: What is sr-only in Bootstrap 3?. Perhaps something like this:
<button>
I'm the first focusable element
<span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</button>
If you don't have an initial focus, then you could make the first element in the DOM have a tabindex="0" that contains the hidden text so that when the screen reader user starts tabbing through the interface, they'll hear the text as the first thing, but that's a less desirable solution because you don't normally want a non-interactive element to have tabindex="0". Something like this:
<html>
<body>
<span tabindex="0" class="sr-only">Sorry, this page is not accessible to screen readers</span>
<!-- the rest of your real code -->
</body>
</html>
A possible third solution, similar to the first, is to have extra text associated with your first heading or main element and put focus on that element using tabindex="-1" . The "-1" means that a user can't use the Tab key to get to it. Something like:
<html>
<script>
function myload()
document.getElementById("myid").focus();
</script>
<body onload="myload()">
<h1 id="myid" tabindex="-1">
Welcome to my site
<span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</h1>
</body>
</html>
answered 19 mins ago
slugolicious
3,07611316
add a comment |Â
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
4
down vote
Screen readers work on top of the browser so there is no straightforward way (just some convoluted Flash techniques) to detect when somebody is using one.
Your best bet is to place the warning at the beginning of the content and to hide it for sighted users. This article mentions several techniques.
.hidden
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
<div class="hidden">Sorry, this website requires JavaScript to run.</div>
answered 52 mins ago
David
1,96811022
David, our suggestion re hiding the content for sighted users crossed, I just +1 yours ;)
– David Taiaroa
36 mins ago
@DavidTaiaroa Same here! It took me long time to find a reference to the (horrible and old) Flash method :)
– David
34 mins ago
add a comment |Â
up vote
4
down vote
Screen readers work on top of the browser so there is no straightforward way (just some convoluted Flash techniques) to detect when somebody is using one.
Your best bet is to place the warning at the beginning of the content and to hide it for sighted users. This article mentions several techniques.
.hidden
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
<div class="hidden">Sorry, this website requires JavaScript to run.</div>
answered 52 mins ago
David
1,96811022
David, our suggestion re hiding the content for sighted users crossed, I just +1 yours ;)
– David Taiaroa
36 mins ago
@DavidTaiaroa Same here! It took me long time to find a reference to the (horrible and old) Flash method :)
– David
34 mins ago
add a comment |Â
up vote
4
down vote
up vote
4
down vote
Screen readers work on top of the browser so there is no straightforward way (just some convoluted Flash techniques) to detect when somebody is using one.
Your best bet is to place the warning at the beginning of the content and to hide it for sighted users. This article mentions several techniques.
.hidden
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
<div class="hidden">Sorry, this website requires JavaScript to run.</div>
answered 52 mins ago
David
1,96811022
Screen readers work on top of the browser so there is no straightforward way (just some convoluted Flash techniques) to detect when somebody is using one.
Your best bet is to place the warning at the beginning of the content and to hide it for sighted users. This article mentions several techniques.
.hidden
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
<div class="hidden">Sorry, this website requires JavaScript to run.</div>
answered 52 mins ago
David
1,96811022
edited 32 mins ago
answered 52 mins ago
David
1,96811022
answered 52 mins ago
David
1,96811022
answered 52 mins ago
David
1,96811022
1,96811022
David, our suggestion re hiding the content for sighted users crossed, I just +1 yours ;)
– David Taiaroa
36 mins ago
@DavidTaiaroa Same here! It took me long time to find a reference to the (horrible and old) Flash method :)
– David
34 mins ago
add a comment |Â
David, our suggestion re hiding the content for sighted users crossed, I just +1 yours ;)
– David Taiaroa
36 mins ago
@DavidTaiaroa Same here! It took me long time to find a reference to the (horrible and old) Flash method :)
– David
34 mins ago
David, our suggestion re hiding the content for sighted users crossed, I just +1 yours ;)
– David Taiaroa
36 mins ago
David, our suggestion re hiding the content for sighted users crossed, I just +1 yours ;)
– David Taiaroa
36 mins ago
@DavidTaiaroa Same here! It took me long time to find a reference to the (horrible and old) Flash method :)
– David
34 mins ago
@DavidTaiaroa Same here! It took me long time to find a reference to the (horrible and old) Flash method :)
– David
34 mins ago
add a comment |Â
up vote
3
down vote
<h1 style="text-indent: 9999;"> Sorry, this site doesn not support screen readers </h1>
answered 41 mins ago
David Taiaroa
20.2k44644
add a comment |Â
up vote
3
down vote
<h1 style="text-indent: 9999;"> Sorry, this site doesn not support screen readers </h1>
answered 41 mins ago
David Taiaroa
20.2k44644
add a comment |Â
up vote
3
down vote
up vote
3
down vote
<h1 style="text-indent: 9999;"> Sorry, this site doesn not support screen readers </h1>
answered 41 mins ago
David Taiaroa
20.2k44644
<h1 style="text-indent: 9999;"> Sorry, this site doesn not support screen readers </h1>
answered 41 mins ago
David Taiaroa
20.2k44644
answered 41 mins ago
David Taiaroa
20.2k44644
answered 41 mins ago
David Taiaroa
20.2k44644
answered 41 mins ago
David Taiaroa
20.2k44644
20.2k44644
add a comment |Â
add a comment |Â
up vote
3
down vote
There is an "alert" role attribute in WAI ARIA which will act similar to a visible JS alert box for assistive technology / screenreaders (i.e. its text will be read immediately after the page is loaded)
So you could create an invisible element directly at the beginning of your <body>, similar to my example below:
(Note: Don't use display: none on a message like that - most screen readers will take that as an order to NOT read its text!)
#screenreader_alert
position: fixed;
left: -50px;
width: 1px;
height: 1px;
color: transparent;
overflow: hidden;
<div id="screenreader_alert" role="alert">Please note: This web page contains no text at all and therefore does not support screenreaders.</div>
<div>There is a DIV element <em>before</em> this one which is invisible due to its CSS settings, but will be read by screenreaders immediately when the page is loaded, due to its attribute <em>role="alert"</em></div>For further reading: https://w3c.github.io/aria-practices/#alert
answered 25 mins ago
Johannes
34.9k82662
Usingrole="alert"is a nice idea but you may not be understanding it properly. The "text will be read immediately after that attribute is added or the page is loaded" isn't accurate. The element must haverole="alert"when the page is loaded. The attribute can't be added afterwards because some screen readers won't honor it. And text is only announced if it is injected into the element that hasrole="alert"or if a child DOM element of the alert is unhidden. Note thatrole="alert"gives your element an implicitaria-live="assertive". See w3.org/TR/wai-aria/#aria-live
– slugolicious
4 mins ago
@slugolicious Yes. I erased the half-sentence about the attribute being added, so my answer should be correct now. I know aboutaria-live="assertive"- that's what is desired here, so I didn't mention it additionally.
– Johannes
1 min ago
add a comment |Â
up vote
3
down vote
There is an "alert" role attribute in WAI ARIA which will act similar to a visible JS alert box for assistive technology / screenreaders (i.e. its text will be read immediately after the page is loaded)
So you could create an invisible element directly at the beginning of your <body>, similar to my example below:
(Note: Don't use display: none on a message like that - most screen readers will take that as an order to NOT read its text!)
#screenreader_alert
position: fixed;
left: -50px;
width: 1px;
height: 1px;
color: transparent;
overflow: hidden;
<div id="screenreader_alert" role="alert">Please note: This web page contains no text at all and therefore does not support screenreaders.</div>
<div>There is a DIV element <em>before</em> this one which is invisible due to its CSS settings, but will be read by screenreaders immediately when the page is loaded, due to its attribute <em>role="alert"</em></div>For further reading: https://w3c.github.io/aria-practices/#alert
answered 25 mins ago
Johannes
34.9k82662
Usingrole="alert"is a nice idea but you may not be understanding it properly. The "text will be read immediately after that attribute is added or the page is loaded" isn't accurate. The element must haverole="alert"when the page is loaded. The attribute can't be added afterwards because some screen readers won't honor it. And text is only announced if it is injected into the element that hasrole="alert"or if a child DOM element of the alert is unhidden. Note thatrole="alert"gives your element an implicitaria-live="assertive". See w3.org/TR/wai-aria/#aria-live
– slugolicious
4 mins ago
@slugolicious Yes. I erased the half-sentence about the attribute being added, so my answer should be correct now. I know aboutaria-live="assertive"- that's what is desired here, so I didn't mention it additionally.
– Johannes
1 min ago
add a comment |Â
up vote
3
down vote
up vote
3
down vote
There is an "alert" role attribute in WAI ARIA which will act similar to a visible JS alert box for assistive technology / screenreaders (i.e. its text will be read immediately after the page is loaded)
So you could create an invisible element directly at the beginning of your <body>, similar to my example below:
(Note: Don't use display: none on a message like that - most screen readers will take that as an order to NOT read its text!)
#screenreader_alert
position: fixed;
left: -50px;
width: 1px;
height: 1px;
color: transparent;
overflow: hidden;
<div id="screenreader_alert" role="alert">Please note: This web page contains no text at all and therefore does not support screenreaders.</div>
<div>There is a DIV element <em>before</em> this one which is invisible due to its CSS settings, but will be read by screenreaders immediately when the page is loaded, due to its attribute <em>role="alert"</em></div>For further reading: https://w3c.github.io/aria-practices/#alert
answered 25 mins ago
Johannes
34.9k82662
There is an "alert" role attribute in WAI ARIA which will act similar to a visible JS alert box for assistive technology / screenreaders (i.e. its text will be read immediately after the page is loaded)
So you could create an invisible element directly at the beginning of your <body>, similar to my example below:
(Note: Don't use display: none on a message like that - most screen readers will take that as an order to NOT read its text!)
#screenreader_alert
position: fixed;
left: -50px;
width: 1px;
height: 1px;
color: transparent;
overflow: hidden;
<div id="screenreader_alert" role="alert">Please note: This web page contains no text at all and therefore does not support screenreaders.</div>
<div>There is a DIV element <em>before</em> this one which is invisible due to its CSS settings, but will be read by screenreaders immediately when the page is loaded, due to its attribute <em>role="alert"</em></div>For further reading: https://w3c.github.io/aria-practices/#alert
#screenreader_alert
position: fixed;
left: -50px;
width: 1px;
height: 1px;
color: transparent;
overflow: hidden;
<div id="screenreader_alert" role="alert">Please note: This web page contains no text at all and therefore does not support screenreaders.</div>
<div>There is a DIV element <em>before</em> this one which is invisible due to its CSS settings, but will be read by screenreaders immediately when the page is loaded, due to its attribute <em>role="alert"</em></div>#screenreader_alert
position: fixed;
left: -50px;
width: 1px;
height: 1px;
color: transparent;
overflow: hidden;
<div id="screenreader_alert" role="alert">Please note: This web page contains no text at all and therefore does not support screenreaders.</div>
<div>There is a DIV element <em>before</em> this one which is invisible due to its CSS settings, but will be read by screenreaders immediately when the page is loaded, due to its attribute <em>role="alert"</em></div>answered 25 mins ago
Johannes
34.9k82662
edited 2 mins ago
answered 25 mins ago
Johannes
34.9k82662
answered 25 mins ago
Johannes
34.9k82662
answered 25 mins ago
Johannes
34.9k82662
34.9k82662
Usingrole="alert"is a nice idea but you may not be understanding it properly. The "text will be read immediately after that attribute is added or the page is loaded" isn't accurate. The element must haverole="alert"when the page is loaded. The attribute can't be added afterwards because some screen readers won't honor it. And text is only announced if it is injected into the element that hasrole="alert"or if a child DOM element of the alert is unhidden. Note thatrole="alert"gives your element an implicitaria-live="assertive". See w3.org/TR/wai-aria/#aria-live
– slugolicious
4 mins ago
@slugolicious Yes. I erased the half-sentence about the attribute being added, so my answer should be correct now. I know aboutaria-live="assertive"- that's what is desired here, so I didn't mention it additionally.
– Johannes
1 min ago
add a comment |Â
Usingrole="alert"is a nice idea but you may not be understanding it properly. The "text will be read immediately after that attribute is added or the page is loaded" isn't accurate. The element must haverole="alert"when the page is loaded. The attribute can't be added afterwards because some screen readers won't honor it. And text is only announced if it is injected into the element that hasrole="alert"or if a child DOM element of the alert is unhidden. Note thatrole="alert"gives your element an implicitaria-live="assertive". See w3.org/TR/wai-aria/#aria-live
– slugolicious
4 mins ago
@slugolicious Yes. I erased the half-sentence about the attribute being added, so my answer should be correct now. I know aboutaria-live="assertive"- that's what is desired here, so I didn't mention it additionally.
– Johannes
1 min ago
Using
role="alert" is a nice idea but you may not be understanding it properly. The "text will be read immediately after that attribute is added or the page is loaded" isn't accurate. The element must have role="alert" when the page is loaded. The attribute can't be added afterwards because some screen readers won't honor it. And text is only announced if it is injected into the element that has role="alert" or if a child DOM element of the alert is unhidden. Note that role="alert" gives your element an implicit aria-live="assertive". See w3.org/TR/wai-aria/#aria-live– slugolicious
4 mins ago
Using
role="alert" is a nice idea but you may not be understanding it properly. The "text will be read immediately after that attribute is added or the page is loaded" isn't accurate. The element must have role="alert" when the page is loaded. The attribute can't be added afterwards because some screen readers won't honor it. And text is only announced if it is injected into the element that has role="alert" or if a child DOM element of the alert is unhidden. Note that role="alert" gives your element an implicit aria-live="assertive". See w3.org/TR/wai-aria/#aria-live– slugolicious
4 mins ago
@slugolicious Yes. I erased the half-sentence about the attribute being added, so my answer should be correct now. I know about
aria-live="assertive" - that's what is desired here, so I didn't mention it additionally.– Johannes
1 min ago
@slugolicious Yes. I erased the half-sentence about the attribute being added, so my answer should be correct now. I know about
aria-live="assertive" - that's what is desired here, so I didn't mention it additionally.– Johannes
1 min ago
add a comment |Â
up vote
0
down vote
Do you put the focus on an initial element? If so, you could add additional screen reader text that is not visible that will be read along with the element that has focus. As others have mentioned, do a google search for the "sr-only" class or see this: What is sr-only in Bootstrap 3?. Perhaps something like this:
<button>
I'm the first focusable element
<span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</button>
If you don't have an initial focus, then you could make the first element in the DOM have a tabindex="0" that contains the hidden text so that when the screen reader user starts tabbing through the interface, they'll hear the text as the first thing, but that's a less desirable solution because you don't normally want a non-interactive element to have tabindex="0". Something like this:
<html>
<body>
<span tabindex="0" class="sr-only">Sorry, this page is not accessible to screen readers</span>
<!-- the rest of your real code -->
</body>
</html>
A possible third solution, similar to the first, is to have extra text associated with your first heading or main element and put focus on that element using tabindex="-1" . The "-1" means that a user can't use the Tab key to get to it. Something like:
<html>
<script>
function myload()
document.getElementById("myid").focus();
</script>
<body onload="myload()">
<h1 id="myid" tabindex="-1">
Welcome to my site
<span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</h1>
</body>
</html>
answered 19 mins ago
slugolicious
3,07611316
add a comment |Â
up vote
0
down vote
Do you put the focus on an initial element? If so, you could add additional screen reader text that is not visible that will be read along with the element that has focus. As others have mentioned, do a google search for the "sr-only" class or see this: What is sr-only in Bootstrap 3?. Perhaps something like this:
<button>
I'm the first focusable element
<span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</button>
If you don't have an initial focus, then you could make the first element in the DOM have a tabindex="0" that contains the hidden text so that when the screen reader user starts tabbing through the interface, they'll hear the text as the first thing, but that's a less desirable solution because you don't normally want a non-interactive element to have tabindex="0". Something like this:
<html>
<body>
<span tabindex="0" class="sr-only">Sorry, this page is not accessible to screen readers</span>
<!-- the rest of your real code -->
</body>
</html>
A possible third solution, similar to the first, is to have extra text associated with your first heading or main element and put focus on that element using tabindex="-1" . The "-1" means that a user can't use the Tab key to get to it. Something like:
<html>
<script>
function myload()
document.getElementById("myid").focus();
</script>
<body onload="myload()">
<h1 id="myid" tabindex="-1">
Welcome to my site
<span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</h1>
</body>
</html>
answered 19 mins ago
slugolicious
3,07611316
add a comment |Â
up vote
0
down vote
up vote
0
down vote
Do you put the focus on an initial element? If so, you could add additional screen reader text that is not visible that will be read along with the element that has focus. As others have mentioned, do a google search for the "sr-only" class or see this: What is sr-only in Bootstrap 3?. Perhaps something like this:
<button>
I'm the first focusable element
<span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</button>
If you don't have an initial focus, then you could make the first element in the DOM have a tabindex="0" that contains the hidden text so that when the screen reader user starts tabbing through the interface, they'll hear the text as the first thing, but that's a less desirable solution because you don't normally want a non-interactive element to have tabindex="0". Something like this:
<html>
<body>
<span tabindex="0" class="sr-only">Sorry, this page is not accessible to screen readers</span>
<!-- the rest of your real code -->
</body>
</html>
A possible third solution, similar to the first, is to have extra text associated with your first heading or main element and put focus on that element using tabindex="-1" . The "-1" means that a user can't use the Tab key to get to it. Something like:
<html>
<script>
function myload()
document.getElementById("myid").focus();
</script>
<body onload="myload()">
<h1 id="myid" tabindex="-1">
Welcome to my site
<span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</h1>
</body>
</html>
answered 19 mins ago
slugolicious
3,07611316
Do you put the focus on an initial element? If so, you could add additional screen reader text that is not visible that will be read along with the element that has focus. As others have mentioned, do a google search for the "sr-only" class or see this: What is sr-only in Bootstrap 3?. Perhaps something like this:
<button>
I'm the first focusable element
<span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</button>
If you don't have an initial focus, then you could make the first element in the DOM have a tabindex="0" that contains the hidden text so that when the screen reader user starts tabbing through the interface, they'll hear the text as the first thing, but that's a less desirable solution because you don't normally want a non-interactive element to have tabindex="0". Something like this:
<html>
<body>
<span tabindex="0" class="sr-only">Sorry, this page is not accessible to screen readers</span>
<!-- the rest of your real code -->
</body>
</html>
A possible third solution, similar to the first, is to have extra text associated with your first heading or main element and put focus on that element using tabindex="-1" . The "-1" means that a user can't use the Tab key to get to it. Something like:
<html>
<script>
function myload()
document.getElementById("myid").focus();
</script>
<body onload="myload()">
<h1 id="myid" tabindex="-1">
Welcome to my site
<span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</h1>
</body>
</html>
answered 19 mins ago
slugolicious
3,07611316
answered 19 mins ago
slugolicious
3,07611316
answered 19 mins ago
slugolicious
3,07611316
answered 19 mins ago
slugolicious
3,07611316
3,07611316
add a comment |Â
add a comment |Â
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52617609%2fhow-to-announce-that-a-website-has-no-screen-reader-support%23new-answer', 'question_page');
);
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
bootstrap has an sronly class, but you should make the content accessible regardless
– dandavis
59 mins ago