Most Common Siteimprove Content Manager Errors

Most Common Siteimprove Content Manager Errors

Siteimprove provides a lot of information in regards to Accessibility, SEO, and general Quality Assurance.  We will be focusing on the most common Siteimprove errors you see and how you can go about correcting them on your site.

1. Uneven Spacing in Text

This issue is commonly due to using the justified text alignment option in your content. When we use justified alignment, this makes the spaces between words and characters uneven.  This uneven spacing makes it hard for users with various disabilities to be able to read and comprehend the content.

Fix: Only use text alignment left or center. 

2. Color Contrast Does Not Meet Minimum Requirement

This issue happens when we are using colors that are about the same brightness.  To avoid this, you will want to use colors where one is on the darker side and one color that is on the lighter side.

Fix: Use UVA brand colors that are at least AA compliant for the size of your text or user interface component.

3. Headings are Not Structured

This issue occurs when our headings are not in the proper order on our page. When we have headers that are out of order this creates confusion for users of assistive technology because they may feel that they have somehow skipped content when they have not.  Headers should be in the following order:

  • Header 1
  • Header 2
  • Header 3
  • Header 4
  • Header 5
  • Header 6

Fix: Correct any headings out of order so that their heading order matches the above list.

4. Content Missing after Header

This issue occurs when we place a header on our page, but we do not put any content after it. Headers should not be used for anything other than helping to structure our content.  When using headers for other purposes it causes confusion for users of assistive technology.

Fix: If you need text to appear as a header but not be a header then contact CACS or your web developer to help you achieve the desired look and feel without using headers.  Make sure all headers have content after them.

5. Empty Headings

This issue occurs when we have content that is marked as a header, but it is blank.  Blank headers confuse our users of assistive technology.

Fix: Remove empty headers from your content.

6. Inline Frame Missing a Text Alternative

When you embed videos, you need to make sure that you have the proper label associated with the video so that assistive technology users can know what each video element on your page is without having to watch the video.

To do this, you will need to add a small piece of code to your embedded iFrame in your content.  If you need help with this or need to be trained contact CACS or the Digital Accessibility Coordinator.

Fix: 

<iframe title=”Name of your video or what your video is about.” frameborder="0" src="https://public.tableau.com/views/UVACOVIDTracker/Summary?:language=en&:…?" style="display:block;height:100%;position:absolute;width:100%;"></iframe>

Or you can also do the following but the above is the preferred way:

<iframe aria-label=”Name of your video or what your video is about.” frameborder="0" src="https://public.tableau.com/views/UVACOVIDTracker/Summary?:language=en&:…?" style="display:block;height:100%;position:absolute;width:100%;"></iframe>

7. Image Missing a Text Alternative

Alt text is important on images so that users with assistive technology can understand the purpose of the image and get the additional information the image is providing.  To do this, you will need to add alt text to the image in your system.   If you need help with this or need to be trained contact CACS or the Digital Accessibility Coordinator.

Fix: Locate your image in your digital platform and add an alternative text to the image.

8. Overuse of Italics

Italics are great until you overuse them.  When italics are overused, it can cause frustration, confusion, and an extra challenge for our users to understand our content. Never use italics for full paragraphs or full pages of content.  Use it sparingly and to bring the users attention to a specific item, phrase, or task.

Fix: Only use italics limitedly and when an extra emphasis is needed. 

9. Link Missing a Text Alternative

Alternative text is needed for all links.  This is extremely critical when a non-text element is being used as the link.  The alternative text on the link provides a way for the user to understand what the link is and where it is going to go.  Make sure to apply alternative text to all links to provide an extra level of accessibility for all users.

Fix: Locate your link in your digital platform and add title text to the link.

10. Text in All Caps

Writing in all caps can be a great way to draw a users attention to specific content such as headers, links, or navigation items.  When caps are overused it can cause frustration, confusion, and an extra challenge for our users to understand our content.  Some assistive technology will actually read uppercase letters as individual letters making content almost impossible to comprehend.  Save caps for acronyms, navigation, or other areas that is drawing attention to something important, 

Fix: only use capitalization limitedly and when an extra emphasis is need. 

11. Links are not Clearly Identifiable

When a user comes to a link, they should know what is going to happen when they click on it.  Links that are generic can cause confusion when they are used on the same page multiple times such as: "click here" or "More".  Making your links specific, unique, and identifiable solely in text helps all users understand what the link is for without clicking on it.

Fix:  Make sure your link is clear as to what the purpose of the destination is, do not use generic text.

12. Container Element is empty

This issue occurs when we have an element on our webpage, and it is blank.  Blank elements confuse our users of assistive technology.  If you need help with this or need to be trained contact CACS or the Digital Accessibility Coordinator.

Fix: Remove empty elements from your content.