Best practices - Improving WCAG accessibility in Blue

At Explorance, all users are important to us. As such, key areas of Blue have been designed to be accessible to users regardless of their physical challenges.

Several areas of Blue have been certified WCAG 2.1 (Level AA) compliant including:

Data integrity gateway (DIG)
Blue Dashboard
Question personalization
Fillout
Subject management
Reports
Rater selection
Blue Home

The following information is intended to assist project managers in developing accessible tasks, questionnaires and reports using Blue. Following these best practices and guidelines will help your projects achieve your accessibility goals. Please note that PDF versions of reports are not WCAG 2.1 compliant, but wherever a PDF report is available an HTML WCAG 2.1 compliant report is also available and we indicate that the PDF reports are WCAG 2.1 non-compliant.

General accessibility best practices

New browser windows/tabs

Provide an advanced warning to the user that a link or action will open a new browser window or browser tab. For example:

Provide notice about navigation

<a href="aboutus.html" target="_blank">Read all about us (opens in a new window)</a>

The use of color

Color should not be used as the only means of relaying information to the user. Color can be used as an indicator, but it must also be accompanied by another visual indicator.

Color contrast

A minimum contrast ratio of 4.5:1 must be maintained between the background of a page and the text and images on a page to maintain legibility.
Text that is over 18 point in size or 14 point and bold only has to have a contrast ratio of 3:1 with the background.

Resources for validating color contrast:

Colour Contrast Analyser: http://www.paciellogroup.com/resources/contrastanalyser/
Colour Contrast Analyser Firefox Extension: http://juicystudio.com/article/colour-contrast-analyser-firefox-extension.php
Color Contrast Analyzer: http://www.colorsontheweb.com/colorcontrast.asp

Flashing or blinking content

Reduce or eliminate flashing text and images. Flashing imagery can have adverse effects on some individuals with photosensitive seizure disorders. If flashing or blinking content is critical to the message, reduce the flashing to less than three flashes per second.

HTML links

Links should be clearly identified and every link on a page should be unique. A link labeled "Click here" is not acceptable. Instead a link labeled "The Spring 2014 Summary Report" is much more helpful. A user should be able to determine the purpose of a link by the link text alone.

Font

16px is smallest recommended size for mobile devices

Layout and formatting

Text is left aligned.
Limited to just 80 characters across.
Paragraph line spacing is at least 1.5.
Spacing between paragraphs is double the line spacing.
Use styles where appropriate rather than manually formatting normal text.

Word choice

Avoid abbreviations where possible, otherwise provide a definition of the abbreviation.
Avoid jargon or foreign words where possible, otherwise provide an explanation of the terms.
Keep content simple. Expect readers to have no more than a lower secondary education.
Avoid using device specific terminology like "click", "tap", or "press".

Content

All pages contain a title.
Headings and labels accurately describe the topic or purpose.
Sentence and paragraph length are minimized.

Required fields

An asterisk (*) can be used to indicate a required field, but before encountering any required fields, a statement must be provided for both sighted and non-visual users that is worded similar to this:

“An asterisk (*) indicates a mandatory field.”

Images

Any images (that has meaning) included in your content must be accompanied by an equivalent text alternative. Any words that are included in the image that are key to understanding the meaning should also be included in the text description. Remember that the text needs to describe the same material that the image is used for.
Text alternatives are implemented by including the alt attribute in image tags and when that isn't sufficient, the longdesc attribute can be used. The longdesc attribute is a URL that leads to a description of the image.

Include alt text with images

<img src="duck.jpg" alt="A mallard duck floating on a lake by himself.">
<img src="workflow.gif" alt="A graphical representation of the software product lifecycle" longdesc="workflow.html">

Charts/graphs

Charts and graphs must be immediately followed by a table that contains equivalent content.

Tables

Avoid using tables for layout purposes, a better option is to use CSS to control the layout. Additionally, nested tables should not be used
Tables must include the summary attribute within the table tag and should also include a caption tag. The summary should describe the organization of the table or how to use the table. The caption should not duplicate the summary information.

Include summary text with tables

<table summary="Years are listed in row 1, courses are listed in column 1. The intersection of a course with and a year contain the response ratio for the end of year survey. The final row in the table contains the average response ratio for all of the courses in that year.">
<caption>Summary of Response Rates for End of Year Survey
</caption>...
</table>

Add custom logo alt text for all of the user themes being used

Projects - Questionnaire

Options

Enable Allow rater to save & continue. Users will be able to save their progress and return to the questionnaire at a later time. This feature has the additional benefit of auto-saving responses as user progress to the next page of the questionnaire.

Projects - Fillout- Task configuration

Summary page

Enable Include summary page option. This provides an opportunity for the user to review their answers prior to submitting them.
Enable Display summary button option. This adds a button to every page of the questionnaire that will take users directly to the summary page.

Reports - Content - Report blocks

Display options

Choose to show the appropriate scales to ensure that the charts are understandable.
When displaying a chart, consider enabling the Hatch Chart option which uses patterns rather than colors to differentiate items on the chart.
Whenever a chart is included in a report, Display Table should also be enabled to provide the textual equivalent of the chart.