Wordpress Accessibility

Table of Contents

  1. Header Tags

  2. Alt-Text

  3. Copy, Paste procedure

  4. Video Embeds

  5. Contrast Ratio

  6. Data Tables

I. Header Tags

<H1>,<H2>, <H3>
...etc. must always be ascending to stay within accessibility guidelines. By default, Wordpress uses <H1> as the page title, so your first header in the body must be

II. Alt-Text

When adding images to your content, you must include alt-text. It is true that technically you have the option to add captions instead of alt-text, however this will be flagged by accessibility checkers like WebAim.

What should alt-text be?
"It should convey information that is equivalent to the meaning/content or purpose/function of the image. It should be as succinct as possible. Context is king. The words “image”, “graphic”, “photo”, etc. are not necessary or helpful."

More info on this can be found on the OIT Documentation on Accessibility.

III. Copy Paste procedure

Whenever you are copy/pasting content into Wordpress, you must make sure that you are not bringing over any new markup from the source. This can be tricky as you will not see any markup in the default "visual mode" on Wordpress.

You must go into "text mode" in order to see the source code of what you have pasted. Here is an example of a bad copy/paste which will cause accessibility issues.

The only mark-up you should see is that which is added by you. Imported <div>, <span> etc. can cause the content to not only look different than other pages, but also ruin your pages accessibility.

General html tags (ie. <p>) should not cause issues, however it is redundant to global css and adds the potential to break the html tag structure. External links (ie. cite links) are a topic of debate as some feel the editor is responsible for ALL external links that do not follow accessibility guidelines.

The correct way to copy/paste

When pasting content, you can do so without mark-up with the hotkey Ctrl+Shift+V (Cmd+Shift+V on Mac). Another option is to use the wordpress tool "paste as text" (clipboard icon) to omit mark-up when pasting.

If the mark-up has already been pasted, you can also use the clear formatting (eraser icon) next to "paste as text."

IV. Video Embeds

Videos are a main concern as of late (UC Berkeley case ruling). If you are going to use a video embed, it MUST have the correct captions added to the entire video. If you are using Youtube, their system will attempt to add subtitles, however you would need to go in and correct the mistakes. You will also need to provide an informative description to the video, describing the content in the video.

Rarely, some media players "auto-start" audio and or video on page load. This is not allowed in accessibility guidelines. Neither is media players that do not have stop and pause options.

V. Contrast Ratios

All content must be within a specific high contrast ratio (contrast tester), which is why you should avoid any customization of your content that would cause a contrast issue, such as adding CSS that may affect the global CSS of the site.

In this example, text was highlighted in yellow for emphasis, however this also flags a contrast error in an accessibility test.

Use of images with text is not allowed, as it cannot be read by screen-reading softwares. Nor can the software enlarge the font or change the color to help the user with low vision.

VI. Data Tables

If you are displaying data in an html table, you will need to provide additional mark-up in the table. The importance of this is because the tabular information you are providing will require specific attributes for your information to be correctly translated to the user's screen-reader.

a. Table Captions

Start by providing a caption on what the datas content consists of.

<caption>Petition to make UCLA a Sanctuary Campus</caption>

b. Identify Row and Column Headers

All row and column headers must be identified by <th>. Further, you must also use the scope attribute to clarify a column vs. a row.

<caption>Petition to make UCLA a Sanctuary Campus</caption>

<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Address</th>

<th scope="row">Jackie</th>
<td>123 st. Westwood, CA</td>

<th scope="row">Beth</th>
<td>456 st. Westwood, CA</td>


More on this can be found at webaim.org.
Creation date: 3/20/2017 11:56 AM ()      Updated: 3/20/2017 2:00 PM ()
Accessibility review of web page publishing