"When you look at a web page, you see right away how it's divided and what's most important. I need that too." - Dave Simpson, programmer, musician and writer, who was blind from birth.
Screen readers can be set to skip through the h-tag hierarchy. A clean hierarchy of h-tags provides a quick outline of the page.
class="visually-hidden"
On every Guides page:
ADA compliance is determined based on WCAG 2 guidelines.
Starting with WCAG 3, the guidelines will include a rating for headers. Using the chart below, a rating of 3.5 is required.
Screen readers can be set to read the list of links on a page. If the linking text is meaningful, the links provide highlights and a networked context. For even more efficiency, the reader can jump to one of the links because they want that e-resource fast!
Imagine listening to "Click here" 300 times!
You don't have to show your sighted users the info you add for screen readers. Use class="visually-hidden"
to make text screen-reader only. See below to get the css.
When you fail to add alt text, people who use screen readers know that information is missing and you have not made it available to them.
When the screen reader comes to an image it says "Graphic." Then it reads the "alt text" inside the image tag. If you fail to add alt text, the screen reader will read the file name. Did you save the image as image.jpg? Horrors!
You may leave the alt text empty only if...
.visually-hidden:not(:focus)
{
position: absolute !important;
white-space: nowrap;
clip: rect(0 0 0 0);
clip-path: inset(50%);
padding: 0 !important;
border: none !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
You won't see the text because it gets clipped to a single pixel!
class="visually-hidden"
to hide the additional, accessible text:
<a href="https://accessibility.web-resources.upenn.edu/events">more...<span class=visually-hidden"> accessibility events</span></a>
(<a href="mailto:ALT@upenn.libanswers.com?subject=coding">If you need help<span class="visually-hidden"> with styling h-tags</span>, ask ALT.</a>)
The class visually-hidden is already set up.
var x = document.querySelectorAll("a");
var myarray = []
for (var i=0; i<x.length; i++){
var nametext = x[i].textContent;
var cleantext = nametext.replace(/\s+/g, ' ').trim();
var cleanlink = x[i].href;
myarray.push([cleantext,cleanlink]);
};
function make_table() {
var table = '<table><thead><th>Name</th><th>Links</th></thead><tbody>';
for (var i=0; i<myarray.length; i++) {
table += '<tr><td>'+ myarray[i][0] + '</td><td>'+myarray[i][1]+'</td></tr>';
};
var w = window.open("");
w.document.write(table);
}
make_table()
With thanks to Cynthia Cronin-Kardon, who created the original version of this guide.