Aria-describedby

aria-describedby creates a relationship between an element and additional descriptive text located elsewhere on the page. Unlike aria-label which provides a short name, aria-describedby references longer descriptions, help text, or error messages that provide context without cluttering the element's accessible name.

This is particularly useful for form fields where you have a label, the input, and additional help text or error messages. aria-describedby lets screen readers announce all the related information together, giving users complete context about what they're interacting with.

The property takes an ID reference to the describing element, allowing assistive technology to find and announce the additional information automatically.

Form Fields with Help Text: ```html Password

Fields with Error Messages: ```html Email

Complex Widgets: ```html Submit

aria-describedby vs aria-label: - aria-label: Short, essential name (e.g., "Close dialog") - aria-describedby: Longer, contextual description (e.g., "This will close the dialog and lose unsaved changes")

aria-describedby vs aria-labelledby: - aria-labelledby: Primary identifying text (like a label) - aria-describedby: Additional helpful information (like help text or instructions)

Multiple References: ```html ```

When to Use Each: - Use aria-label for simple, essential names - Use aria-labelledby for complex or multi-part labels - Use aria-describedby for additional context, help, or error information

Keep Descriptions Relevant: Only reference text that's actually helpful to users. Don't include decorative or redundant information.

Update Dynamically: When descriptions change (like error messages), ensure the aria-describedby reference remains accurate.

Test With Screen Readers: Verify that descriptions are announced at appropriate times and in logical order.

Avoid Overuse: Not every element needs aria-describedby. Use it when the additional context genuinely helps users understand or use the element.

Consider Reading Order: Descriptions should be announced after the element's name but before its value or state.

WebAbility automatically manages these relationships, ensuring that form fields and complex widgets provide appropriate context to assistive technology users.