Accessibility fixes in the core code

Hi all,

I was wondering if there were any plans to make the reactive web code AA compliant? We are able to obtain the basics (correct headers, alt tags etc) but the finer details such as relating error messages to input fields and using various aria attributes are proving difficult.

If there are no plans, is there a way of refining the code our end to improve the UX?

Thanks

Hi Jenni,

Help me understand what have you already explored, documentation or articles on OutSystems and accessibility so I can try to find the most relevant assets.

For example we had a very interesting tech talk on our development conference last year but it might be to light for what you need.

Nevertheless here is the link.

Best Regards


Hi Jeni,

In that case can you be more specific?

What do you mean by "the finer details such as relating error messages to input fields" and "using various aria attributes"?

Could you create a simple example with what you're trying to achieve and attach it here?

Best Regards

I'm using reactive web version. Some of the issues I'm facing are:

The header tags appear as divs, with spans inside them. I would expect them to use proper h tags <h1> to <h6>.

The labels do not have for attributes linking them to their corresponding input fields.

The error messages have nothing to relate them to the input fields they are highlighting errors for.


These are just a few basic issues, not withstanding the more intricate problems I have found around aria tags not being utilised.

Hi Jenni,


Thanks for the feedback and I'm sorry you found some constraints with this!


First, let me make a quick reminder that we released a lot of improvements for Accessibility, on OutSystems UI 2.3.0 and OutSystems UI Templates Reactive 1.1.10. This should solve the AA compliance of all OutSystems UI patterns and layouts, related with html tags, keyboard navigation and aria attributes.


You can also check our Reactive Style Guide Preview, for some examples.


As for some of your more specific questions:

For the header tags, you should use the HTML widget and set it to the html tag you need.


For the label, you can do that with the InputWidget parameter, and bind it with the input ID.


As for the error messages, I suppose you're referring to mandatory input fields in a Form validation. As you may know, accessible input validations aren't easy to solve. OutSystems already adds the required attribute on those, but there's some improvements we can't define by default, as they're dependent on the type of data you're using on them. Check the W3 Validating Input tutorial for further information on this. 


Hope it helped, and please let me know if you have further feedback on this! 


Best regards,

Bernardo Cardoso