CHALLENGES & OPPORTUNITIES IN CREATING ACCESSIBLE

POWER BI REPORTS

Meagan Longoria

May 5, 2018

About Me

Meagan Longoria

Microsoft Data Platform MVP

Solution Architect at BlueGranite

Blog: https://datasavvy.me

Twitter: @mmarie

LinkedIn: www.linkedin.com/in/meaganlongoria/

Most of us think about accessibility in data viz the wrong way

This report

design would be

GREAT if it

weren’t for the

users!

Art by Kendra Little

Change Your Mindset:Medical vs Social Model of Disability

Medical

Disability = Condition

Everyone needs a non-disabled body and

mind.

Change Your Mindset:Medical vs Social Model of Disability

Social

Disability = societal barriers

Society should change attitudes and

physical structures to accommodate

those with impairments.

Change Your Mindset:Medical vs Social Model of Disability

Medical

Disability = Condition

Social

Disability = societal barriers

Change Your Mindset: Universal Design

The design of products (websites, data visualizations) that are

accessible to, and usable by, as many people as reasonably possible

without the need for special adaptation or specialized design.

Benefits more than just disabled users

Does not expect that 100% universal solution

will be achieved

Change Your Mindset: Graceful Degradation vs Progressive Enhancement

Graceful Degradation

Build for the most advanced/able user. Allow other users to have a downgraded experience.

>

Progressive Enhancement

Build so that all users can perform baseline functions. Add extra functionality for more advanced/able users.

<

Accessibility and Usability Go Hand in Hand

Usability: effectiveness, efficiency and satisfaction with which

specified users achieve specified goals

Accessibility: an attribute through which people with disabilities can

perceive, understand, navigate, and interact with the application

Usability

Accessibility

A FIRST LOOK AT POWER BI

ACCESSIBILITY FEATURES

STANDARDS & COMPLIANCE

Accessibility Standards: WCAG 2.0Web Content Accessibility Guidelines

4 principles:

Perceivable

Operable

Understandable

Robust

Guidelines and sufficient techniques

Levels A, AA, and AAA

WCAG 2.0Sample of Relevant Guidelines

Text

Non-text content has a text alternative (A)

Text is used to convey information rather than images of text (AA)

The visual presentation of text and images of text has a contrast ratio

of at least 4.5:1 (AA)

WCAG 2.0Sample of Relevant Guidelines

Non-Visual Communication

Color is not used as the only visual means of conveying information or

distinguishing a visual element. (A)

A mechanism is available to allow the purpose of each link to be

identified from link text alone (A)

WCAG 2.0Sample of Relevant Guidelines

Complexity

Components that have the same functionality within a set of web

pages are identified consistently (AA)

A mechanism is available for identifying specific definitions of words

or phrases used in an unusual or restricted way, including idioms and

jargon (AAA)

WCAG 2.0Sample of Relevant Guidelines

Interaction

All functionality of the content is

operable through a keyboard interface

without requiring specific timings for

individual keystrokes (A)

Accessibility Laws: Section 508 of the Rehabilitation Act

Requires access for both members of the public and federal employees to technologies when developed, procured, maintained, or used by federal agencies

Many state agencies adhere to 508 standards as well!

Accessibility Laws: Section 508 of the Rehabilitation Act

When compliance imposes an undue burden, agencies shall provide individuals with disabilities with the information and data involved by an alternative means of access

You can always make an Excel file/Word doc, but then you

have to maintain two versions.

Now aligns with WCAG standards!

Areas of Accessibility

VisualMotor CognitiveHearing

HearingAccommodates presbycusis, acoustic trauma, auditory processing disorder, and otosclerosis, etc.

Audio should not auto-play and should allow the user to easily start and stop it

Video should be captioned or have a transcript

Audio should have a transcript

Shortcuts:

Google Docs voice transcriptions (free, but can be hit or miss)

YouTube auto-captions (free, but can be hit or miss)

EXAMPLES OF VIDEO AND AUDIO IN POWER BI

CognitiveAccommodates Down’s syndrome, autism, dyslexia, dementia, etc.

These users need minimized distractions and simple, consistent user interfaces

Tips:

Use clear, easy to read typeface

Keep navigation elements consistent

Minimize/eliminate movement

Beware the Play Axis

Beware overly complicated graphs

Avoid unnecessarily complex language, jargon, or acronyms

EXAMPLES OF EXCESSIVE COGNITIVE

LOAD

MotorAccommodates RSI, cerebral palsy, Parkinson’s, muscular dystrophy, etc.

These users may not use a mouse

Tips:

Make sure important information is keyboard accessible

Don’t place clickable elements too close together

Don’t rely on tooltips to convey key information

Beware of custom visuals that have moving elements

EXAMPLES OF A KEYBOARD UNFRIENDLY

REPORT

VisualAccommodates Color Vision Deficiency, Low Vision, Blindness

Important design attributes:

Size

Contrast

Color

Power BI features:

Alt text

Markers on line and area

charts

Chart titles

In-focus mode

Accessible Show Data table

Report themes

Keyboard shortcuts

Tips for Visual AccessibilityAccommodates Color Vision Impairment, Low Vision, Blindness

Don’t rely on color as the only indicator

Populate alt text for all non-decorative visuals

Avoid auto-playing video/audio

Beware the Play Axis

W3C recommends 18pt font or 14pt bold

Sans serif, wider stroke fonts are easiest to read

Pay attention to contrast between foreground and background

Testing Visual Accessibility

Keyboard Navigation

Mobile Device with Brightness on Low

Color Vision Deficiency

Coblis http://www.color-blindness.com/coblis-color-blindness-simulator/

Vischeck http://www.vischeck.com/vischeck/vischeckImage.php

Color Contrast

WebAIM https://webaim.org/resources/contrastchecker/

Accessible Colors http://accessible-colors.com/

Blur Tool

– The Squint Test https://chrome.google.com/webstore/detail/the-squint-

test/gppnipfbappicilfniaimcnagbpfflpg

SCREEN READER FRIENDLY REPORT

Power BI Accessibility Issues As of March 2018

Interactivity, bookmarks, and links are not keyboard accessible

Tab Order

Alt text is static

Pages don’t have names when viewed via Publish to Web

The Big Question:

Given the limitations, when do you decide to create an alternate version? Are you really prepared to keep two versions up to date?

Accessibility Is Usability

Visual

Size

Contrast

Alt text

Chart Titles

Legible fonts

Cognitive

Clear, easy to read typeface

Consistent navigation elements

Minimize element movement

Avoid complex language or jargon

Avoid overly complicated graphs

Preattentive

Attributes

Affordances

Cognitive

Load

Accessibility Makes Business Sense

It’s expensive (and often unrealistic) to maintain two versions

It’s more expensive to retrofit

Many accessibility standards enhance basic usability, which

increases adoption

Parting Thought

What if we build with inclusiveness in mind and

someone with an impairment is able to do their

job because of that?

Resources For Further Learning

■ A simple introduction to web accessibility: https://www.creativebloq.com/netmag/simple-introduction-web-accessibility-7116888

■ The A11y Project – resources: https://a11yproject.com/resources

■ Section 508 standards: https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-section-508-standards/section-508-standards

■ Accessibility on DataSavvy.Me: https://datasavvy.me/category/accessibility/

■ Improving screen reader accessibility in Power BI reports: https://www.blue-granite.com/blog/improving-screen-reader-accessibility-in-power-bi-reports

■ How to meet WCAG 2.0: https://www.w3.org/WAI/WCAG20/quickref/?showtechniques=121

■ Accessible Colors: http://accessible-colors.com/

■ Colors A11y Stats: http://clrs.cc/a11y/

■ Incl.ca archives (Nicolas Steenhout): https://incl.ca/archives/

■ Your Interactive Makes Me Sick: https://source.opennews.org/articles/motion-sick/

Meagan Longoria

@mmarie

DataSavvy.Me

Questions & Comments