[ARIA] Define a Live Region to Ensure Dynamic Changes are Announced by Assistive Technologies
to by are Dynamic Live define region changes
2023-09-14 08:59:14 时间
When dynamic changes occur to content on a page they are usually visually apparent to users who can see the page but may not be made apparent to users of assistive technologies. ARIA live regions provide a way to make those dynamic content changes able to be announced by assistive technologies.
ARIA attributes
aria-live
: the priority with which updates are readaria-atomic
: whether the screen reader should always present the live region as a whole, even if only part of the region changesaria-relevant
- takes a list of what type of changes should be announced
Resources
- https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
- https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-live
- https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-atomic
- https://www.w3.org/WAI/PF/aria-1.1/states_and_properties#aria-relevant
- http://html.cita.illinois.edu/nav/form/aria/index.php?example=3
<div id={errorId} className="invalid-feedback" aria-live="polite" aria-atomic="true" aria-relevant="additions text removals" > {!isValid ? errorText : ''} </div>
相关文章
- Redis集群部署一直卡在Waiting for the cluster to join ......(Redis集群总线配置)
- 【MySQL】in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by
- [Vue-rx] Switch to a Function which Creates Observables with Vue.js and Rxjs
- [D3] Convert Input Data to Output Values with Linear Scales in D3
- [Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks
- 论文阅读 | A Curriculum Domain Adaptation Approach to the Semantic Segmentation of Urban Scenes
- Mybatis TooManyResultsException: Expected one result (or null) to be returned by selectOne()
- 【MySQL】in GROUP BY clause; this is incompatible with sql_mode=only_full_group_by
- [Typescript] Use Function Overloads to Avoid Returning undefined
- [React Recoil] Use selectors to calculate derived data based on state stored within a Recoil atom
- [D3] Convert Input Data to Output Values with Linear Scales in D3
- Caused by: org.gradle.api.internal.plugins.PluginApplicationException: Failed to apply plugin[id:xxx.xxx.xxx]
- OLE DB provider "SQLNCLI11" for linked server "dbLink01" was unable to begin a distributed transac
- How to find unit test class by code
- How to resolve empty table CRMATAB issue in ERP gt_crmtab[]
- how to get bsp view page by generated class name
- update empty content to text instance - where is B mode changed to D by frame
- 隐藏GridControl的“Drag a column header here to group by that column”
- Fast enumeration variables cannot be modified in ARC by default; declare the variable __strong to al
- You currently don‘t have access to this membership resource. To resolve this issue, agree to the lat
- Android Gradle plugin requires Java 11 to run. You are currently using Java 1.8.
- Android 解决CLEARTEXT communication to “ “ not permitted by network security policy
- ORA-06553:PLS-306:wrong number or types of arguments in call to ''
- How_to_setup_Qt_and_openCV_on_Windows
- Solved Unable to copy the source file ./installer/services.sh to the destination file /etc/vmware-t
- Caused by: java.net.ConnectException: Call From master/192.168.199.130 to master:9000 failed on connection exception: java.net.ConnectException: Connection refused; For more details see: http://wiki.
- kubernetes 坑人的错误!!!Unable to connect to the server: x509: certificate signed by unknown authority
- WPF中的动画——(二)From/To/By 动画
- Mol2Image: Improved Conditional Flow Models for Molecule to Image Synthesis