"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 are usually set to read the h-tag hierarchy for a quick outline of the page.
class="visually-hidden"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.
Chances are you'll never need H5 or H6.
Here's a screenshot showing excellent use of H-tags.
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!
Here's a list of about 300 links on the new Penn Libraries homepage. The left column shows the linking text.
Phew! It doesn't say "click here"!
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...
The Drupal image wysiwyg 
The LibGuides image wysiwyg Often screen readers need information that's obvious to sighted users. For example, a header may be obvious because of the layout ("Hey, here's a sidebar!"). You don't need to annoy your sighted users. You can present the header to screen readers only with class="visually-hidden":
.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="https://faq.library.upenn.edu/form?queue_id=2746">If you need help<span class="visually-hidden"> with styling h-tags</span>, ask ALT.</a>)
"CSS files" are often called "Stylesheets"
Here's a definition of CSS from the W3C Schools:
Usually, CSS is stored separately from HTML files. That way, a single CSS file can be called by multiple HTML files.
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.