Skip to main content

CUNY LIBRARIES ARE OPEN ONLINE! We are open online for reference & instruction. E-resources are fully available. Library buildings remain closed.

Support Students Impacted by Coronavirus Crisis Donate Now

Accessibility Toolkit for Open Educational Resources (OER): WordPress

Accessibility guide for creating OER

WordPress

WordPress has many accessible ready themes created by developers which you can use for your OER.

WordPress.ORG

Accessibility Statement:
The WordPress community and the open source WordPress project is committed to being as inclusive and accessible as possible. We want users, regardless of device or ability, to be able to publish content and maintain a website or application built with WordPress.WordPress aims to make the WordPress Admin and bundled themes fully WCAG 2.0 AA compliant where possible.


Finding accessible-ready WordPress.Org themes

  1. Go to https://wordpress.org/themes/
  2. Click "Feature Filter"
  3. Check the "Accessibility Ready" box in the "Features" column
  4. Click "Apply Features"

WordPress.COM

Accessibility Statement:
Accessibility on the web can mean a lot of things. But in general it means making websites as inclusive to as many users as possible. Accessibility is important for a diverse group of users including mobile users, people who rely on assistive technology to navigate the web, and even search engine robots.


Finding accessible-ready WordPress.COM themes

To search for an accessible-ready theme for a WordPress.COM site

  1. Go to https://wordpress.com/themes
  2. Type "accessibility-ready" in search field

 


WordPress Accessibility Instructions (Classic Editor)

Finding accessible-ready WordPress.Org themes

  1. Go to https://wordpress.org/themes/
  2. Click "Feature Filter"
  3. Check the "Accessibility Ready" box in the "Features" column
  4. Click "Apply Features"

Page or Post Title

  • Page and Post titles should be brief, clear, informative, and unique.

Screen grab showing where to type in title that screen reader will read outloud.

 

Use Headings

  • Headings help in organizing a web page or post.
  • When creating headings in WordPress classic editor make sure to use the actual heading option and don't just make them visually look different by changing font or color.
  • When selecting headings, don't use <h1>.  Your page or post title is already an <h1> and there should only be one <h1> per page.

Screen grab of wordpress classic editor showing where to select headings

 

Create Alt-text (alternative text) for Images

  • Adding alt-text to your images is an accessibility best practice.
  • Making images and graphics "visible" to all users is one of the first principles of accessibility. 
  • The way you make your image visible to everyone is by adding "alternative text" or "alt-text".
  • For people using screen readers or browsing speech-enabled websites alt-text can be read aloud or rendered as Braille.
  • Alt-text gives the speech input software users the ability to put focus onto a button or linked image with a single voice command. 
  • Alt-text allows mobile users to turn images off to help with download speeds or limit data-roaming charges.
  • In WordPress classic editor there are several ways to add alt-text to images to your site.
  • You can add "default" alt-text to an image so that each time you reuse the image its default alt-text will be attached.
    • This greatly increases the odds alt-text won't be overlooked (especially for images in your shared library.)
    • You can edit this "default" alt-text on individual pages (option four)

Option 1: Adding Default Alt-text to Image via Media Button

  1. Select <Add Media> button from within a page or post
  2. In the "Add Media" pop-up window, select an image already uploaded (you will see a check-mark next to the image you select)
    1. If you need to upload an image first then, select upload files tab, upload your image and then do step 2.
  3. Once an image is selected you will see the "Attachment Details" box on the right hand side of your window.
  4. Type in the image's "Alt-text" in the Alternative Text box.

Screen grab showing the add media button

 

Screen grab showing add media window with atachment details

Option 2: Adding Default Alt-text to Image via "Media" left side-bar option & "Add New" button

  1. Select "Media" on the left side-bar
  2. Click on the <Add New> button located in the "Media Library" window
  3. Drag & drop image or search computer to upload image
  4. Once an image is uploaded, select it (you will see a check-mark next to the image you select)
  5. Once an image is selected you will see the "Attachment Details" box.
  6. Type in the image's "Alt-text" in the Alternative Text box.

Screen grab showing selecting Media then Add New Item button

Option 3: Adding Default Alt-text to Image via left side-bar option "Media" - "Add New"

  1. Select on "Media" on the left side-bar to open up drop down menu
  2. Click on "Add New", located under "Media" and "Library".
  3. Drag & drop image or search computer to upload image.
  4. As your image is being uploaded you will see a progress bar saying "crunching".
  5. After image is uploaded, click on the work "Edit" (located on the bottom right) 
  6. A new window will open, an "Edit Media" window.
  7. Type in the image's "Alt-text" in the Alternative Text box.

Screen grab showing how to upload new media and add alt-text.

 

Option 4: Customizing Alt-text of images on individual pages or posts

  1. Click <Add Media> button from within a page or post
  2. In the "Add Media" pop-up window, select an image already uploaded (you will see a check-mark next to the image you select).
  3. Click on <Insert into page> button.
  4. Once back on the page or post, click on the image you just uploaded.
  5. A new editing bar will pop-up
  6. Click on the pencil "edit" icon
  7. An "Image Details" page will pop-up.
  8. Here you can edit the alt-text without changing the "default" alt-text of the image.

Screen grab showing how to edit an image's default alt-text from within a page or post.

How to create Lists

  • Do not create lists manually, use the built in formatting.

Screen grab showing where to select bullet or numbered lists.

Check Color Contrast

  • Check to see if the colors you've picked for your tabs and background are accessible.
  • Use these color contrast evaluation tools.
  • WCAG Contrast Checker is a Firefox browser plug-in.
    This plug-in checks the compliance of contrast levels of foreground and background color combinations based on the requirements of WCAG 2.1.
  • Color Contrast Analyzer is a Chrome browser plug-in.
    This extension allows you to analyze text color contrast problems on a webpage according to the WCAG 2 text color contrast requirements. It evaluates the page as it appears in the browser, so it is able to handle text over gradients and advanced CSS attributes. You can choose to analyze a portion of a web page, the entire visible contents of a tab, or an entire web page.

Why worry about color contrast?

  • Choosing accessible colors for your documents and site is important.
  • Colors affect the readability of your document and site for all users, not just those with vision impairments.
  • The only people for whom the color choices don’t matter are those using screen readers.

How to use color correctly:

  • Don't use color as the only way to communicate information, always make sure meaning is conveyed in multiple ways.
  • This is true for the main text of your document, links in blocks and images of text.
  • In the case of links, use another identifier such as bold or underline to indicate a link verses using color alone.
  • Run your site and documents through color contrast checkers to make sure the contrast ratio is good.
  • To meet basic guidelines (Level AA) text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text).

Alt-Text Instructions for Images


This video shows you the difference between "Image Alt-Text" and "Image Title" in WordPress.


Attribution: [WPBeginner - WordPress Tutorials] (2014, Nov. 4) Image Alt Text vs Image Title in WordPress [Video File]. Retrieved from https://youtu.be/1kz8Xr88Q7c


Attribution: [Skip Via] (2014, Sept. 3) Using ALT Image Tags [Video File]. Retrieved from https://youtu.be/YmPxRuPqXcQ?t=81