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

46
NYC Department of Information Technology and Telecommunications (DoITT) November 29, 2018

Upload: lamanh

Post on 16-Jul-2019

215 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

NYC Department of Information Technology and Telecommunications (DoITT)

November 29, 2018

Page 2: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Digital Accessibility(for City Agencies)

Walei Sabry, Digital Accessibility Coordinator

Business Solutions Delivery

Sharon Winberg, Director of Content Operations

Business Solutions Delivery

Page 3: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Agenda

● The Law/Report

● What is Digital

Accessibility?

● Requirements

● Examples/Best Practice

● Testing / Q/A Tools

● Getting Started

● Tutorials

● Resources

Page 4: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 5: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 6: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

What is Digital Accessibility?• Websites

• Electronic documents

• Multimedia

• Social media

Page 7: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 8: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

• Assistive technologies: screen readers, screen magnifiers

Page 9: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 10: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

People First

● Perceivable

● Operable

● Understandable

● Robust

4 WCAG Principles = POUR

Page 11: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Principle 1: PerceivableInformation and user interface components must

be presentable to users in ways they can perceive.

Page 12: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Principle 2: OperableUser interface components and navigation must be

operable.

Page 13: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Principle 3: UnderstandableInformation and the operation of user interface

must be understandable.

Page 14: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

interpreted by a wide variety of user agents,

including assistive technologies.

Page 15: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 16: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 17: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Headings – What Not To Do

Page 18: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Headings – What To Do

Page 19: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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.

Page 20: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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”

Page 21: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 22: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 23: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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)

Page 24: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Forms – Accessible

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

People with Disabilities)

Page 25: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Color Contrast

This color contrast

example doesn’t

meet the 4.5:1 ratio.

This color

contrast example

does.

WebAIM Color Contrast Checker

Page 26: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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:

Page 28: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Non-Text Content

● Maps

● Images

● Infographics

● Audio/video

Page 29: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Alt Text

● Where?

● When?

● Who?

● What?

● Why?

Page 30: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 31: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 32: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 33: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Videos - Symbols

Page 34: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

• Captions

• Audio descriptions

• Transcripts

• Audio description

transcripts

Making Videos Accessible

Page 35: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Non-Described Video Profile

Page 36: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Described Video Profile

Page 37: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Audio Described Transcript

Page 38: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

• Have keyboard access

• Have text labels

• Not play automatically

• Not be hidden while the video is playing

Video Controls

Page 39: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 40: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 41: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 42: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

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

Page 43: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

• 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

Page 44: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Recap

● The Law/Report

● What is Digital

Accessibility?

● Requirements

● Examples/Best Practice

● Testing / Q/A Tools

● Getting Started

● Tutorials

● Resources

Page 45: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Remember - People First

● Perceivable

● Operable

● Understandable

● Robust

4 WCAG Principles = POUR

Page 46: NYC Department of Information Technology and ... Accessibility for City Agencies... · 29/11/2018 · Agenda The Law/Report ... • NYC.gov/MOPD - Digital Toolkit and Guides

Contact InfoWalei Sabry, Digital Accessibility Coordinator, BSD

[email protected] / 212-788-8291

Sharon Winberg, Director of Content Operations, BSD

[email protected]