1. Creating Accessible Content in WordPress
WashU Web Accessibility Users Group

2. Introduction
This presentation will focus on accessibility areas that WordPress admins and editors have control over.
Topics covered apply not only to WordPress but any CMS (SharePoint, Drupal, etc.)

3. Topics
Headings
Formatting Links
Alternate image text
Simple Tables

4. Headings
<h1>
<h2>
<h3>

5. Proper heading use & logical site structure
Screen reader and other assistive technologies rely on heading tags to navigate websites.
Use of heading tags (h1, h2, etc.) allows for quick and efficient navigation of content.
Avoid large blocks of text.
Proper heading usage increases SEO results.

6. Proper heading use & logical site structure (continued)
Use only one h1
h1 should be page title / description of page content or purpose
Avoid using heading tags out of order (ex: h2 -> h4 )
Avoid using bold text (<b> or <strong>) as section headings; use heading tags.
Don’t use empty heading tags (<h3></h3>)

7. WordPress Headings

8. WashU Sites Lead Paragraphs
Lead paragraph text is larger but they are not headings. Read as normal text by screen readers.

9. <a href=“http://…”>
Formatting Links
<a href=“
</a>

10. Link text identifiable out of context
Use phrases that describes link destination that would make sense out of context.
Avoid using phrases like:
“click here”
“read more”
“here”
“info”
“link to [link destination]
Screen readers already add “link” when announcing

11. Linking to downloadable documents
Alert users to any links to non-HTML resources.
Includes PDFs, Word, PowerPoint, etc.
Ideally content should be available on the web page.
Add document type tag to end of link (PDF), (PowerPoint), (docx)

12. Linking to downloadable documents (cont.)
Include file type inside the link, otherwise screen readers will not announce.
Use <a href=”washu18_stats.pdf">WashU 2018 Stats (PDF)</a> rather than <a href=”washu18_stats.pdf">WashU 2018 Stats</a> (PDF)
WashU 2018 Stats (PDF)
vs.

13. Avoid using URLs as link text
Web addresses are not easy to read.
Not screen reader friendly.

14. Avoid using URLs as link text (cont.)
Instead of: SLSO receives $45,000 NEA Grant Use:

15. Avoid URLs as link text FERPA
Family Educational Rights and Privacy Act protects the privacy of student education records.
CHEMICAL FACILITY ANTI-TERRORISM STANDARDS
The Department of Homeland Security has issued Chemical Facility Anti-Terrorism Standards for any facility that manufactures, uses, stores, or distributes certain chemicals above a specified quantity.
Environmental Health & Safety and other information sources that track DHS identified Chemicals.
FISMA
Federal Information Security Management Act – requirements for security controls to be in place when federally regulated information is stored.
Departments that produce, use, store or transmit information to the Veterans Affairs patient database.

16. Descriptive Link Text instead of URLs
FERPA
Family Educational Rights and Privacy Act protects the privacy of student education records.
CHEMICAL FACILITY ANTI-TERRORISM STANDARDS
The Department of Homeland Security has issued Chemical Facility Anti-Terrorism Standards for any facility that manufactures, uses, stores, or distributes certain chemicals above a specified quantity.
Environmental Health & Safety and other information sources that track DHS identified Chemicals.
FISMA
Federal Information Security Management Act – requirements for security controls to be in place when federally regulated information is stored.
Departments that produce, use, store or transmit information to the Veterans Affairs patient database.

17. Open links in current window or tab
Whenever possible avoid opening links in a new tab.
Users can be confused by the new window or tab.
Newer screen readers may announce a new window, older versions do not.
In a new tab the back button is “broken” due to not having previous links.
If you do open a new tab, let the user know by using an appropriate icon or text.

18. Alternate Text
Alt=“Brookings Hall”

19. Why Use Alternate Text?
It’s read by screen readers, describes content and function of the image.
Used to display in place of images if browsers unable to load images or user has chosen to disable images.
Provides semantic meaning and description to images for search engines.

20. Using alternate text with images
All images should have alternate text (alt = attribute) and should:
Be succinct
Not be redundant (repeating adjacent text)
Not include “image”, “graphic”, “photo”, etc.
Be equivalent to the same content or function of the image
Be in context of the surrounding text

21. Decorative Alternative Text
Images that don’t present important content or are used for layout.
Decorative images are ignored by screen readers.
Alt = “” (empty quotes)
Do not decorative alt text if image is hyperlinked. If image is linked then alt text should describe the link destination.

22. Decorative Images in WordPress
When adding an image leave the Alt Text field blank (no need to add empty quotes)
WordPress will insert alt=“” designating it as a decorative image.

23. Avoid using images with text overlay
Screen readers can’t read text embedded in an image.
Recommend avoiding altogether.
If absolutely must use:
Use sufficient contrast (for colorblind users)
Provide same text in a caption or somewhere in the alt text.

24. Too much embedded text

25. Avoid Linking to Media File
When inserting an image into content, avoid linking the image to “Media File” unless absolutely necessary.
Select “None” instead.
Linking to media file when an image is decorative results in an empty link.

26. Simple Tables
<table>

27. Creating Simple Tables
Use caption to describe table content
<caption>Academic Calendar</caption>
Insert caption right after <table>
Designate row and column headers
<td> is used for table data cells
<th> is used for header cells
Use scope attribute to associate data cells with correct header.
scope = “col” / “row”

28. Simple Table in WashU Sites

29. Simple Table Example
<table> <caption>Academic Calendar</caption> <tr> <th scope="col">Year</th> <th scope="col">Fall</th> <th scope="col">Spring</th> </tr> <th scope="row">2018/2019</th> <td>August 23, 2018</td> <td>January 16, 2019</td> <th scope="row">2019/2020</th> <td>August 26, 2019</td> <td>January 14, 2020</td> </table>

30. Resources Tools WAVE (Web Accessibility Evaluation Tool)
WAVE Chrome & Firefox Extentions
Further Reading:
Links and Hypertext (WebAIM)
Alternative Text (WebAIM)
Creating Accessible Tables (WebAIM)