WCAG - Aria Attributes

[milospp]

VIVO GitHub issue
VIVO PR

What's new?

1. Added aria-expanded

• Used on toggleable UI elements (e.g. filter/search dropdown).
• Why: Improves accessibility by exposing the current expanded/collapsed state to screen readers.

2. Improved aria-label usage

• Added descriptive labels for icon-only buttons (e.g. URI and QR code buttons).
• Why: Provides meaningful context for assistive technologies where visual labels are missing.

3. Added/verified aria-labelledby

• Linked input fields to their corresponding visible labels.
• Why: Ensures screen readers correctly associate inputs with their labels, improving form usability.

4. Introduced aria-live="polite" regions

• Used for dynamic content updates (e.g. search results or list updates).
• Why: Allows screen readers to announce updates without interrupting the user’s current task.

5. Ensured proper use of aria-hidden="true"

• Applied to purely decorative icons (e.g. images inside buttons where text alternatives already exist).
• Why: Prevents redundant or confusing announcements from screen readers.

6. Fixed and improved role attributes

• Defined semantic roles like region and list where appropriate. Removed redundant role="input" in input fields
• Why: Improves the structure of the page for assistive technologies.

7. Improved image alt attributes

• Ensured all meaningful images have descriptive alt text.
• Why: Provides equivalent information for users who cannot see images.

8. Added aria-current="page" in pagination

• Used to indicate the currently active page or navigation item.
• Why: Helps screen readers and assistive technologies understand the user’s current location in the app/navigation.

9. Added aria-atomic

• Applied to dynamic regions where updates should be read as a whole.
• Why: Ensures screen readers announce the entire updated content, not just the changed part (useful for status messages or result summaries).

10. aria-selected

• Used for selectable items (tabs, list items, options).
• Why: Communicates which item is currently selected in a group.

How should this be tested?

Use a screen reader to verify accessibility behavior.
On macOS, enable VoiceOver with Command + F5

Reviewers' expertise

Candidates for reviewing this PR should have some of the following expertises:

1. HTML, CSS, JavaScript
2. Natural language knowledge
   1. English
   2. German
   3. Spanish
   4. French
   5. Portuguese
   6. Russian
   7. Serbian