accessibility

Implement ARIA attributes and keyboard navigation for UI5 Web Components.

1.8k|284|Updated Jan 24, 2019

Search Tags:#accessibility #screen reader #keyboard navigation #web components #aria #ui5

Ready to run

npx skills add https://github.com/UI5/webcomponents --skill accessibility-ui5

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: accessibility
Source: https://github.com/UI5/webcomponents/tree/main/skills/accessibility
Command: npx skills add https://github.com/UI5/webcomponents --skill accessibility-ui5

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers understand and implement accessibility features for UI5 Web Components, ensuring applications are usable by everyone, including those with disabilities.

Core Features & Use Cases

ARIA Attributes: Learn how to use accessibleName, accessibleNameRef, accessibleDescription, accessibleRole, and accessibilityAttributes to provide semantic meaning.
Keyboard Navigation & Screen Reader Support: Understand how UI5 Web Components handle these out-of-the-box and how to enhance them.
Use Case: A developer needs to make an icon-only button accessible to screen readers. They can use the accessible-name property to provide a descriptive label.

Quick Start

Use the accessibility skill to learn how to set an accessible name for an icon-only button.

Frequently Asked Questions about accessibility

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I make UI5 Web Components accessible for screen readers?▼

Make UI5 Web Components accessible for screen readers by using built-in ARIA attributes like `accessibleName`, `accessibleNameRef`, and `accessibleDescription` to provide semantic meaning to custom elements.

How do I add an accessible name to an icon-only button in UI5?▼

Add an accessible name to an icon-only button in UI5 by setting the `accessible-name` property on the component, providing a descriptive text label that screen readers can announce to users.

Does UI5 handle keyboard navigation out of the box?▼

UI5 Web Components handle keyboard navigation and screen reader support out of the box, allowing developers to enhance default accessibility behaviors further using ARIA attributes for custom enterprise applications.

What ARIA attributes are available for UI5 Web Components?▼

Available ARIA attributes for UI5 Web Components include `accessibleName`, `accessibleNameRef`, `accessibleDescription`, `accessibleRole`, and `accessibilityAttributes` to ensure proper semantic meaning and label-input relationships.

When do I need to set accessibility attributes in enterprise web components?▼

Set accessibility attributes in enterprise web components when customizing standard elements, such as providing descriptive labels for icon-only buttons or modifying roles, to ensure applications are usable by everyone.