Accessibility

Accessibility is the degree to which software is accessible to people with disabilities. Web Content Accessibility Guidelines (WCAG) 2.0 is a technical standard with the goal of providing a single, shared standard for web content accessibility. WCAG was developed by the Web Accessibility Initiative of the World Wide Web Consortium (W3C). The Geocortex Viewer for HTML5 4.14.0 adheres to WCAG 2.0.

Note that you should take care when customizing your Viewer to ensure that you do not inadvertently render it non-compliant with the WCAG 2.0 standard. For example, when using a WYSIWYG editor, bold font styling is usually applied with the <b> tag rather than the WCAG-compliant <strong> tag.

There are two aspects to accessibility support in the HTML5 Viewer that end users can use:

Screen Readers: Run a screen reader to vocalize and interpret page content.
Keyboard Shortcuts: Interact with the viewer using only the keyboard.

Screen readers and keyboard shortcuts can be used together.

Users are informed about these accessibility features by the configurable Accessibility window.

Screen Readers

Screen readers read user interface (UI) text aloud, so the user can listen to the page instead of seeing it. They do this by monitoring the position of the mouse pointer and reading the text where the pointer is positioned. It does not matter how the pointer is controlled—the user can navigate using a mouse, the keyboard, a sip-and-puff device, or any other type of navigation device.

Screen readers also provide contextual information for the text being read. For example, if the user navigates to the Sign in button, a screen reader might say "Sign in button"—"Sign in" is the text that the screen reader reads, and "button" is the context provided by the screen reader.

The context is essential. It is how the user knows what will happen when the item is activated—buttons perform an operation, hyperlinks navigate the browser, checkboxes select or clear a setting, and so on.

In order for a user to use a screen reader with an HTML5 Viewer, the user must have a screen reader installed and running when using the viewer. No additional steps are required. The HTML5 Viewer is tested using NVDA (NonVisual Desktop Access) but others may also work.

In the HTML5 Viewer, there are three pieces of information that are provided about the map:

The coordinates at the center of the current map extent.
The current scale of the map. The scale is only provided when the zoom level changes.
The number of visible features of each visible layer. For example, "There are 20 features visible on World Cities."

Keyboard Shortcuts

Keyboard shortcuts allow end users to interact with the HTML5 Viewer using a keyboard instead of a mouse. The current UI component is highlighted with a border, which is dark purple by default.

Keyboard shortcuts do not interfere with or prevent the user from using the mouse—the user can go back and forth between keyboard shortcuts and the mouse. The only exception to this is when drawing a shape on the map for an identify, draw, or measure operation—the user cannot switch the type of device part way through drawing the shape.

Once you have selected a tool to draw a shape, to draw the shape with the keyboard, press Enter. If you draw the shape with the mouse instead, you will not be able to use the keyboard to create the shape. Note this only applies to when you first create the shape; when you edit a shape, you may use either the keyboard or the mouse.

Operations that use a freehand geometry cannot be done using the keyboard. This includes freehand identify and freehand draw operations.

Keyboard shortcuts provide a level of precision that a mouse does not. You can move or resize a shape by a single pixel using the keyboard.

General Keyboard Shortcuts

The HTML5 Viewer uses standard shortcuts to navigate the page and select or activate items.

General Keyboard Shortcuts for Accessibility

To do this...	Press...	With NVDA screen reader...
Navigate forward through the page's components	Tab ^{1, 2}	Tab ^{1, 2}
Navigate backward through the page's components	Shift+Tab	Shift+Tab
Select or activate the current UI component	Enter	Enter
Select checkbox, radio button, or toggle	Space Bar	Space Bar
Pan the map (if selected)	Arrow keys ³	Alt+Arrow keys ³
Move slider	Arrow keys	Alt+Arrow keys
Jump slider	Page Up; Page Down	Alt+Page Up; Alt+Page Down
Jump slider to the start or end	Home; End	Alt+Home; Alt+End

¹ The initial tab operation in a new Viewer session opens the skip navigation links menu consisting of links to the Side Panel, Search, I want to..., Toolbar, and Map. Initial focus is on the Side Panel link, and subsequent tabbing traverses each of the items in the menu. Users can quickly return to the skip navigation links menu by clicking the address field in the Viewer and then tabbing to open the menu. Users can also return to the initial item in the skip navigation links menu by continuing to tab through the Viewer, or they can access the last link in the menu by tabbing back (SHIFT+TAB) through the Viewer.

² In Chrome, you cannot tab between individual items in a radio group. You must tab to the group, and then use the arrow keys to change the selection.

³ If the Accessibility Module's expandedMapKeyboardAccessibility configuration property is false, the mouse pointer must hover over the map to pan with the arrow keys. By default, it is true.

HTML5 Viewer Keyboard Shortcuts

The HTML5 Viewer has its own shortcuts for working with shapes, including text markup. These shortcuts are used with tools that require the user to manipulate a shape on the map, specifically, identify, draw, measure and edit tools.

Some of the NVDA screen reader default keyboard shortcuts may override the Viewer's keyboard shortcuts listed in the following table. The user may need to remap the NVDA keyboard shortcuts to ensure that they function in the Viewer as indicated.

HTML5 Viewer Keyboard Shortcuts for Accessibility

To do this...	Press...	With NVDA screen reader...
Add a vertex to the shape that you are creating	Enter	Alt+Enter
Move the selected vertex horizontally or vertically	Arrow keys	Alt+Arrow keys
Move the selected vertex diagonally	Page Up Page Down Home End	Alt+Page Up Alt+Page Down Alt+Home Alt+End
Move the selected shape horizontally or vertically	Arrow keys	Alt+Arrow keys
Move the selected shape diagonally	Page Up Page Down Home End	Alt+Page Up Alt+Page Down Alt+Home Alt+End
Enlarge the selected shape uniformly	S	Alt+S
Reduce the selected shape uniformly	Shift+S	Alt+Shift+S
Rotate the selected shape to the right	R	Alt+R
Rotate the selected shape to the left	Shift+R	Alt+Shift+R
Complete the shape	Enter, Enter (press Enter twice)	Alt+Enter, Alt+Enter (press Alt+Enter twice)
Enter vertex editing mode	V	Alt+V
In vertex editing mode, select the next vertex of the current shape	V	Alt+V
In vertex editing mode, select the previous vertex of the current shape	Shift+V	Alt+Shift+V
Delete the selected vertex	D	Alt+D
Exit vertex editing mode	Enter	Alt+Enter
When the mouse pointer is over the map, enable snapping for the selected tool (Measure, Draw, Edit, Create New Feature, or non-dragging Identify tool)	F	Alt+F
When editing the Results Table, move to the field to the right of the current field	Tab	Tab
When editing the Results Table, move to the field to the left of the current field	Shift+Tab	Shift+Tab
When editing the Results Table, move to the field below the current field	Enter	Enter
When editing the Results Table, move to the field above the current field	Shift+Enter	Shift+Enter
When editing the Results Table, reset the value of the current field	Esc	Esc, Esc

For greater precision when moving, rotating or resizing a shape, hold down the Alt key while pressing the desired shortcut keys. For example, press Alt + Left Arrow to move the selected shape one pixel to the left.

Example 1 - Use the Keyboard to Measure Distance

Press Tab as may times as needed to navigate to the Measure multitool.
Press Enter to open the Measure multitool.

The pointer is positioned on the Measure Distance tool.
Press Enter to activate the Measure Distance tool.
Press Enter to create the first vertex.

Because you are drawing a line, the vertex is an end point.
Use the arrow keys and diagonal movement keys to move the end point close to the desired position.
Use the Alt key in combination with any other movement keys to move the end point to the precise position that you want.

The Alt key restricts the movement to one pixel each key press.
Press Enter to mark the position of the first end point and create the other end point.
Move the end point to the desired position.
Press Enter twice to mark the position of the second end point.

This completes the measurement.

Example 2 - Use the Keyboard to Draw a Polygon

Press Tab as may times as needed to navigate to the Draw multitool.
Press Enter to open the Draw multitool.
Press Tab as may times as needed to navigate to the Polygon tool.
Press Enter to activate the Polygon tool.
Press Enter to create the first vertex.
Use the arrow keys and diagonal movement keys to move the vertex close to the desired position.
Use the Alt key at the same time as any other movement keys to move the vertex to the precise position that you want.

The Alt key restricts the movement to one pixel each key press.
Press Enter to mark the position of the first vertex and create the next vertex.
Move the vertex to the desired position.
Continue adding and positioning vertices until there are no more vertices to add.
Press Enter twice to close the polygon.

Example 3 - Use the Keyboard to Move, Rotate, or Resize a Shape

Press Tab as many times as needed to navigate to the Edit tool.
Press Enter to activate the Edit tool.
Press Enter again to draw a point on the map.
Move the point to the shape that you want to edit.
Press Enter to select the shape that the point is on.
Use the move, rotate, and resize keyboard shortcuts to modify the shape.
Press Enter twice to finalize the shape's size and position.