Your website's not just designed for your audiences: it's designed for everyone. Which means it needs to be accessible to everyone. Often, accessibility falls into the hands of back- and front-end developers. But just as important is the ongoing maintenance of content within the CMS - the headings and images and alt tags and simple verbiage used to communicate your brand's message: a message that deserves to be seen and heard by everyone. In this talk, we will dive into what we can do as editors to help fuel more accessible websites, separating the code from the content and making clear the responsibilities we all have in making sure the web is a better place for everyone.

1. THE
ACCESSIBLE
EDITOR
A very professional presentation by
Corey Vilhauer
about editorial accessibility for you, the attendees of DrupalCon 2018

2. @mrvilhauer
Corey
Vilhauer
@blendtweets
USER EXPERIENCE
ARCHITECT
THIS IS ME

5. INTENT
INTERPRETATION

6. EDITORIAL STRUCTURE
WHAT IS IT?
WRITING FOR ACCESSIBILITY
THE ACCESSIBLE EDITOR
THE ACCESSIBLE ENVIRONMENT

7. WHAT IS IT?
THE ACCESSIBLE EDITOR

8. A11y
Accessibility
(11 letters)

9. What is a disability?

10. Not just disabilities
1 in
4no
broadband
1 in
2elderly
without
broadband
1 in
10smartphone
only

11. “The potential audience of a website
or app is anyone human.”
- Heydon Pickering
author, Inclusive Design Patterns
“Websites are made of code, and
that code is translated by robots.”
- Corey Vilhauer
public speaker, The Accessible Editor

12. What kinds of things we make
How they relate to each other
What bits of information they contain
THE CONTENT MODEL

13. What kinds of things we make
How they relate to each other
What bits of information they contain
THE CONTENT MODEL
THE CONVENTIONS OF WEB WRITING

14. EDITORIAL STRUCTURE
WHAT IS IT?
THE ACCESSIBLE EDITOR

15. ALTERNATIVE TEXT
Every non-text element
requires a text alternative so
that it can be read using
assistive services.

16. Jade Tree Records
First time on vinyl in 15 years: The Promise Ring
“Nothing Feels Good” - Remastered from the
Original Source Tapes, available 9.17 at
jadetree.Merchnow.Com
Promise Ring: 30
Degrees
Everywhere - Vinyl
Cap’n Jazz:
Analphabetapolotho
logy - Vinyl
Jets to Brazil:
Orange Rhyming
Dictionary - Vinyl
Cap’n Jazz:
Analphabetapolotho
logy - T-Shirt
Jets to Brazil:
Perfecting
Loneliness - Vinyl
Jets to Brazil: Four
Cornered Night -
Vinyl
Joan of Arc: Live in
Chicago, 1999 -
Vinyl
Jets to Brazil:
Orange Rhyming
Dictionary - T-Shirt
Facebook
Twitter
Instagram
Soundcloud
Youtube
Spotify
Tumblr

17. Image File
Dropped into
“WYSIWYG”
editor
ALTERNATIVE TEXT
alt=“something”

18. alt=“First time on vinyl in fifteen
years: The Promise Ring’s
Nothing Feels Good, remastered
from the original source tapes,
available September
seventeenth at jade tree dot
merch now dot com”
TEXT IN THE IMAGE

19. CHART OR TABLE
alt=“chart of the percentage of
times an artist appears on a
post-punk playlist - <a
href=“www.table.com”>view
table data</a>”
alt=“chart of the percentage of
times an artist appears on a
post-punk playlist - see
following table for data.”

20. “NORMAL” IMAGES
alt=“a bunch of boxes”
alt=“a grid of differently colored
boxes illustrating order among
chaos”
alt=“five columns of non-
symmetrical boxes with between
ten and twelve boxes in each
column with randomized colors,
including green, blue, white, red,
black, yellow, on a grey
background.”

21. KEEP THINGS SHORT: 100-125 char.
NO NEED FOR “IMAGE OF”
FINAL QUICK ALT HINTS

22. alt=“First time on vinyl in fifteen
years: The Promise Ring’s
Nothing Feels Good, remastered
from the original source tapes,
available september
seventeenth at jade tree dot
march now dot com”

23. KEEP THINGS SHORT: 100-125 char.
NO NEED FOR “IMAGE OF”
NO FILENAME FALLBACKS
FINAL QUICK ALT HINTS

24. VOICE: “digital art 1444990_640”

25. THIS
IS
BAD

26. THE EXCEPTIONS

27. NOT EVERY
IMAGE IS SACRED

28. alt=“ ”
STRUCTURAL

29. ADJACENT
alt = “ ”

30. VOICE: “A red panda next to a bamboo tree
a red panda next to a bamboo tree.”

31. NO VALUE
alt = “ ”

32. Alternative
Text
DECISION
TREE!

33. TRANSCRIPTIONS

34. “Your video and audio
content is not ready for
the web until there are
captions or a
transcription.”
- Eileen Webb
@webmeadow

35. CAPTIONS TRANSCRIPTIONS

36. TRANSCRIPTIONS

37. THANK YOU, YOUTUBE
OR…THANK YOU,
PROFESSIONAL
TRANSCRIBERS

38. THE TITLE FIELD

39. Our Team | Blend Interactive

40. Degrees
Undergraduate Programs and
Majors | University of Choice
Undergraduate Programs and Majors,
Liberal Arts College | University of
Choice, Sioux Falls, South Dakota

41. EDITORIAL STRUCTURE
WHAT IS IT?
WRITING FOR ACCESSIBILITY
THE ACCESSIBLE EDITOR

42. “…the target audience
can read, understand,
and confidently act on
the information in your
content.”
- Center for Plain Language

43. WRITE SO IT’S SCANNABLE
Cute Headline
What!? You mean it controls your actions? I can't get involved!
I've got work to do! It's not that I like the Empire, I hate it, but
there's nothing I can do about it right now. It's such a long way
from here. Dantooine. They're on Dantooine. Kid, I've flown
from one side of this galaxy to the other. I've seen a lot of
strange stuff, but I've never seen anything to make me believe
there's one all-powerful Force controlling everything. There's
no mystical energy field that controls my destiny. It's all a lot
of simple tricks and nonsense.
Don't be too proud of this technological terror you've
constructed. The ability to destroy a planet is insignificant
next to the power of the Force. You mean it controls your
actions? I have traced the Rebel spies to her. Now she is my
only link to finding their secret base. I call it luck. I have
traced the Rebel spies to her. Now she is my only link to
finding their secret base. Hey, Luke! May the Force be with
you.

44. WRITE SO IT’S SCANNABLE
Cute Headline
What!? You mean it controls your actions? I can't get involved!
I've got work to do! It's not that I like the Empire, I hate it, but
there's nothing I can do about it right now. It's such a long way
from here. Dantooine. They're on Dantooine. Kid, I've flown
from one side of this galaxy to the other. I've seen a lot of
strange stuff, but I've never seen anything to make me believe
there's one all-powerful Force controlling everything. There's
no mystical energy field that controls my destiny. It's all a lot
of simple tricks and nonsense.
Don't be too proud of this technological terror you've
constructed. The ability to destroy a planet is insignificant
next to the power of the Force. You mean it controls your
actions? I have traced the Rebel spies to her. Now she is my
only link to finding their secret base. I call it luck. I have
traced the Rebel spies to her. Now she is my only link to
finding their secret base. Hey, Luke! May the Force be with
you.
Relevant Headline
What!? You mean it controls your actions? I can't get involved!
I've got work to do! It's not that I like the Empire, I hate it,
• Don't be too proud of this technological terror you've
constructed.
• The ability to destroy a planet is insignificant next to the
power of the Force.
• You mean it controls your actions?
Now she is my only link to finding their secret base. I call it
luck. I have traced the Rebel spies to her. Now she is my only
link to finding their secret base. Hey, Luke! May the Force be
with you.
Relevant Sub-Headline
What!? Clear and actionable link to solution. I can't get
involved! I've got work to do! It's not that I like the Empire, I
hate it,
Relevant Headline
What!? You mean it controls your actions? I can't get involved!
I've got work to do! It's not that I like the Empire, I hate it,
• Don't be too proud of this technological terror you've
constructed.
• The ability to destroy a planet is insignificant next to the
power of the Force.
• You mean it controls your actions?
Now she is my only link to finding their secret base. I call it
luck. I have traced the Rebel spies to her. Now she is my only
link to finding their secret base. Hey, Luke! May the Force be
with you.
Relevant Sub-Headline
What!? Clear and actionable link to solution. I can't get
involved! I've got work to do! It's not that I like the Empire, I
hate it,

45. READING LEVEL … SOMETIMES

46. READING LEVEL … SOMETIMES
Flesch-Kincaid Grade Level: 9.3
Coleman-Liau Index: 10.0
The SMOG Index: 8.6
Automated Readability Index: 10.1
Flesch-Kincaid Grade Level: 13.0
Coleman-Liau Index: 11.0
The SMOG Index: 11.4
Automated Readability Index: 12.6

47. READING LEVEL
REQUIRES CONTEXT

48. Plain Language Before and After

49. “This is a multipurpose passenger vehicle which will handle and
maneuver differently from an ordinary passenger car, in driving
conditions which may occur on streets and highways and off
road. As with other vehicles of this type, if you make sharp turns
or abrupt maneuvers, the vehicle may roll over or may go out of
control and crash. You should read driving guidelines and
instructions in the Owner's Manual, and WEAR YOUR SEAT BELTS
AT ALL TIMES.”

50. NO JARGON,
NO GARBAGE

51. IDIOMS ARE HORRIBLE
That’s how the cookie crumbles.
Ce est la façon cerise sur le gâteau.
↓
This is how icing on the cake.
↓

52. HEADING
STRUCTURE

53. h1
h2
h2
h3
h3

54. h1 - Headline
h3 - Sub-headline
h5 - Listing
???
???

55. H1 - Title Of Page
H2 - WYSIWYG Sections
H3 - Sub-sections

56. Methodology: A Definition
Why Methodologies Matter
Methodologies are Personal
Great. So How Do I Do It?

57. PARAGRAPH TO OUTLINE

58. PARAGRAPH TO OUTLINE OUTLINE TO PARAGRAPH

59. DESCRIPTIVE
TEXT LINKS

60. …is arguably the most successful genre in the history of American
television, as shown by classics like NYPD Blue, Law & Order,
CSI, and NCIS…

61. A wee old women came in and said “I’ve a question. Why does page 7
in all the books i take out have the 7 underlined in pen? It seems odd.”
“What?” I say, thinking she might be a bit off her rocker. She showed
me, and they did. The full thread tells the story of an old library
secret code for remembering books.

62. BE CLEAR ABOUT LINK MEDIA
alt=“P D F download”

63. EDITORIAL STRUCTURE
WHAT IS IT?
WRITING FOR ACCESSIBILITY
THE ACCESSIBLE EDITOR
THE ACCESSIBLE ENVIRONMENT

64. WITHOUT
PRIORITY,
A11Y FAILS

65. A11Y
FOR THE
FUTURE

66. MAKE A CHECKLIST
GET SOME BACKUP
CREATE AN A11Y CHAMPION
MAKE A11Y PART OF EDUCATION
BUILDING A WORKFLOW

67. UNDERSTAND A11Y’S REACH
GIVE PEOPLE OPTIONS
BE CLEAR AND CONCISE
*deep breath*

68. BE OKAY WITH
GREY AREAS

69. THANK YOU
for listening
The notes and slide deck are LIVE! Find them at:
www.eatingelephant.com/drupalcon18