Creating Accessible Content in WordPress WashU Web Accessibility Users Group

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.)

Topics Headings Formatting Links Alternate image text Simple Tables

Headings <h1> <h2> <h3>

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.

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>)

WordPress Headings

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

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

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

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)

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.

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

Avoid using URLs as link text (cont.) Instead of: SLSO receives $45,000 NEA Grant http://www.stltoday.com/entertainment/arts-and-theatre/culture-club/slso-receives-nea-grant/article_e234a28b-a9e2-54ec-a467-1864717b69af.html Use:

Avoid URLs as link text FERPA Family Educational Rights and Privacy Act protects the privacy of student education records. http://www.ed.gov/policy/gen/guid/fpco/ferpa/index.html 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. http://www.dhs.gov/xprevprot/laws/gc_1166796969417.shtm 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. http://iase.disa.mil/fisma/index.html

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.

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.

Alternate Text Alt=“Brookings Hall”

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.

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

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.

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.

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.

Too much embedded text

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.

Simple Tables <table>

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”

Simple Table in WashU Sites

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>

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