Accessible Components with New ARIA Support

Code an example where React components are made more accessible with the new ARIA attributes support, improving UX for assistive technologies.

import React from 'react';

function AccessibleButton() {
  return (
    <button aria-label="Close" aria-describedby="descriptionClose">
      <span aria-hidden="true">&times;</span>
    </button>
  );
}

export default AccessibleButton;

This React component creates an accessible button. The `aria-label` attribute provides an accessible name for the button, while `aria-describedby` associates the button with additional descriptive text. The `span` inside the button is hidden from assistive technology using `aria-hidden` because it is decorative.

/* Extra descriptive text for the button, potentially hidden visually but available to assistive technologies */
#descriptionClose {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

CSS to visually hide the text that describes the accessible button, while keeping it accessible to screen readers. The off-screen position technique is used here.

<div id="descriptionClose">
  Closing this window will discard any unsaved information.
</div>

HTML markup for additional descriptive text referenced by `aria-describedby` in the AccessibleButton component. This description provides context to the button action, which can be read by screen readers.