Fix Common Errors found in Siteimprove

, Before You Start

1. Filter your tasks
There are many errors that Hippo CMS editors can't fix. Those are for developers and system admins. Please first select the site and subgroup you are assigned to, and filter tasks to Editors. Follow this six-step instruction in the screenshot.

2. Focus on Level A and AA errors
We'll focus on fixing WCAG 2.0 level A and AA errors. You may ignore AAA errors and warnings for now. 

Note: if you need additional assistance, please email lib-helpdesk@umd.edu. NC State's IT Accessibility Handbook is also a great resource. 

3. Settings to choose for Siteimprove Add-on

Filter setting:

1. Conformance level: choose AA;
2. Severity: choose Error, ignore Warning and Reviews;
3. Responsibility: choose Editor, WebMaster 

Common Errors found in Siteimprove

 Info Note: Errors/warnings you may ignore. Those errors and warnings should be fixed by developers.

Sometimes you need to edit some simple HTML source code. Please be familiar with the following editing tools.

Figure 1: View Source code and Zoom in/out to maximum and minimize the work area.

Figure 2: change Headings, Bold text and Clear Format

HTML is used to format content

Don't use presentational attributes such 'border', 'align', or 'bgcolor' etc. Use CSS styles instead.

Headings

General rules:

• Start with heading 2 - <h2>. Each page can only have one <h1>. <h1> should be automatically generated in our Hippo CMS.
• Do not skip heading levels.  (i.e. do not go from an <h2> to an <h4>, headings should be in order).
• Headings are structural elements, so do not pick a heading level simply for font sizing purposes. Pick a level that corresponds to the outline of the page.
• Do not use visual styling as the only way to communicate what your headings are, rather use actual headings<h1> – <h6>.

"Bold" tag used to format text

Please use <strong> for bold texts, don't use <b>. If the text is a heading, an 'H' tag (such as H1, H2, H3...) should be used instead.
If the text should be emphasized semantically, use the 'strong' tag instead. Because <b> doesn't convey any extra emphasis or importance". <strong> is different. It "represents a span of text with strong importance." There is a semantic meaning of importance here. In fact, a <strong> tag within another <strong> tag has even more importance. Semantic difference between <b> and <strong>, <i> and <em>

Images

• Image with no alt attribute. 
• Image link is missing an alternative text.
• Should an image be marked as decorative?

These three errors all mean your image does not have an 'alt' attribute (alt="brief description of the image"). When you select an image in the Image Picker window, type image description in the Alternative (Alt) Text input box. See examples of good Alt-Text, and the difference between image caption and Alt text 

How to add alternative text: (two ways)

• Edit html code - recommended:
  1. Select the image, go to the Source View (see Figure 1)
  2. Add alt="your description of the image..." right after "<img ". Your code should look like <img alt="your description of the image" src=...>
• Double click the image, the image picker window should come up. Enter a description of the image in the Alternative Text fields (right above the Cancel and OK button). Note: if you have applied Image Responsive for the image earlier, you need to add that again. 

Is the image free of text?

If the image with text is a logo, like the umd logo, library logo, or Green Office logo, it's ok. Otherwise, consider using text only or image as background.

Decorative image

In the case of a decorative image, a null (empty) alt text should be provided (alt="") so that it can be ignored by assistive technologies, such as screen readers. Our Siteimprove won't give it a warning either.
See more information on https://www.w3.org/WAI/tutorials/images/decorative/

"u" (underline) tag used to format text, or "i" (italic) tag used to format text

• If the text should be emphasized use se manti c elements like <strong> or <em>.  If the text is a heading, an H-tag (such as H1, H2, H3...) should be used instead.
• If you have to underline texts, add the custom style "font-underline". e.g. <p class="font-underline">my texts</p>
• If you have to make text italic,
  1. Select text and use the "Clear Format" tool to get rid of undesired formatting. (See Figure 2)
  2. With the text selected, use the "Italic" tool. (See Figure 2)

iFrame is missing a description

The iFrame has no 'title' attribute or the 'title' attribute is empty. To fix: Provide the frame with the attribute title=” ” and add a description of the content in the title. 

You need to edit source code. See Figure 1.

Code example: <iframe tilte="Description of this iframe, like Hornbake google map"> 

Link identified only by color

When both the texts and the link are both bold, Siteimprove thinks there's not enough contrast. What you can do is to remove the <strong> tag around the texts. For example, The presentation is available on the UMD Libraries Twitter account. 

The source code is: <strong>The presentation is available on <a href="https://twitter.com/UMDLibraries/status/849322100821303296" target="_blank">the UMD Libraries Twitter account.</a></strong>

Remove the paring <strong> </strong> tag will solve the problem: The presentation is available on the UMD Libraries Twitter account. 

If you really want those texts to stay bold, turn the link into a button is an option. See https://www.lib.umd.edu/sample/responsive#buttons

PDFs

Our university's IT Accessibility website provides great information on how to create accessible PDF documents.