Aria attribute are technical specifications provided by the WAI-ARIA standard for accessible dynamic and interactive Web content. Some basic components of the Mini Program architecture support aria attribute, which can meet the accessibility needs of visually impaired users.
Limits
Mini Program components that support aria attribute include the following: view, text, icon, button, label, checkbox, switch, and image.
Usage
Common ARIA attribute
Role
The core of aria attribute is the role attribute, which represents the semantic role of a component. For example, when the role attribute is set to img, screen reader software will read out image when the component is focused. When set to button, screen reader software will read out button when focused.
<view class="button" onTap="defaultTap" role="button" aria-label="Confirm button"
>Confirm button</view
>In this example, the button is implemented with a view component. The role attribute sets this view component to express the semantics of a button. When a screen reader software focuses on this view component, it will identify that this view component is a button and read out Button Confirm button. Mini Programs use AXML syntax, which lacks many semantic tags available in HTML, such as H1, article, header, etc. These tags work with screen reader software to provide more semantic information to users. In Mini Programs, developers can use the role attribute to enhance the semantics of view components to achieve the same effect as developing with HTML tags. For example, HTML sample code for an article:
<article>
<h1>Article Title</h1>
<h2>Chapter One</h2>
<p>First paragraph...</p>
</article>For Mini Programs, although there are no components corresponding to article, H1, H2, and other tags, it can achieve the same effect through view components with role attribute. For example:
<view role="article">
<view role="heading" aria-level="1">Article Title</view>
<view role="heading" aria-level="2">Chapter One</view>
<view>First paragraph...</view>
</view>When a screen reader software focuses on the view component of Article Title, it will read out Article Title Heading 1. When focusing on the view component of Chapter One, it will read out Chapter One Heading 2. Heading in Heading 2 is the semantic information provided by the role, and 2 is set by the aria-level attribute. The aria-level attribute belongs to aria attribute, providing additional information. In this example, aria-level expresses the heading level.
Some role attribute values need to be used with aria attribute to take effect. For example, when using role="img", you must configure the aria-label attribute. Otherwise, screen reader software will ignore the role attribute.
Aria-label
aria-label can replace the text content within a component, for example:
<view aria-label="aria-label content">Component text content</view>When focused here, screen reader software will read out aria-label content, while the original text content in the component will be ignored. aria-label can also be used with components without text content to represent the text information attached to the component, which the system will automatically read out when focused. For example, for the image component, you can use aria-label to add descriptive information to the image.
<image src="{{src}}" role="img" aria-label="Landscape painting" />aria-label is also used for view components with role attribute, for example:
<view
style="background-image:url(./bg.jpg);"
role="img"
aria-label="Landscape painting"
></view>For components with strong visual effects (such as image), simply let screen reader software read out the semantics is not very meaningful for visually impaired users. By providing text descriptions of the content through the aria-label attribute, the read-out content becomes more complete and effective.
Aria-labelledby
Some components are associated with other components and need to be read together to express a complete meaning. For example, the checkbox component often requires a text or view component to carry the text content selected by the checkbox. In this case, you can use the aria-labelledby attribute to associate the two components. After reading the content of the current component, screen reader software will continue to read the content in the component pointed to by aria-labelledby.
<label>
<checkbox aria-labelledby="content" />
<text id="content">Checkbox content</text>
</label>After the checkbox component in the example gains focus, screen reader software will read out Not selected Checkbox content Checkbox. The value of aria-labelledby is the id attribute of another component. The component id attribute must be unique. Do not set duplicate id for components when rendering lists.
Aria-checked
aria-checked indicates whether components such as checkbox and switch are selected. After focusing on these components, screen reader software will read out the selected state of the component Not selected or Selected, telling users the current selected state of the component. Mini Program native components have this attribute pre-built in, for example:
<label>
<checkbox aria-labelledby="content" value="{{checked}}" />
<text id="content">Checkbox content</text>
</label>If you are using custom components to develop checkbox, switch, and other components, you need to use the aria-checked attribute to allow screen reader software to obtain the component's selected state. For example, AXML sample code for a custom checkbox component:
<view
class="my-checkbox"
role="checkbox"
onTap="handleTap"
aria-checked="{{checked}}"
aria-labelledby="myCheckboxText"
>
<icon type="{{checked ? 'success' : 'clear'}}" size="12" />
<text id="myCheckboxText">
<slot> </slot>
</text>
</view>In the example, the value of the my-checkbox component's role attribute is set to checkbox, and the component's selected state checked is assigned to the aria-checked attribute. When a screen reader software focuses on this custom component, it can read out the selected information of the component. This attribute also applies to components such as switch and radio.
Aria-expanded
aria-expanded represents the expansion information of collapsible components. It is suitable for components with collapsible functionality, such as collapsible menus, dropdown menus with collapsible features, etc. Using the aria-expanded attribute allows screen reader software to read out the expanded state of the component.
Other aria attribute
To learn more about aria attribute, see WAI-ARIA.
Related information
The term accessibility comes from the English word "Accessibility," which means that anyone (whether able-bodied, disabled, elderly, or children) can use or access at any time and in any scenario. Standards organizations (such as W3C, WAI) have established standards for accessibility in the Web domain. Alipay mini programs provide accessibility features based on existing standards.
Accessibility standards
Web Content Accessibility Guidelines (WCAG) are a set of guiding principles and best practices developed by accessibility experts, aimed at systematically explaining the meaning of accessibility and best practices.
Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-ARIA) is a technical specification that provides accessible dynamic and interactive Web content for people with disabilities. It defines methods for browser, media player, assistive technology developers, and Web content developers to achieve broader cross-platform accessibility.
The accessibility features of Mini Programs support some attribute of WAI-ARIA. Developers can use the best practices summarized in WCAG to develop Mini Programs that are more accessible to people with accessibility needs.
Enable visual accessibility features
iOS and Android systems provide visual accessibility features, offering screen reading functionality for blind or visually impaired users, which can read out the content that users touch, select, or activate.
iOS: Go to Settings > General > Accessibility > VoiceOver to enable the VoiceOver feature.
Android: The screen reading feature in Android systems is called TalkBack. Simply enable it to use. (The location to enable TalkBack varies across different Android phone brands. Please refer to the help manual corresponding to your phone to find how to enable the TalkBack feature.)
On phones with voice screen reading enabled, when the screen reading function focuses on a Mini Program component, it will read out the content of the component.