The IRMA site in a new guise: improving IRMA's web presence

When it comes to mobile applications, most people find out how an app works and what it does by using it — not by studying manuals, accompanying websites or extensive documentation. Yet, a user-friendly website for IRMA is crucial for supporting the existing user community as well as for reaching new and potential future users.

For a long time, the IRMA app has been prominently featured on the Privacy by Design Foundation website. This site points visitors to the iOS and Android App Stores (so people can download the app), provides demos where one can try out the IRMA app in action and even does this both in Dutch and in English. In this respect, one could say that IRMA has a great web presence. However, as part of the IRMA made easy project, we have studied the online information about IRMA more carefully and reached a somewhat different conclusion.

Don’t get us wrong: the www.privacybydesign.foundation website is a great resource about IRMA. It provides much in-depth information for users, developers, and potential issuers¹ as well as for parties who might want to implement an IRMA-login function on their website (e.g., web shops). Likewise, it not only explains how IRMA works but also describes the organization behind IRMA as well as the broader IRMA ecosystem, philosophy, and background. However, with this much to offer, it is also too overwhelming for new users who simply want to learn about and use the app. So after an initial review of the Privacy by Design Foundation website, we concluded: IRMA is in need of another website that exclusively focuses on end-users who are interested in the IRMA app. Such a site should provide a quick overview of what IRMA is, how to use it as well as answers common questions. This is why we abandoned our plan to review and ultimately improve the existing Privacy by Design Foundation website — and instead opted to set up a new app landing page that fulfills the needs of existing, new and potential future IRMA users.

In the spirit of agile development, we realized a first version of such a site just a few weeks, using the amazing uBuild theme by Forestry as a basis. Our new IRMA landing page features prominent links that allow visitors to download the app, short and clear explanations about IRMA, as well as answers to frequently asked questions. It is online already and can now be found at irma.app!

Of course, while making this site, we have kept the goals of the IRMA made easy project on our minds. We not only made sure the site serves as the one go-to place where people can visit to find all the information needed to install and consequently use the IRMA app. We also made sure the site is as accessible as possible. Three main activities have been part of this endeavor.

Easy, short and clear texts

First, we have spent quite some time on writing and rewriting texts, aiming to get the Dutch text on the website to “language level B1”. Such B1-texts consist of common words and everyday language. About 95 percent of the Dutch population can read and understand texts on this level. When writing the texts, we used the advice provided by the Dutch government. In addition to using simple words that everyone knows, this advice includes using clear titles and section headers, using an active writing style with examples as well as short and clear sentences. An example of how we have applied these principles can be seen in the screenshot below, which shows a snippet of the website. As you can see, we use a clear header (the Dutch word “Inloggen”), and three short sentences to explain a key functionality of IRMA. Also, just like advised, we have included an example (namely watching a movie online) in the text.

To evaluate our texts, we have (among other resources) used the language accessibility tool by Stichting Accessibility. Our results so far are very good, but not quite perfect yet. Whereas some texts score the intended b1-level, others still are evaluated at slightly higher levels. Even though not everything is evaluated at level b1 yet, this is a big step forward. Just as a point of reference, the current front-page of the Privacy by Design Foundation is evaluated at level c2 — the level that is most difficult to comprehend.²

Of course, testing texts with software can never replace feedback from humans. Hence, we have spread the website and collected informal feedback, resulting in minor revisions. We even received and incorporated detailed feedback from a language expert who usually works for municipalities. Once we were confident that the essence of our Dutch text is easily comprehensible, we were ready for the next step: making sure the information is accessible to people outside of The Netherlands.

Internationalization: Providing irma.app in Dutch, English and German

We decided to translate the Dutch text both to English and German. Considering that the IRMA app is also available in both Dutch and English and that we want to reach as many people as possible, providing an English translation was an obvious choice. The decision to also provide a German translation was more pragmatic and based largely on the fact that the IRMA made easy team has 2 German team members. (And as the German team members pointed out, German people often still are a bit uncomfortable when information is not provided in their mother tongue.) So, in a true team-effort (including help from our friends and parents in Germany), a German and English version was put online, and the navigation of the website was extended to also provide a language picker. Furthermore, we made sure the language of the browser is used as the default-language when users enter the page.

In the long run, we hope the growing IRMA community and open-source movement will help with adding more translations as well. However, we believe that with Dutch, English, and German, we have made a good first step towards covering large parts of Europe.

Accessibility

Reaching as many people as possible is not only about providing easily comprehensible information in many languages but also about making sure that people with the widest range of capabilities (including, e.g., people with disabilities) can use the website. To ensure web accessibility in this traditional sense, we have checked the website with several accessibility tools. Even though our site already scores quite well, we still have some way to go. In the following, we will discuss the findings that the tools revealed. We plan to address these as a next step (and of course, we will keep you up to date on this blog).

Checking irma.app with the AChecker check

The AChecker found 4 smaller issues of 2 different types namely:

1. Two incorrect headers following an h1 header
2. Two label elements lacking text

We believe the first point is a consequence of the structural setup of the landing page, which alternates between sections with slogans and information sections. Because we use h1-headers for slogans, some heading levels are skipped. This could be solved by defining a style for slogans in the CSS and by replacing h1-headers with such slogans. (Feedback about the way to go is always welcome!)

The label elements lacking text are related to our menu and our language picker. Both only consist of visual icons, and no accompanying text. A quick fix would be to add short descriptive labels such as “Menu” or “Language”. However, the issue also alerted us to the fact that our language picker is quite challenging to use for visually impaired users. To improve the situation, we plan to follow this article by Claudia Romano on codyhouse.co about how to design accessible language pickers. A core change will be to (also) feature the name of the languages, rather than just flags.

Checking irma.app with the WAVE Web Accessibility Evaluation Tool check

Next, we looked for more issues with the WAVE Web Accessibility Evaluation Tool tool. A nice feature of this evaluation tool is that it visually annotates the website with its findings. Lucky for us, the WAVE Web Accessibility Evaluation Tool only found errors we already had identified during our previous check. Here a screenshot of the visual annotation provided by the tool:

Checking irma.app with the WEBaccessibility tool by Level Access

With various web accessibility checkers being available for free, we did not restrict ourselves to using just one or two tools. Next on our list was the WEBaccessibility tool by Level Access. Interestingly, using this tool yielded some new results. In particular, it alerted us to the fact that our website features 16 links that open new windows or frames without a warning. It suggests to indicate such changes of focus to users or allowing them to control the focus change themselves. We have checked the links manually and came to the conclusion that the context in which the links are presented to the users makes it clear to them that clicking the links will lead them to the corresponding websites. Introducing additional alerts or prompts to double-check if a user really wants to switch focus seems rather annoying to us. Even though the tool complained about how we link to other websites, the overall evaluation was still quite positive: This accessibility checker gave us a so-called “Total Compliance Score” of 89%.

Checking irma.app with the axe - Web Accessibility Testing Chrome extension

Finally, we checked irma.app with the axe - Web Accessibility Testing tool. This checker is different from the previous ones because it is a Chrome extension. The result of the analysis with the free version of the browser extension proved to be a detailed and developer-friendly report that allowed us to easily inspect the issues (see screenshot below). Aside from restating previously found issues, the tool provided one additional finding: missing landmarks. In order to address this issue that was overlooked by other tools, we need to explore where to use ARIA Landmarks and where to rely on semantic HTML elements.

As described on Mozilla’s website about ARIA website, ARIA stands for “Accessible Rich Internet Applications”, and consists of a set of attributes that help to make web content more accessible. As demonstrated on W3C’s ARIA Landmarks Example page, ARIA landmarks can, for instance, be used to represent the structure of a web page and to support keyboard navigation. However, as the guidelines on using ARIA by W3C point out, simply adding ARIA attributes everywhere is not the way to go. Instead, if native HTML elements or attributes have the desired semantics and behavior, these are preferred over using ARIA. We believe the guidelines on using ARIA by W3C will serve as a good basis for us to improve www.irma.app.

Checking irma.app ourselves

In addition to testing the website with tools, we want to evaluate it with a variety of users, including users with impairments. However, before we do so, we want to remove all the obstacles and issues that we can identify ourselves. This is why we decided to also explore the website ourselves, in some of the ways that we expect impaired users to use it.

Of course, it is always difficult to place oneself in someone else’s shoes. This is especially true if this person has very different abilities and limitations. However, it cannot hurt to try. Hence, we have tried to access IRMA with a screen reader, simulating how it would be if we had very bad eyesight. When trying to do this, we first noticed that there are many available screen readers. After some initial exploration, we used the Pericles: Text to Speech Screen Reader because of its great ratings and simple interface. To our relief, we found out that the Dutch, German and English versions of the website are read quite well by this reader. If one simply presses play and just listens to the story that is read, one gets a pretty good overview of the app. Also, clicking anywhere allows the user to have the text below the courser read. Yet, listening to the site is not yet perfect. Links are read just like any other text, without any indication that one can follow them to navigate somewhere else. Another issue is that the questions listed in the FAQ section are not read out loud, while the answers are read just fine. This should certainly be fixed soon!

In addition to listening to the website, we tried navigating the irma.app site with the keyboard only. As an article by Marieke McCloskey on the famous blog by the Nielsen Norman Group points out: both experts (“power-users”) as well as people with impairments (e.g., people that have difficulties with fine motor movements and blind users) often navigate websites without using a mouse. Their article provides easy instructions to test how keyboard-friendly a website is. Amongst other things, it suggests navigating through a website step by step with the Tab button to move forward and Shift+Tab to move back. Whereas the general navigation works as expected, we immediately noticed some issues that we can improve: At times, there is no visible feedback about what element is currently selected. For links, the built-in keyboard focus of the browser takes care of visual feedback pretty well: a rectangle indicates where the focus is (see screenshot below). However, when tabbing through non-link elements (such as the FAQs, the language picker, and the buttons that lead visitors to the iOS and Android app store) there is no obvious keyboard focus, which makes navigating quite challenging.

The future of www.irma.app

We started this endeavor of giving IRMA a user-friendly and accessible web presence by reviewing the www.privacybydesign.foundation website. Soon, it became clear that IRMA deserves a dedicated webpage. We have implemented a first version of this site that works well both on mobile devices as well as desktop computers and that features simple and short explanations as well as answers common questions. As such, the new www.irma.app site is already a big step forward and fills an urgent gap in the IRMA ecosystem.

In the first iterations of developing this www.irma.app website, we have done quite a lot to make the site accessible to a broad and diverse group of visitors. Yet, our internal accessibility assessment showed that we have some way to go to make the site even more accessible. Ironically, a feature that we have introduced to make the site accessible to a much broader user group — namely providing the website in various languages — seems to have introduced quite some accessibility issues on other fronts. In particular, the language picker, FAQs and app-store buttons still need some work so they can be easily used by visually impaired users.

Overall, we were quite pleased with the many free tools available to support accessibility assessments these days. For the future, we hope that Stichting Accessibility (who already has offered their support), can support us with identifying the most pressing issues that were not caught by our own review and the free tools.

An aspect that has received rather little attention so far is the usability rather than the accessibility of the website. In this respect, we count on the fact that our website uses a very simple structure, and is based on a wide-spread landing page design pattern. Hence, we expect few issues on that front. However, to validate this expectation, and to ensure the website is really accessible and user-friendly, we plan to conduct a user test with actual users once the above-identified issues have been addressed. Come back and check out this blog to learn about how things turn out!