[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 09:00:47 时间
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>
相关文章
- javaer to go之byte类型转换
- 记录一次在生成数据库服务器上出现The timeout period elapsed prior to completion of the operation or the server is not responding.和Exception has been thrown by the target of an invocation的解决办法
- org.hibernate.PropertyAccessException: Null value was assigned to a property of primitive type setter of com.*.Paper.totalTime
- Face Alignment by Coarse-to-Fine Shape Searching--解析
- [Algorithm] How to use Max Heap to maintain K smallest items
- [Transducer] Step by Step to build a simple transducer
- [Tools] Add a Dynamic Tweet Button to a Webpage
- [Functional Programming 101] Crocks.js -- when to use map and when to use chain?
- [D3] Add image to the node
- [React Intl] Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers
- [Javascript] Intro to Recursion
- [Heroku + MySQL Workbench] Remote connection to Heroku ClearDB by using MySQL Workbench
- [Typescript] Force to valid the type by using Valid branded type
- [Tools] Region commands to collapse the code by group
- [Angular] Upgrading to RxJS v6
- [RxJS] Resubscribing to a Stream with Repeat
- UserWarning: XXX is writable by group/others and vulnerable to attack when used with get_resource_filename.
- DOCX to PDF conversion is successfully done document builder
- Step by Step to download a material from ERP via request download
- 成功解决WARNING: You do not appear to have an NVIDIA GPU supported by the 430.34 NVIDIA Linux graph
- HTTP请求转发那些事:你可能不知道的Hop-by-hop Headers和End-to-end Headers
- DescriptionResourcePathLocationType Project configuration is not up-to-date with pom.xml. Select: Maven->Update Project... from the project context menu or use Quick Fix.spark-MTline 1Maven Co
- 【K8S】Docker向私有仓库拉取/推送镜像报错(http: server gave HTTP response to HTTPS client)
- Ubuntu18.04报错:make[1]: *** No rule to make target armv4-mont.o, needed by build-msm8916/lk. Stop.
- How to gathering Database Statistics in Oracle
- 【异常】MyBatis提示TooManyResultsException: Expected one result (or null) to be returned by selectOne()
- pstack: Input/output error failed to read target解决