Menu
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.)
946
Make sure your non-text content has text alternatives. An Auditing tool is good for catching such problems. Make sure your site's color contrast is acceptable, using a suitable checking tool. Make sure hidden content is visible by screen readers.
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>
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. by default its text will be read immediately after the page is loaded.
(WAI ARIA stands for "Web Accessibility Initiative – Accessible Rich Internet Applications" by the W3C, which expands the possibilities of web applications for assistive technologies like screen readers)
So you could create an invisible element containg that attribute 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 whose text will be read by screenreaders immediately after the page is loaded, due to its ARIA attribute <em>role="alert"</em>. Check the HTML code to see it.</div>For further reading: https://w3c.github.io/aria-practices/#alert
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
