8  ARIA

8.1 Introduction

Accessible Rich Internet Applications, or ARIA, define ways to make the web more accessible. ARIA provides semantics to non-semantic HTML for those who use assistive technology and makes sense of the interfaces being presented properly, using ARIA role, state, and property. This description is based on this resource. Click here to know more about ARIA

8.2 Workflow

  1. Use tools to check if there are missing ARIA elements.

  2. If there ARIA elements are missing, add them to the HTML file.

Below is a example of missing accessible name of ARIA label

`Issues: X Empty form label’

Code:

<script>
// This script is used to dynamically set the aria-label attribute for elements
document.addEventListener('DOMContentLoaded', function() {
    // Set aria-label for the label element if it is empty
    const label = document.querySelector('label.aa-Label[for^="autocomplete-0-input"]');
    // Check if the label exists and is empty
    if (label && !label.textContent.trim()){
        label.setAttribute('aria-label', 'Search');
    }
}); 
</script>

You can instruct AI to create html command to fix issues.

Prompt: `Please write HTML code to fix the missing ARIA (or other issues). And attach with issues found by accessibility check tools.’

  1. Note: If you use Quarto to create the content, you can put the .html file in yaml.
format:
  html:
    include-in-header: 
       - aria.html

8.3 Resources

To learn more about ARIA and ARIA label, here are some resources might be helpful: