CODEWITHSUNDEEP
jquerycssxhtmlaccessibilityscreen-readers
Jitendra Vyas
Jitendra Vyas

Reputation: 152677

How to make this effect accessible for screen-reader and without JS

Today i found a good example to make whole div clickable in a cool way.

Is there a way to make this effect compatible with Screen-reader and keyboard user and even at least accessible if JS disabled (using css hover).

At the least, the link should be shown somewhere if JS is disabled.

Upvotes: 1

Views: 245

Answers (2)

steveax
steveax

Reputation: 17743

That example uses js to insert the anchor link on hover and is completely inaccessible from the keyboard or to anyone who has js turned off. To make it accessible, put the anchor links in the markup, then use javascript to add a class that will move them offscreen (negative text-indent or display: block; position: absolute; margin-left: -9000px; (do not use display: none;). That way all users will be able to navigate via the links. And please use something besides "Read More" for your linked text. Screenreader users often use the screen buffer to scan the list of all links on the page. Not many things more useless than 12 links that all say "Read More" (use perhaps "Read more about <article topic>).

Upvotes: 3

Pascal MARTIN
Pascal MARTIN

Reputation: 401022

If you want some HTML displayed when Javascript is disabled, you might be interested by the <noscript> tag.

For more informations : HTML <noscript> Tag

Upvotes: 0

Related Questions