demystifying wcag 2.0: an intro to web, office, indesign, & pdf accessibility

93

Upload: 3play-media

Post on 03-Aug-2015

535 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility
Page 2: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

Accessibility for virtual learning

@davidberman @3play

{This document does not comply with all applicable guidelines for accessible digital documents: for an accessible alternative, please contact [email protected] or call +1 613 728-6777.}

3Play Media presents

Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

by David Berman, R.G.D, FGDC June 17, 2015

Page 3: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

3 Expert Speaker David Berman, R.G.D., FGDC

Topics (available publicly or at your location) "  Perfecting Your Web Strategy 2.0 "  Accessible documents, Web, mobile, eLearning, virtual classrooms "  Management of Web Projects + Accessible Documents "  Effective Web Interface Design Links and books: http://www.davidberman.com/accessibility#resources

facebook: David Berman

linkedin.com/in/bermandavid

twitter.com/davidberman

david

berm

an.c

om

Page 4: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

4 Click2Speak

Gal Sont: unstoppable

david

berm

an.c

om

Page 5: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

Gazespeaker da

vidbe

rman

.com

5

The Rolling Rabbi: unstoppable

Page 6: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

6 WHY SHOULD WE CARE?

“Everyone deserves the opportunity to fulfill their potential.” | David C. Onley, Lieutenant Governor of Ontario

david

berm

an.c

om

Page 7: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

7 5 reasons to care about accessibility da

vidbe

rman

.com

Page 8: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

8 2015: legal expectations are shifting Defendants to lawsuits brought against them recently: America Online Bank of America BMI Connecticut Attorney General Government of Canada Netflix Penn State University Priceline Ramada Southwest Airlines Target United Airlines da

vidbe

rman

.com

Page 9: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

9 Leadership: Ontario, Canada

david

berm

an.c

om

Page 10: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

10 Leadership: Ontario, Canada

david

berm

an.c

om

Page 11: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

11 Leadership: Canada

david

berm

an.c

om

Page 12: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

12 July 1, 2011: Ontario leaps ahead

Ontario’s precise Integrated Accessibility Standards Regulation 191/11 (IASR) kicks in, objectifying the 2005 Accessibility for Ontarians With Disabilities Act (AODA): "  Information and Communications

Standards "  Employment Standards "  Transportation Standards "  Design of Public Spaces Standards (regulation

413/12)

“making the province accessible for everyone by 2025”

david

berm

an.c

om

Jan 1 2014: Ontario deadlines took hold

Page 13: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

13 July 1, 2014: Norway takes a lead

Norway’s Anti-Discrimination and Accessibility Act, Section 14

david

berm

an.c

om

Page 14: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

14 1876: an American improves learning for the deaf

patent 174,465

david

berm

an.c

om

1938: hearing aid innovation

Page 15: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

15 1947: Bell Labs + quantum physics da

vidbe

rman

.com

Page 16: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

16 1953: $25,000 …“1 person, 1 radio”

Akio Morita triggers the revolution in commercial radio.

david

berm

an.c

om

Page 17: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

17 Online accessibility: it’s never been easier

"  Our world has never been so accessible

"  By helping build a more accessible Web, you are part of the largest liberation in human history

david

berm

an.c

om

Page 18: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

18 DIFFICULTIES AND TECHNOLOGIES: AVOIDING TRADEOFFS

david

berm

an.c

om

Page 19: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

19 Kinds of disabilities and online challenges EXAMPLES

1.  Permanent face blindness since birth 2.  Episodic cast, driving, eye drops, tipsy, flu, PTSD,

smoke-filled room, noisy place, pregnant, distance 3.  Acquired ageing-related 4.  Societal left-handedness

Impairments "  Visual… "  Dexterity (mobility)… "  Hearing… "  Language and speech… "  Cognitive… "  Social… da

vidbe

rman

.com

Page 20: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

20 Visual difficulties

Conditions: "  Low or constrained vision "  Colorblindness "  Blindness

david

berm

an.c

om

Page 21: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

Dexterity/mobility difficulties

"  Loss of limb "  Risk or loss of feeling or control "  Limited reach, strength, manipulation "  Arms full, hand in a cast, pain

david

berm

an.c

om

20

Page 22: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

22 Hearing difficulties

From slight hearing loss to complete deafness

david

berm

an.c

om

Page 23: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

23 Language and speech difficulties

"  Aphasia "  Delayed speech "  Lack of knowledge/skills (e.g. illiteracy)

david

berm

an.c

om

Page 24: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

24 Cognitive and learning difficulties

"  Dyslexia, dysgraphia, distraction, ADD, ADHD "  Developmental disabilities "  Being a search engine rather than a human!

david

berm

an.c

om

Page 25: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

25 Cognitive and learning difficulties: dyslexia

Dyslexia

db

david

berm

an.c

om

Page 26: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

Assistive technologies

In a world that assumes all faculties are available, swapping and extending senses is the creative response…

david

berm

an.c

om

Page 27: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

27 Instead of reading small… magnify

"  Magnifier software (e.g. ZoomText) "  Large print software "  Large print keyboard "  Text size commands "  Pinch-zoom touch interfaces

david

berm

an.c

om

Page 28: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

28

david

berm

an.c

om

Instead of seeing unclearly… enhance

eSight Corporation’s computerized glasses reconfigures high-definition camera images to two LED screens

Page 29: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

29 Instead of mousing… point nose and blink!

NRC’s Nouse scans head movements and eye blinks

david

berm

an.c

om

Page 30: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

30 Instead of swiping and scrolling… move your eyes

Tobii EyeMobile uses gaze alone with every Windows app

david

berm

an.c

om

Page 31: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

31 Instead of typing… talk

"  Voice recognition commands the device through voice (for example, Dragon Naturally Speaking, Siri, Google Now)

"  …or augment challenged typing by hearing what you have just typed

david

berm

an.c

om

Page 32: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

32 Instead of typing… click, sip, puff, tap

"  Alternative keyboards, input devices

"  Software can assist typed input through anticipation and filtering

"  Scalable objects help too

david

berm

an.c

om

Page 33: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

33 Instead of reading… feel da

vidbe

rman

.com

Dynamic braille displays raise or lower dot patterns on command … typically 12 to 80 cells.

Braille embossers print braille.

⠠⠙⠁⠧⠊⠙⠀⠠⠃⠑⠗⠍⠁⠝ ⠠⠉⠕⠍⠍⠥⠝⠊⠉⠁⠞⠊⠕⠝⠎

Page 34: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

34 The ideal accessible digital world Usable by everyone

on any user agent (e.g. browser, app, PDF/eBook reader) on any kind of device with any kind of connection in any kind of environment

david

berm

an.c

om

Page 35: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

1.  process orientation 2.  strategy 3.  technical discovery

4.  content outline 5.  information architecture design 6.  estimating (project planning)

7.  graphic design 8.  production (programming, testing, maintenance)

9.  evaluation

35 Roadmap for accessible publishing da

vidbe

rman

.com

Page 36: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

36 Common Standards “guidelines”, “recommendations”, “requirements”, “success criteria”, “WCAG”, “CLF”, “AODA”, “IASR”, “Section 508”, “W3C”, “PDF/UA”, oh my!

“ It felt like I was being forced to learn a whole new language from someone who was deliberately trying to confuse me…” | Govt. employee, on WCAG 2.0 da

vidbe

rman

.com

Page 37: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

37 WCAG 2.0 success criteria

W3C (World Wide Web Consortium) publishes

WCAG 2.0 (Web Content Accessibility Guidelines)

… can inoculate us against future change. #

  david

berm

an.c

om

Page 38: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

38 WCAG 2.0 “conformance levels” (published 2008, ratified 2010)

NOTHING LEVEL A LEVEL AA LEVEL AAA Worst ! " Best

"  Without level A: some people will find it impossible "  Without level AA: some people will find it difficult "  Without level AAA: some people will miss full impact For your site to be Level AA compliant, you must meet all 25 Level A and 13 Level AA standards.

david

berm

an.c

om

Page 39: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

39 WCAG 2.0 as a legal standard is trending globally

Canada govt. CLF 2.0 Part 2 WCAG 1.0 2001 Canada govt. Standard on Web Accessibility WCAG 2.0 AA 2011 Ont. govt.+biz AODA IASR WCAG 2.0 A/AA 2012-2021 Quebec govt. SGQRI 008 ~WCAG 2.0 2011 Manitoba govt. Website Standards WCAG 1.0 2005 USA, NY govt. Section 508 WCAG 1.0 partial current USA govt. Section 508 refresh WCAG 2.0 AA 2015 Illinois govt. IITAA ~WCAG 2.0 AA ~2015 Australia govt.+biz IPS/NTS WCAG 2.0 A/AA* 2012-2014 EU govt. Mandate M 376 WCAG 2.0 ??? France govt. RGAA 2.2.1 ~WCAG 2.0 2011 Germany govt. BITV 2 ~WCAG 2.0 2011 New Zealand govt. NZGWS 2.0 WCAG 2.0 2011 Norway UU WCAG 2.0 AA 2014

david

berm

an.c

om

Page 40: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

40 U.S. Government “Section 508”

Section 508 of the Rehabilitation Act of 1973 called for standards.

Triggered by a Congressional amendment in 1998, Section 508 Electronic and Information Technology Accessibility Standards, includes “Part 1194.22: Web-based Intranet and Internet Information and Applications”, which includes 16 standards named (a) through (p), issued December 2000. The Section 508 Refresh: a second draft of the “new Section 508” was released for public comment in 2011. The refresh will replace the 16 Section 508 rules with WCAG 2.0 Level AA.

david

berm

an.c

om

Page 41: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

41 U.S. Section 508 covered by WCAG

508 WCAG 1 WCAG 2

a 1.1 1.1

b 1.4 1.2

c 2.1 1.4

d 6.1 1.3, 1.4, 2.1

e 1.2 2.1

f 9.1 1.1

g 5.1 1.3

h 5.2 1.3

508 WCAG 1 WCAG 2

i 12.1 2.4

j 11.4 2.3

k * 1.3

l * 2.1, 4.1

m * 2.4

n 5.1-5.4 1.3, 2.1, 3.2, 3.3

o * 2.4

p 7.3 2.2

* in the spirit of WCAG 1.0

david

berm

an.c

om

Page 42: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

42 AODA: Ontario’s accessibility legislation Accessibility for Ontarians with Disabilities Act (2005) pertains to both government and private sector

david

berm

an.c

om

Page 43: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

43 AODA Accessibility Standard for Information and Communications Government of Ontario, Legislative Assembly: Jan 1 2012: content posted 2012+ to new* internet, intranet sites: AA with 2 exclusions

Jan 1 2016: content posted 2012+ to all internet sites: AA with 2 exclusions

Jan 1 2020: content posted 2012+ to all internet, intranet sites: AA Designated public sector organizations**, organizations with 50+ employees: Jan 1 2014: content posted 2012+ AND on new internet sites: A Jan 1 2021: content posted 2012+ on all internet sites: AA with 2 exclusions

*“new” means a site with a new domain name (including subdomains) or where over 50% of the content is being changed, rewritten, reorganized, redesigned, or re-managed **“designated public sector” includes all municipalities, hospitals, boards (e.g. district school boards), colleges, universities, public transportation organizations, commissions, authorities, and agencies There are additional deadlines for educational training resources and materials, that apply to education/training institutions and libraries.

david

berm

an.c

om

Page 44: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

44 WCAG 2.0 principles (25 Level A, 13 Level AA, 23 Level AAA) Principle 1: Perceivable… Information and interface must be presentable to users in ways they can perceive. (guidelines 1.1-1.4) Principle 2: Operable… User interface components and navigation must be operable. (guidelines 2.1-2.4) Principle 3: Understandable… Information and the operation of user interface must be understandable (guidelines 3.1-3.3) Principle 4: Robust… Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies. (guideline 4.1)

Page 45: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

45 September 2013: WCAG 2.0 for Non-Web ICT da

vidbe

rman

.com

Page 46: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

46 “Each PDF page is a painting”... – Duff Johnson, chair of PDF/UA committee How do we get to a workflow and quality regimen that adds accessibility WCAG 2.0 ideal (machine-readable) to the PDF’s long-held position as the world’s preferred portable, stable, and trustable document format for eyes to read?

The Lady of Shalott by JW Waterhouse (1849-1917)

“Camelot? picture darned faithful?”

“Camelot” by John Warnock, 1991

david

berm

an.c

om

Page 47: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

47 PDF/UA

PDF/UA: the PDF specification exclusively for universal access is an ISO standard (ISO 14289) Acrobat Pro X Accessibility Checker focusses on the WCAG 2.0 rules. Acrobat Pro XI and DC Accessibility Checker focusses on PDF/UA. The Matterhorn Protocol: 31 checkpoints (seeking 136 potential failures… 89 of which are software detectable and 45 requiring human judgment)

david

berm

an.c

om

Page 48: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

48 Tagged PDF

View> Show/Hide> Navigation Panes> Tags Acrobat Pro tagging tips (X, XI, or DC): "  turn on Tags pane > Highlight Content (and also use

its companion, the Find Tag From Selection command) "  Accessibility> Add Tags To Document

Construct HTML/XHTML PDF tag (case sensitive!)

Heading <h1> to <h6> <H1> to <H6> (and beyond!)

Paragraph <p> <P>

List <ul>, <ol> <List>, <L>, <Lbl>, <Lbody>

Table, table cells <table>, <th, <tr>, <td>

<Table>, <TH>, <TR>, <TD>

Images <img> <Figure>, Artifact

david

berm

an.c

om

Page 49: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

49 Accessible PDF graphically rich da

vidbe

rman

.com

Page 50: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

50 Accessible PDF: fillable, submittable, and dynamic layouts

david

berm

an.c

om

Page 51: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

51 Sustainable PDF: go to the source {samples of their InDesign source files and their dynamic PDF}

Build accessibility into the files (and templates) that tagged PDF originate from, so you’ll automatically… 1.  get accessibility in current (and future) exports to PDF 2.  avoid repeating repairs in future version of document 3.  enjoy the benefits of accessibility earlier

(inclusiveness, search)

david

berm

an.c

om

Page 52: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

52 Sustainable PDF: typical sources

Microsoft Word | 2010 (or 2013/2016 Windows) preferred

Microsoft PowerPoint | 2010 (or 2013/2016 Windows) preferred Microsoft Excel | 2010 (or 2013/2016 Windows) preferred

Adobe InDesign | CS5.5, CS6, or CC preferred

Adobe LiveCycle Designer | 8.2/ES SP1, 9/ES2, 10/ES3, ES4 (version ES2 included in Acrobat Pro 9 and X … none in XI or DC)

Adobe Acrobat Pro | X, XI or DC preferred

HTML (incl. converters such as EVO HTML to PDF Converter)

david

berm

an.c

om

Page 53: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

53 Microsoft Office to PDF workflow

Office 2000-2003, 2007: either Acrobat or Microsoft PDF add-in Office 2010/2013/2016: 32-bit alone, or 32-bit with Acrobat X, XI, or DC add-in (on 32-bit or 64-bit Windows) 1.  In Office 2010/2013/2016, File> Info> Check For Issues> Check Accessibility

… fix any errors, consider any warnings 2.  Acrobat ribbon> Preferences> Settings tab:

a.  check Enable Accessibility And Reflow With Tagged PDF b.  check Enable Advanced Tagging (in Word 2010, this setting is on the Word tab) c.  Advanced Settings button> Fonts section>

i.  Check + set Subset Embedded Fonts When Percent... = 1% ii.  empty the Never Embed list

3.  Acrobat ribbon> Create PDF 4.  Acrobat Pro> Tools> Action Wizard> Make Accessible Wizard> “Set Open Options” and

“Set Tab Order Property” 5.  For PDF/UA compliance (or a more accessible file), add a Document tag as the root

element above Sect, fix remaining issues flip the PDF/UA identifier (using Acrobat Pro) david

berm

an.c

om

Page 54: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

Berman Accessibility Ribbon for Word

david

berm

an.c

om Testers welcome:

davidberman.com/ribbon

53

Page 55: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

55 PowerPoint to PDF workflow 1.  Get your master slides perfect first (or use an

accessible PowerPoint as your template) for reading order and alternative text (see notes section of this page for David’s recipe).

2.  Run Office 2010/2013/2016 Windows Accessibility Checker: File> Info> Prepare For Sharing> Check Accessibility … errors, warnings, tips

3.  Export to PDF (File> Save & Send (Export in 2013/2016)> Create PDF/XPS button> Options> uncheck Bitmap…, check Accessibility)

4.  Test with Acrobat Pro Full Accessibility Checker

david

berm

an.c

om

Page 56: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

56 Adobe InDesign to PDF workflow In InDesign CS5.5/CS6/CC (which includes PDF tags subset): 1.  add alt text/figures to images (use Object> Object Export Options)

2.  add tags to styles (use Paragraph Styles> Export Tagging)

3.  anchor images in the text flow 4.  use the Articles panel to define content order 5.  use Bookmarks, TOC, Hyperlinks, cross-references as needed 6.  add Document Title to File Info 7.  export CS5.5: PDF Interactive, Buttons and Media = Include All, check Create Tagged PDF

CS6/CC: PDF Interactive, Forms And Media = Include All, check Create Tagged PDF, check Use Structure For Tab Order

…leaving only an Action Wizard to run in Acrobat Pro that… 1. Pages pane> all> Page Properties> Tab Order=Use Document Structure

2. File> Properties> Advanced> Language 3. File> Properties> Initial View> Show Document Title 4. run Accessibility> Full Check

david

berm

an.c

om

Page 57: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

57 Adobe InDesign to PDF export InDesign CS5.5 1.  File> Export> Save As Type=“Adobe PDF (Interactive)”,

Buttons and Media = Include All, check Create Tagged PDF

InDesign CS6/CC If your document contains forms, buttons, audio, video, or animation, do this: File> Export> Save As Type=“Adobe PDF (Interactive)”, Forms And Media = Include All, check Create Tagged PDF, check Use Structure For Tab Order OTHERWISE… (why? because this provides many more settings unrelated to accessibility, and still offers bookmarks and/or hyperlinks if you want them. The tradeoff is only that you will lose the functionality (though optionally not the appearance) of any interactive elements)

File> Export> Save As Type=“Adobe PDF (Print)”, check Create Tagged PDF, check Bookmarks, check Hyperlinks, with Advanced> Subset Fonts When Percent Of Characters Used Is Less Than = 0%) (so that show content changes that may be required on the resulting PDF someday will be easier to do)

david

berm

an.c

om

Page 58: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

58 Adobe Illustrator to PDF workflow In Adobe Illustrator: There is no alternative text or other such structures, however… 1.  group items into objects that would deserve to be one figure

2.  File> File Info> Document Title 3.  File> Save As> Save As Type=Adobe PDF, select Save

1.  set Adobe Preset = High Quality Print 2.  set Advanced>Subset Fonts When Percent of Characters

Used Is Less Than = 0% 3.  choose the Save PDF button

…and then do everything else in Acrobat Pro: 1. Pages pane> all> Page Properties> Tab Order=Use Doc. Structure

2. File> Properties> Advanced> Language 3.  …and > Initial View> Show Document Title 4. run Accessibility> Full Check

david

berm

an.c

om

Page 59: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

59 Adobe LiveCycle Designer to PDF workflow

In LiveCycle Designer: 1.  If importing PDF, Word, or Excel, get source file as

accessible as possible first (e.g. tagged PDF) … then check tool tips, custom screen reader text, and reading order.

2.  Only save “Dynamic XML” (aka XFA, as opposed to “static”) if you need dynamic (not just interactive), as resulting PDF harder to test, fix (no tags!), use (Adobe Reader 7+ only).

3.  File> Form Properties> Save Options> PDF area> Generate Accessibility Information (Tags) For Acrobat checked (note: dynamic get MSAA instead of tags)

…leaving only an Action Wizard to run in Acrobat Pro: 1. …and > Initial View> Show Document Title 2. run Accessibility> Full Check (not possible if Dynamic XFA)

david

berm

an.c

om

Page 60: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

60 WCAG 2.0 principles 1 of 4. Perceivable Principle 1: Perceivable… Information and user interface components must be presentable to users in ways they can perceive. (guidelines 1.1-1.4) 1.1 text alternatives 1.2 time-based media 1.3 adaptable 1.4 distinguishable

david

berm

an.c

om

Page 61: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

61 “Info and relationships” WCAG2 1.3.1 ≈508(d,g,h,k,n) “Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.” "  Tables (grids) "  Markup

"  Typography structure: quotes, strong, em, capitals, subscripts…

"  Lists: ordered, unordered "  Page structure: headings (H1 to H6, …), body, regions "  Page numbers (for documents)

A

david

berm

an.c

om

Page 62: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

62 Info and relationships: table design

<th> <tr>

Choice of soup Choice of sandwich Choice of dessert

Vegetarian Vegetarian Chocolate

French Onion Roast Beast Pumpkin Pie

Chicken Turkey Mousse

Choice of soup Vegetarian French Onion Chicken

Choice of sandwich Vegetarian Roast Beast Turkey

Choice of dessert Chocolate Pumpkin Pie Mousse

david

berm

an.c

om

"  think about linearization "  have no empty cells (insert a non-breaking space at

minimum …or something meaningful is even better)

Page 63: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

63 Info and relationships: tables

"  avoid using tables for layout (if you do, then you must: "  make sure content makes sense when linearized (easiest in a

simple grid) "  exclude elements that imply a data table: <th> and <summary> "  add an ARIA “presentation” role)

"  avoid complexity within tables where feasible (for example, avoid spanned cells)

"  avoid blank cells "  avoid absolute sizing of columns: instead use relative values such

as percentage

david

berm

an.c

om

Page 64: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

64 Info and relationships: tables vs. lists

"  use a list instead of a table for simple data (tip: ask yourself if you would use a spreadsheet or not)

david

berm

an.c

om

Page 65: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

65 Info and relationships: HTML data tables

<tr> <th> <td> david

berm

an.c

om

1. start with an optional heading or CAPTION (use CSS

to make it your choice of visible or invisible) of a sentence describing the table’s purpose (e.g. “Table that categorizes cats. Navigate on row headings to choose the species, then on column headings to find the breed and size.”)

2.  identify every row as <tr> 3.  identify every cell as either <th> (header) or <td>

(data) 4. designate every <th> as either scope=row or

scope=col (column)… Tip: you can add a terse abbr tag in header cells, to shorten read-out-loud time

Page 66: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

66 Data tables in Word 

1.  use Insert Table command (not Draw Table!)

2.  highlight header row, Table Tools> Design> check Header Row checkbox

3.  Table Tools> Layout> Repeat Header Rows (if 2007: instead Table Properties> Row> Repeat As Header Row At The Top Of Each Page)

4.  you can avoid having to do further work in the resulting PDF by using only one header row and no merged cells

5.  use Insert Caption to add a “Title”

6.  2010/2013/2016: Table Properties> Alt Text> Description (e.g. “Table that categorizes cats. Navigate on row headings to select species then on column headings to select breed and size.”) da

vidbe

rman

.com

Page 67: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

67 Data tables in PowerPoint, Excel

Microsoft Word: i

Table Tools> Design> Header Row checked (and if 2010/2013/2016: Table Properties> Alt Text> Description (e.g. “Table that categorizes cats by temperament and whisker length”)

Page Setup> Sheet tab> Rows To Repeat At Top to indicate mark top row as header row InDesign: h

david

berm

an.c

om

Page 68: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

68 Data tables in InDesign

1.  in a text box, Table> Insert Table.

2.  Use Table> Convert Rows submenu to change a given row to header, body, or footer as needed (so that when you export to PDF, they will already be correct)

3.  Plan to add a summary (which will be invisible) to each data table, using Acrobat Pro.

david

berm

an.c

om

Page 69: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

69 Data tables in PDF

To fix data tables too complex to be taken care of in the source document, choose Tags> Properties> Type: change Table Data Cell to Table Header Cell …also use Table Inspector or the TouchUp Reading Order’s Table Editor to fix specific complex cells (tip: right-click in Table Editor> Table Editor Options: turn on Show Cell Type).

use Insert Table to ensure form data tables automatically get <TH> and <TD>. Tip: you can’t achieve <TH> in data rows in LiveCycle Designer, so instead you would tag them as <TH> using Acrobat Pro.

david

berm

an.c

om

Page 70: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

david

berm

an.c

om

colorblind = life + death 70

Page 71: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

colorblind = life + death da

vidbe

rman

.com

71

Page 72: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

72 color + shape + how many da

vidbe

rman

.com

Page 73: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

color + shape + how many da

vidbe

rman

.com

73

Page 74: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

74 “Use of colour” WCAG2 1.4.1 ≈508(c) Colour cannot be the sole method of conveying content or differentiation. Colour alone is never used to distinguish links (unless the contrast ratio to surrounding text is at least 3:1, AND an additional differentiation exists …for instance, underlining… when the link is hovered or receives focus). Whether user has a colour deficit or using technology that doesn’t show colour, don’t rely on colour as the only cue, only as reinforcement.

A

david

berm

an.c

om

Page 75: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

75 Avoid using colour as a primary cue da

vidbe

rman

.com

Page 76: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

76 Avoid using colour as the only cue da

vidbe

rman

.com

Page 77: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

77 Avoid colour solely providing meaning da

vidbe

rman

.com

Page 78: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

78 “Contrast (minimum)” WCAG2 1.4.3 ≈508(c) Foreground/background colour combinations in active text (and images of text that are not branding) have a contrast ratio to what is next to it (such as a background, outline, or a halo) of at least 4.5:1 …or 3:1 for 18+ point (1.5+ em) … or bold text 14+ point (1.2+ em).

AA

david

berm

an.c

om

Page 79: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

79 Avoid poor colour contrast da

vidbe

rman

.com

Page 80: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

80 Avoid poor colour contrast printed

david

berm

an.c

om

Page 81: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

81 Contrast exploration: aDesigner’s Low Vision Simulation

david

berm

an.c

om

Page 82: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

82 Contrast minimum … quantified

AA Contrast ratio minimum: 4.5:1 (3:1 for 18+ pt. or 14+ pt. bold) Test all files with Colour Contrast Analyser’s luminosity algorithm, on Windows or MacOS. Android: run TeamViewer QuickSupport app on a Samsung tablet … or send screen shots iOS: use iOS Simulator with Colour Contrast Analyser … or send screen shots Windows: use Colour Contrast Analyser native

david

berm

an.c

om

Page 83: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

83 Contrast (and size) controls

Consider offering persistent contrast controls and size controls.

david

berm

an.c

om

Page 84: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

84 Contrast minimum: PowerPoint

If expecting high contrast or black and white viewing or printing of a PowerPoint file, add Grayscale and Black And White alternative styles: 1.  View>Slide Master> select first

master, select all objects, View> Grayscale, Grayscale> Grayscale (or Light Grayscale or whichever you prefer)

2.  Test: choose File>Print, flip through slides in preview

3.  Print in Grayscale mode (to PDF or paper)

david

berm

an.c

om

Page 85: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

85 Contrast minimum: PDF reader rescue

If it’s unrealistic for you to fix the color in a PDF, then advise your audience to use Adobe Reader or Acrobat’s user preference to show high-contrast colors on screen: "  choose Edit> Preferences> (in Mac OS: Acrobat> Preferences),

Accessibility> check Replace Document Colors, select Use High-Contrast Colors radio button, then choose a foreground/background combination you prefer from the pop-up menu.

david

berm

an.c

om

Page 86: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

86 … and the rest of WCAG 2.0 …without tradeoffs!

david

berm

an.c

om

Page 87: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

Testing, auditing, reporting investment da

vidbe

rman

.com

86

Page 88: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

88

Global thinking, starting at home.

david

berm

an.c

om

Page 89: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

89 davidberman.com/next $150 off full ticket June 29 2015, Toronto Prefer to join us in person or online? Type your discount code for June 29 2015 at davidberman.com/register

Coupon code for 3Play webinar

guests: 3PLAY

Want More? davidberman.com/register

david

berm

an.c

om

Page 90: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

Don’t just do good sites … do good! Contact us for accessibility workshops, webinars, audits, remediation, and certification: wcag2.com

facebook.com/davidbermancommunications twitter.com/davidberman … or +1-613-728-6777

Do Good Design editions: Chinese, English, Indonesian,

Korean, Malay, Russian, Spanish, and braillex …read the first 40 pages free at Google Books:xx

www.davidberman.com/dogoodgooglebook

90

david

berm

an.c

om

Page 91: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

Learn more: learning guides, coaching, on-site courses

“The New Standard on Web Accessibility” “Accessible PDF by Design” “Accessible Virtual Classrooms” “Accessible Distance Learning” “Perfecting Your Web Branding Strategy 2.0” Available for $97 each from davidberman.com/store Learning guides: davidberman.com/store Blog: davidberman.com/blog

david

berm

an.c

om

Page 92: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility

Thank you!

facebook.com/davidbermancommunications linkedin.com/in/bermandavid twitter.com/davidberman Subscribe to our notices: davidberman.com/subscribe Evaluation? davidberman.com/evaluation Upcoming events: "  New Standard On Web Accessibility course | Toronto or online | June 29

2015 "  Accessibility and Social Justice | Dublin, Ireland | September 19 2015 "  New Standard On Web Accessibility course | Ottawa | October 2 2015 "  New Standard on Web Accessibility course | Vancouver, Victoria | November

2015 "  More: davidberman.com/courses/schedule Need to reach me? [email protected] / +1-613-728-6777

david

berm

an.c

om

SOURCES/CREDITS: Sources for quotes, statistics, images available on request. Some material reproduced with permission. © 2001-2015 David Berman. All rights reserved. No reproduction, in whole or part, without written permission. Many Images courtesy of Shutterstock. Full Intellectual property credits, sources and available upon request or in the full event or the full learning guide for the full-day version of this event. E&OE

Page 93: Demystifying WCAG 2.0: An Intro to Web, Office, InDesign, & PDF Accessibility