By: Greta Poser, GIS Specialist, Minnesota IT Services and Jennifer Strahan, Geospatial Application Developer, Minnesota IT Services.

Editor’s note: This is the latest article in our series “WCAG 2.1 – Improving Digital Accessibility”. Missed the first installment? Read it in the March Newsletter: Improving Navigation Menus and Focus Indicators. Subscribe to be sure you get each installment in this series! (The link is at the bottom of this page.)

At the State of Minnesota, role-based teams are looking at the Web Content Accessibility Guidelines (WCAG) 2.1 criteria to:

• Determine which criteria apply to their role.
• What their peers need to learn about the relevant criteria.
• What, if any, guidance to provide.

This article shares what the maps team came up with on two WCAG 2.1 success criteria:

• 1.3.5 Identify Input Purpose (AA)
• 1.4.12 Text Spacing (AA)

1.3.5 Identify Input Purpose (AA)

Greta Poser, GIS Specialist at Minnesota IT Services (MNIT), noted that Identify Input Purpose can improve map accessibility by making it easier for the user to enter information. Every input field should, besides a label, also be coded to reflect the field’s purpose. This enables the browser’s autocomplete function and helps assistive technology (AT) communicate the purpose of user input fields in alternative ways.

Page creators do this through HTML type and autocomplete attributes, although there are a limited number of html type and autocomplete attribute options. It is likely that user input fields in a web map application may not have an appropriate autocomplete attribute value. 

Some common examples in GIS where you would leverage the autocomplete attribute include:

• If a user submits a report about a location and you want to follow up with the user, use autocomplete attributes for their name, phone number, and email inputs. 
• If a user wants to search a map for their home address to find features in their neighborhood, use autocomplete for the address search box. 
• Use autocomplete when a user can input their preferred language to render the map.

Here’s a sample code for using autocomplete in a map: 

<h3>Provide your home address for a map to your polling place:</h3>

<div>

<label for=”address”>Address</label>

<input autocomplete=”street-address” id=”address” type=”text”>

</div>

<div>

<label for=”city”>City</label>

<input autocomplete=”address-level2” id=”city” type=”text”>

</div>

<div>

<label for=”state”>State</label>

<input autocomplete=”address-level1” id=”state” type=”text”>

</div>

<div>

<label for=”zip”>ZIP code</label>

<input autocomplete=”postal-code” id=”zip” type=”text”>

</div>

<div>

Keep in mind that the autocomplete attribute values are intended to be about personal user information (their address, their name, their photo), so they will not apply in a GIS situation when gathering information about other features. For example, you would not use the “name” attribute for a field used to input the name of a place or the name of a photo. The “name” attribute would only apply to a field asking for the user’s name.

Other Uses of Input Purpose

1.3.5 Identify Input Purpose isn’t just about autocomplete. For example, the type attribute for input fields in HTML identifies a general classification of expected values, such as “tel” for a telephone number and “date” when a date value is expected. The type attribute does not imply the value entered is the user’s personal information, so it can take a wider variety of inputs. For example, “type=date” could be used when asking the user to provide a search date to display data on a map. 

This isn’t limited to text. Page designers can use other methods for identifying input purpose, such as Augmentative and Alternative Communication (AAC) symbols. As more map creators and page designers become familiar with the criterion, we can expect a richer, more robust use of this technology.

Tools and Techniques:

Use HTML type and autocomplete attributes to state input purpose when applicable. Preview your application in landscape and portrait mode to test compatibility.

Training:

W3C on input purpose

Using HTML 5.2 autocomplete attributes

References:

Understanding Input Purpose 

Show techniques Input Purpose

1.4.12 Text Spacing (AA)

MNIT Geospatial Application Developer Jennifer Strahan noted that the Text Spacing criterion ensures that content is still available, legible, and functional if users increase the text spacing of the web map application. The web application does not need to provide tools or options for users to increase the spacing. Users likely have their own tools and techniques. If content overflows a fixed-size container due to the spacing changes, it is acceptable to truncate with an ellipsis, as long as the truncated text is still available (either on focus or as a linked page). 

Legends and popups are common examples of text spacing, as shown in these two illustrations. Figure 1 presents a typical view and Figure 2 shows the same page with text spacing applied. Note how the text fields enlarged to accommodate the spacing.

Figure 1: Map example with standard text spacing.

Figure 2: Map example with text spacing applied by user.

The legend widget in ArcGIS Maps SDK for JS handles text spacing increases well, wrapping text when necessary. Map designers should consider using brief names for layers so that the user does not have to scroll as much to see other legend items.

Map popups in the ArcGIS Maps SDK for JavaScript (a developer product for building mapping and spatial analysis applications for the web) resize dynamically when the text spacing changes, so there should be no issues with popups. If the popup has a lot of content, consider docking it. 

What about the map itself, outside of the legend and popups?

For the map itself, the user-specified text spacing settings will not alter labels on the map unless the labels are generated client-side and can be styled with CSS. Interactive maps are commonly made up of map images that have been generated by a server. Success criterion 1.4.12 applies only to markup-based text. Images of text are not expected to adapt. Map developers should test to ensure that any CSS styled client-side labels remain functional if the user specifies new text spacing settings. Elements that are a part of the map user interface, such as sidebars, search results, layer pickers, legends and popups should also be functional and legible if the user adjusts text spacing.

Tools and Instructions:

To test an application for compliance, apply the following text spacing settings with a user-agent css file or try this bookmarklet:

• Line height (line spacing) to at least 1.5 times the font size;
• Spacing following paragraphs to at least 2 times the font size;
• Letter spacing (tracking) to at least 0.12 times the font size;
• Word spacing to at least 0.16 times the font size.

References:

Understanding Text Spacing.