On this Page:
Providing an accessible website is of the utmost priority for Site Content Editors (SCEs). Below are key areas paired with directions on how SCEs can create an accessible website. Please understand that following accessibility rules do not just allow us to be ADA compliant but gives us an opportunity to do what’s right for all of our users. If you have additional questions about accessibility please don’t hesitate to reach out to Web Services at email@example.com.
Video Table of Contents
- Importance of Accessibility – 00:17
- Headings – 01:18
- Using the Heading Block – 2:07
- Images, Adding Alternative Text – 04:35
- Adding General Alt Text Through Your Media Library – 05:40
- Adding Alt Text Using the Alt Text Field on a Block – 07:08
- Changing Alt Text on an Embedded Image – 08:43
- Paragraph Text and Hyperlinking – 09:15
- Hyperlinking – Link Text – 10:12
- Accessibility Review and Tips – 13:00
Did you know that for those using assistive technologies a website without headings is like a 500-page textbook without chapters, sections, etc. – just text? In order to be accessible we must use headings correctly.
SCEs must use headings to organize the structure of their content. It is imperative to begin with heading level H2 and nest content with heading levels in chronological order, like an outline. For example:
- using headings to simply improve the look of text such as size, color, etc.
- skipping heading levels (it may seem to assistive technologies that content is missing)
How to Add a Heading in WordPress
To add a heading SCEs can simply use the Heading block as opposed to adjusting the look of text through a paragraph block. Begin with H2 and continue subheadings in chronological order (H3, H4) according to content needs.
- If SCEs would like to use an advanced CSS class to change the color of a heading, they must be consistent with that color choice throughout the rest of the website.
The appropriate color contrast is something that SCEs should be mindful of when selecting their text size, text color and background color. Thankfully WordPress usually warns editors when there is insufficient color contrast in the color picker located under the Color Settings drop down. The message that will appear at the bottom of the Color Settings drop down reads “This color combination may be hard for people to read. Try using a brighter background color and/or a darker text color.”
Unfortunately, WordPress does not warn for orange text on white background. Our K orange only has enough contrast at a medium font size (20) or larger and bold.
Alternate (alt) text may be necessary when adding an image so users with vision impairments may hear a description of what the image portrays through an assisstive technology called a screen reader. In some circumstances, image alt text may not be appropriate, as it may cloud the experience for the user. To determine if alt text is appropriate SCEs can refer to W3C’s Alt Decision Tree.
Adding Alt Text to a New Image
For new images it is always best to add the alt text in the Media Library while uploading the image. By doing so, you are making sure that the alt text will be visible anytime the image is used across the website. There are multiple ways to add alt text here are a few common ways that SCE’s can do so:
- Select the Media tab on the left sidebar
- Select the Add New button
- Drop files or Select files to upload
- After your image uploads select your image
- Add about 140 characters to the first field titled Alternative Text
Note: You are not adding the alt text to the Description field
While Editing a Page
- Select a block that requires an image
- Select the Media Library button
Note: Do NOT select the Upload button since this will bypass the alt text field
- Select the Upload File tab
- Drop files or use the Select File button to upload your image
- After your image uploads add about 140 characters to the field titled Alternative Text
Adding or Changing Alt Text on an Embedded Image
If you forget to add alt text after uploading the image on a web page you must do the following:
- Select the block you are using the image on
- Enter the alt text under the image settings located on the right sidebar
- Save your changes by clicking the Update button
If you aren’t happy with the general alt text originally added to the media library but want different alt text for that specific page, feel free to select the image on the page and adjust the alt text there. By doing so, this will display your desired alt text on the page and will display the generic alt text from the media library on other pages you use the image.