Easily removed HTML5 article tags found lurking in form

I conducted manual accessibility testing of a registration form in September 2018. Every step of the member registration form had HTML5 article tags. On the very first step, the screen reader announced an article tag. This announcement confused our participant! Sorry Jamie. A webform should not be identifying as an article. It is a form for input.

This session video is queued up to 7 minutes 52, when <article> tag announcement causes confusion and irritation.

How severe was this usability issue? I had to rate the severity of the issue using something more robust than intuition or gut feel.

Prioritising usability problems

In How to prioritise usability problems, the author outlines a decision tree. Using the decision tree, we can classify any usability issue. Answering 3 questions leads to a rating of low, medium, serious, or critical. I rated this issue as medium severity.

Three questions in a decision tree to define 4 severity levels of usability problems
  1. The article tag announcement occurred before the participant began filling in the form. It was not during a critical or frequent (sub-) task. So, the problem did not occur on a red route, also known as a happy path.
  2. The announcement was not difficult for users to overcome. In virtual/browse mode the screen reader intercepts presses of “the up/down keys [to] move focus to the previous/next line”.
  3. On every step the article tag was announced, before any pre-amble text or form field. This issue occurred persistently throughout the form wizard.

So, I rated this issue as a medium severity.

Dr David Travis says we should interpret a medium severity problem as one that “will make some customers feel frustrated or irritated but will not affect task completion.” As shown in the video above, our participant is confused on the first occurrence of an article tag. After reoccurrences on subsequent steps, the confusion grows to irritation.

Article tags remediation

Back in February this year, I worked with our developer to introduce HTML5 input types to the form. We did this to improve the experience of completing the form on mobile devices.

Although it was a trivial code fix in the template, how article tags got in our form wizard remains a mystery. Still, we cannot pinpoint how an HTML5 article tag found its way into the templates.

What is more, I am yet to discover an automated testing tool that could alert us to the presence of this undesirable combination.

Manual testing is essential to learning

Once again, I find myself recommending The Importance Of Manual Accessibility Testing. Thanks to manual testing, I learned about these issues that can ruin webform accessibility. Classifying usability issues with a decision tree is quick and easy.

Further reading