Adding hint/help text
Adding an error
Note: The alert must be structured as below to function properly in VoiceOver, with the alert text nested inside the
When there is no hint or alert
aria-describedby with a uniqueID that doesn’t exist on page yet will generate errors in automated syntax checking tools.
If it’s not possible to remove the attribute, there are ways to avoid the error flag.
Option 1: Leave
aria-describedby="" empty until the hint exists (preferred)
This is preferred because the DOM is cleaner.
Option 2: Leave the empty hint element in the DOM
This technique shouldn’t have any significant side effects, but does leave surplus elements in the DOM which is gross.
Browser + screenreader quirks
- Screenreaders do not implement alerts uniformly and must be tested
- Just because an alert pattern works in one screenreader doesn’t mean it will work in all three
- The element referenced by the
aria-describedbyattribute cannot use the
role="alert"attribute (see example above for workaround).
- NVDA will read the alert twice if it appears while the input is in focus: once from the
role="alert"being injected and from the
- NVDA needs a fraction of a second to catch up with changes in the DOM, use a
setTimeoutto delay displaying the alert