Skip to main content

Configuring custom skip links

Suggest edit Updated on July 21, 2021

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.

    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 controls.
  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.
Did you find this content helpful? YesNo

Have a question? Get answers now.

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

Ready to crush complexity?

Experience the benefits of Pega Community when you log in.

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