IT 7113 Research Project

IT 7113 Research Project
Accessible Visualization
Group 15 – Tatiana Baeva, Leo Iacono, Avery Hui

Research description, problem and expected
outcome
Project overview:
We will be performing research over best practices of building and developing visualization for people
with visual disabilities. What things we should avoid when building visualizations if we want users to
be able to analyze it? What things have to be included in visualizations to make it more accessible
(color contrast, patterns, shapes, text description, etc.)?
Methodology:
We will build a visualization for CCSE enrollment at KSU using Tableau software. This visualization
will have 2 versions:
1. Basic set of visualizations in the way we would build it without concentrating best practices for
people with disabilities. We will use few tools to evaluate accessibility of this visualization (color
contrast test, screen reader test, etc.). Based on the results of these tests we will build another set of
visualizations describe below;
2. Visualization that takes in consideration major techniques and practices of developing charts and
graphs for people with disabilities. We will use the same tools as for visualization #1 to evaluate
accessibility of modified one.
Expected outcome:
Second set of visualizations will be more accessible after performing tests to show how major principals
can help to achieve desired result.

Tools to use for visualization evaluation
Android App
• ViaOpta Sim (Vision disease simulator)
• CVSimulatior (Chromatic Vision Simulator)
Chrome extensions
• Read Aloud (Voice reader)
• NoCoffee (Vision Simulator)
IOS App
• Color Contrast
Desktop software
• JAWS (Screen reader)
• NVDA (Screen reader)

Disability statistics
According to figures released by the Census Bureau for the
year 2016, estimated 40 million Americans (12.8% of the U.S.
population) have some type of disability and out of this
number, the percentage of those with disability increased from
11.9% in 2010 to 12.8% in 2016. Consider impairments that
impact accessibility of online websites, applications, and
documents.
This survey estimates the number of people with specific impairments as follows:
• 14.8 million (5.0%) have a cognitive, mental, or emotional impairment.
• 20.6 million (7.0%) have difficulty lifting or grasping. This could, for example impact their use of a
mouse or keyboard.
• 11 million (3.5%) have a hearing impairment. They might rely on transcripts and / or captions for
audio and video media.
• 7.2 million (2.3%) have a vision impairment. These people might rely on a screen magnifier or a
screen reader, or might have a form of color blindness.

Vision disability
This research is concentrated on visual disability and basic
principles of web accessibility rather than about any other
type of disability since we deal with visualizations
distributed over the web.
In a fact sheet on visual impairment and blindness [WHO-
VI] the World Health Organization (WHO) estimates that of
the 253 million people worldwide live with visual
impairment: 36 million are blind and 217 have moderate or
severe vision impairment.
Visual impairment (vision impairment, vision disability) is defined as a decreased ability to see to a
degree that causes problems not fixable by usual means, such as glasses or medication. “Low vision” refers
to visual impairments other than blindness. In many contexts, low vision only includes impairments that
are not corrected with regular glasses, contact lenses, medicine, or surgery.

Causes of low vision
Most people develop low vision due to eye disease or health conditions. These are more common
among older people. Some low vision is congenital (from birth) and some is caused by injuries.
Starting around age 40, most people have declining vision that is not caused by disease, including
decreasing ability to focus on text that is close, decreasing color perception, decreasing contrast
sensitivity, and more.
There are some common causes of low vision among adults in America.
• 'Diabetic Retinopathy', is a condition in which Diabetes has damaged tiny blood vessels inside
the person's retina, causing low vision.
• 'Age-Related Macular Degeneration', is a condition in which the cells in a person's retina
that allow them to see fine details have died.
• 'Glaucoma', is a condition in which the fluid pressure in a person's eyes slowly rises, damaging
their optic nerve.
• 'Cataracts', are a condition that involves a clouding of the lens in a person's eye.

Types of visual impairment
This section briefly introduces five types of visual impairment that impact web use, not including
total blindness:
• Visual acuity (clarity) commonly refers to the clarity of vision. Visual acuity is dependent on
optical and neural factors, i.e., the sharpness of the retinal focus within the eye, the health and
functioning of the retina, and the sensitivity of the interpretative faculty of the brain.
• Light and glare sensitivity is a debilitating loss of visual acuity in bright lighting, such as
when near a bright light source or outdoors in bright sunlight.
• Contrast sensitivity is the ability to detect subtle differences in shading and patterns. Contrast
sensitivity is important in detecting objects without clear outlines and discriminating objects or
details from their background.
• Field of vision is the entire area that a person is able to see when their eyes are fixed in one
position. There are four types of visual field defects: loss of vision above or below the
horizontal, loss of vision at the sides, loss of central vision, and loss at one side of the visual field
for both eyes.
• Color vision is the ability of an organism or machine to distinguish objects based on
the wavelengths (or frequencies) of the light they reflect, emit, or transmit. There are two major
types of color blindness: those who have difficulty distinguishing between red and green
(Protanopia, Deuteranopia, Protanomaly, Deuteranomaly) and who have difficulty distinguishing
between blue and yellow (Tritanopia, Tritanomaly).

Colorblindness
Approximately one in twelve men, and one out of every two-hundred women, experience a form
of colorblindness. One misconception that many people have is that persons with
colorblindness see only black and white. In actuality, there are many types and degrees of
colorblindness:
• Monochromacy is the form most associated with colorblindness, where people see no colors.
• Protanomaly is referred to as, 'red-weakness,' and the person views a shift in the hue of red
colors towards green and additional affects.
• Deuteranomaly is also referred to as, 'green-weakness,' and the person has difficulty telling
differences in the red, orange, yellow and green regions of the color spectrum.
• Persons with Dichromacy cannot tell the difference between red, orange, yellow and green.
• Persons with Protanopia find that the brightness of colors such as red, orange and yellow is
greatly reduced; they may appear as black or dark gray.
• Persons with Deuteranopia experience the same vision issues as persons with Protanopia,
but the dimming is not as great.

Examples of colorblindness
Normal Sight Deuteranopia sight Tritanopia sight Monochromacy sight
Full color perception Red-green color
blindness
Blue-yellow color
blindness
No color perception
(rare)

More examples
These color charts show how different colorblind
people see compared to a person with normal color
vision.
Testing the colors of a web chart, (center),
to ensure that no information is lost to
the various forms of color-blindness.

Field of Vision
Field of vision, or visual field, is the entire area that can be seen when the eye is directed forward,
including what is seen with peripheral vision. Some eye and neurological conditions cause field loss,
where people have a smaller or obscured field of vision. For example, significant peripheral field loss,
sometimes called "tunnel vision", is somewhat like looking through a drinking straw.
Types of visual field loss can be grouped as follows:
• Peripheral field loss: People only see in the central portion of their visual field.
• Central field loss: Vision is reduced or absent in the middle of people’s vision.
• Other field loss: People have scattered patches of obscured vision, have a ring of field loss, have
field loss in the left or right part of their vision, or other field loss.
Central field loss Peripheral field loss Other field loss

Web accessibility
Web accessibility refers to the inclusive practice of removing barriers that prevent access to
websites by people with disabilities. When sites are correctly designed, developed and edited, all
users have equal access to information and functionality. On 11 December 2008, the WAI released
the WCAG 2.0 as a Recommendation. WCAG 2.0 aims to be up to date and more technology neutral.
Though web designers can choose either standard to follow, the WCAG 2.0 have been widely
accepted as the definitive guidelines on how to create accessible websites.
Web accessibility means that people with disabilities can perceive, understand, navigate, and
interact with the Web, and that they can contribute to the Web. Web accessibility also benefits
others, including older people with changing abilities due to aging. For example, a key principle of
Web accessibility is designing Web sites and software that are flexible to meet different user needs,
preferences, and situations. This flexibility also benefits people without disabilities in certain
situations, such as people using a slow Internet connection, people with "temporary disabilities" such
as a broken arm, and people with changing abilities due to aging.

Assistive technologies used for web browsing
Individuals living with a disability use assistive technologies such as the following to enable and
assist web browsing:
• Access to subtitled or sign language videos on the Internet for all deaf people.
• Keyboard overlays, which can make typing easier and more accurate for those who have motor
control difficulties.
• Screen magnification software, which enlarges what is displayed on the computer monitor,
making it easier to read for vision impaired users.
• Speech recognition software that can accept spoken commands to the computer, or turn
dictation into grammatically correct text - useful for those who have difficulty using a mouse or a
keyboard.
• Braille terminals, consisting of a Refreshable Braille display which renders text as Braille
characters (usually by means of raising pegs through holes in a flat surface) and either a
mainstream keyboard or a Braille keyboard.
• Screen reader software, which can read out, using synthesized speech, either selected elements
of what is being displayed on the monitor (helpful for users with reading or learning difficulties),
or which can read out everything that is happening on the computer (used by blind and vision
impaired users).

Things to consider when developing web content
User needs vary widely across people who have low vision, and one user’s needs may conflict with
another user’s needs. It is not uncommon for one person’s needs to be different from day-to-day or
even throughout one day. For example, when they are more fatigued, they might need larger text or
a different background color. Below is the list of things to consider when developing web content:
• Contrast
• Not Relying on Color
• Rewrap for One Direction Scrolling
• Reflow to Single Column
• Line Length
• Hyphenation
• Size
• Style
• Font
• Capitalization
• Size of All Elements
• Line, word, letter spacing
• Justification
• Margins and Borders
• Spacing Between Elements

Tableau and Accessibility
Most types of views that are created following the best practice guidelines in Tableau Desktop will
be WCAG-conformant; they are treated by screen readers as images with a title and a description.
Users will be able to use keyboard navigation to open the View Data window and access the
underlying data for the view. However, map views in Tableau are not currently supported for WCAG
conformance.
Best practices when building a visualization:
• Keep it simple
• Limit the number of marks in the view
• Limit the number of measures and dimensions used to create the view.
• Orient your views for legibility
• Limit the number of colors and shapes in a single view
• Use filters to reduce the number of marks in the view at a given time

• Show more text and make it helpful
In your views, make sure you show titles, captions, and mark labels. You can edit titles and
captions to provide more context and details that help users understand the view.
• Be precise and consistent in how you name every object in the view.
• Provide text that explains how components of a visualization relate.
• Simplify text to remove redundancies.
• Text Size. The default text sizes for elements in a Tableau workbooks are WCAG-conformant.
• Use color thoughtfully and provide contrast
• Provide visual cues beyond color: position, size, and shape

Adding and editing text
on Tableau chart
Adding shapes and filters
to Tableau chart
Examples below show how charts can be adjusted to make them more accessible:

Charts – Version 1
For this research project we have developed few charts and two dashboards to showcase how researched
recommendations can improve charts' accessibility. The first set of charts was developed without
considering these recommendations but we followed the techniques we learned through Data
Visualization class. The first three charts are shown below:
• Bar chart shows enrollment by department and term
• Circle charts shows enrollment for specific department through all semesters and years
• Line chart shows enrollment for specific subject by term
Bar chart Circle chart Line chart

Charts – Version1
Clustered Column chart Scattered plot chartTree map chart
The next three charts are introduced below:
• Tree map chart shows total enrollment for all semesters and all academic years
• Clustered column chart shows enrollment by students level (freshman, senior, etc.) for selected years
• Scattered plot charts shows enrollment by class modality

Dashboards – Version 1
Dashboard 1 Dashboard 2
After creating charts we put two different dashboards together keeping limited number of charts on each
of them and adding filters on the right for user control over displayed information:

Testing Charts – Version 1
After building charts and putting dashboards together we performed the following tests:
• Color blind tests using CVSimulator (Android app) and NoCoffee (Chrome extension)
• Field vision tests using ViaOpta Sim (Android app) and NoCoffee (Chrome extension)
• Color contrast tests for text using ColorContrast (iOS app)
• Screen reader tests using Read Aloud (Chrome extension), NVDA and JAWS (desktop programs)
Next few slides show samples of each test. Due to the space limitation we don't show all results but
we tested all charts using tools listed above.

Testing Charts – Version 1 – Colorblind test
Figures below show results for colorblind tests we performed. Every chart was tested using different
colorblind mode but we are showing results only for 3 as explained before. It's noticeable that some
of the colors appear to be closed to each other and hard to distinguish – for example colors on bar
chart, line chart and clustered column chart.
Line Chart Deuteranope
(CVSimulator)
Bar Chart Protanopia
(NoCoffee)
Clustered Column Chart
Tritanope (CVSimulator)

Circle Chart – Side vision
(NoCoffee set to 50)
Tree Map – lost contrast
Scattered Plot – diabetic
vision (ViaOpta Sim)
Testing Charts – Version 1 – Field vision
Figures below show results for field vision tests for the following charts: circle, tree map and
scattered plot. Based on the test results we came up with the conclusion that we cannot adjust
charts to make them more accessible if a person has blocked side/central vision, blurry or diabetic
vision since it affects different parts of visualizations.

Testing Dashboards – Version 1
Colorblind test Blocked vision and blur
• Dashboard 1 –
no color
• Dashboard 2 –
Protanopia
• Dashboard 1 –
diabetic (set to 45
in NoCoffee)
• Dashboard 2 – blur
(set to 5 in
NoCoffee)
Figures below show screenshots of dashboard tests – colorblind on the left and blocked vision on the right:

Testing Charts – Version 1 – Text contrast
Figures below show screenshots for text contrast tests of charts’ headers and labels using Color
Contrast application. Most of them passed large text vs background color tests, but didn’t pass small
text vs background color tests.
Header vs background Subheader vs background Label vs background
Label vs background Label vs background

Speech Reader Baseline Findings
The browser extension speech reader “Read Aloud” was not able to process the chart content in
Tableau public. The speech reader only read out part of the tab navigation and metadata
details. The speech reader completely ignored the active chart.
Using a desktop screen reader (NVDA) yielded similar but slightly better result. The active chart
content is not read out, but the chart title and filters were. However, the mouse has be used and it
was not possible to use only the keyboard to navigate.
Furthermore, Tableau Desktop is also not screen reader friendly like Tableau public. The desktop
screen reader was not able to read out any of the chart content.
• Read Aloud test video
• Desktop reader test video

Summary and results of testing Version 1 visualizations
After running all tests we came to the conclusion that charts can't be adjusted in the way we meet
requirements for people with all kind of visual problems (color blindness, blocked vision,
contrast/blur, other impairments). People with blocked vision or major health conditions will still not
be able to get enough info out of visualizations we created unless we provide caption and description
and they use desktop screen reader program.
The best thing we could do is to adjust charts in the following way:
• Change color pallet. Adjusting colors will help color blind people to get more sense out of chart, to
see the difference in every dimension we include on the chart
• Adding shapes to charts where it’s necessary
• Make sure all labels and headers have enough contrast to the background. Making labels bigger
and more contrast will also improve readability for people with minor vision problems
• Include description for every chart and dashboard. The only way to help people with major vision
loss is to include description so in case they use screen reader devise they can hear the description
and explanation
• Including link to pdf file which has all charts can be helpful as well since they will be able to use a
screen reader program to heat description. Including pdf can be helpful for older people since they
prefer to print out documents and read from the paper since it's easier for them vs reading on the
screen

Next few slides show charts and dashboards after following adjustments: color pallet was changed,
caption for each chart was edited and text color for headers and labels was made darker. Bar, circle
and line charts are shown below:
Bar chart Circle chart Line chart

Clustered Column chart Scattered plot chartTree map chart
Another three charts that were adjusted are shown below: tree map, clustered column and scattered
plot charts:

Dashboards – Version 2
Dashboard 1 Dashboard 2
Two dashboards shown below were adjusted according to recommendations found during this
research: we added description, adjusted colors, kept number of marks limited, changed filter and
cards text, plus removed some cards since there were adding too much nose to the dashboards. We
also exported a workbook into pdf, uploaded it to OneDrive and provided a link to it inside of
dashboard description so users can download this file and use their screen reader software to get as
much information as possible out of our visualizations.

Testing Charts – Version 2 – Colorblind test
Line Chart Deuteranope
(NoCoffee)
Bar Chart Protanopia
(NoCoffee)
Clustered Column Chart
Tritanopia (CVSimulator)
After adjusting charts we performed the same tests as described previously for Version 1 charts.
Figures below show charts with protanopia, deuteranope and tritanopia modes being selected
inside of app and Chrome browser:

Testing Charts – Version 2 – Field vision
Circle Chart – Side vision
Tree Map – lost contrast
(set to 15)
Scattered Plot – diabetic
vision (ViaOpta Sim)
Results of field vision tests for circle, tree map and scattered plot charts after adjustment are
shown below:

Colorblind test Blocked vision and blur
• Dashboard 1 –
no color
• Dashboard 2 –
Protanopia
• Dashboard 1 –
diabetic (set to 45
in NoCoffee)
• Dashboard 2 – blur
(set to 5 in
NoCoffee)
Figures below show results for dashboard tests – colorblind and blocked vision after modifications:
Testing Dashboards – Version 2

Testing Charts – Version 2 – Text contrast
Header vs
background
Subheader vs
background
Label vs
background
Label vs
background
Label vs
background
Figures below show results for text contrast tests for heads, subheaders and labels:

Speech Reader Findings after Adjustments
Charts and dashboards were tested again with Read Aloud Chrome extension and NVDA desktop
program after adjustments made following best practice guide lines. It appears that Read Aloud reads
only metadata associated with a chart. NVDA reads titles of the files and charts and description (if
any gets included on the chart). If a workbook gets converted to pdf than caption is getting added to
each chart but not a dashboard – NVDA reads everything in sequence and if pdf is opened in web
browsers then Read Aloud reads everything as well.
• Read Aloud test video
• Desktop reader test video

After running all tests for Version 2 charts and dashboards we definitely saw an
improvement in results for most tests:
• Color blind tests showed really good results, colors became more distinguishable and
adding shapes to line chart definitely helped to see different subjects we display on
that chart;
• Adjusting colors for headers, labels and subheaders and make them more contrast
helped to see this text better and pass all tests for big and small text;
• Adding captions and descriptions for each chart and dashboard should help people
with major vision impairments to get more sense out of displayed visualization if they
use screen reader software on their computer
• Blocked vision test results were the same for Version 1 and Version 2 charts and
unfortunately there is nothing we could adjust to make our visualizations more
accessible (except that adding description and caption as mentioned before)
Summary and results of testing Version 2 visualizations

Resources:
• U.S. Census Bureau, 2012-2016 American Community Survey 5-Year
Estimates https://disabilitycompendium.org/sites/default/files/user-
uploads/AnnualReport_2017_FINAL.pdf
• World Health Organization: Blindness and visual impairment http://www.who.int/en/news-
room/fact-sheets/detail/blindness-and-visual-impairment
• Disability Annual Statistics Report 2017 https://disabilitycompendium.org/sites/default/files/user-
uploads/AnnualReport_2017_FINAL.pdf
• Disabled World https://www.disabled-world.com/disability/types/vision/ and https://www.disabled-
world.com/disability/accessibility/websitedesign/
• Centers for Disease Control and Prevention, Vision Health Initiative
https://www.cdc.gov/visionhealth/data/national.htm
• Pictures for colorblindness are taken from here https://en.wikipedia.org/wiki/Color_blindness
• Accessibility Requirements for People with Low Vision https://www.w3.org/TR/low-vision-needs/

• Diversity of Web Users https://www.w3.org/WAI/intro/people-use-web/diversity
• Accessibility Principles https://www.w3.org/WAI/intro/people-use-web/principles#standards
• Build Data Views for Accessibility https://onlinehelp.tableau.com/current/pro/desktop/en-
us/accessibility_overview.html
• Color Blindness http://colrd.com/blog/wp-content/uploads/2011/11/vision.pdf
• Reading from paper versus screens: a critical review of the empirical
literature https://www.ischool.utexas.edu/~adillon/Journals/Reading.htm
• The Reading Brain in the Digital Age: The Science of Paper versus
Screens https://www.scientificamerican.com/article/reading-paper-screens/
Resources:

IT 7113 Research Project

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to IT 7113 Research Project

Similar to IT 7113 Research Project (20)

Recently uploaded

Recently uploaded (20)

IT 7113 Research Project