NYC Department of Information Technology and ... Accessibility for City Agencies... ·...
46
NYC Department of Information Technology and Telecommunications (DoITT) November 29, 2018
Transcript of 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:
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
[email protected] / 212-788-8291
Sharon Winberg, Director of Content Operations, BSD
