nyc department of information technology and ... accessibility for city agencies... ·...

NYC Department of Information Technology and Telecommunications (DoITT)

November 29, 2018

Digital Accessibility(for City Agencies)

Walei Sabry, Digital Accessibility Coordinator

Business Solutions Delivery

Sharon Winberg, Director of Content Operations

Business Solutions Delivery

Agenda

● The Law/Report

● What is Digital

Accessibility?

● Requirements

● Examples/Best Practice

● Testing / Q/A Tools

● Getting Started

● Tutorials

● Resources

The Law● Local Law 26 of 2016 - 3/14/16, in effect 9/14/16

● Requires City agencies to make a reasonable effort

to make websites accessible

● Requires City appoint designee & adopt standards

● Risks of non-compliance

● Spirit of the law => online applications/web apps

The City of New York

Web Accessibility Report● Submitted report 6/2017 to City Council, every 2 years after

● Audited a sample of websites and set accessibility plan

● Scope: Over 300 websites on NYC.gov associated with

over 50,000 pages

What is Digital Accessibility?• Websites

• Electronic documents

• Multimedia

• Social media

Why is it important?● Improves the lives of people with disabilities● Improves the user experience of your sites/applications● Modernizes your sites/applications ● Enables sites/applications to be read by assistive

technologies● Helps you avoid complaints and/or lawsuits

Goal: consistent experience for all users

Types of Disabilities / Assistive Technologies• Disabilities that affect: eyes, ears, hands, brain

• Assistive technologies: screen readers, screen magnifiers

Web Content Accessibility

Guidelines (WCAG)● WCAG 2.0 published 12/2008

● Update WCAG 2.1 published 6/2018; Quick reference

● 4 principles, multiple guidelines per principle

● Conform to level AA (i.e., A, AA)

● New features in WCAG 2.1

People First

● Perceivable

● Operable

● Understandable

● Robust

4 WCAG Principles = POUR

Principle 1: PerceivableInformation and user interface components must

be presentable to users in ways they can perceive.

Principle 2: OperableUser interface components and navigation must be

operable.

Principle 3: UnderstandableInformation and the operation of user interface

must be understandable.

Principle 4: RobustContent must be robust enough that it can be

interpreted by a wide variety of user agents,

including assistive technologies.

ExamplesThe following slides show examples of common accessibility barriers and accessibility best practices.

Page Structure – What To Do• Include regions – top/global nav, secondary nav, left nav,

main content – NYC Hope example

• Set unique, descriptive page/browser titles - Example page

on DFTA’s website

• Use consistent navigation, content structure, lists

• Include “Skip to Content”, “Back to Top” links

• Set lang attributes to identify language of page/parts

Headings – What Not To Do

Headings – What To Do

Headings – Example Code<h1>Main Heading</h1>

<h2>Sub-Heading Level 2</h2>

<h3>Sub-Heading Level 3</h3>

**IMPORTANT** Use headings for structure and to aid in

navigating with assistive technologies, not for design.

Link Text• Unique in comparison to other links on the page

• Not generic – avoid…“Click here,” “Go to the page,” “Read

more”

• Descriptive – explains what will happen when clicked

• Consistent across pages

• Underlined

Don’t Do: “Download the report”

Do: “Download the 2018 Annual Report”

Forms – Basic Guidelines• Set the browser/page title with a unique/descriptive name

• Use headings

• Include labels above fields

• Include instructions before the form fields or to clarify or

explain how to proceed

• Flag required fields

• Ensure colors meet color contrast requirements

• Ensure other relevant guidelines are met

Forms – Keyboard

Accessibility & FocusEnsure:

• interactive items are keyboard accessible (can tab to them or arrow through them)

• there are no keyboard traps (e.g. a pop-up in which a keyboard user gets stuck)

• focus is visible and advances in the proper order

Forms – Error Handling• Set up to identify errors and alert the user of them

• Create a custom error message for each required field (Log

them in a template when creating - page name/URL,

required field, statement identifying the error, and

statement explaining how to fix the error)

• Set up to prevent errors (e.g., legal/financial/data)

Forms – Accessible

Example• Email the Commissioner Form (Mayor’s Office for

People with Disabilities)

Color Contrast

This color contrast

example doesn’t

meet the 4.5:1 ratio.

This color

contrast example

does.

WebAIM Color Contrast Checker

Use of Color

ABC Internship Program

The application period is now

closed.

ABC Internship Program

*The application period is now

closed.

What Not To Do: What To Do:

Use of

Color

&

Tables

Non-Text Content

● Maps

● Images

● Infographics

● Audio/video

Alt Text

● Where?

● When?

● Who?

● What?

● Why?

Alt Text Example - Problem

● Department of Buildings (DOB) Sidewalk Shed Map

○ originally one page with an embedded CARTO map

○ 28 images without alt text, confusing

○ 9,000 data points, no way for a screen reader user to

access the data points

○ Complaint received

Alt Text Example - Solution

● DOB Sidewalk Shed Map – Solution

○ Included instructions on the page and a legend

○ Used ARIA to hide the map from screen reader

○ Provided text alternatives of the data points

○ Included a keyboard-accessible filter

● Additional example - HRA Center Locations

ARIA – What’s ARIA?● Accessible Rich Internet Applications suite of web

standards

● Provides a way to make web sites and applications more

accessible

● Helpful with dynamic content and advanced user controls

developed with Ajax, HTML, Javascript, and related

technologies

Videos - Symbols

• Captions

• Audio descriptions

• Transcripts

• Audio description

transcripts

Making Videos Accessible

Non-Described Video Profile

Described Video Profile

Audio Described Transcript

• Have keyboard access

• Have text labels

• Not play automatically

• Not be hidden while the video is playing

Video Controls

Testing / Q/A Tools● WAVE – page, browser

extensions

● Totally – browser

extensions

● Axe – browser

extensions

● WebAIM Color

Contrast Checker

● Voiceover on Mac

● Screen readers – NVDA,

JAWS

● App testing – iOS and Android

● W3C Markup Validation

Service

● Digital Accessibility

Coordinator

Social Media Accessibility

● Include alt-text or written descriptions for all images

● Include captions on videos

● Provide audio descriptions of videos

● Accessible social media tips and guide on the

DigitalBlueprintNYC

Getting Started● Socialize the mandate and requirements

● Identify resources and get up to speed

● Identify apps and sites, prioritize

● Test to identify issues and scope

● Determine approach – key tasks/content, high-impact

repairs, low-effort repairs

● Implement improvements

● Test, iterate, re-test

Tutorials● W3C Web Accessibility Initiative (WAI)

● Accessibility Tutorials – page structure, menus,

tutorials, forms, tips for developing

● ARIA

● Easy Checks – A First Review

● W3C Images Tutorial

• WCAG 2.1

• W3C Web

Accessibility Initiative

• WebAIM

• Access-board.gov

• Images & Video

Resources• NYC.gov/MOPD - Digital

Toolkit and Guides

• NYC Digital Blueprint –

Accessibility Toolkit

• Accessibility Resources

handout

Recap

● The Law/Report

● What is Digital

Accessibility?

● Requirements

● Examples/Best Practice

● Testing / Q/A Tools

● Getting Started

● Tutorials

● Resources

Remember - People First

● Perceivable

● Operable

● Understandable

● Robust

4 WCAG Principles = POUR

Contact InfoWalei Sabry, Digital Accessibility Coordinator, BSD

wsabry@doitt.nyc.gov / 212-788-8291

Sharon Winberg, Director of Content Operations, BSD

swinberg@doitt.nyc.gov