Accessibility ARIA labels - ucsf-ckm/ucsf-library-ux-and-web-documentation GitHub Wiki

ARIA - Accessible Rich Internet Applications

  • ARIA can enhance accessibility in ways that plain HTML cannot
  • It can be extra complicated if you're not coding your whole site by hand (e.g. using a CMS like Drupal or WordPress, using plugins like Elementor, etc.) because you will need to determine if/how ARIA roles, properties, and states can be used

Adding a label for screen readers

aria-labelledby or aria-label?

  • You should only use aria-label when it's not possible to have the label visible on screen. See details
  • use aria-labelledby if the text is visually on-screen somewhere and this form is preferable. It can be used for multiple links? See details

Elementor buttons and ARIA labels

There are ways to add custom attributes to Elementor widgets. See reference links at the end of this article.

This solution adds clarity, since someone using a screen reader cannot see the context of the Learn More button. With the ARIA label present, the screen reader will say "Learn more about using preprints to share your work".

aria learn more

To add such a label

  1. select the button to edit it
  2. click the cog for the link field to reveal more options
  3. add the ARIA attribute using this syntax aria-label|Learn more about using preprints to share your work

Notes as of Dec. 2020

  • the method adding the attribute to Advanced tab for whole widget (instead of the link) does not pass the Siteimprove accessibility check
  • you cannot add a custom attribute to a link created within a Text Editor widget. Custom attributes are only available for widgets that specifically have a link field.

Notes as of July 2022

  • Siteimprove now says: Visible label and accessible name do not match
  • that means it doesn't like a button having basic text and the aria being more descriptive

Helpful Elementor references