On this Page:

Putting Site Visitors First

Inclusive Design is about putting people first. It’s about designing for the needs of people with permanent, temporary, situational, or changing disabilities — all of us really. 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 webservices@kzoo.edu.

Below are key areas for Site Content Editors (SCEs) to focus on.

Only SCEs have access to watch the instructional and embedded videos on this website.

Headings

Description

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:

• H2
  • H3
  • H3
    • H4
• H2

Avoid

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

Additional Notes

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

Paragraph Text

Description

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,our K brand orange on white background only has enough contrast at a medium font size (20) or larger and bold.

Images

Description

Alternative (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 assistive technology called a screen reader. In some circumstances, image alt text may not be appropriate, as it may cloud the experience for the user. In these cases you should leave the field empty. To determine if alt text is appropriate, 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:

Media Library

1. Select the Media tab on the left sidebar
2. Select the Add New button
3. Drop files or Select files to upload
4. After your image uploads select your image
5. 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

1. Select a block that requires an image
2. Select the Media Library button
   Note: Do NOT select the Upload button since this will bypass the alt text field
3. Select the Upload File tab
4. Drop files or use the Select File button to upload your image
5. After your image uploads add about 140 characters to the field titled Alternative Text

Adding or Changing Alt Text on an Embedded Image

Adding

If there is no default alt text on an image in the media library, you can add alt text at the page level when embedding an image:

1. Select the block you are using the image on
2. Enter the alt text under the image settings located on the right sidebar
3. Save your changes by clicking the Update button
4. Note: This will not update the default alt text in the media library, only on the page being edited.

Changing

If there is default alt text on an image in the media library, but you want different alt text for a 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 default alt text from the media library on other pages you use the image.