Digital Accessibility Essentials Digital Accessibility Services (DAS)

Digital Accessibility Essentials Digital Accessibility Services (DAS) Harvard University Information Technology (HUIT) 1

After today’s session, you’ll be prepared to Describe what digital accessibility is Recall key components of Harvard’s accessibility policy and standards Recognize how barriers affect people with disabilities Apply essential skills for web, docs, and communications Integrate accessibility into your planning processes 2

Accessibility Overview 3

What is digital accessibility? Making electronic content available to and usable by everyone - at the same time, with the same ease of use - including and especially people with disabilities. A11y Accessibility 4

Harvard’s Standards: WCAG Web Content Accessibility Guidelines (WCAG) 2.1 Acronym often said like “Wuh-Cag” Internationally recognized 4 principles: Perceivable, Operable, Understandable, Robust (POUR) 3 cumulative levels of compliance, A AA AAA 5

Digital Accessibility Policy Highlights Harvard University Digital Accessibility Policy: effective June 1, 2023 The Policy applies to new digital content created or substantially revised technology purchased or developed The Policy covers public-facing content and technologies (websites, social channels) password-protected content and technologies (LMS, apps, etc.) 6

Digital Accessibility Policy Procedures Policy Procedures Information and guidance on implementing Harvard's Digital Accessibility Policy, with supporting examples and definitions. I. Introduction II. Policy Requirements III. Websites IV. Purchasing & Procurement V. Multimedia Accessibility VI. Documents & Internal Communication Tools VII. Social Media VIII.Temporary Exceptions IX. Available Assistance X. Policy and Procedures Terms and Phrases 7

How are people affected? Disabilities can alter how we interact with technology Each has specific causes and symptoms Vary greatly across different conditions Visual Auditory Motor Cognitive blindness, color blindness, low vision difficulty hearing, deafness paralysis, tremors, carpal tunnel syndrome memory or attention issues, difficulty interpreting information 8

Types of exclusions Image from https:// 9

7 Accessibility Essentials Best practices for people who create and publish content 10

7 Accessibility Essentials 1. Headings: Descriptive headings for content section 2. Tables: Purpose and labels 3. Color: Color contrast and conveying meaning 4. Plain Language: Easy and quick comprehension 5. Links: Easy to find and descriptive 6. Image Alternatives: Meaningful and descriptive 7. Media Alternatives: Captions and description 11

1. Headings Are Descriptive Use one H1 per page H2 for all major sections H3 for all subsections, etc Avoid skipping heading levels Writing Headings Heading Structure Write Useful Headings 12

2. Use Tables for Data, Not Layouts Data arranged by columns/rows Include descriptive headers Include caption text Avoid merged/split cells Avoid tables for design layouts Source: WebAIM Screen Reader User Survey #9 Identifying Headings, Lists, and Tables 13

3. Intentional Use of Color Text has strong color contrast Dark on light or Light on Dark 4.5:1 minimum contrast ratio Combine other formatting/design features. ALLCAPS or Bold Distinct shapes/patterns Avoid Reliance on C olor Checking Color Con Using Color to Convey Information / Use Sufficient Color Contrast 14

4. Plain language and clear structure Use plain language “prior to” “before” “sufficient” “enough” Define acronyms on first use Avoid jargon and figures of speech Use bulleted lists, when possible Keep sentences short Break page up into paragraphs Readability Analyzer 15

5. Descriptive link text Describe where links go Understand link out of context Avoid generic phrases like: Click here Read more Three Examples WORST: Check color contrast here: https://webaim.org/resources/contras tchecker/ STILL NOT GREAT: Go here to check color contrast. BETTER: Check color contrast with the WebAIM Contrast Checker. Writing Helpful Link Text 16

6. Alternative Text Read by screen reader software Describes image and provides context Displayed if image fails to load Tourists pose for pictures while touching the foot of the John Harvard Statue. Indexed by search engines Many users turn off images in emails Writing Good Alt Text to Describe Images 17

Alt text do’s and don’ts Do. Keep it simple, helpful & descriptive Mention if it’s a logo, illustration, painting etc. Don’t. Overthink it Use “image of” or “link to” Duplicate text on the page Alt “” when decorative End with a period. 18

Activity Writing alt text for images 19

What should the alt text be? 20

Alt text changes with context No context: A mostly empty stadium. Recent turnout for track tryouts: Harvard Stadium with two lone runners bounding up the steps. Renovation projects: Harvard Stadium with cracked concrete pillars. 21

7. Three forms of media alternatives Captions Transcripts Synchronized text of the audio material provided on screen with the video Non-synchronized text of the audio material provided adjacent to the video or audio file Audio Description A separate spoken audio track of what is visually happening in a video 22

Accessible Documents 23

Accessible Documents DAP includes documents posted on websites. Apply 7 essentials when creating or cleaning up source docs Use document accessibility checkers Microsoft Office Google Docs (Grackle) Adobe Acrobat (PDF) 24

Accessible PDFs Convert accessible source files (Word, InDesign) Avoid export options for print (print to PDF) Use Acrobat Accessibility Full Check Verify and fix remaining issues Check tags and reading order Publish and share your PDF 25

Getting Started 26

How do I get started? 1. Integrate a11y essentials into your process 2. Assess your site’s a11y 3. Prioritize what to fix 4. Take small steps now 27

1.Integrate A11y into your process Starting with a11y is easier and less expensive than remediation. Add alt text to your images Consider how you are using color in your content Utilize DAS site’s Get Started Guide 28

2. Assess your Site Start with Automated Tools: Follow up with Manual Testing: WAVE browser extension Identify common user tasks HeadingsMap extension Test those tasks using: Sign up for Siteimprove Download the Chrome Extension Only the keyboard Screen readers like NVDA 29

3. Prioritize what to fix Review findings from testing Use prioritization matrix Fix high impact low effort issues Low-hanging fruit Image credit: NN Gr oup 30

4. Start small, start now Check a11y the next time you create a web page or doc Caption your videos Attend DAS Office Hours Sign up for DAS trainings Contact DAS anytime: [email protected] 31

Appendix - Getting started Assess your site Request a Siteimprove or AMP Account Prioritize what to fix accessibility.huit.harvard.edu/tools Using Prioritization Matrices to Inform UX Decision s nngroup.com/articles/prioritization-matrices/ WAVE Browser Extension (Chrome & Firefox) wave.webaim.org/extension/ Easy Checks - A First Review of Web Accessibilit y Integrate accessibility into your process w3.org/WAI/test-evaluate/preliminary/ PC Users: Using NVDA screen reader webaim.org/articles/nvda/ MAC Users: Using Voiceover screen reader Incorporating accessibility early and throughout uiaccess.com/accessucd/early.html Planning for accessibility from the start accessibility.umn.edu/tutorials/planningaccessibility-start webaim.org/articles/voiceover/ 32

Resources 33

Trainings by Digital Accessibility Services (DAS) Content Digital Accessibility for Content Creators ( instructor-led or on-demand) Testing and Technical Knowledge Testing for Digital Accessibility Measuring Accessibility with Siteimprove Digital Accessibility in Canvas Web Accessibility in HTML and CSS Creating Accessible Docs or Slides or PDF s Multimedia Accessibility (On-demand cour Procurement and Policy Accessible Technology Procurement se) Intro to Digital Accessibility and Harvard P IT Academy: Digital Accessibility Foundati ons olicy 34

Stop by our virtual Office Hours! Offered on the 2nd and 4th Fridays of each month from 10am-12pm. Bring your accessibility questions, or just stop by to say hello! accessibility.huit.harvard.edu/das-office-h ours 35

Need an accessible doc fast? Submit to Harvard's preferred remediation vendor, Submit t AbleDocs! o AbleDo Quotes are provided before remediation work begins cs For any cost questions, contact DAS to explore other remediation options Vendor will add accessible tags to the PDF Vendor will not fix color contrast or color alone for meaning issues. Simple documents starts at 5/page 25 minimum charge Complex documents 12/page Fillable/OCR documents 55/page 36

Useful Accessibility Resources Microsoft Word Programs Digital Accessibility Services Using the Accessibility Checker Training Offerings Make Accessible Word Documents (Microsoft) Guidance on Creating Accessible Google D Accessible Word templates (Microsoft) Google Programs Make your doc or slides more accessible ocs Attend an Upcoming Office Hours PDF Create Accessible Docs using Grackle Adobe Acrobat Accessibility How to Open Grackle InDesign Accessibility Try Grackle in a Walkthrough Document PDF Accessibility (video) from 508.gov Grackle Video Library Adobe Overview of Accessible PDFs PDF Reading Order 37

Final Questions? 38