Accessibility fixes

While building the Apply for Design service the team ensure the services can be used by all citizens of the United Kingdom. No user should be excluded on the basis of disability. To do so would breach the Equality Act 2010. The service must also comply with any other legal requirements, As a starting point, your service should aim to meet Level AA of the Web Content Accessibility Guidelines (WCAG) 2.0.

When we tested the service at http://www.digitalaccessibilitycentre.org/, we had a number of issues raised which we have now reviewed and fixed at source. These fixes have been applied to our https://github.com/intellectual-property-office/HtmlHelpers ensuring we have a high level of accessibility in our common library for generating HTML mark up.

During testing on JAWS we found that although we were using correct accessibility tags of a fieldset and legend we were including to much hint text inside the legend. The additional text from the page has been pulled into the label meaning that the label is extremely long, as it includes such additions as how to answer the question. This is confusing for screen reader users as it is difficult to know which field the user is selecting. A shorter fieldset and legend for example, question and answer only will avoid confusion.

We chose to change our markup to place hint text outside the legend to fix this issue. E.g.

<fieldset>

<legend>

<span class=”form-label-bold text”>Do you wish to defer publication of your design?</span> </legend>

<span class=”form-hint text”>Deferring publication limits your protection to the date of filing only.</span>

<span class=”form-hint text”>The majority of designs applications are submitted without being deferred.</span>

A very small change but without testing this with real users this would not have  been picked up as an issue for users that use JAWS software in this way.

The video below gives a great demonstration of how this small change gives the users a much better experience:

Leave a Reply

Your email address will not be published. Required fields are marked *