Navigating ibi WebFOCUS Designer With Keyboard Controls

In this section:

Basic Guidelines for Building Accessible Pages in WebFOCUS Designer

How to:

Create New Content in WebFOCUS Designer
Navigate an Accessible Page Created in WebFOCUS Designer
Assemble a Page From Existing Content in WebFOCUS Designer
Open an Existing Chart, Report, or Page in WebFOCUS Designer
Create a New Chart or Report in WebFOCUS Designer
Style and Format Content in WebFOCUS Designer
Add Prompted Filters to Your Content in WebFOCUS Designer
Apply Prompted Filters From Existing Content in WebFOCUS Designer Pages

You can use keyboard commands to navigate through the WebFOCUS Designer interface to perform certain content creation tasks without a mouse.

Press the Tab key to navigate between adjacent sections of the user interface, or press Shift + Ctrl + F10 to open a menu of sections of the user interface to quickly jump from one section to another if they are not near each other. You can jump to one of the following areas of the interface:

WebFOCUS Designer toolbar.
Visualization toolbar.
Sidebar.
Properties panel.
Canvas.
Content picker.

Press the Enter key or Spacebar to select the item or area that is currently in focus. The arrow keys can be used to navigate through a section of the interface. For example, use the Up Arrow and Down Arrow keys to navigate through the field list, and the Right Arrow and Left Arrow keys to expand and collapse folders.

Context menu options can be accessed by pressing the Menu key or by pressing Shift + F10. For example, to add a field to a chart or report, navigate to the field, press the Menu key, focus on Add to chart or Add to report and press the Enter key or Spacebar.

When you select a container on the canvas, you can use the arrow keys to move the container and use the Shift key and an arrow key to resize it. Shift+Right Arrow expands the container to the right, while Shift + Left Arrow contracts the container from the right. Similarly, Shift + Down Arrow expands the container downward, while Shift+Up Arrow shrinks the container from the bottom. You can use the Delete key to delete the selected container.

You can also use keyboard commands in a page at run time. Use the Tab key to navigate between areas, buttons, and controls on the page, and press the Enter key or Spacebar to execute a button command or open a menu. When using filter controls, you can use the Tab key to navigate to different sections of the control, use the arrow keys to navigate to different values, use the Enter key to select values, and use the Esc key to close the control and apply the filter. At run time you can also press Ctrl + Shift + F10 to open a menu that allows you to jump to different areas and containers on the page, once you have started to navigate within it.

Basic Guidelines for Building Accessible Pages in WebFOCUS Designer

When building pages in WebFOCUS Designer that are intended to be accessible, there are some basic guidelines that you can follow.

Before creating your pages, you will need content with which to populate them. When creating authored pages that are converted from a single content item, you build this content directly within the page. When assembling pages from existing content, your content is saved as stand-alone charts and reports. Since many charts rely on visual cues in order to communicate information, such as data categories and values, it may be preferable to use reports where possible. If it is necessary to use a chart, adding data labels can be a compromise, as in some chart types, the screen reader reads out data labels as the user navigates through the content. When creating reports, it may be advisable to limit the number of fields that you use. This helps reduce the number of values in the report, making it easier to navigate. Simplification is always a best practice when creating accessible content.

Content items that you add to your page reside in containers. These can be basic panel containers, which each contain a single content item, or they can be a tab, accordion, or carousel container, which can hold multiple items on different tabs, accordion panels, or carousel slides, respectively. Although each of these container types is accessible, when building accessible pages, using basic panels without sub-panel sections can provide a more intuitive user experience.

When adding filters to a page, keep in mind that certain filter controls are easier to navigate than others. If possible, avoid using the calendar control to filter a date field. Instead, consider the option of using content items with separate filters for individual date components, such as years, quarters, months, or days. These component filters can use a drop-down control, which is easier to navigate.

You can improve the accessibility of your filter controls by adding a tooltip with information about the type of control and the values that the user can select. To add a tooltip to a control, select it and, on the Settings tab, in the General Settings area, type text for the Tooltip property that you want to display when you point to the control at run-time. You can also double-click the control label on the canvas to type a more descriptive title for the control. By default, the title of the field is used.

Procedure: How to Create New Content in WebFOCUS Designer

Use the following the following steps to create a new chart or report, which you can transform into a page, in WebFOCUS Designer.

On the WebFOCUS Home Page, press Ctrl + Shift + F10 to open the navigation menu.
Use the Down Arrow key to navigate to Toolbar and then press the Enter key.
Press the Tab key twice to navigate to the Visualize Data button, and then press the Enter key.

WebFOCUS Designer opens in a new tab, where you are prompted to select a data source.
In the Select Data Source dialog box, use the Tab key to navigate to the Workspace menu.
Use the Down Arrow key to expand the Workspace menu and navigate to a workspace in your environment from which you can access the data source that you want to use, then press the Enter key to select it.

The file explorer in the Select Data source dialog is populated by the application folders, Master Files, and Reporting Objects available from the selected workspace.
Use the Tab key to navigate to the Flat View button. Press the Enter key to switch to the flat view in the file explorer, making all data sources available for selection without having to navigate into subfolders.
Use the Tab key to navigate inside the file explorer. Use the Down Arrow and Up Arrow keys to navigate to the data source that you want to use, and then press the Enter key to select it.

The WebFOCUS Designer canvas loads, and you can begin creating your content.
To save your content, press Shift + Control + F10 to open the navigation menu. Navigate to Tool Menu and press the Enter key. Press the Enter key again to open the Application menu. Use the Down Arrow key to navigate to Save, and then press the Enter key. The Save dialog box opens. Use the Tab key to navigate to the Save button, and then press the Enter key.

Procedure: How to Navigate an Accessible Page Created in WebFOCUS Designer

When you run a page created in WebFOCUS Designer, you can use keyboard controls to navigate through different page components, including page and panel toolbars, filters, and sub-container sections. Components are labelled for screen reader use.

To quickly jump to a specific section of the page, press Ctrl + Shift + F10 to open the navigation menu. Otherwise, navigate from the top of the page using the following steps.

If you are using JAWS as your screen reader, press Insert + Z on your keyboard to enter Forms mode, allowing you to set values for controls more easily.

From the WebFOCUS Home Page, press Ctrl + Shift + F10 to open the navigation menu. Press the Space bar to open the Header submenu, then press the Down Arrow key three times to focus on the Workspaces option. Press the Enter key to navigate to the Workspaces option on the WebFOCUS Home Page toolbar, and press the Enter key again to open the Workspaces view.
In the Workspaces view, navigate to the page that you want to run. Press Shift + F10 or the Menu key to open the shortcut menu. Press the Down Arrow key to navigate to the collapsed Run menu. Press the Space bar or Enter key to expand the run menu. With focus on Run in new window, press the Enter key to run the page in a new browser tab or window.
Press the Tab key to start navigating the page. The first element should be the page title.
Press the Tab key again to move to the next element, which is the Refresh button, by default. Press the Enter key to refresh all items on the page.
Press the Tab key to navigate to the Hide Filter button. The filter bar displays by default if there are any filters added to it. Press the Enter key to hide the filter bar, and press the Enter key again to show the filter bar again.
Press the Tab key to navigate to the Export to file menu. By default, you can export a page as a PDF or a .png image. When creating the page, you can set options to export only one file type, in which case this menu becomes a button, or not allow export. Press the Enter key to expand the menu, use the Down Arrow key to navigate to an export file type, and press the Enter key again to export a snapshot of the page. To close this menu without selecting an option, press the Esc key.
Press the Tab key to navigate to the filter bar, if there are filters added to the page. Once you have placed focus on a filter control, you can set filter values using a different set of steps, depending on the control type.
- To select values from a drop-down list, press the Space bar to open the drop-down menu. Use the Down Arrow and Up Arrow keys to navigate through the list of values, and use the Space bar or Enter key to select values. Press the Esc key to close the drop-down menu and apply your selections. If the filter is single-select, the menu closes as soon as you select a value.
- To select values from a list of check boxes or radio buttons, use the Tab key to navigate through each item in the list. Press the Space bar or Enter key to select or clear a check box or select a radio button. Check box controls allow you to select multiple values, while radio button controls allow you to select a single value.
- To select values from a button set, once you have placed focus on the control, press the Tab key again to enter the control, then use the Left Arrow and Right Arrow keys to navigate between values in the button set. Press the Enter key or Space bar to select a value. A button set may be single select or multiselect.
- To select a date range from a calendar control, once you have placed focus on the control, press the Space bar to open the date picker menu. This menu provides the ability to clear the date range, select a range from a list of preset options, or set a custom date range.
- To set a numeric range using a slider control, once you have placed focus on the control, use the Left Arrow and Right Arrow keys to set the lower end of the slider, then press the Tab key and use the Left Arrow and Right Arrow keys to set the high end of the slider. Once you are done setting the slider range, press the Tab key to advance to the next page component.
Once you have navigated through all filter controls, press the Tab key to navigate to the title bar of the first container. Press the Tab key again to navigate to the Maximize button on the container. Press the Enter key or Space bar to maximize the container, and press the same key again to collapse the container once it has been maximized.
Press the Tab key again to navigate to the run-time menu of the container. Press the Enter key or Space bar to open the menu and place focus on the Refresh button. Press the Enter key or Space bar to refresh the content in the container. Press the Esc key to close this menu without refreshing the container.
If the container includes multiple content items on separate tabs, accordion panels, or carousel slides, press the Tab key to navigate to the first sub-containers. You can navigate to each sub-container using different methods depending on the container type.
- To navigate between tabs in a tab container, press the Tab key to navigate to the first tab, then use the Right Arrow and Left Arrow keys to focus on different tabs. Press the Enter key or Space bar to display the selected tab.
- To navigate between panels in an accordion container, press the Tab key to navigate to the first panel, then use the Up Arrow and Down Arrow keys to focus on different panels. Press the Enter key or Space bar to expand a collapsed panel or collapse an expanded panel. When you expand an accordion panel, all other panels automatically collapse.
- To navigate between slides in a carousel container, press the Tab key to place focus on the Previous Slide button. Press the Enter key or Space bar to display the previous slide in the carousel. The slides cycle continuously, so you can navigate through the first and last slides. Press the Tab key four more times to navigate to the Next Slide button. Press the Enter key or Space bar to display the next slide in the carousel.
From the run-time menu in a basic panel container, or from a tab, the last accordion panel header, or the Next Slide button in a carousel container, press the Tab key to place focus on the content item. Depending on the content type, some information about the item is read out. Use the arrow keys to navigate through text labels in a chart or values in a report.

Press the Tab key again to navigate to the next container.

Procedure: How to Assemble a Page From Existing Content in WebFOCUS Designer

Use the following steps to create a new page from existing charts, reports, images, and other content items.

On the WebFOCUS Home Page, press Ctrl + Shift + F10 to open the navigation menu.
Use the Down Arrow key to navigate to Toolbar and then press the Enter key.
While focused on the plus button, press the Enter key to open the What would you like to do menu.
Use the Tab key to navigate to the Assemble Visualizations button, and then press the Space bar.

WebFOCUS Designer opens in a new browser tab, and you are prompted to choose a template for your page.
To add a content item to the page, execute the following steps:
1. Press Ctrl + Shift + F10 to open the navigation menu.
2. Use the Down Arrow key to navigate to Resources, and press the Enter key.
  
  Focus moves to the Outline tab, which is the first tab on the sidebar.
3. Use the Down Arrow key to navigate to the Content tab on the sidebar. Press the Enter key or the Space bar to open it.
4. Press the Tab key to navigate to the search bar, to search for an item by name, or to the resources tree. Use the Down Arrow and Up Arrow keys to navigate through items in a folder, and use the Right Arrow and Left Arrow keys to navigate into and out of folders in the repository file hierarchy.
5. Press the Enter key or the Space bar to add the item to the page. Each item is placed in its own container. The new containers become available from the navigation menu, so you can easily select them.
To select a container on the page, press Ctrl + Shift + F10 to open the navigation menu, and then use the Down Arrow key to navigate to Resources. Press the Enter key to move focus to the Outline tab on the sidebar. Press the Tab key twice to enter the outline, then use the arrow keys to navigate to the container that you want to edit.

Note that the container may have the same name as the content item within it. The container and content item are separate components that allow a different set of configuration options.
To resize a container, use the Shift key and an arrow key. Shift + Right Arrow expands the container to the right, while Shift + Left Arrow contracts the container from the right. Similarly, Shift + Down Arrow expands the container downward, while Shift+ Up Arrow shrinks the container from the bottom. You can use the Delete key to delete the selected container.
To configure or modify the container using the options on the Settings and Format tabs, select the container, and then press Ctrl + Shift + F10 to open the navigation menu. Use the Down Arrow key to navigate to Settings/Format. Press the Tab key once to focus on the tab label. You can use the Right Arrow and Left Arrow keys to navigate to the Settings or Format tab, and press the Enter key or Space bar to open it. Use the Tab key to navigate to different options. You can use the Enter key or Space bar to toggle options on or off, and type text into text boxes.

Procedure: How to Open an Existing Chart, Report, or Page in WebFOCUS Designer

You can access any content items saved in your repository from the Workspaces view. You can navigate to items in different workspaces, and open them from the file explorer.

On the WebFOCUS Home Page, press the Tab key to navigate to the Workspaces button, then press the Enter key.

Note: If you have already navigated within the page, you can return to the area that contains the Workspaces button by pressing Ctrl + Shift + F10 to open the navigation menu, using the Down Arrow key to navigate to the WebFOCUS Home option, and pressing the Enter key.

Procedure: How to Create a New Chart or Report in WebFOCUS Designer

Build new charts and reports by selecting a content type and then adding measure and dimension fields to the appropriate buckets.

Create a new visualization in WebFOCUS Designer and select a data source as described in How to Create New Content in WebFOCUS Designer.
The default content type is a stacked bar chart. Optionally, select a different chart type or report layout from the Content picker.
1. Press Ctrl + Shift + F10 to open the navigation menu.
2. Use the Down Arrow key to navigate to Templates, and then press the Enter key to expand the list of available content types.
3. Press Shift + Tab and the Tab key to navigate through the list of chart types and report layouts.
4. With focus on the content type that you want to use, press the Enter key to select it.
Next, add fields to your content. Press Ctrl + Shift + F10 to open the navigation menu.
Use the Down Arrow key to navigate to Resources and then press the Enter key.

Focus jumps to the Outline tab, on the sidebar.
Press the Down Arrow key to navigate to the Fields tab on the sidebar, and press the Enter key to open it.
Press the Tab key multiple times until you have navigated to the top level folder in the Dimensions area of the field list, and then use the Down Arrow and Up Arrow keys to navigate through the list of dimension fields. You can expand a folder by using the Right Arrow key, or collapse it by using the Left Arrow key.
With focus on the dimension field that you want to use as the primary sort field in your content, press Shift + F10 or the Menu key to open the shortcut menu.
With focus on Add to chart or Add to report in the shortcut menu, press the Enter key. The field is automatically added to the default dimension bucket in your content.
Optionally, add more dimension fields to your content. They are placed in the default buckets for additional dimensions, based on the selected content type.
Once you have selected dimension fields, press the Tab key twice to enter the Measures area of the field list. Use the arrow keys to navigate to the measure field that you want to use.
With focus on the measure field that you want to add to your content, press Shift + F10 or the Menu key to open the shortcut menu.
With focus on Add to chart or Add to report in the shortcut menu, press the Enter key. The field is automatically added to the default measure bucket in your content.
Optionally, add more measure fields to your content. They are placed in the default buckets for additional measure fields, based on the selected content type.

Procedure: How to Style and Format Content in WebFOCUS Designer

The Format tab, on the Properties panel, provides options to style and format different areas of a chart or page. It also allows you to select a theme for your content, and change the output format of a chart or report.

When creating a single chart or report in WebFOCUS Designer, all options, in the Format tab and in other areas of the interface, apply to the item being created. When creating a page, the Format tab provides options to style the last selected page component, which may be the entire page, a page section, a container, the filter toolbar, a filter cell, or a content item. To select an item in a page, use the Tab key to move focus to it, then press the Enter key or Space bar.

In WebFOCUS Designer, press Ctrl + Shift + F10 to open the navigation menu.
Press the Down Arrow key to navigate to Settings/Format, and then press the Enter key.
Press the Tab key to focus on the Settings tab, then press the Right Arrow key to move focus to the Format tab, and press the Enter key to open it.
When creating a chart or report, press the Tab key to move focus to the quick access menu. the General options display by default. When creating a chart, press the Down Arrow key to open the quick access menu to access styling and formatting options for the Legend, Axis, Series, and more, depending on the chart type.

When creating a page, different options appear depending on the page component that you selected prior to navigating to the Format tab. Use the Tab key to navigate to these options, which include themes, styles, margins, text styles, and more.
Once you have navigated to an option that you want to set or enable, press the Enter key or use the arrow keys to open the control, depending on the control type. Some options may be set using a dialog box, which you can navigate using the Tab key or the arrow keys.

Procedure: How to Add Prompted Filters to Your Content in WebFOCUS Designer

Filters allow you to narrow down your data, providing a more focused and digestible sample. When creating charts and reports, or pages created from new charts and reports, in WebFOCUS Designer, you can create prompted filters and static filters. Prompted filters apply to all content items created within a page, and provide intuitive filter controls. When prompted filters are added to a page created with new content, they are available at run time, allowing anyone who accesses the page to control the data that displays.

In WebFOCUS Designer, when creating a new chart or report, or a page with new content, navigate to the field for which you want to create a prompted filter. If you select a dimension field, a drop-down list control is created. If you select a date field, a calendar control is created. If you select a measure field, a two-headed slider is created.

Press Ctrl + Shift + F10 to open the navigation menu, use the Down Arrow key to navigate to Resources, then press the Enter key.
Press the Down Arrow key to navigate to the Fields tab on the sidebar, and then press the Enter key.
Use the Tab key to navigate into the field list. If you want to filter for a dimension field, use the Down Arrow key once focus has been placed on the Dimensions folder to navigate through the list of dimension fields. To filter for a measure field, continue tabbing until focus is placed on the Measure Groups folder, then use the Down Arrow key to navigate through the list of measure fields. Press the Left Arrow key collapse folders and the Right Arrow key to expand folders, as needed.
When you have arrived at the field for which you want to create a filter, press Shift + F10 or the Menu key to access the shortcut menu.
Use the Down Arrow key to navigate to Add to filter toolbar, and then press the Enter key.

A filter prompt for the field that you selected is added to the filter toolbar.
Next, set default values for the filter. Initially, the filter is set to display all values, so no data is filtered out.

Press Ctrl + Shift + F10 to access the navigation menu.
Use the Down Arrow key to navigate to Filter Bar and press the Enter key.Use the Down Arrow key to navigate to Settings/Format and press the Enter key. Press the Tab key multiple times until you arrive at the first filter control in the filter toolbar carousel. Use the Right Arrow and Left Arrow keys to navigate to the filter for which you want to select values.
Optionally, press Shift + F10 or the Menu key to open the shortcut menu and change filter options.

You can choose whether a dimensional filter includes or excludes the selected values, whether it is multi-select or single-select, and whether or not filter selections are required.

For date filters, you can choose whether the range has a start and an end point or is open ended, and you can make filter selections required.

For numeric filters, you can choose whether or not the range is open-ended, make selection required, and choose an aggregation to apply to the filter. By default, the sum aggregation is applied, but you can filter on Detail values to filter based on individual measure values from the data source, or use a different aggregation such as average or count.
Press the Enter key or Space bar to open the filter control.

If you are filtering an alphanumeric dimension field, use the drop-down list to select filter values. Use the Tab key to navigate to the search bar, Select all button, Clear button, list of available values, and paging controls. Use the Space bar or Enter key to select a value.

If you are filtering a date field

If you are filtering a measure field, press the Enter key or Space bar to open the slider control. First, use the Right Arrow and Left Arrow keys to set lower end of the slider, then press the Tab key and use the Right Arrow and Left Arrow keys to set the upper end.
When you are done setting filter values, press the Esc key to close the filter control.