Using CMS Editors to Implement Accessibility

Using a content manage system (CMS) to build or maintain websites? Follow guidance below to make your sites accessible using WordPress or Drupal, the most common CMS tools at U-M. 

Creating a Title for Your Post

Purpose: good page titles are important for usability, accessibility and SEO.

  • An appropriate title is a summary of what the page is about
  • The title should ideally be less than 64 characters in length
  • Put the most meaningful information at the beginning

WordPress

WordPress provides each new post with a title placeholder “Add title.” By adding a title here you will be providing a page title, as well as the heading at the beginning of your post.

Drupal

Drupal provides you with a Title text field where you can type in a title. By adding a title here you will be providing a page title, as well as the heading at the beginning of your post.

Organizing the Content with Headings

Purpose: headings provide visual structure to your post, and they also provide semantic information to users of assistive technologies. In both cases, they describe the content of the section they are a heading for. Proper heading structure is very important in long or complex posts.

  • Start with a heading level 2, because your title will be the heading level 1
  • Do not skip heading levels. For example, a subheading directly below a heading level 2 should be level 3, not 4.
  • Do not use a heading just for typographical reasons (because you need bigger bolder text, say)

WordPress

There are two different ways of adding a heading:

  • When the cursor is inside of the placeholder block, typing “/” will provide you with a list of block possibilities. Choose Heading; the editor will suggest the logical heading. If this is your first heading block, the editor will create an <h2> as there already is an <h1> (your title). Type in your heading.
  • You can also add a new heading with the block menu. Choose Heading; the editor will add the logical heading.

Drupal

  1. Type the text you want to make into a heading
  2. Select the text
  3. Select the appropriate style heading from the editor Styles menu.

Adding Images

Purpose: meaningful images need to have alternative text. This way, users of assistive technology can perceive what the image conveys. See how to create appropriate alternative text.

WordPress

There are two methods available for adding images to a post. You can select an image from the Media Library, or you can upload one from your computer.

Media library

Images in the Media Library may already have alternative text.

  1. Add block > Image > Media Library > Select
  2. Make sure that the Settings panel is open
  3. Examine the ALT TEXT (ALTERNATIVE TEXT) text box
  4. If alternative text seems suited to the context, you are done
  5. If not, provide suitable alternative text in the box, overriding the text there, if any. If the image is not meaningful, make sure there is no text in that box.

Upload

You will need to add alternative text to any image you upload.

  1. Add block > Image > Media Library > Upload
  2. Select the image from your computer
  3. Make sure that the Settings panel (located on the right sidebar) is open. If the Settings panel is closed, click the sidebar icon in the upper right corner.
  4. Add alternative text to the ALT TEXT text box. If the image is not meaningful, make sure there is no text in that box.

If you are adding or modifying alternative text to existing posts:

  1. Make sure that the Settings panel is open
  2. Select the image
  3. Provide suitable text in the ALT TEXT (ALTERNATIVE TEXT) box.

Captions: You can also choose to add captions to images. See the WordPress documentation on image block captions. if your caption provides sufficient description of the image, your alt text can be short and simply declarative, as users of screen readers will hear both the alt text and caption.

Drupal

You can only add images as URLs. The image may live in your Drupal server or anywhere.

  1. Choose where you want to insert the image in your post
  2. Click on the Image button on your editor
  3. Input the URL to the image.
  4. Add suitable alternative text. If the image is not meaningful, make sure there is no text in that box.

If you are adding or modifying alternative text to existing posts:

  1. Edit post
  2. Right click on the image
  3. Choose Image properties
  4. Provide alternative text.

Adding Links

Purpose: link text needs to be:

  • Concise: no more than 5 words
  • Unique: no other link in the document has the same text (unless it directs to the same exact destination)
  • Descriptive: it indicates (in the link text only) exactly what will happen when the link is clicked

WordPress

  1. Select text
  2. Choose the link from the floating menu.

Note: if using an image as the link anchor, make sure that the image alternative text serves as effective link text.

Drupal

  1. Select text
  2. Click the link text from the editor menu.

Note: if using an image as the link anchor, make sure that the image alternative text serves as effective link text.

Using Lists

Purpose: if a set of items could be conceived of as a list, use a list construct. All users will benefit from this, but especially users of assistive technologies.

  • Unordered lists (usually shown as bulleted lists) are used to present items that have no particular order. This list is an example of an unordered list.
  • Ordered lists (or numbered lists) are used to present a sequence, like steps in a set of directions or phases in a process. They should only be used when the order of items is important.

WordPress

  1. Create a new block
  2. Choose a list block type. Type your list; hitting return/enter will create another list item. List types can be changed between ordered or unordered at any time using the corresponding icon.

Drupal

  1. Click on the appropriate list button on the editor
  2. Type list elements, hitting (Return) or (Enter) after each item
  3. To finish the list, hit (Return) or (Enter) twice.

Using Tables

Purpose: tables are meant to present tabular data. Do not use tables to achieve layout effects. Your CMS editor has other ways to achieve this that are more appropriate. Consult the documentation.

Tables need to have a certain structure to be equitably useful to all your users. This consists primarily in identifying the column and row headers.

WordPress

  1. Create a new block. Choose Table.
  2. Enter the number of rows and columns your table should include. You can add more using the Edit Table icon.
  3. Make sure that the Settings panel is open
  4. Toggle the Header section button on
  5. Make sure that the Header label cells accurately describe the contents of their columns
  6. If your theme supports it, consider adding a caption to the table.

Note: WordPress Gutenberg only provides column headers; row headers are not possible.

Drupal

  1. Click on the table button in the editor
  2. On the Table Properties dialog, choose Headers
  3. If your table has column headers only, choose First row
  4. If your table has row headers only and the data in the first column could be construed to be the title of that row, choose First column
  5. If your table has both column and row headers, choose Both.

Other Relevant Matters and Resources