4.1.2: Name, Role, Value

Use Case 1: Form Fields

Example: A form field for entering an email address.

Details: To ensure accessibility, every form field should have an associated label that clearly describes its purpose. This can be achieved by using the <label> element. The label should be positioned close to the input field it describes and should be programmatically associated with the field using the for attribute.

How to Implement:

<label for="email">Email Address:</label>
<input type="email" id="email" name="email">
            

How to Test: Use a screen reader to navigate to the form field and check if the screen reader correctly announces the label and purpose of the field. Ensure that the label is read aloud when the field receives focus.

Use Case 2: Buttons

Example: A "Submit" button on a form.

Details: Buttons should have descriptive text that indicates their action. For buttons that only have an icon, use the aria-label attribute to provide an accessible name.

How to Implement:

<!-- Text Button -->
<button type="submit">Submit</button>

<!-- Icon Button -->
<button type="button" aria-label="Close"><span aria-hidden="true">×</span></button>
            

How to Test: Ensure the button has a clear label that is announced correctly by assistive technologies. Verify that the role of the button is correctly identified using a screen reader.

Use Case 3: ARIA Roles

Example: A custom dropdown menu using ARIA roles.

Details: Custom widgets like dropdown menus may not have native HTML elements. Use ARIA roles to define the structure and behavior of these widgets. This includes roles such as role="menu" and role="menuitem".

How to Implement:

<div role="menu">
  <div role="menuitem" tabindex="0">Option 1</div>
  <div role="menuitem" tabindex="-1">Option 2</div>
  <div role="menuitem" tabindex="-1">Option 3</div>
</div>
            

How to Test: Verify that the screen reader correctly announces the role of the menu and the items within it. Ensure that all interactive elements have identifiable roles and that users can navigate the menu using a keyboard and screen reader.

Use Case 4: Dynamic Content Updates

Example: An alert message that appears after form submission.

Details: Use ARIA live regions to announce dynamic content changes to screen reader users. The aria-live attribute can be set to "polite" or "assertive" depending on the urgency of the update.

How to Implement:

<div aria-live="polite">Your form has been submitted.</div>

<script>
  var alertBox = document.createElement('div');
  alertBox.setAttribute('aria-live', 'polite');
  alertBox.textContent = 'Form submitted successfully!';
  document.body.appendChild(alertBox);
</script>
            

How to Test: Ensure that the screen reader announces the appearance of the new content and conveys its purpose. Test the dynamic update with various screen readers to confirm the announcement.

Use Case 5: Interactive Widgets

Example: A slider for adjusting volume.

Details: Interactive widgets like sliders should provide information about their role, current value, and how to interact with them. Use ARIA roles and properties such as role="slider", aria-valuemin, aria-valuemax, and aria-valuenow.

How to Implement:

<div role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" tabindex="0" aria-label="Volume Control"></div>

<script>
  var slider = document.querySelector('[role="slider"]');
  slider.addEventListener('keydown', function(event) {
    var value = parseInt(slider.getAttribute('aria-valuenow'));
    if (event.key === 'ArrowUp') {
      value = Math.min(value + 1, 100);
    } else if (event.key === 'ArrowDown') {
      value = Math.max(value - 1, 0);
    }
    slider.setAttribute('aria-valuenow', value);
  });
</script>
            

How to Test: Ensure that the screen reader can correctly identify the role of the slider, its current value, and the instructions for interacting with it. Verify that users can interact with the slider using keyboard controls and that the updates are announced by screen readers.

Use Case 6: Custom Checkbox

Example: A custom styled checkbox implemented with a <div> element.

Details: Custom checkboxes need ARIA roles and states to communicate their functionality and current state to screen readers.

How to Implement:

<div role="checkbox" aria-checked="false" tabindex="0"></div>

<script>
  var checkbox = document.querySelector('[role="checkbox"]');
  checkbox.addEventListener('click', function() {
    var isChecked = checkbox.getAttribute('aria-checked') === 'true';
    checkbox.setAttribute('aria-checked', !isChecked);
  });
</script>
            

How to Test: Verify that the screen reader announces the checkbox as a checkbox and indicates its checked state. Test the interaction to ensure the state changes are properly announced.

Use Case 7: Tabbed Interface

Example: A set of tabs for navigating between different sections of content.

Details: Tabs should have appropriate ARIA roles and properties to indicate their purpose and state.

How to Implement:

<div role="tablist">
  <div role="tab" aria-selected="true" tabindex="0">Tab 1</div>
  <div role="tab" aria-selected="false" tabindex="-1">Tab 2</div>
</div>
<div role="tabpanel">Content for Tab 1</div>
<div role="tabpanel" hidden>Content for Tab 2</div>

<script>
  var tabs = document.querySelectorAll('[role="tab"]');
  tabs.forEach(function(tab) {
    tab.addEventListener('click', function() {
      var selected = document.querySelector('[aria-selected="true"]');
      selected.setAttribute('aria-selected', 'false');
      selected.setAttribute('tabindex', '-1');
      tab.setAttribute('aria-selected', 'true');
      tab.setAttribute('tabindex', '0');
      // Update tab panels
      var panels = document.querySelectorAll('[role="tabpanel"]');
      panels.forEach(function(panel, index) {
        panel.hidden = index !== Array.prototype.indexOf.call(tabs, tab);
      });
    });
  });
</script>
            

How to Test: Ensure that the screen reader can correctly identify the tabs, their selection state, and that users can navigate between tabs using keyboard controls. Verify that the associated tab panel content is updated accordingly.

Use Case 8: Modal Dialogs

Example: A modal dialog that appears over the main content.

Details: Modal dialogs should have roles and properties to indicate their purpose and control focus.

How to Implement:

<div role="dialog" aria-labelledby="dialogTitle" aria-modal="true">
  <h2 id="dialogTitle">Dialog Title</h2>
  <p>Dialog content goes here.</p>
  <button aria-label="Close" onclick="closeDialog()">Close</button>
</div>

<script>
  function closeDialog() {
    var dialog = document.querySelector('[role="dialog"]');
    dialog.style.display = 'none';
    document.querySelector('[aria-haspopup="dialog"]').focus();
  }
</script>
            

How to Test: Verify that the screen reader announces the dialog when it appears and that focus is managed correctly. Ensure users can navigate within the dialog and close it using keyboard controls.

Use Case 9: Navigation Landmarks

Example: Navigation landmarks for main, header, and footer sections.

Details: Use ARIA landmarks to define important regions of the page to aid in navigation.

How to Implement:

<header role="banner">Header content</header>
<nav role="navigation" aria-label="Main Menu">Main navigation</nav>
<main role="main">Main content</main>
<footer role="contentinfo">Footer content</footer>
            

How to Test: Use a screen reader to navigate the page and ensure that each landmark is correctly identified and announced. Verify that users can use landmarks to navigate quickly between different sections of the page.

Use Case 10: Accessible Tables

Example: A data table with row and column headers.

Details: Use appropriate HTML elements and ARIA properties to define table structure and relationships.

How to Implement:

<table>
  <caption>Sales Data</caption>
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Q1</th>
      <th scope="col">Q2</th>
      <th scope="col">Q3</th>
      <th scope="col">Q4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Widget</th>
      <td>100</td>
      <td>150</td>
      <td>200</td>
      <td>250</td>
    </tr>
  </tbody>
</table>
            

How to Test: Use a screen reader to navigate the table and ensure that headers are correctly announced and associated with the corresponding data cells. Verify that users can navigate the table structure efficiently.