Skip to content

Making Accessible Layouts in Mendix—Best Practices

Technology

May 24, 2021 - 4 minutes read

1676 3 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
1553 Devops Whitepaper News Section 416X300 EN

Share

There are many guides on accessibility on the Internet, and the documentation itself is extensive and goes beyond the scope of this article. In this text, we‘re going to focus on the most common issues and errors. If you want to learn about other aspects of building accessible apps in Mendix, take a look at our Introduction to Web Accessibility and the article on Semantic HTML and Typography.

Alternative Text for Images

The alternative text and its correct use are some of the major challenges in the accessibility of web applications. It’s especially important for blind people, who can’t see the pictures, and the alternative text is played on their screen readers. It’s also important to remember about people who have a slow Internet connection, and the images in their browsers have been disabled to speed up the loading time.

The alternative text is mainly applicable when we talk about graphics. Mendix has a component called "Image", which can enter such text. We do this in "Properties" of the "Image" component in the "General" section.

It’s good practice that such a text should precisely describe the picture, and if the picture is added exclusively for decorative purposes, you can leave the alt blank. Mendix adds the appropriate ARIA roles for us, which tell the screen readers that the picture should be ignored and has no semantic meaning.

Forms

Forms are included in most of the applications we develop, and Mendix meets all the requirements when it comes to their accessibility. It’s a good practice to make sure that each form element has its label, you can set it e.g. in the "Input" control in "Properties" in the "Label" section changing the "Show label" option to "Yes". In the case of mandatory fields, you should set the "Required" attribute with an appropriate message which describes the error that occurred.

In the one of the latest versions of Mendix Studio Pro 8.12, additional improvements regarding accessibility have been made. If you don’t display the associated label with the form field or only use the "Placeholder" attribute, you can add a description which will be displayed when using a screen reader. Additionally, there’s the "Autocomplete" option. These new features can be found in "Properties" in the "Accessibility" section.

Page Title

The title of the page is one of the often-overlooked elements of the applications developed in Mendix. When creating a new page in Mendix, a title called "New Page" is automatically assigned to it. Unfortunately, it doesn’t provide any vital information to a disabled person who’s using a screen reader. The title can be easily set in "Properties" in the "General" section or overwritten using Microflow in an Activity called "Show page".

It’s also important to remember to set the main title for the whole application. You can do this in the navigation settings by changing the "Application Title". Mendix repeats the main title on each page.

Keyboard Navigation

For many users, a keyboard is the only device to navigate the application. For various reasons, they don’t use the mouse, and it’s the developers’ job is to enable them to do so. All interactive elements such as links, buttons, form elements and modals should be accessible with the keyboard alone.

If the application is navigated using a keyboard, the order is determined by the tabindex attribute to which you can assign a value that will determine the order of navigation. If you set the tabindex attribute to -1, you exclude the item from the keyboard navigation.

After setting up the tabindexes, it’s a good practice to check whether the application is accessible as intended. You can simply try to go through it without using the mouse in order to identify and eliminate errors.

Most of the controls in Mendix have the tabindex attribute, and you can set this attribute in "Properties" in the "Common" section to give you the right navigation order. If you keep the default value 0, the order is determined by the position of the item on the page.

All keys available:

  • Tab - moves "focus" to the next clickable element 
  • Shift + Tab - moves "focus" to the previous clickable element 
  • Space bar - changes the state of the element (e.g. checkbox), activates the element (button), closes or opens the element (e.g. dropdown) 
  • Arrows move inside the controls (e.g. change Tab or dropdown option)
  • Esc - closes elements (e.g. modal, expanded dropdown)  
  • Enter - activates a link or button, sends a form

Icon Button

Another important thing we can improve is the buttons. In some cases, they only have icons and no labels. Such a button doesn’t give any information to screen readers, so you should always add an accurate description. In Mendix, you can do this by entering the desired value in the "Tooltip" field in "Properties", this option can be found in the "General" section. Mendix adds the appropriate ARIA attributes to the button. It enters the ARIA-label with the description you entered in the "Tooltip" field. With this small change, the buttons with the icons will become accessible.

Summary

Mendix itself already provides strong support when it comes to Web Accessibility. The developers just have to remember the basics, follow the requirements given in the guidelines and test their applications from the first days of the development. For testing, we recommend using the Lighthouse tool built-in Google Chrome. It can prepare an accessibility report and indicate areas for improvement, moreover, you should test the functionality of your app with the keyboard-only setup.

It’s worth noting that the Mendix platform itself is developing rapidly, and further improvements are being added to Mendix Studio Pro to help us meet the Web Accessibility criteria. That’s why you should stay up-to-date with the new versions of the platform in the AppStore. Make sure to read the release notes and keep up with the Mendix Accessibility Report, where you can find current information about Web Accessibility in Mendix.

1553 Devops Whitepaper News Section 416X300 EN
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.