Web Accessibility Basics
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
- 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.
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/wp-content/uploads/sites/228/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:
- 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’
- Choose a photo from your existing media library or by uploading it to WordPress from your files.
- 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.
- Select your display settings.
- Choose image placement location.
- 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.’)
- Select desired image size
- Click “Insert into post.”
- In the WordPress Visual editor the resulting image will appear where you placed it. But where is your alt text?
- Toggle to your Text editor and you will see the resulting HTML, which includes the entered alt text.
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.”).
- 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.
- click here
- read more
- link to [some link destination]
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:
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>
- Organize your ideas into a logical outline—before and during the writing process.
- Tell the readers what you’re going to tell them; tell them; then tell them what you told them.
- Write for your target audience.
- Assume that your readers are intelligent, but do not assume that they know the subject matter as well as you.
- Avoid slang and jargon.
- Avoid acronyms and abbreviations if possible; explain all acronyms and abbreviations.
- 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