WD4A How Tos

Accessibility Rules

1. The top level of a page should be the ROOTUIELEMENTCONTAINER.
2. Each visible group of UI elements should be put in a Transparent Container. If the Transparent Container does NOT contain a Section Header, its "isLayoutContainer" must be set to TRUE. If instead a Section Header will be given to this group, it should be done as follows:
   1. Add a Section Header UI Element inside the Transparent Container. The Section Header's "Level" property should be set to "header4","header5", or "header6". Select the Transparent Container's property "LabeledBy" to be the ID of the Section Header. If a Transparent Container is labeled by a Section Header the property "isLayoutContainer" must be set to false.
3. All input fields must be given a "Label" and set the LabelFor property to the ID of the associated input.
4. All labels must be associated with a UI Element by setting the property "LabelFor."
5. Always create column headers for every visible column in a table.
6. All images that do NOT convey important information, such as horizontal rules, spacers, must have their "isDecorative" property set to True.
7. All images that DO convey important information must have short descriptive text in the ToolTip property.
8. Tooltips should never repeat Label text, they should only be used to add more information. See guidelines for alt text.
9. Never nest tables, for instance, never set a table popin's content to be another table.
10. Never nest trays, groups, or tabs, or other grouping containers, except Transparent Containers.
11. Periodically run the the automated "complete object" check as part of your development process to find and fix accessibility problems.
12. Melting Group pattern: use to remove input hints from the tab chain (see ZV_TEST, View V_CREATE_POS). ADD PICTURE.
13. Instead of using the PageHeader UI element, every page must have a page title made with a FormattedTextView, coded using the <h1> tag.
14. All Search Helps must be custom coded. The standard search help is neither accessible, nor usable, nor pretty.
15. The property "rowSelectable" of table UI elements should either have the value 'X' or it should be bound to the context. If you wish to ensure that the table cannot be selected or is to function merely as a display table, set the property "selectionMode" to the value "none" instead, which is preferred for usability reasons.
16. Screen changes: make all dynamic changes below the cursor , or move the cursor by changing the focused element, or announce that something has changed above the cursor.
17. Use the OTR to store all UI-related text.
18. Do not set actions to take a user off the page from a radio button or drop down elements without a go button.

Unit Testing Procedures

1. Check tab chain (explain).
2. For JAWS to work in WD4A, Virtual PC cursor must be turned off.

Usability Rules

• Trays are strongly discouraged because they can confuse users. Programmatically hide elements instead.

1. For text fields that will always be read-only, developers should use TextView (not InputField-ReadOnly).
2. For text fields that will sometimes be editable but under other conditions read-only (e.g. HSA Details screen), developers would prefer to use InputField-ReadOnly.

Explanation and Rationale for Accessibility Rules

1. The root container acts as a transparent container and since it is the root container, does not need a label. Therefore adding a transparent container under the root container only adds another layer of html, but does not make the application more accessible.
2. This rule comes straight from the SAP Accessibility guidelines. The header4, header5 and header6 properties create semantic html, respectively <h2>,<h3> and <h4> tags.
3. This rule comes straight from the SAP Accessibility guidelines. By giving each input a label, people using assistive technology will hear the input's label as a description.
4. This rule allows SAP assistive code to associate a label with other UI elements or groups of elements.
5. Not sure what this rule does.
6. If an image does not have isDecorative set to true, WebDynpro will try to create an alt attribute that assistive technology will then read. Non informative images should not be announced with an alt tag.
7. The tooltip property is what WebDynpro code uses to create the various alt and title tag content for assistive technology to read.
8. If a tooltip repeats the label text, the code will be "read" twice by assistive technology and thereby annoy or confuse the user.
9. Nested tables confuse assistive technology because assistive technology trys to gather semantic information (labels of table cells) from tables.
10. Nesting grouping containers creates nested tables. See #9 for explanation of why this is bad.
11.