Skip to main content
UMD Discover, our new library system and search experience, has launched.

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. 

Siteimprove leveles

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 
settings

Common Errors found in Siteimprove

 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.

view source code

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

 

Format text tools

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.

Problems How to Fix
text alignment used in a paragraph 
<p align = "left">some texts</p> 
<p align = "center">some texts</p>

You need to edit source code. See Figure 1.

style="text-align: left/right/center"
<p style="text-align: left">some texts</p>
<p style="text-align: center;">some texts</p>

image alignment:
<img style="width: 111px; height: 112px;" align="left">
Use class="float-left/float-right" which will left or right align your image, and it also adds a small margin around the image. 
<img style="width: 111px; height: 112px; align:left">
<img width="600" src=...> <img style="width:600" src=...>

Format tables

<table border="1" cellpadding="1" ...>

Remove codes like these - border="1" cellpadding="1", etc.  Use responsive table classes to format table instead.
<table class="table"> - for a basic table
<table class="table table-bordered"> - table with border
<table class="table table-striped table-bordered"> - table with border and zebra-stripes. 
See detailed table examples and get codes 

 

Add margin or padding:

  • margin-bottom-20
  • margin-bottom-30
  • margin-bottom-40
  • margin-top-20
  • margin-left-10
  • margin-right-5
  • margin-right-10

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>.
Problems How to Fix
Headings are not nested properly Start with heading 2 - <h2>, then heading 3 -<h3>, etc, don't skip a level. See Figure 2.
Heading is missing text

Don't use heading for extra padding or margin. You need to edit source code.

For line space: Use Enter (on keyboard) to create a new paragraph (a line break), or Shift + Enter (on keyboard) to create a soft line break.

For extra margin/padding: use the following css styles: e.g. <p class="margin-bottom-30"> this class creates a 30 pixel margin below this paragragh</p>

  • margin-bottom-20
  • margin-bottom-30
  • margin-bottom-40
  • margin-top-20
  • margin-left-10
  • margin-right-5
  • margin-right-10

"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>

Problem How to Fix
Source code looks like:
<b> bold texts</b> 
 

For regular text: 

  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 "Bold" tool to bold text. (See Figure 2)

Source will look like: <strong> bold texts</strong>

If text is a heading:

Select the text, then choose "heading 2" or "heading 3" etc. (see Figure 2)

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 semantic 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"

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.

Back to Top