Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
THE
ACCESSIBLE
EDITOR
A very professional workshop by
Corey Vilhauer
about editorial accessibility for you, the attendees ...
@mrvilhauer
Corey
Vilhauer
@blendtweets
USER EXPERIENCE
ARCHITECT
THIS IS ME
INTENT
INTERPRETATION
EDITORIAL STRUCTURE
WHAT IS IT?
WRITING FOR ACCESSIBILITY
THE ACCESSIBLE EDITOR
THE ACCESSIBLE ENVIRONMENT
WHAT IS IT?
THE ACCESSIBLE EDITOR
A11y
Accessibility
(11 letters)
What is a disability?
Not just disabilities
1 in
4no
broadband
1 in
2elderly
without
broadband
1 in
10smartphone
only
“The potential audience of a website
or app is anyone human.”
- Heydon Pickering

author, Inclusive Design Patterns
“Websi...
What kinds of things we make
How they relate to each other
What bits of information they contain
THE CONTENT MODEL
What kinds of things we make
How they relate to each other
What bits of information they contain
THE CONTENT MODEL
THE CON...
EDITORIAL STRUCTURE
WHAT IS IT?
THE ACCESSIBLE EDITOR
ALTERNATIVE TEXT
Every non-text element
requires a text alternative so
that it can be read using
assistive services.
Jade Tree Records
First time on vinyl in 15 years: The Promise Ring
“Nothing Feels Good” - Remastered from the
Original So...
Image File
Dropped into
“WYSIWYG”
editor
ALTERNATIVE TEXT
alt=“something”
alt=“First time on vinyl in fifteen
years: The Promise Ring’s
Nothing Feels Good, remastered
from the original source tapes...
CHART OR TABLE
alt=“chart of the percentage of
times an artist appears on a
post-punk playlist - <a
href=“www.table.com”>v...
“NORMAL” IMAGES
alt=“a bunch of boxes”
alt=“a grid of differently colored
boxes illustrating order among
chaos”
alt=“five co...
KEEP THINGS SHORT: 100-125 char.
NO NEED FOR “IMAGE OF”
FINAL QUICK ALT HINTS
alt=“First time on vinyl in fifteen
years: The Promise Ring’s
Nothing Feels Good, remastered
from the original source tapes...
KEEP THINGS SHORT: 100-125 char.
NO NEED FOR “IMAGE OF”
NO FILENAME FALLBACKS
FINAL QUICK ALT HINTS
VOICE: “digital art 1444990_640”
THIS
IS
BAD
WORK TIME!
REVIEW
THE EXCEPTIONS
NOT EVERY
IMAGE IS SACRED
alt=“ ”
STRUCTURAL
ADJACENT
alt = “ ”
VOICE: “A red panda next to a bamboo tree
a red panda next to a bamboo tree.”
NO VALUE
alt = “ ”
WORK TIME!
REVIEW
Alternative
Text
DECISION
TREE!
TRANSCRIPTIONS
“Your video and audio
content is not ready for
the web until there are
captions or a
transcription.”
- Eileen Webb

@webme...
CAPTIONS TRANSCRIPTIONS
TRANSCRIPTIONS
THANK YOU, YOUTUBE
OR…THANK YOU,
PROFESSIONAL
TRANSCRIBERS
THE TITLE FIELD
Our Team | Blend Interactive
Degrees
Undergraduate Programs and
Majors | University of Sioux Falls
Undergraduate Programs and Majors,
Liberal Arts Coll...
The Harstine Family
The Harstine Family Adoption Story
| Adopt a Love Story
Adoption, The Harstine Family, Adopt a
Baby, A...
EDITORIAL STRUCTURE
WHAT IS IT?
WRITING FOR ACCESSIBILITY
THE ACCESSIBLE EDITOR
“…the target audience
can read, understand,
and confidently act on
the information in your
content.”
- Center for Plain Lan...
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!...
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!...
READING LEVEL … SOMETIMES
Flesch-Kincaid Grade Level: 9.3
Coleman-Liau Index: 10.0
The SMOG Index: 8.6
Automated Readabili...
READING LEVEL
REQUIRES CONTEXT
Plain Language Before and After
“This is a multipurpose passenger vehicle which will handle and
maneuver differently from an ordinary passenger car, in dri...
ACTIVE VS. PASSIVE
We proposed new regulations.
New regulations were proposed.
Bonds will be withheld in cases of
non-compliance with all per...
The appropriations bill was passed
Your name should be entered into the blank
If your project is late, your grade will be ...
FOCUS ON THEM,
NOT YOU
NO JARGON,
NO GARBAGE
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....
WORK TIME!
REVIEW
HEADING
STRUCTURE
h1
h2
h2
h3
h3
h1 - Headline
h3 - Sub-headline
h5 - Listing
???
???
H1 - Title Of Page
H2 - WYSIWYG Sections
H3 - Sub-sections
H2 - Block Sections
H2 - Block Sections
H2 - Block Sections
H3 ...
Methodology: A Definition
Why Methodologies Matter
Methodologies are Personal
Great. So How Do I Do It?
PARAGRAPH TO OUTLINE
PARAGRAPH TO OUTLINE OUTLINE TO PARAGRAPH
WORK TIME!
REVIEW
DESCRIPTIVE
TEXT LINKS
…is arguably the most successful genre in the history of American
television, as shown by classics like NYPD Blue, Law & O...
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 pe...
BE CLEAR ABOUT LINK MEDIA
alt=“P D F download”
WORK TIME!
REVIEW
EDITORIAL STRUCTURE
WHAT IS IT?
WRITING FOR ACCESSIBILITY
THE ACCESSIBLE EDITOR
THE ACCESSIBLE ENVIRONMENT
WITHOUT
PRIORITY,
A11Y FAILS
A11Y
FOR THE
FUTURE
MAKE A CHECKLIST
GET SOME BACKUP
CREATE AN A11Y CHAMPION
MAKE A11Y PART OF EDUCATION
BUILDING A WORKFLOW
UNDERSTAND A11Y’S REACH
GIVE PEOPLE OPTIONS
BE CLEAR AND CONCISE
*deep breath*
BE OKAY WITH
GREY AREAS
THANK YOU
for listening
The notes and slide deck are LIVE! Find them at:
www.eatingelephant.com/nowwhat18
"The Accessible Editor Workshop" by Corey Vilhauer, from Now What? Workshops 2018 in Sioux Falls, SD, April 26, 2018
"The Accessible Editor Workshop" by Corey Vilhauer, from Now What? Workshops 2018 in Sioux Falls, SD, April 26, 2018
Nächste SlideShare
Wird geladen in …5
×

"The Accessible Editor Workshop" by Corey Vilhauer, from Now What? Workshops 2018 in Sioux Falls, SD, April 26, 2018

194 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

"The Accessible Editor Workshop" by Corey Vilhauer, from Now What? Workshops 2018 in Sioux Falls, SD, April 26, 2018

  1. 1. THE ACCESSIBLE EDITOR A very professional workshop by Corey Vilhauer about editorial accessibility for you, the attendees of Now What? Workshops 2018
  2. 2. @mrvilhauer Corey Vilhauer @blendtweets USER EXPERIENCE ARCHITECT THIS IS ME
  3. 3. INTENT INTERPRETATION
  4. 4. EDITORIAL STRUCTURE WHAT IS IT? WRITING FOR ACCESSIBILITY THE ACCESSIBLE EDITOR THE ACCESSIBLE ENVIRONMENT
  5. 5. WHAT IS IT? THE ACCESSIBLE EDITOR
  6. 6. A11y Accessibility (11 letters)
  7. 7. What is a disability?
  8. 8. Not just disabilities 1 in 4no broadband 1 in 2elderly without broadband 1 in 10smartphone only
  9. 9. “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
  10. 10. What kinds of things we make How they relate to each other What bits of information they contain THE CONTENT MODEL
  11. 11. 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
  12. 12. EDITORIAL STRUCTURE WHAT IS IT? THE ACCESSIBLE EDITOR
  13. 13. ALTERNATIVE TEXT Every non-text element requires a text alternative so that it can be read using assistive services.
  14. 14. 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
  15. 15. Image File Dropped into “WYSIWYG” editor ALTERNATIVE TEXT alt=“something”
  16. 16. 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
  17. 17. 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.”
  18. 18. “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.”
  19. 19. KEEP THINGS SHORT: 100-125 char. NO NEED FOR “IMAGE OF” FINAL QUICK ALT HINTS
  20. 20. 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”
  21. 21. KEEP THINGS SHORT: 100-125 char. NO NEED FOR “IMAGE OF” NO FILENAME FALLBACKS FINAL QUICK ALT HINTS
  22. 22. VOICE: “digital art 1444990_640”
  23. 23. THIS IS BAD
  24. 24. WORK TIME!
  25. 25. REVIEW
  26. 26. THE EXCEPTIONS
  27. 27. NOT EVERY IMAGE IS SACRED
  28. 28. alt=“ ” STRUCTURAL
  29. 29. ADJACENT alt = “ ”
  30. 30. VOICE: “A red panda next to a bamboo tree a red panda next to a bamboo tree.”
  31. 31. NO VALUE alt = “ ”
  32. 32. WORK TIME!
  33. 33. REVIEW
  34. 34. Alternative Text DECISION TREE!
  35. 35. TRANSCRIPTIONS
  36. 36. “Your video and audio content is not ready for the web until there are captions or a transcription.” - Eileen Webb
 @webmeadow
  37. 37. CAPTIONS TRANSCRIPTIONS
  38. 38. TRANSCRIPTIONS
  39. 39. THANK YOU, YOUTUBE OR…THANK YOU, PROFESSIONAL TRANSCRIBERS
  40. 40. THE TITLE FIELD
  41. 41. Our Team | Blend Interactive
  42. 42. Degrees Undergraduate Programs and Majors | University of Sioux Falls Undergraduate Programs and Majors, Liberal Arts College | University of Sioux Falls, Sioux Falls, South Dakota
  43. 43. The Harstine Family The Harstine Family Adoption Story | Adopt a Love Story Adoption, The Harstine Family, Adopt a Baby, Adopt a Love Story.
  44. 44. EDITORIAL STRUCTURE WHAT IS IT? WRITING FOR ACCESSIBILITY THE ACCESSIBLE EDITOR
  45. 45. “…the target audience can read, understand, and confidently act on the information in your content.” - Center for Plain Language
  46. 46. 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.
  47. 47. 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,
  48. 48. 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
  49. 49. READING LEVEL REQUIRES CONTEXT
  50. 50. Plain Language Before and After
  51. 51. “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.”
  52. 52. ACTIVE VS. PASSIVE
  53. 53. We proposed new regulations. New regulations were proposed. Bonds will be withheld in cases of non-compliance with all permits and conditions. We will withhold your bond if you don’t comply with all permit terms and conditions. by us
  54. 54. The appropriations bill was passed Your name should be entered into the blank If your project is late, your grade will be reduced BY ZOMBIES BY ZOMBIES BY ZOMBIES
  55. 55. FOCUS ON THEM, NOT YOU
  56. 56. NO JARGON, NO GARBAGE
  57. 57. 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. ↓
  58. 58. WORK TIME!
  59. 59. REVIEW
  60. 60. HEADING STRUCTURE
  61. 61. h1 h2 h2 h3 h3
  62. 62. h1 - Headline h3 - Sub-headline h5 - Listing ??? ???
  63. 63. H1 - Title Of Page H2 - WYSIWYG Sections H3 - Sub-sections H2 - Block Sections H2 - Block Sections H2 - Block Sections H3 - Block Sub-sections
  64. 64. Methodology: A Definition Why Methodologies Matter Methodologies are Personal Great. So How Do I Do It?
  65. 65. PARAGRAPH TO OUTLINE
  66. 66. PARAGRAPH TO OUTLINE OUTLINE TO PARAGRAPH
  67. 67. WORK TIME!
  68. 68. REVIEW
  69. 69. DESCRIPTIVE TEXT LINKS
  70. 70. …is arguably the most successful genre in the history of American television, as shown by classics like NYPD Blue, Law & Order, CSI, and NCIS…
  71. 71. 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.
  72. 72. BE CLEAR ABOUT LINK MEDIA alt=“P D F download”
  73. 73. WORK TIME!
  74. 74. REVIEW
  75. 75. EDITORIAL STRUCTURE WHAT IS IT? WRITING FOR ACCESSIBILITY THE ACCESSIBLE EDITOR THE ACCESSIBLE ENVIRONMENT
  76. 76. WITHOUT PRIORITY, A11Y FAILS
  77. 77. A11Y FOR THE FUTURE
  78. 78. MAKE A CHECKLIST GET SOME BACKUP CREATE AN A11Y CHAMPION MAKE A11Y PART OF EDUCATION BUILDING A WORKFLOW
  79. 79. UNDERSTAND A11Y’S REACH GIVE PEOPLE OPTIONS BE CLEAR AND CONCISE *deep breath*
  80. 80. BE OKAY WITH GREY AREAS
  81. 81. THANK YOU for listening The notes and slide deck are LIVE! Find them at: www.eatingelephant.com/nowwhat18

×