Web Content Accessibility Guidelines (WCAG) aim at making Web content more usable to users in general, and making it more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations.

     See Principles and WCAG levels.

To meet WCAG level AA recommended by the European Union, Service Apps templates comply with the following criteria:

• Use of sharp color contrasts and adaptation of font size
• Access to the site map in the main pages of the template
• Text alternatives on hover with the cursor or when using a screen reader
• Hierarchy of information

Notes

• The Service Apps templates shipped comply with WCAG level AA.
  • The creator of the Service Apps app is responsible for all criteria found natively in templates. These criteria include color contrasts, font size, keyboard navigation and text alternatives.
  • Any modification made to an app created using a template and any addition of external components to Service Apps fall outside the scope of this responsibility. The authors of these modifications must ensure that the criteria of WCAG level AA remain satisfied.

• Various tools can be used to ensure that the configuration complies with WCAG level AA criteria, e.g. Wave, Axe, etc.

Color contrasts and font size

Description

The contrast between the background color and text color must be sharp enough.

The font size must ensure fatigue-free reading.

Implementation

These criteria are applied to all template pages, popup windows (titles and buttons) and buttons (generic and contextual).

Examples of accessibility testing

Contrasts

Note: These tests are run using Wave.

Accessibility test run on a page in the Executive Dashboard template

• Prior to the implementation of WCAG: Eight critical errors due mainly to the absence of alternative text for images, and 19 contrast errors.
           

• After the implementation of WCAG: No critical errors and no contrast errors.
           
   

Detail of a contrast error

• Prior to the implementation of WCAG: Low contrast
           

• The widget is corrected: A darker background color is selected
           

• After the implementation of WCAG
           

Font size

Detail of a font size error

• Prior to the implementation of WCAG: The font size is too small
           

• The widget is corrected: A bigger font size is selected
           

Site map

Description

A Site map page is available in each Service Apps template to facilitate navigation.

• Users can access this page via a link that is always found in the same spot in the main pages of each template.
• It displays a list of the main pages in the template (menu items) and a list of external links. Users can click the links to access the relevant pages directly.

Note: 

• Because pages containing details are dynamically generated and require users to first run a search for an item, they cannot be displayed in the site map.

• The ID of the link to the Site map page is identical in all app pages. You specify it using the Secured HTML widget that is always found in the same spot in all app pages.

Implementation

The Site map page contains a Secured HTML widget. This widget contains a list of the template pages.

• Open the HTML editor.
• Add a row for each main page in the app within the <div>…</div> tag.
• Each row contains <span>...</span> tags with the following information:
  • Page ID
  • Page name

Procedure: How to add a new main page to the list of pages in the site map

1. Retrieve the information on the new page.

• Display the new page in the graphic editor.
• Click  to run the app.
• Copy the page ID found at the end of the URL in your Web browser's URL bar.
           

2. Update the Site map page.

• Open the Site map page in the graphic editor.
• Add a row within the <div>...</div> tag.
  Note: Arrange rows according to the order of menu items.

3. Add a widget pointing to the Site map page in your new page.

• Open the new page in the graphic editor.
• Add a Secured HTML widget. This widget must be placed in the same spot in all app pages.
• Open the HTML editor.
• Specify the link to the Site map page using the instruction below.

Text alternatives

Description

Text alternatives are provided for menu items and images.

These appear when the cursor hovers over the object or when using a screen reader. Screen readers can relay information to users using a speech synthesizer that reads the page contents aloud, or in Braille via a refreshable Braille display.

Implementation

You define alternative text for the icons of menu items using the alt attribute.

You define alternative text for images using the alt attribute within the <img> tag.

Hierarchy of information

Description

The hierarchy of titles and information is defined in a logical and suitable way for each Service Apps template using tags h1 to h6 that are applied to titles.

• Tag h1 is used for the main title of the page.
• The other tags are applied based on the importance of the information.

Implementation rules

• Hierarchy tags cannot be omitted from a page. For example, you cannot skip the h2 tag and go directly from h1 to h3.

• You do not need to use all hierarchy levels within a given page.

• Tag h1 must be present at least once in each page.

Procedure: How to define the hierarchy of information

1. Go to the widget containing the information to be structured in the hierarchy.

• You can place tags for all widgets in each page, as well as in the Header and Footer sections.

2. Open the HTML editor.

3. Add the instruction below.
Note: Replace X in the <hX> tag with the hierarchy level you want.