Hey guys,
Does anyone have any advice on best practices for using ARIA labels in Evolve?
Any help here would be greatly appreciated.
@hbailey - do you have any resources on this?
Cheers, Cath
Hey Cath!
Based on feedback from an accessibility auditing org, my main takeaway was to use them as sparingly as possible. It’s tempting to use ARIA labels to try to describe everything but in the majority of cases they can be overkill because they can generate quite a lot of screenreader ‘noise’ (over-explaining how to do things). You can actually make the user experience for a screenreader user worse by over-explaining things with ARIA.
E.g. An action button with the text ‘show me something’ will be read to a screenreader as ‘button: show me something’ without an ARIA label - which is plenty to be able to use it.
The org I worked with even suggested removing the default ARIA text found in the globals for submit and show feedback buttons because this is already obvious from the text labels inside those buttons which is read effectively by a screenreader.
You might consider using them if you’re using a component in a non-standard way, or using a component that isn’t technically ‘accessible’ like the infographic. While jamming AIRA text in it doesn’t guarantee to make these components accessible, if your specific use-case satisfies the wide range of other accessibility criteria, that might be the thing that ultimately makes sense of it for a screen reader user.
Goes without saying but best thing to do is go through the course with a screenreader and consider whether it’s easy enough to navigate without the ARIA labels or whether it needs some extra context through ARIA to make sense of it.
Hope that helps, I’m sure others have some suggestions too!
2 Likes
Hi @Cath_Ellis - as a rule of thumb: if an ARIA label field has been pre-populated by Evolve then it’s because it’s important to the accessibility functionality that it has a value set.
If it hasn’t been pre-populated, then you probably don’t need to do anything with it unless you have a particular need to.
The main exception to this rule would be if you doing anything like creating an icon-only button in the course, naturally that will need to have an ARIA label.
The other exception is this:
That’s 100% accurate. I need to update Evolve to remove those default values cause they really don’t need to be there.
2 Likes
One other one worth mentioning: some of the question components - MCQ for example - have a field called Answers Group ARIA Label.
The purpose of this ARIA label is to ensure that the learner always has some context for what the MCQ radio group is for, even if they are navigating to it in some way that means they don’t navigate past the component title/body/instruction text.
If you don’t fill this out it will automatically use the display title/body text/instruction text to label the radio group - so it will always function… but you might decide that is far too verbose - in which case you can use that field to add a label that is more succinct.
3 Likes
This has been done. I also completely removed the setting Global > Buttons > Disabled ARIA label since there’s no good reason to use that at all.
3 Likes
