Keynote presentation at the Web Content for Everyone Symposium: Usability, Accessibility, and Content Creation. Held at Ferris State University in Big Rapids, Michigan, May 15, 2019. Our university websites are the primary way we deliver information to students, faculty, and staff. So it’s critical that people of all backgrounds and abilities are able to find, access, and understand our web content. In this presentation, you’ll learn the key principles to creating content that is useful, usable, and accessible to all. We will discuss techniques including plain language, heading structure, content prioritization, meaningful links, alternative text, and more.  Attendees will: * Recognize why plain language is important to inclusive design * Be able to create content accessible to screen readers * Understand how to write content grounded in principles of universal design

1. Designing Inclusive Web Content
Rebecca Blakiston
rebeccablakiston.info
Ferris State University
May 15, 2019

2. Rebecca Blakiston @blakistonr
user experience strategist at University of Arizona Libraries
Librarian
Website product manager
Content strategist
Strategic planner
Author, Writing Effectively in Print & on the Web
Hello!

3. Why we should care
knowledge
content is the heart of
any website and why
we make websites in
the first place
access
inclusive content is
more accessible to
everyone, no matter
their background
engagement
better content helps
with recruitment and
retention of both
students and employees

4. Tip #1: Know your audience
Create content with your readers in mind.

5. People are goal-driven.
What do they want to know?
What do they want to do?

6. imagine
Stacy
the current
student

7. Stacy’s questions
● When do classes start?
● How can I connect with an
advisor?
● How can I change my
major?
Stacy’s tasks
● Enroll in classes
● Schedule a meeting with
an advisor
● Change major

8. imagine
Pete
the potential
student

9. Pete’s questions
● What is campus life like?
● What housing is
available?
● What’s the application
process?
Pete’s tasks
● Book a campus tour
● Apply for housing
● Enroll/apply

10. imagine
Felix
the faculty
member

11. Felix’s questions
● How can I get support for
my class development?
● Do I need to go through
the IRB process for my
research?
● Are there grants to fund
my research?
Felix’s tasks
● Contact technical
support for help with
Blackboard
● Submit an IRB
application
● Apply for a grant

12. What do you know about Stacy, Pete, and Felix?
Who is your primary audience for your website?

13. People skim websites.
This includes Stacy, Pete, and Felix.
They depend on headings and hunt for links.

15. People are impatient.
This includes Stacy, Pete, and Felix.
They’ll lose confidence quickly.

17. People experience content differently.
Stacy uses a screen reader.
Pete is a non-native English speaker.
Felix has color blindness.

18. Universal design is the design of products or environments to be
usable by all people to the greatest extent possible.

19. Tip #2: Keep it focused and simple
Reduce cognitive load with straightforward and succinct content.

20. Plain language is content that readers will immediately
understand, without hesitation.

21. Pick simple
words ● Avoid fluff or “happy talk”
● Use strong nouns and verbs
that your audience will
understand.

22. Original Revised
to ensure for
in spite of the fact that though
at the end of the day ultimately
anticipated professional development activity travel plans
Let’s have a meeting. Let’s meet.
Welcome!

23. I believe the road to hell is paved with adverbs.
- Stephen King
On Writing: A Memoir of the Craft

24. Original Revised
very large huge
very small tiny
very happy thrilled
argue strongly insist

25. Focus
● Prioritize
● Break content up
● Layer
Or your key messages get lost.

26. 2018

27. 2019

28. Remove all
unnecessary
content
Cut, cut, and cut again.
● Instructions
● Modifiers
● Redundancies
● “… Form”
● “Click here to…”

32. Apply online now. Each program has its own process and requirements, so select the program
that interests you for details.
Contact the Graduate Studies Office with questions.
original
revised

33. Apply online now. Each program has its own process and requirements, so select the program
that interests you for details.
Contact the Graduate Studies Office with questions.
original
3 sentences
27 words
revised
4 sentences
46 words

34. Tip #3: Focus on clarity
Strive for immediate comprehension.

35. Be direct
Write like you talk
● Use active voice
● Be authentic
● Treat it as a conversation
● Avoid long noun phrases

36. Original Revised
Eligibility will be verified. We’ll verify your eligibility.
Interested parties can inquire via
phone.
Call us if you are interested.
Applicants ought to fill out the form. To apply, fill out the form.
Service model development
assessment.
Assessment of our newly-developed
service model.

40. Remove
ambiguity
Don’t make them think
● Avoid idioms
● Explain any jargon
● Write out any acronyms

41. Original Revised
ODL Office of Digital Learning
circulation borrowing
piece of cake easy

42. The one argument for accessibility that
doesn’t get made nearly often enough is
how extraordinarily better it makes
some people’s lives.
How many opportunities do we have to
dramatically improve people’s lives just by
doing our job a little better.
- Steve Krug
Don’t Make Me Think

43. Use ALT text
for any image that holds meaning.
● Describe what matters in
the image
● Don’t include “image of…”
● Keep it succinct but
meaningful
● Don’t describe decorative
images (use empty alt tag)

44. peop

46. Provide write-in
options
for ethnicity, religion, gender,
dietary restrictions, and
discipline.
National Center for Faculty
Development & Diversity

47. Include a “prefer
not to say”
option
and/or make it optional.
LinkedIn

48. Tip #4: Organize and structure
Your content flow should be intentional, point-of-need, and easy to skim.

49. Allow for
skimming
whether people are skimming
visually or with a screen reader.
● Use semantic headings
● Use parallel grammatical
structure
● Include clear calls to action

50. Use semantic
headings
to break up content and help
people navigate.
University of Michigan Library

51. <p><strong>

52. <title>
<h1>
<h1>
<p>
<p>

53. Parallelism
Be consistent in grammatical structure (e.g. imperative verbs, gerunds, nouns).
Original Revised
● Interviewing
● Networking
● Design Your Search
● Interviewing
● Networking
● Designing Your Search

54. Use meaningful
link and button
labels
so people know where clicking
will take them.
● Make every link label
unique
● Use descriptive nouns and
verbs
● Try active verbs

55. Specific link text sets sincere
expectations and fulfils them, and is
substantial enough to stand alone while
remaining succinct.
- Kate Moran
Nielsen Norman Group

60. Tip #5: Make it readable
Be intentional with font choice, white space, and formatting.

61. Keep stuff short
Learn to love white space
● 3 sentences per paragraph
● 25 words per sentence

63. Make links look
like links
so people know they are
clickable.

64. Use bulleted lists
for lists of related items.
Cal Poly Robert E. Kennedy
Library

66. Duke University Library
Use numbered
lists
for steps in a process.

69. Use tables
for tabular and if, then content.
(But never for layout).

71. Grand Valley State University Libraries

72. Consider color
choices
Aim for high contrast and don’t
use color alone to indicate
meaning.

73. Avoid
justification
It leads to inconsistent spacing
and makes things harder to read.

74. Left justify, rag right

75. Avoid ALL CAPS
They are harder to read and
sound like you’re shouting.

76. Avoid
unnecessary
capitalization
It decreases readability and can
cause confusion.

77. Avoid italics
They are harder to read and also
sound like you’re shouting.

78. Avoid underlines
They look like links.

79. As web professionals, our decisions define and shape
the web landscape. They can create barriers,
and they can remove them.
Guided by an understanding of people’s needs, it’s
also possible to avoid barriers altogether,
right from the start.
- Sarah Horton & Whitney Quesenbery
A Web for Everyone: Designing Accessible User Experiences

80. Questions and discussion
Let’s talk.