Site Improvement and Accessibility

These links provide corrections steps for the following Level  A  errors.

• Scan #: 1.1.1 Non-text Content >> Alternative text for the image is a file name
• Scan #: 1.3.1 Info and Relationships >> Heading is missing text
• Scan #: 1.3.1 Info and Relationships >> HTML is used to format content
• Scan #: 2.4.4 Link Purpose (in Context) >> Link text used for multiple destinations
• Scan #: 2.4.4 Link Purpose (in Context) >> Image link is missing alternative text
• Scan #: 2.4.4 Link Purpose (in Context) >> Link text is too generic in its current context

These links provide correction steps for the following SiteImprove Warnings [siteimprove warning icon] .

• URLs with underscores

When logged into SiteImprove, there is a Responsibility filter toggle. Select Editor to filter to issues where content editors are responsible for making corrections to content.

The sections listed below correspond to SiteImprove scan errors. Read on to see what CMS content editors can do to correct their content and improve the SiteImprove scan scores.

Scan #: 1.1.1 Non-text Content >> Alternative text for the image is a file name

The alternative text is used by a screen reader to read aloud the purpose of the image for a visually impaired user. A file name is rarely of use, as everything is read out, including underscore and slash.

SiteImprove indicates the fix is:
Make sure the alternative texts reflects the purpose of the image.

Editor Responsibility

Content editors must provide alternative text that reflects the purpose of the image.
Learn more about Alternative Text.

Image Located in Old Body Field or a Block

If the image is located in the old Body field of the node or within a block, you must restage the node to use the new body field and paragraphs. Use the Image paragraph to include the image and provide alternative text that reflects the purpose of the image.

• If you are uploading a new image to replace the old one, you are required to provide alternative text for all images
• If you are selecting the image from the Media Library, use the Alt Text Override field on the Image paragraph to include alt text

Scan #: 1.3.1 Info and Relationships >> Heading is missing text

The tag for the heading is present, but there is no text in the tag.

Editor Responsibility

Use the SiteImprove scan report to identify the location of the missing heading text on the node. The report also indicates the type of heading tag that is missing text.

If SiteImprove reports one similar to this, it means an empty Heading paragraph was left on the node.

<h4 id="" classes="entity entity-paragraphs-item paragraphs-item-paragraphs-sp-heading
psp subsection-subheading"></h4>

To address the error, open the node for edit and add the heading text to the Heading paragraph or, if no heading is needed, remove the empty Heading paragraph.

If SiteImprove reports one similar to this, it means there is an empty Heading tag in a rich text field or paragraph.

HTML tag: H4
Text content:
HTML: <h4>&nbsp;</h4>

To address the error, open the node for edit, locate the rich text field or paragraph containing the empty header. Click Disable rich-text. Scroll within the html code of the text to find the empty header tag. For the example above, it would be: <h4>&nbsp;</h4>

• If no heading text is needed, delete the entire tag: <h4>&nbsp;</h4>
• If heading text is needed, highlight the html code for a space (&nbsp;) and enter the heading text, click to Enable rich-text, verify the heading text displays, save, and publish the node.

Scan #: 1.3.1 Info and Relationships >> HTML is used to format content

Presentational attributes such as 'border', 'align', or 'bgcolor' are used. CSS should be used for styling instead.

Developer Responsibility

Filter out tags such as border, align, and bgcolor from html tables within Rich Text (Full) paragraphs. This may cause some styling issues on legacy content, but does not remove content.

Editor Responsibility

Content editors must restage old body field content containing html tables using styles such as border, align, and bgcolor. Refer to tab 1 of the shared spreadsheet link below, to view a list of nodes containing html table content in the old body field. These nodes must be restaged using either the Rich Text (Full) or Data Table paragraphs to correct the SiteImprove issue.

https://docs.google.com/spreadsheets/d/15GyayUwXNJkPUjGHs2VfYIqVGH-f-5c9l8v5uSQ6kSE/edit?usp=sharing

Scan #: 2.4.4 Link Purpose (in Context) >> Link text used for multiple destinations

Developer Responsibility

Some changes to improve aria labeling have been made by technical support. For example, the View More and Learn More links within Listing (Dynamic) and (Static) paragraphs now include the title of the node the View More or Learn More links to as part of the aria label making the label unique.

SiteImprove is having a hard time reconciling the aria label with the text used for the link in paragraphs where a title override is included. A ticket has been submitted to technical support for a resolution to the issue.

Editor Responsibility

There are some issues in this category where content owners and editors could choose to do a simple correction. For example, making inline links in rich text fields using the same link text or using link text that does not do enough to distinguish one link from another.  Link text like: Click here, here, Read More, More, etc. does not include enough information about where the link is going.

Click here to learn about EM's environmental cleanup story.
Click here to learn more about DOE's Office of Legacy Management.

SiteImprove indicates the fix is:
If the destination pages are not the same, make sure the links can be distinguished by their link texts or WAI-ARIA labels ('aria-labelledby' or 'aria-label') alone to make the difference clear to all users.

So, for the links above, this would be better.

Learn more about EM’s environmental cleanup story.
Learn more about DOE’s Office of Legacy Management.

So now, the link text makes a clear distinction of what the user can expect when they follow the links. For the sighted user, the visual cues indicate a link and for sighted and non-sighted users (using a reader), the link text provides context for the link destination.

Scan #: 2.4.4 Link Purpose (in Context) >> Image link is missing alternative text

Editor Responsibility

Content editors must provide alternative text that reflects the purpose of the image.
Learn more about Alternative Text.

Image Located in Old Body Field or a Block

If the image is located in the old Body field of the node or within a block, you must restage the node to use the new body field and paragraphs. Use the Image paragraph to include the image and provide alternative text that reflects the purpose of the image. If the Image includes a link, the alternative text should include the purpose of the link.

• If you are uploading a new image to replace the old one, you are required to provide alternative text for all images
• If you are selecting the image from the Media Library, use the Alt Text Override field on the Image paragraph to include alt text

Scan #: 2.4.4 Link Purpose (in Context) >> Link text is too generic in its current context

Link texts should be written so they make sense out of context. Generic texts such as “Click here” and “More” give no indication as to the destination of the links.

Editor Responsibility

Content owners and editors can choose to do a simple correction to generic link text to provide an indication of the link destination.

Link text like: Click here, here, Read More, More, etc. does not include enough information about where the link is going. You must include link text that provides an indication of the link destination.

So, instead of Read More, include the destination and make the destination the link text instead of the generic text. Read more about the DOE Strategic Human Capital Plan. (Helps avoid the SiteImprove Issue: 2.4.4 Link Purpose (in Context) >> Link text used for multiple destinations.)

Warning: URLs with underscores

URLs with hyphens (-) rather than underscores (_) are preferred by Google for identifying what a page is about. Underscores are treated as "word joiners" whereas hyphens are treated as "word separators". Hence hyphens make URLs easier for search engines–and real people–to read.

Editor Responsibility

Content owners and editors can choose to use the following file naming best practices when, naming image and document files for Web use.

• Use all lower-case
• Separate words with a dash (-)
• Never include punctuation marks
• Never include spaces
• Make image filenames a good description of the subject matter of the image
• Make document filenames descriptive by including key terms to make the content user-friendly and search-friendly
• Keep file names short -- you should be able to include descriptive terms and remain under 50 or 60 characters (including the dashes and excluding the filename extension)

Do the above for image files as well as document files to increase the SEO of the files.