Skip to content

Making Accessible Layouts in Mendix—Semantic HTML and Typography

Technology

May 18, 2021 - 4 minute 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

2988 HC Digital Transformation 476X381

Share

Building layouts in Mendix Studio Pro is a straightforward process. It’s mainly based on using ready-made components. Each of the components has its own "Properties". This allows you to change their default settings and appearance. How can Mendix help you ensure accessibility, and what should you pay special attention to?

Semantic HTML

It provides additional context for screen readers. It helps the Braille readers to enable reading, keyboard navigation and other accessibility features. You can easily divide the application into sections, separate the main content from additional content, set priorities to make navigation much more convenient.

How can you use semantic HTML in Mendix, when developers don’t write the code? First of all, you can use the "Container" control, which gathers the components in groups. The default HTML element for the "Container" widget is the div element. However, you can change the semantic meaning of this element by selecting the appropriate "Render mode" for it. We can choose from HTML elements such as:

Div

This is the default value. It has no semantic meaning, and it’s used to group elements.

Section

It represents the general-purpose section of the website. Usually, each section should have a header (h1 - h6) and may have different sub-sections.

Article

An element that allows you to mark a section of a page as a separate, independent part of it. It can be a single blog post, article, or comment.

Header

The element where we usually place the logo and the main page navigation. It may also be a part of another section.

Footer

The element which is the final part of a page or other section. It often includes author information, contact details, copyright information or links to other sites.

Main

The main element is the most important section of your website. That’s the content that interests you the most. It should appear only once on each page.

Nav

It‘s used to mark the navigation of the main page, usually placed in the page header.

Aside

The aside element represents the part of the site that is indirectly related to its main content. It’s often used as a so-called side panel.

Hgroup

This item is used to group headers h1-h6, it’s only relevant when using more than one header.

Address

It indicates that the content of the document provides contact information of a person, persons, or organisation. The information provided may include a physical address, URL, email, telephone number, etc. The Address element should contain the name of the person or organisation to which the information relates.

Using these elements, we can build a layout consisting of semantic HTML tags. This allows the browsers or screen readers to know exactly where the header, footer, navigation or main page content is located.

In the Mendix Studio Pro 8.12 version, there’s also the possibility of hiding the "Container" widget on screen readers.

ARIA role

Additionally, it’s worth to add the so-called ARIA roles to the section to describe the content of a particular area of the website in more detail. The most commonly used roles are:

  • role="banner" (header)
  • role="navigation" (nav)
  • role="main" (main)
  • role="contentinfo" (footer)
  • role="complementary" (aside)

If you needed to create a clickable "Container", you wouldn't have to do almost anything, Mendix will simply add the appropriate ARIA role="button" to the "Container" component for you.

The ARIA roles can be set in Mendix, e.g. using the Accessibility Helper widget, which can be downloaded from the AppStore.

Typography

Another important aspect is the correct use of typography. Mendix has a component called "Text", which can be used to display text. By default, the text is added to the HTML span element, but you can change the semantic meaning of the text with the "Render mode" property. The choices are:

Headings h1 – h6

You can use them to mark the titles of individual sections.

Paragraph

Represents a paragraph, for example, containing the content of an article.

Text

The default option, it generates an HTML span element that has no semantic meaning.

It is good practice to use the correct hierarchy of headings h1 - h6. There should be one h1 header on each page, which is usually the title of the page, then you should use smaller headers that follow each other, starting with h2 and so on. You shouldn’t skip any level. Also, each section should have its header. For those using screen readers, the headers are navigation points for them to navigate through the application.

layout of a page with all typography and semantic html components

Figure 1. An example layout of a page with all typography and semantic HTML components as well as ARIA roles

Widget Accessibility Helper

The Accessibility Helper allows you to change the HTML attributes of widgets to improve accessibility on the website. For example, you can assign ARIA roles to the "Container" component or tabindex HTML attribute.

Summary

The correct use of the semantic HTML elements and typography are some of the most elementary things you can do to make your applications more accessible. This area can’t be ignored, because it’s one of the main factors that affects Accessibility. The features included in Mendix Studio Pro make this aspect of app development really simple.

If you’re interested in this subject, make sure to read our Introduction to Web Accessibility in Mendix and the article on Best Practices in Building Accessible Layouts.

2988 HC Digital Transformation 476X381
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