-
Screen readers announce HTML elements based on the document flow. so You can use CSS to reverse the order of the text on the page, but the HTML order will make more sense for a screen reader.
-
if you want any element to be hidden from screen readers, give it the
aria-hiddenattribute set to true -
The caption element should always be the first child of a table, but can be positioned with the caption-side CSS property
-
The CSS
clipproperty is used to define the visible portions of an element. Set thespan[class~="sr-only"]selector to have aclipproperty ofrect(1px, 1px, 1px, 1px). Theclip-pathproperty determines the shape the clip property should take. Use both theclip-pathand-webkit-clip-pathselectors to set the value toinset(50%), forming the clip-path into a rectangle within the element.we will need to take these hidden elements out of the document flow. Give the span[class~="sr-only"] selector a position property set to absolute, a padding property set to 0, and a margin property set to -1px. This will ensure that not only are they no longer visible, but they are not even within the page view.
span[class~="sr-only"] {
border: 0 !important;
clip: rect(1px, 1px, 1px, 1px) !important;
clip-path: inset(50%) !important;
-webkit-clip-path: inset(50%) !important;
height: 1px !important;
width: 1px !important;
position: absolute !important;
overflow: hidden !important;
white-space: nowrap !important;
padding: 0 !important;
margin: -1px !important;
}
1- display:list-item (list-style-position: inside or outside) inside or out side to make bullet of list inside element or outside it
2- display:table ; it is inside display which affect on it’s children for parent element div.table ; and children will take different values for display as for caption we will use
<!DOCTYPE html>
<html>
<head>
<style>
.table{display:table;width:300px;margin:50px auto;}
.caption{display:table-caption;text-align:center;}
.header{display:table-header-group;text-align:center;font-weight:bold;}
.body{display:table-row-group}
.footer{display:table-footer-group}
.row{display:table-row}
.cell{display:table-cell;text-align:center;border:3px dashed #ff3355;padding:10px;}
</style>
</head>
<body>
<div class="table">
<h2 class="caption">Table Caption</h2>
<div class="header">
<div class="row">
<div class="cell">Name</div>
<div class="cell">Age</div>
<div class="cell">Address</div>
</div>
</div>
<div class="body">
<div class="row">
<div class="cell">Zienab</div>
<div class="cell">22</div>
<div class="cell">Mansoura</div>
</div>
<div class="row">
<div class="cell">Souad</div>
<div class="cell">22</div>
<div class="cell">Mansoura</div>
</div>
<div class="row">
<div class="cell">Sanaa</div>
<div class="cell">22</div>
<div class="cell">Mansoura</div>
</div>
</div>
<div class="footer">
<div class="row">
<div class="cell">Amira</div>
<div class="cell">22</div>
<div class="cell">Mansoura</div>
</div>
</div>
</div>
</body>
</html>