UnHide elements in screen readers?

HTML & CSS
1

I have table which doesn’t have any thead but i want them in only screen readers for blind people.
So how to hide thead for normal users but still availlable for screen readers.

2

Hi there phani,

try it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/150% verdana, arial, helvetica, sans-serif;
 }
thead { 
   position: absolute;
   width: 1px; 
   height: 1px; 
   clip: rect(1px, 1px, 1px, 1px); 
   overflow: hidden; 
 }
</style>

</head>
<body> 

 <table> 
  <thead>
   <tr>
    <th>header</th>
   </tr>
  </thead>
 </table>

</body>
</html>

Source:-

For Screen Readers Only

coothead

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.