Skip to main content

(PDF version of this presentation.)

This document is intended as a basic introduction to Accessibility concepts and covers five areas over which you, as a Finance and Operations website editor, have some basic control.

“The University of North Carolina at Chapel Hill is committed to providing a welcoming and inclusive environment that includes making its digital resources and services accessible to all users. The University’s goal is to provide proactive compliance with obligations under the Americans with Disabilities Act (ADA) and Section 504 of the Rehabilitation Act of 1973.”
Digital Access Initiative at UNC Chapel Hill

Five Basic Principles of Accessible Design

Alternative text serves several functions:

  • It is read by screen readers in place of images (photos, infographics, icons, charts) allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
  • It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
  • It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

Jonathan Pruitt
Proper html for the image to the right will look like this:

<img class=”alignright size-medium wp-image-13609″ src=”https://fo.unc.edu/files/2018/02/Pruitt_headshot_2018_featured-214×300.jpg” alt=”Jonathan Pruitt”/>

 

For any existing image in WordPress you can simply go to the HTML in the text editor and add text to an empty alt text attribute or add a new alt text attribute.

How to add alternative text to images in WordPress

There are many ways to add media to your WordPress posts and pages. Let’s walk through an example:

  1. In your post editor or page editor, place your cursor in the area where you would like to insert a photo or graphic and choose ‘Add Media’
    screenshot detail of WordPress page editor
  2. Choose a photo from your existing media library or by uploading it to WordPress from your files.
    ScreenShot of WordPress media screen.
  3. Enter a short description of your chosen image in the Alt Text field in the Attachment Details panel on the right side of the Insert Media screen.
    screen shot of WordPress 'attachment details' pane.
  4. Select your display settings.
    screen shot of WordPress Attachment Display Settings

    1. Choose image placement location.
    2. Choose the URL to which you would like to link the image. (Remember WordPress defaults to the option to link to the page for the full size picture, you may choose to link to a different URL or simply link the picture to nothing by choosing ‘None.’)
    3. Select desired image size
    4. Click “Insert into post.”
  5. In the WordPress Visual editor the resulting image will appear where you placed it. But where is your alt text?
    Screen shot of WordPress Visual Editor with inserted photo
  6. Toggle to your Text editor and you will see the resulting HTML, which includes the entered alt text.Screen shot of WordPress text editor with highlighted HTML with alt text added

Alternative text for images used as links

  • When images are used as links, the alternative text performs the function of link text.
  • As with linked text, the alt text of linked images does not need to inform users that the link is a link, since this is already presented.
  • The alternative text should convey the content of the image and the function of the link. (e.g, alt=”Products”).
  • In some cases, it may require more text (e.g., alt=”Chart showing 10% sales increase over the last decade with link to more sales data.”).

Important!!

  • Images that are the only thing within a link MUST have alternative text.
  • If a linked image does not have alternative text, a screen reader may read the image file name or the URL being linked to.
Links are more useful when they make sense out of context. Authors should avoid non-informative link phrases such as:

  • click here
  • here
  • more
  • read more
  • link to [some link destination]
  • info

The phrase “click here” is usually unnecessary, even if it precedes a more meaningful phrase. A link that says “click here to access today’s weather” can be shortened to “today’s weather.”

In some cases it may make sense to precede a link phrase with “more” or “read more about,” (e.g. “more about global warming”), but if these extra words can be avoided, it is probably best to avoid them (e.g. “global warming” may convey the same meaning as “more about global warming,” depending on the context).

URLs as Links

Web addresses, or URLs, present two types of challenges:

  • Readability
  • Length

URLs are not always human-readable or screen-reader friendly. Many URLs contain combinations of characters that make sense to scripts and databases but which make little or no sense to the average person. In most cases, it is better to use human-readable text instead of the URL.

The human readable link Constructing Accessible Web Sites is more user-friendly than the link to purchase the book by the same title on Amazon.com, which consists of a 108-character link full of numbers, slashes, and text that is not very human-readable (http://www.amazon.com/exec/obidos/ASIN/1590591488/qid=1116957951/sr=2-1/ref=pd_bbs_b_2_1/103-5755258-8204633).

If the URL is relatively short (such as a site’s homepage e.g., unc.edu), the URL may be used as the link text. The key is to be considerate of screen reader users who must listen to the longer, less intelligible URLs.

  • Create a logical outline for each page with headings.
  • Use sequential headings (no <h3> before <h2>).
  • Use CSS for styling for non-sight-impaired users.

An example of properly structured HTML

<h1>Setting the Exposure Manually on a Camera</h1>

<h2>Set the ISO</h2>
<h3>The effect of ISO on image quality</h3>
<h3>High ISO cameras</h3>
<h2>Choose an aperture</h2>
<h3>The effect of aperture on depth of focus</h3>
<h3>Vignetting</h3>
<h3>Diffraction</h3>
<h2>Choose a shutter speed</h2>
<h3>Shutter speed limitations for hand-holding a camera</h3>
<h3>Long exposures</h3>
The use of color can enhance comprehension, but do not use color alone to convey information. That information may not be available to a person who is colorblind and will be unavailable to screen reader users.

fig. 1 – London Tube Map in Color.
fig. 2 – London Tube Map in Black and White. With no color key or text descriptions, this becomes much more difficult to understand.
Most of the time when people put images on the web, the fact that they are in color at all is irrelevant. It may be nicer to see the colors, but the viewer can understand the image just fine even with all of the colors removed. If, however, the purpose of posting the image is to communicate something about the colors in that image, then it is important to provide some other way of understanding the information.
  1. Organize your ideas into a logical outline—before and during the writing process.
  2. Tell the readers what you’re going to tell them; tell them; then tell them what you told them.
  3. Write for your target audience.
  4. Assume that your readers are intelligent, but do not assume that they know the subject matter as well as you.
  5. Avoid slang and jargon.
  6. Avoid acronyms and abbreviations if possible; explain all acronyms and abbreviations.
  7. When you’re finished, stop.

“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.”
Tim Berners-Lee, W3C Director and inventor of the World Wide Web