Skip to content

Introduction to Web Accessibility in Mendix

Technology

May 13, 2021 - 4 minutes read

Mendix Accessibility 416X300
Wojciech Machniak Senior UI Developer

Wojciech Machniak an experienced Senior UI Developer at Objectivity, specialised in low-code platforms and solutions. He teaches his co-workers from Rapid Development Guild how to create layouts and write in proper styles. He participates in creating widgets and extensions in low-code platforms and shares his knowledge with others at various conferences and meetups. 

See all Wojciech's posts
Retail Efficiency Ebook Thumbnail

Share

At the first look, Web Accessibility seems like a challenging subject, especially when we’re dealing with Low Code technologies. In this article, I’d like to introduce the subject of accessibility of websites/web applications on the Mendix platform and present guidelines which will help you build applications in a way that they’re more accessible for people with various disabilities.

What is Web Accessibility?

The concept of Web Accessibility is based on the adaptation of websites and applications, so they can be used by as many people as possible. When talking about disabilities, we’re referring not only to health conditions. The scope of this article also includes people who use mobile devices or have a slow Internet connection. In essence, it’s a matter of not excluding any users, regardless of their limitations.

Why Accessibility?

Why should you focus on Web Accessibility? There are three key points to consider here:

  1. It enables people with disabilities to use the Internet and helps them actively participate in society. It’s worth mentioning that accessibility requirements often overlap with best practices of creating websites/web applications, such as RWD (Responsive Web Design), application design, usability issues, or SEO (Search Engine Optimisation).
  2. In specific cases, certain accessibility standards can be required by law. For example, when you develop applications for the public sector or design government websites.
  3. The use of semantic HTML code improves usability and SEO, making your website easier to find using search engines.

Web Accessibility Guidelines

To make sure that websites and web applications are accessible to every user, designers and developers should follow the proper accessibility guidelines for digital products. The WCAG (Web Accessibility Guidelines) are a set of principles for creating accessible digital products. They can be divided into three levels:

Level A

This is the minimum level which contains the most basic functions of accessibility. If an app doesn’t meet the requirements, some user groups will have no access to information at all.

As a Developer, pay special attention to:

  • Enabling proper navigation of the page using only a keyboard.
  • Ensuring that no automatic action can be performed after setting "focus" on an element.
  • Adding a "Skip to Content" link to skip the repeating elements on all subpages.
  • Making sure that the purpose of each link can be defined from its text (if it’s impossible to define, add visually hidden content or use the ARIA attributes).
  • Eliminating items that blink more than 3 times in one second.
  • Displaying data entry errors to the users in the form fields.
  • Proper preparation of audio/video content on the website, read the detailed requirements:1.2.1, 1.2.2, 1.2.3, 1.4.2.
  • Making sure that the added keyboard shortcuts/gestures, comply with the requirements 2.1.4 and 2.5.1.

Elements checked by assistive tools:

  • All pages must have defined language and title.
  • The form fields must have a label or an instruction e.g. <label>.
  • All non-textual content must have a text alternative, except for the situations described here.

Important!

  • Detailed guidelines and ways to implement each specification can be found in the documentation under this link.

Level AA

This is the recommended level which allows for solving the most common accessibility problems that affect disabled people. If an app doesn’t meet these criteria, certain groups of people may have difficulty accessing information.

As a developer, pay special attention to:

  • The responsiveness of the website.
  • Ensuring that the content of the page isn’t limited to a single display orientation.
  • Adding a visible "focus" to all clickable elements.
  • Making sure that when you zoom in on the content (Ctrl +), the page looks good and clear (up to 200%).
  • Reporting the content that is dynamically updated to the users who use assistive technologies without having to set a "focus" on these elements.
  • Ensuring that all content in a language other than the language of the site is marked with the "lang" attribute.

Elements checked by assistive tools:

  • Contrasts

Important!

  • To ensure Web Accessibility at Level AA, all Level A guidelines must be met
  • Detailed guidelines and ways to implement each point, can be found in the documentation under this link.

Level AAA

The comfortable level (AAA) is the highest level of accessibility determined by WCAG. It’s difficult to achieve in practice, especially when you’re building large IT systems. All the criteria should be met in order not to hinder access to information in any way.

Important!

  • Detailed guidelines and ways to implement each point, can be found in the documentation under the link
  • To ensure Web Accessibility at Level AAA, all Level AA and A guidelines must be met

We recommend reading the Mendix Accessibility Report, where you’ll find more information about how Mendix supports Web Accessibility, what the platform has to offer, and what the developers are responsible for. The report is divided into all levels (A, AA, AAA), where all success criteria are explained.

Summary

Web Accessibility is a very complex issue, and the topics addressed in this article are only a part of the documentation. However, we hope that the guidelines provided in this text will help you build more accessible applications.

If you want to further explore the topic of accessibility in Mendix, check out the posts regarding Semantic HTML and Typography as well as Best Practices in Building Accessible Apps.

Retail Efficiency Ebook Thumbnail
Wojciech Machniak Senior UI Developer

Wojciech Machniak an experienced Senior UI Developer at Objectivity, specialised in low-code platforms and solutions. He teaches his co-workers from Rapid Development Guild how to create layouts and write in proper styles. He participates in creating widgets and extensions in low-code platforms and shares his knowledge with others at various conferences and meetups. 

See all Wojciech's posts

Related posts

You might be also interested in

Contact

Start your project with Objectivity

CTA Pattern - Contact - Middle

We use necessary cookies for the functionality of our website, as well as optional cookies for analytic, performance and/or marketing purposes. Collecting and reporting information via optional cookies helps us improve our website and reach out to you with information regarding our organisaton or offer. To read more or decline the use of some cookies please see our Cookie Settings.