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 WordPressHelp@kzoo.edu.

Headings

Understanding Headings on the Web

A website heading is a title or subtitle that introduces a section of content on a webpage, acting just like a chapter title or a table of contents in a book. Headings are also critical for users to understand the structure of the content on a page whether that’s through visual representation or by way of an assistive technology like a screen reader.

Since headings serve an important purpose on websites, let’s discuss heading levels, when to use them, and when to avoid using them. We’ll start by comparing heading levels to a book and go over important aspects of each heading level.

• Title of a book cover = Heading 1 (H1)
  • For websites there is only one H1 per page
  • The H1 is the title of the page or post.
• Chapter titles of a book = Heading 2 (H2)
  • Purpose: H2 sections provide distinct, logical categories of your main topic
  • Use: for section breaks of your content.
• Subsections to chapters of a book = Heading 3 through Heading 6 (H3-H6)
  • Purpose: indicate supporting details within the topic of your H2
  • Classification: sub-headings of H2 content

Nesting Headings

Because 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:

• H1 – Fruits and Vegetables (Page Title)
• H2 – All About Fruit (Section 1)
  • H3 – Temperature fruits (subsection)
  • H3 – Tropical fruit
    • H4 – Papaya
    • H4 – Guava
    • H4 – Starfruit
• H2 – All About Vegetables (Section 2)
  • H3 – Bulbs
  • H3 – Flower
  • H3 – Leaves
    • H4 – Brussel sprouts
    • H4 – Cabbage

What to 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, 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

There are two ways to add alternative text to an image on WordPress. One is through the image settings in the Media Library of your website. The other is through the image block settings sidebar while you’re editing a page or post.

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 or Post

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 within the image block settings on the sidebar. 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.