Improving Accessibility with

ArcGIS Web Applications

Charmel Menzel Esri GIS Solution Engineer cmenzelesricom

Klara Schmitt ArcGIS Hub UIUX Expert kschmittesricom

Presentation Topics

bull What is Accessibility in online web apps

bull Current Capabilities

- Color and color contrast

- Text alternatives

- Focus and tab order

bull Resources for Testing Accessibility

What is Accessibility

Make content and software usable

for everyone regardless of abilities

Disability Statistics

In United States

bull 41 million people have a disability

bull 10 (237 million) adults have vision loss

bull 20 (48 million) are deaf or hard of hearing

Sources World Health Organization and US Census Bureau

Wide Range of Disabilities

Disability Permanent Temporary Situational

Touch One arm Arm injury New parent

See Blind Cataract Distracted driver

Hear Deaf Ear infection Bartender

Speak Non-verbal Laryngitis Heavy accent

Why is Accessibility Important

bull The American Disabilities Act (ADA)

bull Section 508 ndash government-wide IT

accessibility

bull Universal design Inclusive design

- People with different abilities should have

equal access to web

- Good accessibility is good user

experiencePhoto Credit Luis Miguel Justino

What is Accessibility

Make content and software usable

for everyone regardless of abilities

Disability Statistics

In United States

bull 41 million people have a disability

bull 10 (237 million) adults have vision loss

bull 20 (48 million) are deaf or hard of hearing

Sources World Health Organization and US Census Bureau

Wide Range of Disabilities

Disability Permanent Temporary Situational

Touch One arm Arm injury New parent

See Blind Cataract Distracted driver

Hear Deaf Ear infection Bartender

Speak Non-verbal Laryngitis Heavy accent

Why is Accessibility Important

bull The American Disabilities Act (ADA)

bull Section 508 ndash government-wide IT

accessibility

bull Universal design Inclusive design

- People with different abilities should have

equal access to web

- Good accessibility is good user

experiencePhoto Credit Luis Miguel Justino

Disability Statistics

In United States

bull 41 million people have a disability

bull 10 (237 million) adults have vision loss

bull 20 (48 million) are deaf or hard of hearing

Sources World Health Organization and US Census Bureau

Wide Range of Disabilities

Disability Permanent Temporary Situational

Touch One arm Arm injury New parent

See Blind Cataract Distracted driver

Hear Deaf Ear infection Bartender

Speak Non-verbal Laryngitis Heavy accent

Why is Accessibility Important

bull The American Disabilities Act (ADA)

bull Section 508 ndash government-wide IT

accessibility

bull Universal design Inclusive design

- People with different abilities should have

equal access to web

- Good accessibility is good user

experiencePhoto Credit Luis Miguel Justino

Wide Range of Disabilities

Disability Permanent Temporary Situational

Touch One arm Arm injury New parent

See Blind Cataract Distracted driver

Hear Deaf Ear infection Bartender

Speak Non-verbal Laryngitis Heavy accent

Why is Accessibility Important

bull The American Disabilities Act (ADA)

bull Section 508 ndash government-wide IT

accessibility

bull Universal design Inclusive design

- People with different abilities should have

equal access to web

- Good accessibility is good user

experiencePhoto Credit Luis Miguel Justino

Why is Accessibility Important

bull The American Disabilities Act (ADA)

bull Section 508 ndash government-wide IT

accessibility

bull Universal design Inclusive design

- People with different abilities should have

equal access to web

- Good accessibility is good user

experiencePhoto Credit Luis Miguel Justino

WCAGWeb Content Accessibility Guidelines

WCAG 20 Overview

What is Esri doing to improve accessibility

bull Reviewing products internally for compliance

Esri reports the current accessibility status of Esri products using the

Voluntary Product Accessibility Templatereg (VPATreg)

Industry and government personnel developed the VPAT as an

informational tool to assist federal information technology

professionals with the market research requirements of Section 508

A completed VPAT is known as an Accessibility Conformance

Report (ACR)

What is Esri doing to improve accessibility (slide 2)

bull Fixing accessibility issues

bull Adding accessibility into new features

bull Sharing knowledge and best practices

- Webinars

- Conference Sessions

- GeoNet Community

- Blogs

What is Esri doing to improve accessibility (slide 3)

httpsbitly379tMcc

WCAG 20 Overview

What is Esri doing to improve accessibility

bull Reviewing products internally for compliance

Esri reports the current accessibility status of Esri products using the

Voluntary Product Accessibility Templatereg (VPATreg)

Industry and government personnel developed the VPAT as an

informational tool to assist federal information technology

professionals with the market research requirements of Section 508

A completed VPAT is known as an Accessibility Conformance

Report (ACR)

What is Esri doing to improve accessibility (slide 2)

bull Fixing accessibility issues

bull Adding accessibility into new features

bull Sharing knowledge and best practices

- Webinars

- Conference Sessions

- GeoNet Community

- Blogs

What is Esri doing to improve accessibility (slide 3)

httpsbitly379tMcc

What is Esri doing to improve accessibility

bull Reviewing products internally for compliance

Esri reports the current accessibility status of Esri products using the

Voluntary Product Accessibility Templatereg (VPATreg)

Industry and government personnel developed the VPAT as an

informational tool to assist federal information technology

professionals with the market research requirements of Section 508

A completed VPAT is known as an Accessibility Conformance

Report (ACR)

What is Esri doing to improve accessibility (slide 2)

bull Fixing accessibility issues

bull Adding accessibility into new features

bull Sharing knowledge and best practices

- Webinars

- Conference Sessions

- GeoNet Community

- Blogs

What is Esri doing to improve accessibility (slide 3)

httpsbitly379tMcc

What is Esri doing to improve accessibility (slide 2)

bull Fixing accessibility issues

bull Adding accessibility into new features

bull Sharing knowledge and best practices

- Webinars

- Conference Sessions

- GeoNet Community

- Blogs

What is Esri doing to improve accessibility (slide 3)

httpsbitly379tMcc

What is Esri doing to improve accessibility (slide 3)

httpsbitly379tMcc

Color and Color Contrast

Color Contrast

bull WCAG 20 to meet Minimum Level AA (WCAG 143)

- Text and images of text need contrast ratio of at least 451

- Large text and images of large-scale text need contrast ratio of at least 31

- Incidental Text or images of text that are part of an inactive user interface

component that are pure decoration that are not visible to anyone or that are

part of a picture that contains significant other visual content have no contrast

requirement

- Logotypes Text that is part of a logo or brand name has no minimum contrast

requirement

Color Contrast

bull WCAG 20 to meet Minimum Level AA (WCAG 143)

- Text and images of text need contrast ratio of at least 451

- Large text and images of large-scale text need contrast ratio of at least 31

- Incidental Text or images of text that are part of an inactive user interface

component that are pure decoration that are not visible to anyone or that are

part of a picture that contains significant other visual content have no contrast

requirement

- Logotypes Text that is part of a logo or brand name has no minimum contrast

requirement

White Text on Colored Background

Light Colored Background with

White Text Fails

45 contrast ratio

Dark Colored Background with

White Text Meets

45 contrast ratio

Flip the Color Contrast

Light Colored Background

With Dark Text Meets

45 contrast ratio

ArcGIS Online Map Viewer

What is the Map Viewer

bull Create 2D maps

bull Contains

- Base map

- Set of data layers

bull Edit Data

bull Perform Analyses

bull Embed into Web Applications

Introducing the next

generation of map

making with

Map Viewer Beta

Colorblind Friendly

Color Oracle (httpscolororacleorg) is used to simulate color blindness

Use of Color Alone

bull Color is not the only visual means of conveying information (WCAG 141)

Flip the Color Contrast

Light Colored Background

With Dark Text Meets

45 contrast ratio

ArcGIS Online Map Viewer

What is the Map Viewer

bull Create 2D maps

bull Contains

- Base map

- Set of data layers

bull Edit Data

bull Perform Analyses

bull Embed into Web Applications

Introducing the next

generation of map

making with

Map Viewer Beta

Colorblind Friendly

Color Oracle (httpscolororacleorg) is used to simulate color blindness

Use of Color Alone

bull Color is not the only visual means of conveying information (WCAG 141)

ArcGIS Online Map Viewer

What is the Map Viewer

bull Create 2D maps

bull Contains

- Base map

- Set of data layers

bull Edit Data

bull Perform Analyses

bull Embed into Web Applications

Introducing the next

generation of map

making with

Map Viewer Beta

Colorblind Friendly

Color Oracle (httpscolororacleorg) is used to simulate color blindness

Use of Color Alone

bull Color is not the only visual means of conveying information (WCAG 141)

What is the Map Viewer

bull Create 2D maps

bull Contains

- Base map

- Set of data layers

bull Edit Data

bull Perform Analyses

bull Embed into Web Applications

Introducing the next

generation of map

making with

Map Viewer Beta

Colorblind Friendly

Color Oracle (httpscolororacleorg) is used to simulate color blindness

Use of Color Alone

bull Color is not the only visual means of conveying information (WCAG 141)

Introducing the next

generation of map

making with

Map Viewer Beta

Colorblind Friendly

Color Oracle (httpscolororacleorg) is used to simulate color blindness

Use of Color Alone

bull Color is not the only visual means of conveying information (WCAG 141)

Colorblind Friendly

Color Oracle (httpscolororacleorg) is used to simulate color blindness

Use of Color Alone

bull Color is not the only visual means of conveying information (WCAG 141)

Use of Color Alone

bull Color is not the only visual means of conveying information (WCAG 141)

Designing Maps ndash Options to Consider

1

2

3

Vary

Labels and Color

Utilize

Different Shapes

Change both

Size and Color Value

of same shape

Map to Web App

Map ViewerConfigurableApp Template

Web Map Application

ArcGIS Web Applications

bull Create using

- ArcGIS for Developer Tools

- Configurable Application Templates

- Easiest way to deploy a web app

- Designed to support specific workflows

- Over 25+ options

Color and Contrast

Demonstration

Text Alternatives in

ArcGIS Web Applications

Alternative Text (referred to as Alt Text)

bull Non-text content has text alternative

bull If image is decorative use alt=ldquordquo

bull Reference WCAG 111

Map to Web App

Map ViewerConfigurableApp Template

Web Map Application

ArcGIS Web Applications

bull Create using

- ArcGIS for Developer Tools

- Configurable Application Templates

- Easiest way to deploy a web app

- Designed to support specific workflows

- Over 25+ options

Color and Contrast

Demonstration

Text Alternatives in

ArcGIS Web Applications

Alternative Text (referred to as Alt Text)

bull Non-text content has text alternative

bull If image is decorative use alt=ldquordquo

bull Reference WCAG 111

ArcGIS Web Applications

bull Create using

- ArcGIS for Developer Tools

- Configurable Application Templates

- Easiest way to deploy a web app

- Designed to support specific workflows

- Over 25+ options

Color and Contrast

Demonstration

Text Alternatives in

ArcGIS Web Applications

Alternative Text (referred to as Alt Text)

bull Non-text content has text alternative

bull If image is decorative use alt=ldquordquo

bull Reference WCAG 111

Color and Contrast

Demonstration

Text Alternatives in

ArcGIS Web Applications

Alternative Text (referred to as Alt Text)

bull Non-text content has text alternative

bull If image is decorative use alt=ldquordquo

bull Reference WCAG 111

Text Alternatives in

ArcGIS Web Applications

Alternative Text (referred to as Alt Text)

bull Non-text content has text alternative

bull If image is decorative use alt=ldquordquo

bull Reference WCAG 111

Alternative Text (referred to as Alt Text)

bull Non-text content has text alternative

bull If image is decorative use alt=ldquordquo

bull Reference WCAG 111

Configurable Web Application

ArcGIS Story Maps httpsstorymapsarcgiscomen

Adding Alt Text to ArcGIS StoryMaps

Alt Text Automatically Added to HTML using Aria-label tag

Use Captions

Effective Alt Text

bull Concise

bull Do Not Repeat - No need to use the phrase image of to describe images

bull Include text within image

bull For Maps communicate purpose and function

- Describe the map

- Do not list features

- Remember context

- Provide data in an alternative formatThe Esri Olympia regional

office is located at 111 Market

St NE Suite 250 across the

street from the Farmers

Market

Focus and Tab Order in

ArcGIS Web Applications

Focus and Tab Order

bull WCAG 247 Interactive elements should have clear focus

bull WCAG 132 Navigation (tab) order should be logical and intuitive

bull WCAG 211 Keyboard users should be able to use functionalities using

keyboard only

bull WCAG 212 Content does not trap keyboard focus within subsections

Alt Text Automatically Added to HTML using Aria-label tag

Use Captions

Effective Alt Text

bull Concise

bull Do Not Repeat - No need to use the phrase image of to describe images

bull Include text within image

bull For Maps communicate purpose and function

- Describe the map

- Do not list features

- Remember context

- Provide data in an alternative formatThe Esri Olympia regional

office is located at 111 Market

St NE Suite 250 across the

street from the Farmers

Market

Focus and Tab Order in

ArcGIS Web Applications

Focus and Tab Order

bull WCAG 247 Interactive elements should have clear focus

bull WCAG 132 Navigation (tab) order should be logical and intuitive

bull WCAG 211 Keyboard users should be able to use functionalities using

keyboard only

bull WCAG 212 Content does not trap keyboard focus within subsections

Effective Alt Text

bull Concise

bull Do Not Repeat - No need to use the phrase image of to describe images

bull Include text within image

bull For Maps communicate purpose and function

- Describe the map

- Do not list features

- Remember context

- Provide data in an alternative formatThe Esri Olympia regional

office is located at 111 Market

St NE Suite 250 across the

street from the Farmers

Market

Focus and Tab Order in

ArcGIS Web Applications

Focus and Tab Order

bull WCAG 247 Interactive elements should have clear focus

bull WCAG 132 Navigation (tab) order should be logical and intuitive

bull WCAG 211 Keyboard users should be able to use functionalities using

keyboard only

bull WCAG 212 Content does not trap keyboard focus within subsections

Focus and Tab Order in

ArcGIS Web Applications

Focus and Tab Order

bull WCAG 247 Interactive elements should have clear focus

bull WCAG 132 Navigation (tab) order should be logical and intuitive

bull WCAG 211 Keyboard users should be able to use functionalities using

keyboard only

bull WCAG 212 Content does not trap keyboard focus within subsections

Focus and Tab Order

bull WCAG 247 Interactive elements should have clear focus

bull WCAG 132 Navigation (tab) order should be logical and intuitive

bull WCAG 211 Keyboard users should be able to use functionalities using

keyboard only

bull WCAG 212 Content does not trap keyboard focus within subsections

Keyboard Navigation Focus Built In ArcGIS StoryMaps

ArcGIS Hub

Klara Schmitt

ArcGIS Hub (At a Glance)

bull ArcGIS Hub strives for WCAG 21 AA

bull 8 open bugs affecting 6 criteria

bull Testing in VoiceOver and NVDA

bull Automated testing with Lighthouse amp aXe

How do you make an accessible ArcGIS Hub

bull Customizations can go awry

bull Its important understand accessibility guidelines wersquore all

in it together

bull Run page audits on the work you do

- axe plugin available for Chrome and Firefox

bull Pick contrast compliant color pallets

ArcGIS Hub

Klara Schmitt

ArcGIS Hub (At a Glance)

bull ArcGIS Hub strives for WCAG 21 AA

bull 8 open bugs affecting 6 criteria

bull Testing in VoiceOver and NVDA

bull Automated testing with Lighthouse amp aXe

How do you make an accessible ArcGIS Hub

bull Customizations can go awry

bull Its important understand accessibility guidelines wersquore all

in it together

bull Run page audits on the work you do

- axe plugin available for Chrome and Firefox

bull Pick contrast compliant color pallets

ArcGIS Hub (At a Glance)

bull ArcGIS Hub strives for WCAG 21 AA

bull 8 open bugs affecting 6 criteria

bull Testing in VoiceOver and NVDA

bull Automated testing with Lighthouse amp aXe

How do you make an accessible ArcGIS Hub

bull Customizations can go awry

bull Its important understand accessibility guidelines wersquore all

in it together

bull Run page audits on the work you do

- axe plugin available for Chrome and Firefox

bull Pick contrast compliant color pallets

How do you make an accessible ArcGIS Hub

bull Customizations can go awry

bull Its important understand accessibility guidelines wersquore all

in it together

bull Run page audits on the work you do

- axe plugin available for Chrome and Firefox

bull Pick contrast compliant color pallets

ArcGIS Hub Theming

bull Hub default Calcite theme passes AA

- assuming no Shared Theme is inherited from ArcGIS Online

bull If using your own brand colors test contrast

-WCAG Luminosity Color Contrast Ratio Analyzer (Chrome)

- aXe (Chrome Firefox)

-WebAIM

bull If generating new theme find appropriate colors early

- httpcolorsafeco

DIY Hub Accessibility

bull Images need alt text or aria-

labels (if svgs)

bull iframes need titles

bull Avoid auto-play on media or

background-images

bull Video needs subtitles

bull httpsamaraorg

bull Keep Global Nav on

bull Tables need headers

Additional Resources

Esri Public Accessibility Resources

bull Email alias EsriAccessibilityesricom

bull Contracts accessibility page and VPAT page links

- httpswwwesricomen-uslegalaccessibilitysection-508

- httpswwwesricomen-uslegalaccessibilityvpats

bull Esri Community GeoNet Accessibility Group

- Public Collaboration on Esri Accessibility

- httpscommunityesricomgroupsaccessibility

Esri Public Accessibility Resources

bull Email alias EsriAccessibilityesricom

bull Contracts accessibility page and VPAT page links

- httpswwwesricomen-uslegalaccessibilitysection-508

- httpswwwesricomen-uslegalaccessibilityvpats

bull Esri Community GeoNet Accessibility Group

- Public Collaboration on Esri Accessibility

- httpscommunityesricomgroupsaccessibility

Esri Accessibility Resources (continued)

Recent Esri Staff Accessibility Presentation Recordings

Esri DevSummit 2019

bull DIY Accessibility - YouTube

bull Accessible Web Mapping Apps ARIA WCAG and 508 Compliance - YouTube

bull Improving Accessibility with ArcGIS Online Web Apps - YouTube

Esri GeoDev Webinar January 2019

bull Web Accessibility Best Practices ndash YouTube

Accessibility Resources

bull The A11Y Project (httpsa11yprojectcom) (a community-driven effort to make

web accessibility easier)

bull Mozilla Developer Network (MDN) Accessibility

httpsdevelopermozillaorgen-USdocsWebAccessibility

bull Inclusive Design by Microsoft (httpswwwmicrosoftcomdesign)

bull Google Developers Web Fundamentals Accessibility

(httpsdevelopersgooglecomwebfundamentalsaccessibility)

Alternative Text Resources

WebAIM (web accessibility in mind) httpswebaimorgtechniquesalttext

4 Syllables

bull https4syllablescomauarticlestext-alternatives-images-examples

bull https4syllablescomauarticlestext-alternatives-images-captions

Color Selection Tools

bull Contrast Ratio (httpscontrast-ratiocom)

bull WebAIMorg (httpswebaimorgresourcescontrastchecker)

bull WCAG Luminosity Color Ratio Analyzer built by Esri Canada staff

bull Color Brewer (httpcolorbrewer2org)

bull Color Oracle (httpscolororacleorg)

Screen Readers

FREE

bull NVDA by NV Access (Windows)

bull Serotek System Access (Windows)

bull ORCA (Linux)

bull VoiceOver (Apple)

bull ChromeVox (Google Chrome)

bull ChromeVis (Google Chrome)

NOT FREE

bull JAWS ldquoJob Access With Speechrdquo by

Freedom Scientific

ArcGIS Security Update ndash HTTPS Only

bull Esri is committed to ensuring your content is secure

- HTTPS Only HSTS to be enforced September 15 2020

bull What does this mean for you

- After 91520 all HTTP requests to ArcGIS Online will be redirected to HTTPS

- Clients limited to HTTP only will fail (for example scheduled clear-text Python script calls)

- HTTP only ArcGIS Enterprise deployments may have issues accessing ArcGIS Online

services

bull What do you need to do

- Validate your ArcGIS Online org utilizes HTTPS only immediately

- Launch AGO Security Advisor tool to check your org settings TrustArcGIScom

- If HTTP enabled use tool to discover HTTP references and change to HTTPS

- Enforce HTTPS only for your orgs ASAP and validate clientsscripts can use HTTPS

- Keep an eye out for additional announcements and support guidance pages

Email alias EsriAccessibilityesricom

Email alias EsriAccessibilityesricom