HTML5 article tags on a form removed

While manual accessibility testing a form wizard, HTML5 article tags were announced by the screen reader. This confused our participant on every step!

During manual accessibility testing of a form wizard in September 2018, HTML5 article tags were announced by the screen reader. This confused our participant on every step of the form! Sorry Jamie.

Video queued up at 7 minutes 52 where <article> tag announcement causes confusion and irritation.

Prioritising problems

Using the three question decision tree described in How to prioritise usability problems, I was able to classify this issue as medium severity.

Three questions in a process diagram to define four severity levels of usability problems
  1. The article tag announcement wasn’t during a critical or frequent (sub-) task, so it’s not on a red route.
  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”. (Quote from Léonie Watson on Understanding screen reader interaction modes.)
  3. The article tag was announced on every step, before pre-amble text or any form field. Because this issue occurred persistently throughout the wizard, I rated it 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.” The video from our test session above illustrates minor confusion on the first occurrence leading to irritation after repeated occurrences on every subsequent step of the form wizard.

Must do manual testing to learn

It was a trivial code fix in the template, a task resolved in our late-November deploy. How did article tags get in our <form> wizard in the first place? Back in February this year I worked with our developer to introduce HTML5 to improve completing the form on mobile devices. Still we can’t pinpoint how article tags found their way into the templates. I have not discovered an automated testing tool that would’ve alerted us to the presence of this undesirable combination. Again I find myself highly recommending The Importance Of Manual Accessibility Testing. Without manual testing, we wouldn’t have learned about this and many other issues that harm accessibility of web forms.

1 reply on “HTML5 article tags on a form removed”

Comments are closed.