WAI: Navigable

Official Content

Guideline 2.4 Navigable states that users should be offered ways to help them navigate, find content, and determine where they are.

Bypass Blocks

The main idea here is to allow people who navigate sequentially through content more direct access to the primary content of the Web page.

When components are repeated in all pages, there should be links for the user to load other contents, skipping the repeated components.

In GeneXus, the objects included in the same Master Page object behave as indicated above. The links to pages using the same Master Page (MP) load the web page inside the MP and the focus is positioned on that content (not on the other components).

Another requirement is to bypass blocks, so a mechanism should be available to bypass blocks of content that are repeated on multiple Web pages.

Example

A news organization's home page contains the main story in the middle of the page, surrounded by many blocks and sidebars for advertising, searching, and other services. There is a link at the top of the page that jumps to the main story. Without this link, a keyboard user needs to tab through approximately 40 links to reach the main story; the screen reader user has to listen to 200 words, and the screen magnifier user must search around for the location of the main body.

Consider the following example of the W3C web page, where the main content is loaded using the "skip" button.

WAI Navigable sample

This is achieved using an anchor. In GeneXus you may use the Format property (X Evolution 1, 2 and 3) of variables or text blocks to assign HTML code to it, i.e.:

 textblock1.Caption = '<h3><a name="w3c_content_body" id="w3c_content_body"></a>Participar</h3>'

The skip action should be associated with a link like this:

skip.Caption = '<a href="#w3c_content_body">saltar</a>'

Page Titled

Another requirement is that pages should have titles that describe the topic or purpose of the page.

In GeneXus, use the form Caption property.

Multiple Ways to find a page

There should be more than one way available to locate a Web page within a set of Web pages. In GeneXus, you can use the Full-Text Search in Applications.

Focus Visible

Its purpose is to help users know which element among multiple elements has the keyboard focus. For example, when text fields receive focus, a vertical bar is displayed in the field (this is done by default), indicating that the user can insert text, or all of the text may be highlighted, indicating that the user can type over the text. The last one can be implemented using Context Sensitive User Interfaces or you can use javascript (see here).

Location 

For example, as the user navigates through categories and subcategories, a breadcrumb trail should show the current location in the hierarchy of categories.
In GeneXus, take as an example the automatically generated code for the Work With Pattern.

In the Master Page object (RWDMasterpage) we have the following code:

Event Refresh
    WCRecentLinks.Object = RwdRecentLinks.Create(Form.Caption, ContentHolder.Pgmname)
EndEvent

The RwdRecentLinks Web Component object uses the Web Session data type to store the visited pages and displays the information using a Grid control. See the code of the load event to take it as an example.

Every page should contain a link to the portal home page.


Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.