How to Define Access Keys for an ADF Faces Component

22-12 Web User Interface Developers Guide for Oracle Application Development Framework ADF Faces components automatically synchronize with the screen reader when DOM changes are made. Direct interaction with the DOM is not allowed. ■ Do not use JavaScript timeouts. Screen readers do not reliably track modifications made in response to timeouts implemented using the JavaScript setTimeout or setInterval APIs. Do not call these methods. ■ Provide keyboard equivalents. Some users may not have access to a mouse. For example, some users may be limited to keyboard use only, or may use alternate input devices or technology such as voice recognition software. When adding functions using client-side listeners, the function must be accessible in a device-independent way. Practically speaking this means that: – All functions must be accessible using the keyboard events. – Click events should be preferred over mouseover or mouseout. – Mouseover or mouseout events should additionally be available through a click event. ■ Avoid focus changes. Focus changes can be confusing to screen reader users as these involve a change of context. Applications should avoid changing the focus programmatically, and should never do so in response to focus events. Additionally, popup windows should not be displayed in response to focus changes because standard tabbing will be disrupted. ■ Provide explicit popup triggers. Screen readers do not automatically respond to inline popup startups. In order to force the screen reader to read the popup contents when in the screen reader mode, the rich client framework explicitly moves the keyboard focus to any popup window just after it is opened. An explicit popup trigger such as a link or button must be provided, or the same information must be available in some other keyboard or screen reader accessible way.

22.4.3 How to Use Styles

ADF Faces components are already styled and you may not need to make any changes. If you want to use cascading style sheet CSS to directly modify their default appearance, you should follow these accessibility guidelines: ■ Be aware of accessibility implications when you override default component appearance. Using CSS to change the appearance of components can have accessibility implications. For example, changing colors may result in color contrast issues. ■ Use scalable size units. When specifying sizes using CSS, use size units that scale relative to the font size rather than absolute units. For example, use em, ex or units rather than px. This is particularly important when specifying heights using CSS, because low-vision users may scale up the font size, causing contents restricted to fixed or absolute heights to be clipped. ■ Do not use CSS positioning. Developing Accessible ADF Faces Pages 22-13 CSS positioning should be used only in the case of positioning the stretched layout component. Do not use CSS positioning elsewhere.

22.4.4 How to Use Page Structures and Navigation

Follow these accessibility guidelines when using these page structures and navigation tools: ■ Use af:panelSplitter component for layouts. When implementing geometry-managed layouts, using af:panelSplitter allows users to: – Redistribute space to meet their needs – Hide or collapse content that is not of immediate interest. If you are planning to use af:panelStretchLayout, you should consider using af:panelStretchLayout instead when is appropriate These page structure qualities are useful to all users, and are particularly helpful for low-vision users and screen-reader users As an example, a chrome navigation bar at the top of the page should be placed within the first facet of a vertical af:panelSplitter component, rather than within the top facet of af:panelStretchLayout component. This allows the user to decrease the amount of space used by the bar, or to hide it altogether. Similarly, in layouts that contain left, center, or right panes, use horizontal splitters to lay out the panes. ■ Enable scrolling of flow layout contents. When nesting flow layout contents such as layout controls inside of geometry-managed parent components such as af:panelSplitter or af:panelStretchLayout, wrap af:panelGroupLayout with layout=scroll around the flow layout contents. This provides scrollbars in the event that the font size is scaled up such that the content no longer fits. Failure to do this can result in content being clipped or truncated. ■ Use header-based components to identify page structure. HTML header elements play an important role in screen readability. Screen readers typically allow users to gain an understanding of the overall structure of the page by examining or navigating across HTML headers. Identify major portions of the page through components that render HTML header contents including: – af:panelHeader – af:showDetailHeader – af:showDetailItem in af:panelAccordion each accordion in a pane renders an HTML header for the title area ■ Use af:breadCrumbs component to identify page location. Accessibility standards require that users be able to determine their location within a web site or application. The use of af:breadCrumbs achieves this purpose.