FOR NON-PROGRAMMERS MELISSA GREEN @mbfortson mfgreen1@ua.edu - - PowerPoint PPT Presentation

▶
for non programmers
SMART_READER_LITE
LIVE PREVIEW

FOR NON-PROGRAMMERS MELISSA GREEN @mbfortson mfgreen1@ua.edu - - PowerPoint PPT Presentation

Sep 19, 2022 32 likes •576 views

ACCESSIBLE DATA VISUALIZATION FOR NON-PROGRAMMERS MELISSA GREEN @mbfortson mfgreen1@ua.edu BIT.LY/MSUDATA16ALLY The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.

slide-1
SLIDE 1

ACCESSIBLE DATA VISUALIZATION FOR NON-PROGRAMMERS

MELISSA GREEN @mbfortson mfgreen1@ua.edu BIT.LY/MSUDATA16ALLY

slide-2
SLIDE 2

“ ”

The power of the Web is in its

  • universality. Access by

everyone regardless of disability is an essential aspect.

Tim Berners-Lee

“ ”

slide-3
SLIDE 3

“ ”

To enable persons with disabilities to live independently and participate fully in all aspects of life, States Parties shall take appropriate measures to ensure to persons with disabilities access, on an equal basis with others… to information and communications, including information and communications technologies and systems.

UN Convention on the Rights of Persons with Disabilities

“ ”

slide-4
SLIDE 4

Who are talking about?

slide-5
SLIDE 5

Who are we leaving out?

  • 15% - global
  • 12.6% - United States
  • 11% - U.S. undergraduates
slide-6
SLIDE 6

Designing for accessibility benefits everyone

slide-7
SLIDE 7

Applicable laws & requirements in the U.S.

  • In the United States
  • Americans with

Disabilities Act (ADA)

  • Rehabilitation Act of

1973

  • Section 504
  • Section 508
slide-8
SLIDE 8

Applicable laws & requirements in higher education

  • In higher education
  • Departments of Justice &

Education

  • Dear Colleague (2010)
  • Universities charged with planning

for accessible technology tools, services, and information

  • “Accessible”
  • W3C Web Content Accessibility

Guidelines (WCAG), 2.0 A/AA/AAA

slide-9
SLIDE 9

Applicable laws & requirements around the world

  • World laws
slide-10
SLIDE 10

Standards and guidelines

  • Most commonly used:
  • WCAG 2.0 A/AA/AAA
  • Perceivable
  • Operable
  • Understandable
  • Robust
  • Section 508
slide-11
SLIDE 11

More about POUR

  • Perceivable
  • Available through sight hearing or touch
  • Operable
  • Compatible with keyboard or mouse
  • Understandable
  • User-friendly, easy to comprehend
  • Robust
  • Works across browsers and devices, follows standards
slide-12
SLIDE 12

Today’s focus

  • Content and structure
  • Text equivalents
  • Color
  • Data tables
  • Hyperlinks
slide-13
SLIDE 13

Content and structure

  • Use simple language
  • Use empty (white)

space to improve readability

slide-14
SLIDE 14
slide-15
SLIDE 15

sing the

slide-16
SLIDE 16
slide-17
SLIDE 17

Content and structure 2

  • Use headings and

lists correctly

slide-18
SLIDE 18

Headings and lists: document example

slide-19
SLIDE 19

Headings and lists: web example

slide-20
SLIDE 20

Text equivalents: alternative text

  • Alternative text
  • Contextual

descriptions

slide-21
SLIDE 21

Text equivalents: document example

slide-22
SLIDE 22

Text equivalents: document example 2

slide-23
SLIDE 23

Text equivalents: web example (visual editor)

slide-24
SLIDE 24

Text equivalents: web example (text editor)

<img src="chrysanthemum.jpg" alt="close-up of orange chrysanthemum">

slide-25
SLIDE 25

Text equivalents: chart/graph example

slide-26
SLIDE 26

Text equivalents: table example

slide-27
SLIDE 27

Text equivalents: meaningful alt text

slide-28
SLIDE 28

Text equivalents: contextual descriptions

  • Contextual

descriptions

slide-29
SLIDE 29

Color: conveying meaning

  • Don’t use color alone

to convey meaning

slide-30
SLIDE 30

Designing for color-blindness

Images: WebAIM

slide-31
SLIDE 31

Designing for color-blindness 2

slide-32
SLIDE 32

Designing for color-blindness 3

slide-33
SLIDE 33

Designing for color-blindness 4

slide-34
SLIDE 34

Designing for color-blindness 5

slide-35
SLIDE 35
slide-36
SLIDE 36

Color: sufficient contrast

  • Provide sufficient

color contrast

slide-37
SLIDE 37
slide-38
SLIDE 38

Color contrast example

Foreground color

HEX 808185 RGB 128.129.133

Background color

HEX B0B0B0 RGB 176.176.176

slide-39
SLIDE 39

WebAIM Color Contrast Checker

slide-40
SLIDE 40

Greyscale

slide-41
SLIDE 41

Data tables providing context

  • Use appropriate markup
slide-42
SLIDE 42

Data tables: simple vs. complex

slide-43
SLIDE 43

Data tables: mark table headers

slide-44
SLIDE 44

Data tables: on the web

  • Identify all data table headers using the <th>

element.

  • Provide an appropriate scope attribute: <th

scope="col"> for column headers or <th scope="row"> for row headers.

  • If appropriate, add a table <caption> for the

data table.

slide-45
SLIDE 45
slide-46
SLIDE 46
slide-47
SLIDE 47

Hyperlinks: providing context

  • Link text should

provide context

slide-48
SLIDE 48

Avoiding “click here”

Register here. To register, complete the online registration form. Data Management Plan Data Management Plan (PDF)

slide-49
SLIDE 49

Hyperlinks: link behavior

  • Don’t force links to
  • pen in a new window
slide-50
SLIDE 50

Don’t force links to open in a new window

<a href="http://www.thelibrary.com" target="_blank">Visit The Library</a> <a href="http://www.thelibrary.com">Visit The Library</a> Show online help (opens in new window) Fundraiser ordering (external site)

slide-51
SLIDE 51

Microsoft Office Accessibility Checker

slide-52
SLIDE 52

Adobe Acrobat accessibility tools

slide-53
SLIDE 53
slide-54
SLIDE 54

ACCESSIBLE DATA VISUALIZATION FOR NON-PROGRAMMERS 2

MELISSA GREEN @mbfortson mfgreen1@ua.edu BIT.LY/MSUDATA16ALLY