Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Configuring custom skip links

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Help users who rely on screen readers to bypass irrelevant content by configuring custom skip links. Skip links provide users with tools to navigate to the most important parts of the application, and represent one of the most basic accessibility requirements.

For example, a skip link can direct the user straight to the navigation menu, so that the user does not have to tab through the page to reach it.

Pega Platform includes a default pySkipLinksToTarget section that is added automatically to your application. The section includes skip links to the main content, the search bar, and the navigation pane, and you do not need to configure it.

You can expand the default skip link section by configuring custom skip links and saving the section in the application ruleset.

Note the following accessibility best practices:

  • Use no more than five skip links. Three is the recommended maximum.
  • Ensure that the links are the first tab on a given page.
  • Ensure that the links have visible focus and support Tab key navigation.
  • Ensure that the links are visible to all users who use the Tab key for navigation.

    Creating a text file that holds the JavaScript code for the skip link

  1. In the header of Dev Studio, click CreateTechnicalText File.
  2. On the New tab, define the text file record configuration and context, and then click Create and open.
    The file extension for text files that hold JavaScript code is js.
  3. In the text field, enter the skip link code.
    For example: The code for skip links in Pega Platform is stored in the file pzpega_ui_doc_focus.js. You can use it as reference for your custom skip link code.
  4. In the upper right corner of the form, click Save.
  5. Adding the script to the harness

  6. Search for and open the harness to which you want to add the skip link section.
  7. On the Scripts & styles tab, in the Scripts section, click the Add a row icon.
  8. In the Type field of the new row, select js.
  9. In the Name field, select the text file with the skip link code.
  10. Click Save.
  11. Adding the link to the default skip link section

  12. Open the pySkipLinksToTarget section.
  13. From the Action list, add a Link control to the section.
  14. Configuring the custom skip link

  15. Select the new link, and then click the View properties icon.
  16. In the Cell properties window, on the General and Presentation tabs, define the look and behavior of the link.
    For more information, see Configuring common control settings.
  17. On the Actions tab, create a new action set:
    1. Click Create an action set.
    2. Click Add an event Click.
    3. Click Add an actionAll actionsRun script.
    4. In the Function name field, enter the name of the function that you want to assign to the link.
    5. Define the contentType parameter for the area.
    6. Click Submit.
  18. Saving the pySkipLinksToTarget section to the application ruleset

  19. On the section form, click Save as.
  20. In the Apply to field, select a class in your application ruleset, and then click Create and open.
    Note: Keep the default section name to enable inheritance.
  21. On the section form, click Save.
Result: The updated skip link section is displayed as the default in the target harness.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us