Accessible Code for Content Providers

Think of h-tags as a hierarchy, not as a font size!

Screen readers are usually set to read the h-tag hierarchy for a quick outline of the page.

• Do create a clear hierarchy of h-tags.
• Do make the page title an h1-tag. Make it the only h1-tag and make the title unique. (Required for SEO too!)
• Do write a header that can be understood in a list of headers, without context. Use the Accessibility Tree to read through your headers. It's explained here: https://guides.library.upenn.edu/alt-code/accessibility-tree
• Do not throw in additional h1 tags because you like the way they look. In fact, don't throw in any h-tags that disrupt the hierarchy.
• Do not leave holes in your outline. If sighted users don't need a header, you don't have to show it. Make it screen-reader only with a special class. See below for class="visually-hidden"
• Do use CSS to make any h-tag any size you like!  (If you need help with styling h-tags, ask ALT.) ^{footnote 1}

Coming soon in a lawsuit near you: A proper header structure will be required for ADA compliance.

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.

Don't kill yourself. Keep it simple!

Chances are you'll never need H5 or H6.

Here's a screenshot showing excellent use of H-tags.

Not just "Click here, Click here, Click here."

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!

• Do not write "Click here" or "Here."
• Do not write "more..." or "more about this..." 
• Do not write "More on this page" or "More on this website." 
• Do not write "If you need help, ask ALT"! (help with what?)
• Do provide full information about the link inside the a-tag. A quick solution is to move the beginning of the a-tag back so it includes the rest of the sentence.

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!

Rules for alt text

• Do describe the image briefly. Just what you see. 150 characters is a good maximum.
• If you want to cite the image source and give the date, do that in a caption. Alt text is the alternative for visible information.
• Don't provide the same information in both caption and image. It takes long enough to listen to a screen reader. No one wants to hear the same thing twice.
• Don't write "image" or "graphic." The screen reader will provide that information.

You may leave the alt text empty only if...

• The caption truly describes what you see. 
• The image is purely decorative - a scroll or curlicue

Wysiwygs are built to help you add alt text.

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":

Here's the code for 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!

For example:

• Your link can still say "more..." on the browser screen.
  Use 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>

• Did you wonder about this one?

  (<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:

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media
• CSS...can control the layout of multiple web pages all at once

Usually, CSS is stored separately from HTML files. That way, a single CSS file can be called by multiple HTML files.

• This is the main Springshare CSS file for Libraries Guides around the world:
  https://guides.library.upenn.edu/web/css2.19.7/lg-public.min.css
• This is the main CSS file Penn Libraries adds to customize Springshare's Guides:
  https://libapps.s3.amazonaws.com/sites/231/include/lg2-20-2020.css

1. Use Chrome
2. Be sure you're in a live environment. For example, in Penn Libraries Guides, this will not work in the editor.
3. Open Development Tools
   - Press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, ChromeOS).
4. Click Console
5. At the bottom, after the arrow (>), paste in this code: 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()