Accessibility"

From Documentation
Line 6: Line 6:
 
  Since 9.5.0
 
  Since 9.5.0
 
{{ZK EE}}
 
{{ZK EE}}
 +
 +
To meet accessibility, it requires semantic information about widgets, structures, and behaviors for assistive technologies. ZK widgets already render semantic information based on their purposes according to [https://www.w3.org/TR/wai-aria/ WAI-ARIA]. But as a UI framework, we make widgets be flexible for multiple user scenarios. A widget might play a different role in a different page. It depends on the application developers' design. Therefore, we need the application developer's cooperation to achieve complete accessibility. This chapter tells you what ZK framework has done, and how you can add more application-specific accessibility information.
 +
 +
 +
  
 
= Required Setup=
 
= Required Setup=

Revision as of 04:26, 28 September 2020


Accessibility



Since 9.5.0
  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png

To meet accessibility, it requires semantic information about widgets, structures, and behaviors for assistive technologies. ZK widgets already render semantic information based on their purposes according to WAI-ARIA. But as a UI framework, we make widgets be flexible for multiple user scenarios. A widget might play a different role in a different page. It depends on the application developers' design. Therefore, we need the application developer's cooperation to achieve complete accessibility. This chapter tells you what ZK framework has done, and how you can add more application-specific accessibility information.



Required Setup

ZK accessibility module is a separate, optional jar, you have to include it manually to enable it.

		<dependency>
			<groupId>org.zkoss.zk</groupId>
			<artifactId>za11y</artifactId>
			<version>${zk.version}</version>
		</dependency>


Check at Runtime

To ensure za11y.jar running as expected, you can simply inspect a textbox:

textbox.zul

<textbox />

Visit the zul page and Inspect the textbox with a browser developer tool, you will see:

<input id="h5AP0" class="z-textbox" type="text" 
       aria-disabled="false" aria-readonly="false">

If you see ARIA attributes rendered in the element, that mean the module works successfully.




Last Update : 2020/09/28

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.