Improving Accessibility in OutSystems

David Marques

1/18/2023

Improving Accessibility in OutSystems
Back to Top Arrow

First of all, what is accessibility?

As in our common days, accessibility is “the design of products, devices, services, vehicles, or environments so as to be usable by people with disabilities”.
In the digital context, we can go further, following the same foundation rules for people with disabilities but also improving other experiences, such as for uncommon devices, slow networks, etc.

Types of disabilities

Web Content Accessibility Guidelines (WCAG)

Web Content Accessibility Guidelines (WCAG)

W3C creates an international standard guideline to help make web content more accessible to people with disabilities.
In those guidelines you can find suggestions like:

  • When using Text Alternatives (Controls, Inputs, Media, etc);
  • How to use video and audio;
  • Colors contrast;
  • Keyboard shortcuts;
  • etc.

Levels of Success Criteria (A, AA, AAA)

Levels of Success Criteria (A, AA, AAA)

To test each guideline, are provided three levels of success criteria:

  • A (lowest);
  • AA (mid-range);
  • AAA (highest).

Tips to make your web content accessible

Ensure that all content can be accessed with the keyboard alone.

Keyboard accessibility

Keyboard accessibility is one of the most important aspects of web accessibility. Many users with motor disabilities rely on a keyboard. Some people have tremors that don’t allow for fine muscle control. Others have little or no use of their hands or no hands at all. In addition to traditional keyboards, some users may use modified keyboards or other hardware that mimics the functionality of a keyboard. Blind users also typically use a keyboard for navigation. Users without disabilities may use a keyboard for navigation because of preference or efficiency.

Read more about it https://webaim.org/techniques/keyboard/

Use High-Contrast Colors

Contrast color

Find colors that provide maximum contrast, including enough contrast between content and the background, so that text and non-decorative images are legible for anyone with low vision or color deficiencies.

Text and interactive elements should have a color contrast ratio of at least 4.5:1

Provide Alternative Text for Images

Images and graphics make content more pleasant and easier to understand for many people, in particular, those with cognitive and/or learning disabilities.


Adding an image or a graphic to your content without using proper or empty alternative attributes (alt tags), can be extremely frustrating for people with visual impairments navigating your site through assistive technologies. Images alternatives add valuable information for low vision or blind screen reader users. Image alternatives also benefit people who have poor or unstable internet, and some cognitive disabilities and they can also improve the SEO of a website.

Use Heading Hierarchies to Structure and Organize Content

Organizing web pages by headings helps users get a sense of the page’s organization and structure. Visually, headings are presented as larger and more distinct than the surrounding text. Making texts larger helps guide the eye around the page. Using headings and making them visually appealing is specially helpful for users with cognitive disabilities.

Add Captions and Transcripts to Videos

Video captions

Video typically has spoken information in the audio track and visual information in the video track. Any information that is only provided audibly or visually will not be accessible to people who can’t hear or see. Captions provide a text version of spoken words, along with any sounds that are important to understanding the content, so people who can’t hear can comprehend the information. People who can’t see get the information from the video through the audio track. A video that contains important information in the video track only requires additional content to convey the information to people who can’t see.

Using the title attribute to help users predict where they are going

Link title attribute

One of the greatest problems on the web is that users don’t know where they are going when they follow links. Web browsers can pop up a short explanation of a link before the user selects it. Such explanations can give users a preview of where the link will lead and improve their navigation

Read more about it at https://www.nngroup.com/articles/title-attribute/.

Use tables for tabular data, not for layout

Tables for tabular data

Data tables are used to organize data with a logical relationship in grids. Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Assistive technologies use this information to provide context to users.

Use ARIA roles and landmarks, but only when necessary

ARIA — Accessible Rich Internet Applications

An ARIA role attribute can be added to an element to instruct assistive technologies to treat the element as something other than its native HTML element type. For example, an <a> element with role=”button” will be treated as a button, not as a link.

Know more in the official documentation at https://www.w3.org/TR/html-aria/.

OutSystems has already accessibility features

You can enable accessibility features in your OutSystems project that will follow automatically the common guidelines from WCAG, but take into consideration that still needs to follow guidelines for your custom code.

Requirements

  • OutSystems UI version 2.5.0 or later;
  • Service Studio, the latest version,

Enabling the built-in accessibility features

To enable some of the accessibility features you only need to go to your layout block and set the input parameter EnableAccessibilityFeatures to true.

OutSystems Layout Accessibility Features

Focus states
allows you to set and highlight the focus on the current element.

Skip to content
allow the user to skip the navigation elements on the screen, and tab directly to the content.

Accessible links
give links a higher color contrast.

Enhanced contrast
allows displaying the content on the screen using a contrast ratio perceivable to people with visual impairments.

Accessibility methods and classes available

SetFocus()
Use this action to set the focus on an input element.

SkipToContent()
The action used on OutSystems UI layouts, is beneficial in terms of accessibility. It is used to allow screen readers to skip the navigation and jump directly to the content of a page when they arrive at a website.

SetAriaHidden()
Use this action to toggle the status of the aria-hidden attribute of an element indicating whether the element is exposed to an accessibility API or not. The aria-hidden attribute enables web developers to hide content for assistive technology. It is a powerful way of reducing the amount of unnecessary content that a screen reader has to read before locating the desired content on a webpage.

SetAccessibilityRole()
Use this action to set the aria-role of an element, for better Accessibility compliance. (E.g. use this action to change Alert default values for the role attribute). This action should be used only when the pattern’s visibility is set to true.

MasterDetailSetContentFocus()
Use this action on the ListItemOnClick action from the list in your Master Detail. This is needed for Accessibility compliance, as it allows the changing of focus between the detail and the next list item.

.wcag-hide-text
Use this class to show an element to a screen reader and hide it visually on the screen.

Suggested tool to validate accessibility

Wave accessibility evaluation tool
WAVE chrome extension

There are many tools to help us during the validation process, some of the them are simple and free, but others are more advanced, but also paid.
Regardless of using the simplest or most advance tool, what is important is to try to be aware that we are creating tools and content for persons, and we need to give them the best experience regardless of their disabilities.

Wave -web accessibility evaluation tool

How to solve common issues in OutSystems

Tips to solve accessibility issues

Based on my experience I will share how to solve the most common issues regarding accessibility guidelines when I am using OutSystems to develop web content.

Missing alternative text

Missing alternative text

Each image must have an alt attribute. Without alternative text, the content of an image will not be available to screen reader users or when the image is unavailable.

The first technical topic that everyone talks about when the subject is accessibility, is the alternative text for images!

This is helpful for blind people, but not also!

For example, happens many times the images came blocked in my mail client and only appears in the alternative text. This is not only about people with disabilities!

To solve this you only need to add an extra attribute called alt and set a representative image description.

Alternative text OutSystems

Color contrast

Color contrast

Adequate contrast of text is necessary for all users, especially users with low vision.

Button color contrast

The most common issue on the web!
Sometimes to create a wonderful UI design, we forget the users and their experience.


The most common cases:


- Text on top of images;
- Grays for text;
- Transparency;

The most common solution came from the design phase, reviewing UI design and Style Guide rules.
In some cases, we try to solve add shadows or overlays to improve contrast.

Heading structure

Empty heading

Some users, especially keyboard and screen reader users, often navigate by heading elements. An empty heading will present no information and may introduce confusion.

HTML Headings

To generate heading tags in OutSystems you can use HTML Element Widget

HTML Element widget

Orphaned form label

Orphaned form label

An incorrectly associated label does not provide functionality or information about the form control to the user. It usually indicates coding or other form labeling issues.
Every time you use an input is important to have an associated label.


Widget labels have an input parameter to select correspondent input

.

Input Widget

Redundant link

Redundant link

When adjacent links go to the same location (such as a linked product image and an adjacent linked product name that go to the same product page) this results in additional navigation and repetition for keyboard and screen reader users.


You can use an area-hidden attribute to hide the link from screen readers and to avoid disturbing the user unnecessarily.

If you need help to improve and validate accessibility for your website or application, we are available to help you!

Blog

Where design meets thinking.

Lisbon