Website Accessibility for LibGuides

A companion to a presentation given on November 15, 2017 at
University of Hawaiʻi at Mānoa – Hamilton Library
by Ralph Toyama, Systems Librarian, Leeward Community College
rtoyama@hawaii.edu

There are things you can do to address the problems that make it difficult or impossible for people with sensory or physical disabilities to access the content of a web page. While web authoring tools and content management platforms often have features that enhance accessibility, they cannot fully automate it -- it still takes an awareness of the problems and the exercise of judgement to make a web page truly accessible.

Organizations that fail to make its website accessible may face legal action. Organizations may address the threat by centralizing or regulating website production, at the expense of the autonomy of their constituent units. For libraries, our websites are service delivery platforms and teaching tools; we need to control how our resources and services are presented. Therefore, it is imperative that we have the expertise to address their own accessibility issues to retain control of our own websites.

Resources and Guidance

https://www.w3.org/WAI
The Web Accessibility Initiative of the World Wide Web Consortium (the main standards organization for the Internet) has published a set of web content accessibility guidelines. The current version, WCAG 2.0, has testable success criteria, and suggests techniques for dealing with issues with different levels of severity. Level A criteria address the most severe barriers that prevent access; Level AA and Level AAA criteria address barriers of lesser severity. Many organizations strive for WCAG 2.0 Level AA conformance for their websites, which requires that all Level A and Level AA success criteria be satisfied. (This paragraph revised to replace obsolete terminology from WCAG 1.0. 11/29/17)

They also publish the WAI-ARIA technical standard for Accessible Rich Internet Applications. Adding ARIA codes to your web page can help you address issues with dynamic content and user interface components.

Accessibility Standards

U.S. statutory law has no specific accessibility standard for non-federal websites, although legal settlements for accessibility compaints usually specify WCAG 2.0 Level AA. Websites for federal government agencies must comply with the accessibility standards of Section 508 of the Rehabilitation Act. A revision of Section 508 that will take effect in January 2018 adopts WCAG 2.0 Level AA as the basis for its standard.

Checking Your Web Pages

There are websites can analyze your web page for accessibility problems. The WAVE tool at http://wave.webaim.org identifies both problems and features, and offers suggestions for improving accessibility. You can enter a URL at their site, or you can install a Chrome extension that puts a button on your browser that lets you quickly check a web page. A more stringent check is at http://cynthiasays.com.

JAWS is a powerful and popular screen reading program that reads out text in a computer-generated voice. Unfortunately you have to pay a hefty license fee to use it, even if only to check to see how your web pages sound to a blind person. NVDA from https://www.nvaccess.org is screen reader you can download for free (donations welcome). It doesn't fully support all ARIA tags.

One test to see how understandable your page is to someone who can't see the formatting is to view it without the CSS. There are browser extensions that can do this. You can also do this my modifying your page code.

Technology Overview – How Does a Web Page Work?

What is a Web Page?

The heart of a web page is an HTML file. At its most basic, it consists of the words of the web page, marked up with codes that indicate the function of the words within the document. It can also have codes that make graphic images appear within the web page. The HTML codes that mark up the page content are called "tags", and they are usually used in pairs to surround the thing you want to mark. Tags can contain additional instructions called "attributes". A web page uses styling codes (called CSS) to control the appearance and position of things on the page, and scripting to add functionality to the page. Styling and scripting might be in separate files linked to the HTML file, or they may be included in the HTML file. HTML, CSS, and script files are text files.

For more information on using HTML, CSS, JavaScript, and other web authoring tools: https://www.w3schools.com

What is a Text File?

A text file is a type of computer file consisting of a string of individual text characters – letters, numbers, & symbols – as well as a handful of control codes. They're encoded in a common format, and many different text editing programs like Notepad (Windows) or TextEdit (Mac) can open and edit them.

Depending on where your web page is hosted, you may or may not be able to directly edit them with a text editor, but within web authoring software and content management interfaces, there is usually a "source" editing mode. There are situations where editing the source code is the easiest – and sometimes only – way to fix an accessibility problem.

When words are encoded as text, they are easily shared between computer programs. Adaptive technology like a screen reader can take the text from a web page and convert it to speech.

Editing Code in LibGuides

The Rich Text Editor gives you a guided editing interface for editing the code for a box, and you can directly edit the code by clicking on the Source button or choosing HTML in the editing menu at the bottom right of the box. In the "Look and Feel" settings under Admin, you can enter CSS and JavaScript that applies platform-wide.

Marking Content

Use HTML tags to indicate the function of the different parts of your document. This gives semantic context that helps adaptive technology to effectively present the context. Screen readers will announce things like headings and paragraphs to help the user understand the content.

Mark your headings appropriately. Generally, you would use <h1> for your page's main heading, <h2> for your subheadings, and <h3> through <h6> if necessary to further subdivide your page into deeper layers. In LibGuides, <h1> is used for the guide title and <h2> is used for the box title, so if you need to divide up a box with subheadings, start with <h3>. There are "Heading" options in the Format menu in the Rich Text Editor. It's a common mistake to rely on visual styling to make words look like a heading, because things like bolding or using a larger font are visual cues not available to someone who is listening to a screen reader.

Use HTML lists when appropriate – don't just use the <br /> tag to break lines to make something look like a list. The Rich Text Editor supports creating ordered and unordered lists, i.e., lists with numbers and lists with bullets.

Create tables only when you need to present tabular data. Don't use tables just to control layout, because the screen reader is going to read out the table structure. Header cells in a table should be tagged with <th>, rather than the <td> tag that marks regular data cells.

Ordering Content

Whether by using CSS to place something in a particular location on a page, or by putting LibGudies boxes in different columns, you can arrange the content on your page in such a way that the arrangement itself conveys some meaning. Ideally, you should try to order your content in such a way that it still makes sense even if you couldn't see the visual arrangement.

The WAVE tool's No Styles display lets you see your page without visual styling (Added 3/8/18).

Declaring the Primary Language of the Page

This is something that LibGuides already takes care of. Declaring the language can help adaptive technology properly present the page content. Within the <html> tag near the top of the file, include this attribute – lang="en-US"

A Very Common Problem: Relying on Graphics to Convey Information

There are ways you can achieve the impact of a graphic image without relying on a graphic image to convey information. There are also ways to provide descriptions of graphic images to convey their content.

When you do use graphics, you may have to provide alternative text that either describes the image, describes its function, or provides the information given in the image.

The <img> tag is used to specify a graphic image to be displayed on a web page. All <img> tags should contain an "alt" attribute. For decorative graphics, the alt attribute may be empty – alt="". An empty alt attribute tells a screen reader that the image can be ignored.

When using the LibGuides Rich Text Editor to insert an image, an alt attribute is automatcally created, although you still have to use your judgement in deciding how to describe the image.

If an image can't be adequately described briefly, a "longdesc" attribute in the <img> tag may be used to provide a link to longer description, either on another web page or somewhere else on the same page. However, because longdesc support is inconsistent between browsers, some recommend that a conventional link to the description also be given near the graphic.

A long description formatted as a web page with appropriate markup can be communicated more effectively than a long string of words.

For guidance in composing alternative text, see http://webaim.org/techniques/alttext. This article discusses assessing the image in the context of the page to determine the appropriate level of detail with which to describe the image.

Use of Colors

Relying solely on color to communicate information can make content inaccessible to people with color-blindness.

The WAVE tool's Contrast display can warn you when there is insufficient contrast between text and background colors and help you choose acceptable colors. (Added 3/8/18)

Hawaiian Diacritical Marks

There is an accepted set of codes that can be inserted into an HTML document to display diacritical marks in words and names in Hawaiian and other languages. Unfortunately, screen readers are tripped up by the ʻokina, or glottal stop (which looks like an upside-down or backwards apostrophe). To deal with this problem, we can use the aria-label attribute within a span tag:

Skipping Over Navigation Menus

LibGuides provides a link at the top of the page that skips to the main content section.

Putting a "skip navigation" link near the top of a page allows a user of a screen reader to skip over a long navigation menu and go directly to the content of the page. You can do this anywhere you think it might be helpful. To minimize visual impact on your page, you can make these links inconspicuous by making them small and in a color that blends in with the background (as long as they are visible when the receive "focus", as explained below.).

The current recommended method for doing this is to assign an ID name to the object you want to jump to. The link would be directed to that ID name, preceded by a pound sign.

In the example above, the link has been given a class called "skiplink". In your stylesheet, skiplink can be styled as follows to produce a link that normally blends in with the background, but becomes visible when hovered over, and displays prominently when it has focus:

Focus

Things that can accept user input on a web page can have a state known as "focus". These can be things like links, buttons, form fields, and other designated objects. Only one object has focus at a time. You can use the Tab key to step through them, generally in the order in which they occur in the page code (or Shift-Tab to step through them in the other direction). This is important for people who have difficulty using a mouse, and have to rely on the keyboard or other adaptive device.

You can control how something that has focus appears on the screen. By default, browsers will usually indicate focus with a faint outline around the object. Some platforms or designers disable this for aesthetic reasons, but it's important to be able to see which object has focus. If you have put hidden navigation links on your page to help screen readers, you should make sure that when these links have focus, they are displayed visibly. In your stylesheet, give a conspicuous appearance to the "a:focus" state.

Linking to Other Pages

It is recommended that you make the wording of your links unique and descriptive, so somebody skimming the page for links with a screen reader get useful guidance as each link is read out. Avoid links that just say "click here".

Your links should be styled so that they don't just rely on color to indicate that they are links. The default use of underlining might not be pretty, but it does help people spot them.

It is also recommended that when you link to other pages within your website, that you open the new page in the same tab. Having pages open in new tabs makes it harder to trace your steps backward if you can't see the tabs or use a mouse.

Scripts: Useful, and Potentially Problematic

A scripting language like JavaScript can add functionality to a web page. But there are accessibility concerns to be aware of:

Forms

Web forms are often laid out in a manner in which the labels are to the right of the thing being labelled, which is understandable visually, but confusing when a screen reader reads the form from left to right. Therefore, form elements should be linked to their labels using the <label> tag or the aria-label and aria-labelledby attributes.

Using JavaScript to manage form data can cause accessibility problems. You should test forms to make sure you can fill them out using only the keyboard.

Flashing , Flickering, or Strobing Images

Graphic images or videos that flash prominently at a rate of 2 or 3 times per second or faster can cause seizures in those with photosensitive epilepsy, especially if the flashing contains the color red. Also be aware that some moving images can induce nausea and dizziness.

PDF Files

Like an HTML document, an accessible PDF file has its content invisibly marked to indicate the function of the different parts of the document. This marking can be generated within Adobe Acrobat Pro. You can also save a PDF file in a program that allows you to mark up a document, such as Microsoft Word using its Styles function to define and apply heading styles and its Format Picture function to apply alternative text to pictures.

Older PDF files and PDFs made from scanned images that don't have their words encoded as text are not accessible. A quick test is to click and drag your mouse across the text to see if you can highlight it; if you can't, it's not encoded as text.

YouTube Closed Captioning

YouTube now attempts automatic captioning on all uploaded videos. Once you upload a video, allow time for processing (it could take hours for a longer video). The captions will be listed in the Subtitles and CC interface if YouTube was able to generate captions. You can then edit them to correct errors, adjust timing, and make other refinements.

You may find that the "Transcribe and Auto-Sync" option is easier to use. You can prepare the caption text in a word processor and copy and paste it into the text entry box; the timing of the captions will be set automatically. Unpublish the automatic captions so that they are not presented to viewers as an option.

You can add additional text to describe other sounds (example – [phone ringing] ) or to identify who is speaking.

Providing Alternate Web Pages

Sometimes the best solution to an accessibility problem is to provide an alternative web page that provides the same information or function in a different manner. Sometimes even when you solve the problems, the solution is not as user friendly as having something presented in a more straightforward layout.

Sample Web Page Code

An example of HTML markup, language declaration, a link to an external stylesheet, a skip navigation link, a list used for website navigation, and a graphic image with alt and longdesc attributes.

<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" type="text/css" href="mysite.css" media="screen" />
</head>
<body>

<h1>Title of My Document</h1>
<a href="#pagecontent">skip navigation</a>

<ul>
<li><a href="page1.html ">Menu Item 1</a></li>
<li><a href="page2.html ">Menu Item 2</a></li>
<li><a href="page3.html ">Menu Item 3</a></li>
</ul>

<h2 id="pagecontent">The First Section</h2>
<p>This is the content of this section.</p>
<p>This is more content of this section.</p>

<h2>The Second Section</h2>
<p>This is the content of this section.</p>
<p>This is more content of this section.</p>

<img src="infographic.jpg" alt="accessibility infographic" longdesc="infographictext.html"  /><br />
<a href="infographictext.html">Accessible text</a>

</body>
</html>

Website Accessibility Issues and Solutions – LibGuides Edition