Accessibility in Guidewire InsuranceSuite

Guidewire InsuranceSuite provides accessibility features to ensure that all users have a successful and productive user experience. Guidewire is guided by the WCAG 2.0 AA standard for accessibility.

Screen reader support

The InsuranceSuite user interface is designed with standard HTML elements. The HTML includes attributes defined by ARIA (Accessible Rich Internet Applications) to provide additional meaning for screen readers and other assistive devices. Guidewire tests accessibility using a variety of screen readers, including JAWS, NVDA, and VoiceOver.

Inputs and labels

Inputs and labels on application pages are associated by a parent-child relationship. An input widget is labeled with the value of its child widget using an aria-labelledby attribute. Automated accessibility checks flag this relationship as an issue. However, manual accessibility assessments demonstrate that this relationship is properly voiced by screen readers.

Alternative text on icons

The alternative text values for icons are specified by the aria-label attribute. The default value is the name of the icon. For example:
  • A green circle with a check mark indicating 'complete' includes the ARIA attribute aria-label="circle-checkmark".
  • A red circle with an 'X' indicating 'not complete' includes the ARIA attribute aria-label="circle-x".

To change the aria-label value, edit the associated PCF file and set the *AltText property.

Page titles

When you navigate to a new page in a web application, a screen reader reads the contents of the HTML <title> tag. The title of the browser window describes the content of the page, distinguishes it from other pages, and provides contextual information. In InsuranceSuite, the browser window title automatically includes the main heading text of the page. If desired, you can override the title by setting the browserTitle attribute of the PCF page.

Error, warning, and information messages

If a form submission generates errors or warnings, they are displayed within a notification widget. The notification widget is located after the main page heading, and it is titled with a heading level 2 element. Notifications of this type are communicated to screen readers by using aria-live.

For example:
  • This page contains error, warning, and informational messages. Errors: (3). Warnings: (2). Infos: (1).
  • This page contains error and informational messages. Errors: (2). Infos: (2).
  • This page contains warning messages. Warnings: (1).

Notifications may include supplemental explanatory information, such as the detailed messages that were generated. To reduce cognitive load and make understanding easier, the additional information is not included in the initial notification. To get the detailed information, navigate to the heading level 2 widget title and read the content within it.

Bold label widgets are assigned ARIA heading level 3

All bold label widgets are assigned the following ARIA attributes by default:
role="heading" aria-level="3"

Not all bold label widgets are necessarily headings, but they often function as headings. Bold label widgets most commonly appear within areas that are labeled by widgets of type heading level 2. They can also occur directly within areas that are labeled by title heading level 1. Although this might raise an automated structure flag, the benefits of this approach generally outweigh the negatives for screen reader users.

ariaInfo property of PCF elements

Many PCF elements have an ariaInfo property. This property is reserved and is not functional. Do not use this property.

Keyboard interaction with JAWS

If you use JAWS, then you may need to use modifier keys when triggering buttons and links within the main application screen. In addition to the Enter or Space keys, you may also need to use the Alt or Insert modifier keys. To remove the requirement for the modifier key, press Insert+Z, which toggles the virtual cursor (virtual viewer) to 'off'.

User interface settings for accessibility

InsuranceSuite applications provide several user interface settings designed to improve accessibility. These include the following:
Setting Description
Application font size The base font size, in points, of the text used on the application screens.
Global spacing modifier A multiplier that decreases (when less than 1) or increases (when greater than 1) the amount of whitespace surrounding visual elements.
Theme The theme to use as the visual style of the application.
Left align top toolbars Set to align the toolbar at the top of the screen to the left instead of the right.
Force text shadows on When set, dark text is displayed with a white shadow, and light text is displayed with a black shadow. This setting may assist with readability when there is low contrast between the text and its background.
Prevent focus navigation from leaving the application When set, keyboard navigation remains within the application and does not transition to the surrounding window, such as to the browser controls.
Disable outlines on focused elements When not set, the input elements with focus have an extra outline to make them easier to identify.
Attempt to be smart about what touch inputs to ignore. Essentially allowing 'ignore errant thumb' and 'palm rejection' behavior. When using touch devices, some touches may be intended to interact with the application, and other touches may be incidental or accidental. When this setting is set, the application attempts to identify meaningful touches and ignore all others.
Allow all tooltips to be displayed and read by screen readers on focus. Affects page tab sequence. Requires browser restart. When set, any screen element that has a tooltip is included in the sequence of elements that you can navigate to by using the Tab key. When an element is in focus, its tooltip appears, which is also useful for screen readers. After changing this setting, you must restart your browser.

See also

Keyboard navigation and interaction

Guidewire InsuranceSuite provides complete navigation through the application interface using the keyboard. Use the following for keyboard navigation:
  • Press Enter or Spacebar to act as a mouse click.
  • Press Tab or Shift+Tab to navigate through the interface elements.
  • Press the arrow keys to navigate in menus and list views.
  • Press Alt+Shift+Arrow (using any of the arrow keys) to navigate to the primary interface panels. For example, Alt+Shift+Left Arrow navigates to the sidebar.

Date picker navigation

Use the following keyboard navigation to interact with the date picker widget:
Windows (no screen reader)
  • Spacebar: Toggle the date picker.
  • Ctrl+Right Arrow or Ctrl+Left Arrow: Proceed forward or backward by day.
  • Ctrl+Down Arrow or Ctrl+Up Arrow: Proceed forward or backward by week.
  • Alt+Right Arrow or Alt+Left Arrow: Proceed forward or backward by month.
  • Alt+Down Arrow or Alt+Up Arrow: Proceed forward or backward by year.
  • Enter: Select the date.
macOS (no screen reader)
  • Spacebar: Toggle the date picker.
  • Cmd+Right Arrow or Cmd+Left Arrow: Proceed forward or backward by day.
  • Cmd+Down Arrow or Cmd+Up Arrow: Proceed forward or backward by week.
  • Option+Right Arrow or Option+Left Arrow: Proceed forward or backward by month.
  • Option+Down Arrow or Option+Up Arrow: Proceed forward or backward by year.
  • Enter: Select the date.
With JAWS screen reader on
  • Spacebar: Toggle the date picker.
  • Ctrl+Shift+Right Arrow or Ctrl+Shift+Left Arrow: Proceed forward or backward by day.
  • Ctrl+Shift+Down Arrow or Ctrl+Shift+Up Arrow: Proceed forward or backward by week.
  • Alt+Right Arrow or Alt+Left Arrow: Proceed forward or backward by month.
  • Alt+Down Arrow or Alt+Up Arrow: Proceed forward or backward by year.
  • Enter: Select the date.
With NVDA screen reader on
  • Spacebar: Toggle the date picker.
  • Ctrl+Right Arrow or Ctrl+Left Arrow: Proceed forward or backward by day.
  • Ctrl+Down Arrow or Ctrl+Up Arrow: Proceed forward or backward by week.
  • Alt+Right Arrow or Alt+Left Arrow: Proceed forward or backward by month.
  • Alt+Down Arrow or Alt+Up Arrow: Proceed forward or backward by year.
  • Enter: Select the date.