Accessibility (A11y) & Universal Design

• Understand
• Principles of universal design
• Application of universal design to technology and to accessibility
• CSU Accessible Technology Initiative
• Accessibility best practices
• Be able to
• Conduct an eight-point accessibility evaluation
 What is Accessibility and Universal Design?
ACCESSIBILITY UNIVERSAL DESIGN
Accessibility ensures everyone can The design that is simple, useful
perceive, understand, engage, and accommodates a wide range
navigate, and interact with of individual preferences and
technology regardless of device, abilities.
software, or product without
barriers.

EVERYONE!
Understanding Abilities, 1 of 2

Accessibility is not about disability;

it’s actually about ability. It’s about
making it easy for everyone to:
• Acquire the same information
• Engage in the same interactions
• Enjoy the same services
 Understanding Abilities, 2 of 2

VISION HEARING MOBILITY COGNITIVE LEARNING

Low vision, blind, Deaf, hard of hearing, Muscular dystrophy, Learning disability, Learning styles,
colorblind, etc. noisy environment arthritis, injury, etc. dyslexia, ADHD, etc. preferences, etc.
• Screen readers • Sign language • Keyboard only • Digital content • Visual learners
• Braille display • Captions/Subtitles • Speech to text layout
• English as a Second
• High contrast • Information Language (ESL)
settings • Transcripts
organization
• Accents
• Magnifiers
 What is Assistive Technology?
Assistive Technology (AT) are “products, equipment, and systems that enhance
learning, working, and daily living for persons with disabilities.”

Magnification Speech
Screen Readers Software Recognition Trackball Mouse Keyboard

Zoom Text Braille Computer Keyboard Captions/Subtitles Captioned

Telephone Video Relay Services
 What are Screen Readers?
Screen readers are a form of assistive technology (AT) software that
enables access to a computer, and all the things a computer does, by
attempting to identify and interpret what is being displayed on the
computer screen using text-to-speech. Screen readers can only access and
process live text (fully editable or selectable text).
• Provides access to someone who is
visually impaired, mobility or has a
learning disability to access text on the
screen.
• Offers same level of independence and
privacy as anyone else.
 Types of Screen Readers

Provides auditory Adds spoken, audible, Screen magnifier for

Screen reader program for Microsoft Windows
Microsoft Windows that allows descriptions of each and vibration feedback
onscreen element to your device. that allows you to see
blind and visually impaired and hear everything on
users to read the screen either using gestures, a
keyboard, or a braille the computer.
with a text-to-speech output or
by a refreshable Braille display. display.
NVDA screen reader can be
downloaded free of charge by
anyone.
How Do Screen Readers Work?
• Screen readers read line-by-line from left-to-right
and top-to-bottom.

• Screen readers start at the top of a document or

website and read any text including alternative text
for images, graphics or charts.

• Screen readers navigate a document or website

using the keyboard without a mouse. Tab key: jump
from link to link, Enter: select a link, arrow keys:
navigate a document or website.

• Reading order is important for users with visual

challenges. The users can become confused if the
document (content, tables, images or charts) is
poorly organized or out of order.
 Click vs Select
Screen readers and physical or mobility limitation
users navigate a document or website using the
keyboard without a mouse. The word “Click” is not
inclusive of people who can’t use the mouse. Use the
word “Select” to write step-by-step instructions.

“Click” or “Click on” Example Use “Select” Example (Recommend)

• Go to YouTube video player • Go to YouTube video player
• Click on Settings gear icon • Select Settings gear icon
• Click on Subtitles/CC • Select Subtitles/CC

• Click on Options to Customize • Select Options to Customize

• Select Caption Style
• Click on Caption Style
Designing for Accessibility with POUR
Accessibility incorporates principles to guide the designing and development
process of digital content accessible. The POUR principles support foundational
considerations for accessibility.

Image courtesy of Accessible Educational Materials

 POUR = Perceivable
• Alternative Text for non-text
content in variety of formats
(Braille, speech, symbols or simpler
language)
• Captioning or Transcripts for
time-based media
• Content presented in different way
(simpler layout) without losing info
or structure
Can a person’s brain perceive the content • Easier for user to see and hear
regardless of the senses they use? Can a content (separating background
person access content despite being blind, and foreground)
low vision, deaf, deafblind, dyslexia, or…
 POUR = Operable
• Functionality using just a
keyboard (no mouse) for
physical or motor limitations
• Enough time to read or use
content
• Can be navigated to find content
and know where one is on the
Can you access and navigate regardless screen
of the device the user is using? • Doesn’t cause seizures
• JAWS, NVDA, No Mouse, or… i.e. GIF or flickering media
 POUR = Understandable

• Text content is readable and

understandable (language,
reading level, unusual words)
• Use plain language
• Web pages operate in
predictable way
Can the content be understood as • Input assistance – users can
easily as possible through simple avoid or correct mistakes
language and contextual information?
 POUR = Robust

• Maximize compatibility with

current and future technologies
• Add metadata to make content
easier to find and use
Can the content be accessed regardless • Perform an accessibility check
of the users operating system, browser, • Perform basic assistive
browser window? technology testing
• Google Chrome vs, Firefox, vs iPhone vs
Windows OS, Android, or…
 Universal Design Principles
1. Equitable use. The design is useful and marketable to people with diverse abilities. For example, a website that is designed to be accessible to
everyone, including people who are blind and use screen reader technology, employs this principle.

2. Flexibility in Use. The design accommodates a wide range of individual preferences and abilities. An example is a museum that allows visitors
to choose to read or listen to the description of the contents of a display case.

3. Simple and intuitive. Use of the design is easy to understand, regardless of the user's experience, knowledge, language skills, or current
concentration level. Science lab equipment with clear and intuitive control buttons is an example of an application of this principle.

4. Perceptible information. The design communicates necessary information effectively to the user, regardless of ambient conditions or the
user's sensory abilities. An example of this principle is captioned television programming projected in a noisy sports bar.

5. Tolerance for error. The design minimizes hazards and the adverse consequences of accidental or unintended actions. An example of a
product applying this principle is software applications that provide guidance when the user makes an inappropriate selection.

6. Low physical effort. The design can be used efficiently, comfortably, and with a minimum of fatigue. Doors that open automatically for people
with a wide variety of physical characteristics demonstrate the application of this principle.

7. Size and space for approach and use. Appropriate size and space is provided for approach, reach, manipulation, and use regardless
of the user's body size, posture, or mobility. A flexible work area designed for use by employees who are left- or right-handed and have a variety of
other physical characteristics and abilities is an example of applying this principle.
Universal Design: Process, Principles, and Applications (UW)
Universal Design
Universal Design for ALL
 Universal Design for LEARNING, 1 of 2
Inspired by Universal Design, Universal Design for Learning (UDL) applies these concepts in the
education context, with the goal of minimizing barriers and maximizing learning for all students.
 Universal Design for LEARNING, 2 of 2

ENGAGEMENT: Look REPRESENTATION: Present ACTION & EXPRESSION: Provide

for different ways to motivate information and content in multiple ways for students to interact
and inspire students different ways with material and express their
Example: Interactive skill- Example: Captions and knowledge
building exercises transcripts to accompany Example: Tests that include different
audiovisual materials question types such as long answer
and multiple choice
Visit CAST UDL Guidelines
Universal Design Example
 Is Captioning Universal Design?

Who is the largest audience that benefits from captions?

 Captioning Videos
Per federal and state law, and CSU policy, instructional media (e.g.,
videos, captured lectures, recorded presentations) must have captions. This
includes instructional media used in classrooms, posted on websites or shared
in Canvas.
• All students who are enrolled in a course must be able to access
the content in the course.
• Faculty: Funding is available to help faculty generate captions and
transcripts for instructional media. Materials should be
submitted at least six weeks in advance of their use in instruction.
• Staff: For CSUN staff who do not provide classroom material, there
is a cost through chargeback. For information on the chargeback,
email [email protected].

csun.edu/captioning
 Mobile Universal Design

• Siri, Genie, etc.

• Dictation
• Predictive text
• Vibrating/flashing alerts
• Safari Reader
• Screen Reader
• Font size
• Color Contrast
iOS - Voiceover Android - Talkback
 Law and Policy Accessible
Technology
CSU E.O. 1111 Initiative
"It is the policy of • Instructional
the CSU to make Materials
State of California
Government Code information • Web
Section 508 Section 11135 technology • Procurement
Accessibility resources and
Requiring all of its services accessible
Americans with compliance agencies and to all CSU students,
Disabilities Act Requires CSUN to departments to
go further and faculty, staff and
(ADA), 1990 comply with federal the general public
make our
information and Section 508. regardless of
Prohibits discrimination
and ensures equal communication disability."
opportunity for persons technologies
with disabilities in accessible to
employment, State and
local government
everyone. Learn more about Laws and Policies
services, [and] public
accommodations. The
ADA extends to and
includes the technologies
used by the campus.
 Need for Accessibility
• 20% of the U.S. population has at least one disability (U.S. Census Bureau: Disability [2010])
• 11% of college students report a disability (U.S. Department of Education, National Center for Education Statistics.
[2016])

• Nearly 1 in 5 people have disability in the U.S. (U.S. Census Bureau Reports [2010])
 Digital Accessibility Content Analogy

Organize content with headings, subheadings, images, videos, and footer

are important for usability and accessibility.
 Direct vs Styles Formatting

Direct Formatting Styles Pane Formatting

• Not accessible to any assistive • Provide structure and make document accessible
technology such as screen readers • Easier to modify existing formatting
• Can’t create a Table of Contents • Create and update a Table of Contents
• Can’t create a navigation to different • Quicker navigation to different sections in a document
sections in a document • Retain document structure when export to PDF
• Huge barriers! • Accessible to any assistive technology like screen
readers
• Save time and save lives!
 Example 2: Well-structured documents help readers
organize and process texts
Headings and
Document Structure
Example 1: Reading long, dense text
documents can be a daunting task for
learners
 Heading Styles Headings are styles to give
• Heading Styles (Heading 1 through Heading 6) in a logical sequence. Do a document structure by
not skip heading levels i.e. Heading 2 to Heading 4, headings should be in category or topic.
order.)
• Heading 1: Document title or main content heading/title (just one) Without headings, a
• Heading 2: Major section heading person using assistive
• Heading 3: Sub-section of the Heading 2 technology like a screen
• Heading 4: Sub-section of the Heading 3, and so on, ending with reader cannot navigate by
Heading 6 sections, subsections, or
• Normal: Text or paragraph scan section titles to
understand the document
• Using heading styles means you can also quickly build a Table of Contents, structure.
reorganize your document, and reformat its design without having to
manually change each heading's text.
• How to create an accessible document using Microsoft Word, visit Word
Essentials page www.csun.edu/udc/word
Heading Styles compatible with other programs

Google Docs

InDesign
Website Canvas
Automatic Table of Contents
Heading 1
Heading 2………………………………1
Heading 3……………………..3
Heading 2………………………………8
Heading 3…………………….10
Heading 3…………………….12
Heading 3…………………….16
Heading 3…………………….18
Heading 2……………………………..19

Heading 2……………………………..53
 Table of Contents
• Headings structure will automatically populate a table of contents and
provide accessible for screen readers rely on headings structure to
navigate a page quickly.
• Adding Table of Contents to any documents or syllabus over 8 pages to
make it easier for readers to go directly to a specific section in the
document.

• Or Custom Table of Contents

• Ensure the ‘Tab leader’ option is ‘…….’
• To change which styles appear, select
‘Options’
• Number each style in the order in the
Table of Contents
• Select ‘Ok’ twice
 Visual Challenge

Normal vision Low vision Color blindness Blind or deaf-blind

What’s the best way to make images

accessible to everyone?
 • The purpose of Alt Text is to allow low vision or blind users who
use text-to-speech assistive technologies (AT), such as screen
Image Alternative readers, to understand the purpose of graphic images. Sighted
users usually don’t see alt text unless they use AT.
or Alt Text • Screen readers and other AT can’t convert images into texts. So,
when writing alt text, consider the following for images:
o Describe the content and the purpose of the image clearly
and concisely, in a phrase or a sentence or two. Keep alt text
short 200 characters or less.
o Image with text (for example, the CSUN wordmark) should
include the words on the image.
o “Image of…”, “Photo of…” is not needed because screen
readers and other AT announce that it’s an “image” or
“graphic”.
o When completing the alt text, use proper punctuation such
Screen readers and other AT announce that it’s
an “image” or “graphic”, then read the alt text:
as periods to indicate the end of the alt text. Without proper
“Three plants going through transformation punctuation, some screen readers will run the alt text into
with text quote Accessibility user-friendly the body text that follows and cause confusion to the user.
document for CSUN student success.”
o Don’t insert hyperlinks in alt text because they are not
clickable and can’t create descriptive link text.
 How to Describe Images?

A stair chase leading up to an entryway is A hand reaches out of a computer screen giving
painted yellow with bold black text that reads On the left is the book cover for Haben The Deafblind
the hand gesture for stop. The screen reads
museums are now. Woman Who Conquered Harvard Law, and on the
‘access denied!’
right is the quote: “In the Tigrinya language of Eritrea
and Ethiopia, Haben means 'pride.’”

More examples of How

to Describe Images
• Document Learning Tools: Describing images
• How to Describe Images (Art, Chemistry,
Diagrams, Flow Charts, Formatting & Layout,
Graphs, Maps, Mathematics, Page Layout, Tables,
Text-only images)

Student holds a diploma hardcover up in the air • Periodic Table of the Elements
Michelle Obama claps and Barack waves. during CSUN commencement. Caption text "and • UDC Best Practices for Describing Images
together, as Matadors, we will move mountains."
 Image Captions
• Captions are universal and accessible for
everyone.
• Captions are read and visible to all users
whether they use assistive technologies
(AT) or not.
• Captions and alt text have different
purposes.
• Captions convey what’s visible in the image.
• Alt text describes the visual aspect of the image
and should be brief.
• If captions and alt text are similar in their
descriptions, alt text can say “Photo Caption Example
caption below.” For example, see caption Caption: People buying peanuts at the local
example as shown on the right side. farmer’s market.
• Don't repeat the image's caption as the alt Alt Text: Photo caption below. (Indicate where
text. People don't need to hear the same image position above, below, left or right side.)
information twice.
 How to add Alt Text in various software applications?

Office 2016
• Insert image InDesign
Web-One
• Right-click on the image and Canvas • Right-click on the image
select “Format Picture” • Upload image
• Insert an alternative text by • Select Object Export
Office 365 clicking Embed Image • Write the alt text in HTML
Alt field Options
• Right-click on the image and
select “Edit Alt Text” • Write the alternative text in • Alt Text tab | Choose
the Alt Text field Custom from the Alt Text
Google Docs There are more Alt Text field Source | enter alt
• Right-click on the image and available Email Marketing, description
select “Alt Text”
Facebook, Instagram, etc.
 Descriptive Link Text
Not Accessible – vague and redundant Accessible – descriptive and unique
CSUN News CSUN News
CSUN Honors Four Exceptional Graduate Students for Thesis and Project Work CSUN Honors Four Exceptional Graduate Students for Thesis and Project Work
CSUN’s Division of Academic Affairs has selected four exceptional CSUN graduate CSUN’s Division of Academic Affairs has selected four exceptional CSUN graduate
students as the winners of the 2020 Distinguished Thesis/Graduate Project students as the winners of the 2020 Distinguished Thesis/Graduate Project
Competition, with each receiving a $1,000 award and recognition from the Competition, with each receiving a $1,000 award and recognition from the
university. Read more. university. Learn more about CSUN's Four Exceptional Graduate Students.
CSUN Team to Tap into Power of Inouye Telescope to Study Sun’s Atmosphere CSUN Team to Tap into Power of Inouye Telescope to Study Sun’s Atmosphere
With the aid of a telescope in Hawaii, a team of professors at California State With the aid of a telescope in Hawaii, a team of professors at California State
University, Northridge hope to solve some of the mysteries found in the sun’s University, Northridge hope to solve some of the mysteries found in the sun’s
atmosphere, information that could help us better understand the impact of solar atmosphere, information that could help us better understand the impact of
flares, as well as what is happening with other stars in our solar system. solar flares, as well as what is happening with other stars in our solar system.
Read more. Continue reading about CSUN's Astronomy Team.
Minimizing the COVID Slide During the Summer Minimizing the COVID Slide During the Summer
In response to the COVID-19 pandemic, schools across the nation transitioned to In response to the COVID-19 pandemic, schools across the nation transitioned to
meeting online. Given the abruptness of the transition and lack of preparation meeting online. Given the abruptness of the transition and lack of preparation
parents had in becoming in-home teachers’ aides, many parents and educators parents had in becoming in-home teachers’ aides, many parents and educators
are worried about a “COVID slide” or “COVID slowdown,” where students fail to are worried about a “COVID slide” or “COVID slowdown,” where students fail to
retain any new information learned before and during the pandemic — as well as retain any new information learned before and during the pandemic — as well
over the summer, when students are not in school. as over the summer, when students are not in school.
Click here Learn more about the "COVID Slide".

Screen readers read: "Read more, link" "Read more, link" "Click here, link" Screen readers read: The content and link text then announce the word "link"

Full URL text https://www.csun.edu/universal-design-center

(raw URL may not make sense to screen reader users or others, so make the link text descriptive i.e. Universal Design Center)
 Best Practices for Accessible Links
FUNCTIONALITY
DESCRIPTION PRESENTATION
• Link functionality is about
• Link text must always properly • Each link on the page should
ensuring a link functions the way
describe the purpose of the link be visually different from
the user expects.
and tell a user where the link will regular text on the website.
take them. • Links must always enhance the
• Can be differentiated by color,
accessibility of a webpage.
• Do not use text such as “click bold, underline, or italics.
here” or “read more,” nor web • Users must be able to access
• Using color alone does not
addresses (URLs). links using a mouse, keyboard, or
make it accessible.
speech recognition commands.

LINKED IMAGES
• A linked image is an image (with or without text) that is linked to another resource or webpage.
• Linked images need link descriptions as well as image descriptions (alt text).
• If the link description is different than the alt text, enter the link description in the HTML Title field.
• Visit Linked Images on the Best Practices for Accessible Images page for more information.
Color Contrast
Meaning without Color
 Check Color Contrast

• Download Colour Contrast Analyser onto

your computer (PC/Mac) to ensure
accessible contrast or use an online
contrast checker from WebAIM.
People who have low vision or • WCAG Level AA requires a contrast ratio of
colorblind could encounter some This example has a great color at least 4.5:1 for regular sized text (12 or
difficulty distinguishing text color contrast ratio of 8.7:1. The 14 pt. font) and 3:1 for large text (18 pt.
from a background color if the contrast is sufficient for those font).
contrast is insufficient contrast ratio who have color deficiencies • Coblis Color Blindness Simulator
1.5:1.
Provide descriptions if using color to convey meaning
Example 3: Inaccessible color shape
Example 1: Inaccessible color highlights in red
May 11 to 17, 2019
Example 1: Accessible with a description Color identical may not
be recognized by
May 11 to 17, 2019* (final exams) colorblind users

Example 2: Inaccessible table

Example 3: Accessible color

and number
Example 2: Accessible table
 Keyboard Navigation or Touch
• Users should be able to get to content
without using a mouse
• Keyboard
• Hearing
• Touch

• Users should be able to access content

on different screens (phone, tablet, etc.)
 Eight-Point Accessibility Evaluation

Is it legible? Can you read it? Is the font easy Is it searchable and selectable? Does it have a descriptive title at the top page?
to read?

Is link text descriptive? Does the text Color. Is there enough contrast between text Can you resize and read up to 400% without
accurately describe the link destination or and color background? Does color convey horizontal scrolling? Can you zoom in without
purpose? meaning? distorting the text?

visit csun.edu/udc/8questions
Can you navigate using only your keyboard
(no mouse)?
Are videos captioned? Every video should
have closed captions.
for further explanation
Microsoft Office Accessibility Checker

The accessibility checker will

identify certain accessibility issues:
• Headings that are not in logical order
• Images with no alt text
• Tables have the header box checked
• Tables that have merged cells or with
empty cells
• Large numbers of repeated blank
characters (spacebars, tabs, enters)
 Accessibility… as sweet as pie
• Make accessibility into part of the culture
by baking it
• Make it part of the everyday work of
everyone on campus
• Pie is sweet and enjoyable
• Accessibility is a good thing and make’s
people lives a little sweeter

Analogy courtesy of Lainey Feingold of LF Legal and Sue Boyd of Microsoft in their
Beyond Compliance Presentation at CSUN 2018
 Create with Accessibility in Mind
Best Practices

Tools to design accessible content

creation workflow…

Making digital content accessible for everyone

 Accessibility, it’s the _____ thing to do!
Right: Smart:
• Aligns with University Mission or Vision • Sustainable
• Increase usability for all people • Large number of population has
• Attracts students to university disability (19% of US population)
• “If they can use my products,
Legal: they can buy them.” – Steve
Jobs
• Equal access due to laws
such as ADA, Section 508 • Creating a welcoming
environment
• Department of Justice scrutiny
• Support’s a person’s success and
• Risk of litigation persistence in activity retention
 Accessibility is a Journey

You can’t build an accessible content

overnight. It’s making progress one step
at a time. One small moment of victory
propelling you forward to the next.
Accessibility is a constant journey, not an
end destination.
 How can we help you make a difference?

Universal Design Center Offers

• Online, self-paced training
• In-person training each semester
• Consultations
Universal Design means design for everyone • Tools and Services