View source for Accessibility - Navigation Patterns with RDLs

{{Design pattern|Title=Accessibility - Accessible navigation patterns with RDLs|Description=Describes navigation patterns for creating accessible Repeating Dynamic Layouts.|Version=8.6|Applications=Pega Platform|Capability Area=User Experience|Owner=choca}}

{{Content moved
| newUrl = https://docs.pega.com/bundle/platform-88/page/platform/user-experience/accessibility-repeating-dynamic-layouts.html
}}

==Interacting with Repeating Dynamic Layouts==
Efficient navigation and interactivity of controls is paramount for disabled users. Properly optimized components create a more equal and accessible experience for users of any form of assistive technology, such as on-screen keyboards or screen readers. 
 
With the number of structural components and controls available for configuration in the Pega Platform, each configuration feature and capability may differ between the numerous controls available. A prominent example of this is the use of Repeating Dynamic Layouts (RDL) which offer the capability to display any amount of data or information in a consistent, templatized format. Take for example a shopping cart checkout screen that prompts the user to select a delivery address. If the user has multiple addresses on file in the application, an RDL would be able to display a list of addresses for the user to select from. There are several notable configuration options and best practices when working with RDLs to create the best possible experience for different users. 

== Navigation Patterns ==

=== Arrow Key Navigation (Default) ===
Out-of-the-box pattern. With this pattern, the user can navigate between items within an RDL using the keyboard arrow keys. Once a user brings keyboard focus to the item in the list to interact with, they can press Enter to bring focus within the item to navigate the actionable elements. This navigation pattern follows the [https://www.w3.org/TR/wai-aria-practices-1.2/#grid WCAG Grid cell navigation standard], and navigation instructions are provided to screen reader users on the initial focus of an RDL item. Typically, this navigation pattern is used when displaying long lists of items, eliminating the need to individually tab through each interactive element. For full operability information and instructions for RDL navigation, check the [https://docs.pega.com/user-experience/86/supported-keyboard-navigation?check_logged_in=1 supported keyboard navigation documentation for Platform controls].   

=== Tab Navigation  ===
The Tab key provides an alternative navigation pattern of RDLs. The tab key navigation allows a user to navigate through every interactive element within each item in the RDL. This can be useful if you are displaying a minimal number of interactive fields for each list item, and the number of list items is not too extensive. For example, when you have a list of attachments for a case where it is likely you will have less than 5 attachments and the only interactive options are to Open or Delete the attachment. Additionaly, if you are displaying form data in a repeating layout, tabbing through each item is simple and intuitive for most users. This option for tab navigation can be selected from within the Repeating dynamic layout configuration properties in Platform versions 8.6 and higher.
[[File:RDL Navigation Configuration.png|alt=A checkbox to change the keyboard navigation behavior for RDL controls|center|thumb|A checkbox to change the keyboard navigation behavior for RDL controls]]



If you want your navigation pattern to utilize only the tab key, check the “Use form navigation (by tab)” checkbox in the "Navigation" section at the botton of the "General" tab of the RLDs configuration dialog. With this option, the user can use the Tab key to navigate to any actionable elements for each item in the list.

=== Deciding the best navigation pattern ===
[[File:RDLTable.png|alt=Content displayed in an RDL with stylistic similarities to a table/grid|thumb|Content displayed in an RDL with stylistic similarities to a table/grid]]
The visual presentation of an RDL can be customized to suit the application needs. In many instances, you may come across RDLs that appear as tables. Such formats for RDLs may synergize better with the default arrow key navigation, as users would be more used to seeing data presented in table format and know how to navigate properly. Still, it is important to take some of the key differences in functionality and appearance into consideration when choosing how best to present data to a user between an RDL or a table. Regardless of design choice, ensure that the aria-roles applied to the data containers follow [https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles proper guidelines and structure] in order to provide a more productive experience.  

Here is a small chart breaking down some of the characteristics you may encounter when creating an RDL, as well as a recommended navigation approach depending on each scenario. 
{| class="wikitable"
|+Deciding which navigation pattern
!Aspect of RDL
!Arrow navigation
!Tab navigation
|-
|List items
|>10
|<10
|-
|Design
|Grid
|Form/Card
|-
|Components per list item
|>3
|<4
|} 

== OOTB Available RDLs in User Portal ==
Pega Platform makes use of RDLs in several locations across end-user portals, such as in a worklist, Pulse, and attachments. 
[[File:PulseRDLNavigation.png|alt=Pulse posts using arrow key RDL navigation|center|thumb|Pulse posts using arrow key RDL navigation]]

By default, these RDLs are configured for arrow key navigation. Depending on your application requirements, changing this navigation option to navigate by the Tab key is feasible thanks to many of RDLs existing in available section rules. The following list contains some of the available section rules containing RDLs configured in the OOTB end-user portal in Theme-Cosmos: 

* pyCaseRelatedContent (Added attachments in the utilities panel of a work object) 
* pyRecentFollowedByUserDetails (Followers in the utilities panel of a work object) 
* CaseStakeholders (Stakeholders in the utilities panel of a work object) 
* pyShowAssociatedTags (Tags in the utilities panel) 
* pyFeedInner (Pulse messages across the application) 

Be sure to work with and understand the needs of your user base to make the best decision as to which configuration option to utilize.