Accessible Web Mapping Apps

Kelly Hutchins

Tao Zhang

slides: https://arcg.is/1OPTCu

## What is accessibility? <p style="text-align: center;">Make content usable for everyone regardless of abilities.</p>

Wide range of disabilities

Source: Inclusive design at Microsoft

## Why is accessibility important? - The ADA and Section 508 - People with different abilities should have equal access - Good accessibility is good user experience

How is Esri doing?

• Reviewing products internally for compliance
• Fixing accessibility issues
• Working accessibility into new features
• Sharing knowledge and best practices

## Accessibility presentations |Title|Time| |---|---| |DIY Accessibility|Wed, March 6. 5:30pm - 6:30pm| |Accessible Web Mapping Apps|Thu, March 7. 9am - 10am| |Improving Accessibility with ArcGIS Online Web Apps|Thu, March 7. 2:30pm - 3:00pm|

## WCAG <p style="text-align: center;">Web Content Accessibility Guidelines</p>

## WCAG 2.1 <p>17 additional success criteria to address:</p> - mobile accessibility - people with low vision - people with cognitive and learning disabilities <p style="margin-top: 3em; font-size: 0.7em;">Reference: [What’s New in WCAG 2.1](https://www.w3.org/WAI/standards-guidelines/wcag/new-in-21/)</p>

## What we will cover today - Semantics - Focus and keyboard access - ARIA and custom components - Dev tools - App demos

## Semantics <p style="text-align: center;">Choose the right HTML element to reflect content structure and meaning.</p>

### Structure - Common understanding of what each element represents and does. - Browsers and other user agents provide default functionality and styling.

Structure example

            
Popup settings

            
            Popup settings 
            

• The browser does not recognize the second structure as a level 2 heading.
• The <span> element is semantically neutral.

### Meaning <p style="text-align: left; margin-bottom: 20px;">Most HTML elements have an implicit role that defines the element’s purpose:</p> - `<a>`: “link” - `<img>`: “graphic” or “image” - `<header>`: “banner”

<h3>Meaning example</h3> ```html <button>Save changes</button> <!-- Don't do this --> <div class="btn btn--primary">Save changes</div> ``` <ul style="font-size: 0.8em; width: 80%;"> <li>The browser does not know that the `<div>` element is intended as a button</li> <li>The `<div>` element does not have an implicit role or accessible name.</li> </ul>

## Why semantics is important - Consistent understanding of content structure and native behavior. <!-- .element: class="fragment" --> - Clear communication of content’s meaning and purpose. <!-- .element: class="fragment" --> - We get structure and meaning for free with semantic elements. <!-- .element: class="fragment" --> - Significant more work to polyfill semantic neutral elements. <!-- .element: class="fragment" -->

## Semantic HTML elements - `<ul>` or `<ol>`: a series of items in a list - `<p>`: paragraph - `<table>`: tabular data - `<button>`: a clickable button - `<label>`: text label for a form control <p style="margin-top: 50px;"> <ul style="font-size: 0.5em;">References: <li>[An Overview of HTML5 Semantics](https://codepen.io/mi-lee/post/an-overview-of-html5-semantics)</li> <li>[HTML elements organized by purpose](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)</li> </ul> </p>

## Use `button` - Buttons are automatically focusable. <!-- .element: class="fragment" --> - Screen readers will announce button in focus and offer ways to click button. <!-- .element: class="fragment" --> - Space and Enter keys are automatically supported when binding a click event listener to a button. <!-- .element: class="fragment" -->

## Alternatives of `<div>` - `<section>` - `<article>` - `<ul>` or `<ol>` - `<header>` - `<footer>` - `<button>` <p style="font-size: 0.7em; margin-top: 1em;">Semantic elements help screen reader index page structure and content.</p>

## Focus - The element with focus will receive input events. - Tab key to cycle through focusable elements. - Users should visually tell which element is in focus.

## Do not remove focus ```css /* Don't do this */ *:focus { outline: none; } ``` <p style="text-align: center; margin-top: 1.5em;">Ensuring that native or custom focus styling is visible.</p> <!-- .element: class="fragment" -->

## Focus order The order in which focus proceeds forward and backward through interactive elements via Tab or Shift + Tab.

## Manage focus - Only focus elements that keyboard users need to interact with. - Focus should not be trapped at one particular element, except for modal dialogs.

## Set `tabindex` - `tabindex="0"`: let DOM structure determine focus order. - `tabindex="-1"`: necessary for programmatically moving focus (e.g., error message, menus, radio buttons, etc.) - `tabindex="2"`: anti-pattern.

## Focus management example ```html <menu-list> <!-- After the user presses the down arrow key, focus the next available child --> <menu-item tabindex="0">Map</menu-item> <!-- call .focus() on this element --> <menu-item tabindex="-1">Layer</menu-item> <menu-item tabindex="-1">Scene</menu-item> <menu-item tabindex="-1">Tool</menu-item> <menu-item tabindex="-1">Data</menu-item> </menu-list> ``` <p style="font-size: 0.6em; margin-top: 1.5em;">[CodePen link](https://codepen.io/jimmieego/pen/Obdebp)</p>

## Plan for keyboard interactions <div class="twocol equal"> <div class="fragment"> <p style="margin-left: 0; width: 100%;">Common interactions may include:</p> <ul style="width: 100%;"> <li>Entering/exiting current component</li> <li>Submitting data</li> <li>Moving position or browsing</li> </ul> </div> <div class="fragment"> <p style="margin-left: 0; width: 100%;">Common keys to add actions to:</p> <ul style="width: 100%;"> <li>Enter (keyCode 13)</li> <li>Space (keyCode 32)</li> <li>Arrow keys (keyCode 37-40)</li> <li>ESC (keyCode 27)</li> <li>Tab (keyCode 9)</li> </ul> </div> </div>

## ARIA - WAI-ARIA: Web Accessibility Initiative – Accessible Rich Internet Applications. - ARIA provides a way for developers to modify and augment accessibility of standard DOM element.

<div class="twocol equal">   </div> <p style="font-size: 0.7em; margin-top: 1em; text-align: center;" class="fragment">ARIA doesn't augment inherent behavior like focusable and keyboard event listeners.</p>

## Why do we need ARIA? <p class="fragment">Certain semantics and design patterns make it impossible to use native HTML semantics:</p> <br> <ul> <li class="fragment">a pop-up menu, no standard HTML element.</li> <li class="fragment">a semantic characteristic "the user needs to know about this as soon as possible".</li> </ul>

## ARIA attributes | Type | Purpose | Examples | |------|---------|----------| | **Roles** | Meaning of an element | `tooltip`, `tablist`, `search` | | **Properties** | Relationships and functions | `aria-required`, `aria-controls`, `aria-label`, `aria-labelledby` | | **States** | Current interaction states | `aria-checked`, `aria-expanded`, `aria-hidden` |

## ARIA example ```html <div tabindex="0" class="checkbox checkbox--checked" > Show premium content </div> ``` Sighted users see a checkbox as a result of the CSS. However, non-sighted users will not know this is meant to be a checkbox. <!-- .element: class="fragment" -->

## ARIA example (fixed) ```html <div tabindex="0" class="checkbox checkbox--checked" role="checkbox" checked aria-checked="true"> Show premium content </div> ``` Screen readers will report this as a checkbox. This can make the difference between a person being able to use a form or leaving the site out of frustration. <!-- .element: class="fragment" -->

## Label and description - `aria-label`: specifies a string as accessible label and overrides native labelling. - `aria-labelledby`: specifies `id` of another element (or a list of `id`s). - `aria-describedby`: provides accessible description for an element.

### `aria-label` example <p style="text-align: center;">  </p> <p style="font-size: 0.6em; text-align: center; "> Source: [Google Developers - ARIA Labels and Relationships](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships) </p>

### `aria-labelledby` example <p style="text-align: center;">  </p> <p style="font-size: 0.6em; text-align: center; "> Source: [Google Developers - ARIA Labels and Relationships](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships) </p>

### `aria-describedby` example <p style="text-align: center;">  </p> <p style="font-size: 0.6em; text-align: center; "> Source: [Google Developers - ARIA Labels and Relationships](https://developers.google.com/web/fundamentals/accessibility/semantics-aria/aria-labels-and-relationships) </p>

### Relationship - `aria-controls`: indicates an element "controls" another element. - `aria-owns`: indicates an element should be treated as parent of another separate element.

## `aria-controls` example ```html <div role="scrollbar" aria-controls="main"></div> <div id="main"> <!-- . . . --> </div> ```

## `aria-owns` example <p style="text-align: center;">  </p> <p style="font-size: 0.6em; text-align: center; "> Source: [Google Developers - ARIA Labels and Relationships](https:developers.google.com/web/fundamentals/accessibility/semantics-ariaria-labels-and-relationships) </p>

## States - `aria-expanded`: indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. - `aria-hidden`: excludes current element from assistive technology.

## `aria-expanded` example ```html <button aria-expanded="false" aria-controls="expandable-list-1"> Expand List </button> <ul id="expandable-list-1"> <li><a href="http://example.com">Sample Link</a></li> <li><a href="http://example.com">Sample Link 2</a></li> <li><a href="http://example.com">Sample Link 3</a></li> </ul> ``` <p style="font-size: 0.8em;">`aria-controls` is needed here because the two elements are not parent and child.</p>

## ARIA best practices Don't change native semantics, unless you really have to. ```html <!-- Do this --> <h2><button>heading button</button></h2> <!-- Don't do this --> <h2 role="button">heading button</h2> ```

## ARIA best practices All interactive elements must be usable with keyboard. <p style="margin-top: 1.5em;">Example: if using `role="button"`, add `tabindex="0"` and support of Enter and Space keys.</p>

## ARIA best practices Don't use `role="presentation"` or `aria-hidden="true"` on a visible and focusable element. ```html <!-- Don't do this --> <!-- This will result in focusing on "nothing". --> <button role="presentation">Press me</button> <button aria-hidden="true">Press me</button> ```

## ARIA best practices All interactive elements must have an accessible label or name. ```html <!-- Do this --> <label> Email <input type="text" placeholder="name@example.com"> </label> ```

## Accessible custom components - [ArcGIS API for JavaScript](https://developers.arcgis.com/javascript/) - [WAI-ARIA Authoring Practices](http://w3c.github.io/aria-practices/) - [The A11Y Project](https://a11yproject.com/)

## Dev tools - [axe-core](https://github.com/dequelabs/axe-core) - Chrome: [Accessibility experiment](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a) - Firefox: [Accessibility Inspector](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector) - [eslint-plugin-jsx-a11y](https://www.npmjs.com/package/eslint-plugin-jsx-a11y)

## App Demos - Esri Canada: [Accessible App of Electric Charging Stations](https://arcgis103.esri.ca/WCAG-Configurable-Template-Test/?appid=e951691e3893444ea64e7c29d086e30c) - Esri: [a11y-map](https://github.com/Esri/a11y-map)

## What covered today - Semantics - Focus and keyboard access - ARIA and custom components - Dev tools - App demos