SNHU Instructional Support Services

How to Create an Accessible ScreenSteps Article

Updated

Selecting the Heading Style

Heading helps user get sense of the page and how it is organized. To find out how to create the correct heading structure go to the following article How to Use Heading Structures Correctly and Efficiently.

Please note: if you accidentally move your content block it will move all of the other blocks underneath it. If you go to delete that heading it will delete all of the content blocks underneath it. To remediate select keyboard shortcut ctrl+z to undo it.

Create a new heading.

You can go to the following article to watch the video on how to properly create a heading How to Create a New Heading.

The new item drop-down menu in screen steps.

Select the heading from the outline view. Drag it to the appropriate heading level you need it to be.

You can use this article to see how the heading level is laid out.

New heading on the left side of the screen steps.

When you complete the dragging of the heading level it should change from "H2" and the correct heading hierarchy level (ex. H3, H4, etc..).

The heading level three for the new heading set up.

Adding Alternative Text (Alt. Text)

It is important to include alternative text to images.

This article will help you find what information should be included How to create Alternative Text.

For additional information on accessible articles.  

  1. Select the image.
  2. A column for the alt. text will appear on the left hand side of your article.
The alt. text box boxed in red.

Checking the Color Contrast

Using Text Style

Drop-down menu for the text settings.

When using the text style guides use the default font and color style. Keeping the default settings will keep the color contrast compliant with WCAG standards.

Hyperlinks allow you to link to a website from within the article.

To find out how to create meaningful links go to How to Create Destination Accessible Link Texts.

There are different types of content blocks for example (paragraph, images, and tables).

To create your destination (meaningful link and description link) select your paragraph content block.

  1. Type your paragraph.
  2. Type the destination words that you want linked out.
  3. Highlight the words you typed as the destination for example "installing WAVE and using WAVE."
Words “installing WAVE and using WAVE” highlighted.
  1. Select the link icon in the home ribbon.
  2. Then select "External Link" from the drop-down.
The drop-down menu from selecting the link icon. With external links selection boxed in red.
  1. Paste the link into the text field.
  2. If you select "Open link in a new window" you must include a written working in the article giving the user advance warning that they will be taken to a new window.
  3. The recommendation from WCAG standards is to leave "Open link in a new window" unselected.
The text field for the link for the example.

Checking Spelling and Grammar on ScreenSteps

Accessibility best practice recommendation to create a draft in a Microsoft Word. You can edit the draft and review the content by using the built-in Editor tool or if you have a Grammarly account you can copy and paste your draft into Grammarly to also check spelling and grammar.  

Test for Accessibility Using Web Accessibility Evolution Tool (WAVE)

After you post the article in ScreenSteps run WAVE to check for accessibility barriers.

The website to learn about WAVE and install is installing WAVE and using WAVE. You can find a video for using WAVE (00:11:20).

General Best Practices for Creating Accessible Articles

Here are some best practices to ensure your manuals, chapters, and articles are accessible:

  • Use different naming conventions for manuals, chapters, and articles.
  • Many users may have a difficultly distinguishing the difference between the manual title, chapter title, and article title if they all have the same title.

Below are examples of barriers that may impact the user experience:

This example shows you how the users experience is impacted when the chapter's title is the same as the article's title:

  • Chapter title: "How to enable and create Break Out Rooms in Ring Central Meeting"
  • Article title: "How to enable and create Break Out Rooms in Ring Central Meeting"
Example of chapter title and article title being same. Red arrow pointing to chapter and another adding to article.
  • Here is an example of an accessible chapter title "Break Out Rooms in Ring Central."
  • Here is an example of an accessible article title "How to enable and create Break out Rooms in Ring Central Meeting"

Another example that creates a user experience barrier is creating similar titles such as:

  • Chapter's title: "How to install the RingCentral Meetings Mobile app os iOS"
  • Article title: "How to download and install RingCentral Meetings from the App Store (Apple Devices)"
Example of chapter title and article title being similar.
  • Here is an example of an accessible chapter title "Using Ring Central on Mobile Device."
  • Here is an example of an accessible article title "How to Download and Install Ring Central Meeting From the App Store (Apple Devices)"

Use Inclusive Language

When creating your job aids use more inclusive language for example “select,” “hit,” "press," or “choose" instead of using the word "click." When we use the word "click" we are assuming everyone is using a mouse.

Steps to Confirm Videos are Accessible

  1. Add the time stamp in the format (HH:MM:SS)
  2. Confirm that closed captions are turned on and the closed captions are accurate. You can follow this video to show you how to create accessible videos how to add captions to your Screen-Cast-O-Matic video and change them.

Adding Tags (Relevant Keywords) to Screen Steps Article

It is important to add tags (relevant keywords) to the article. Tags (relevant keywords) are indivisible labels that add significant information about the content in the article. Inserting tags (relevant keywords) will help users discover the article if they do not know exactly what they are looking for.

  1. These tags help find the articles in the database.
  2. Go to the Screen Steps online
  3. Go to the article you want to add tags (relevant keywords) too. You can find it under "properties."
A preview of screen steps article.
  1. Type in tags (relevant keywords) about your newly created article.
  2. Use the enter button after typing in one of the tags (relevant keywords). Use alternative spellings and abbreviations as well.
The box for entering tags for the article.

If you need help coming up with words to include in your article tags (relevant keywords) you can look at the articles in the accessibility manual to come up with what is spouse to be included in the articles.

Additional Resources

You can find a checklist for making an article accessible for easier time of reading Creating an Accessible Article.

You can contact Patty ([email protected]).

Previous Article How to Embed a YouTube Video into a Kahoot
Next Article Creating an Accessible Article