Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

"The Accessible Editor" by Corey Vilhauer, from DrupalCon 2018 in Nashville, TN, June 11, 2018

252 views

Published on

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.

Published in: Internet
  • Want to earn $4000/m? Of course you do. Learn how when you join today! ●●● http://ishbv.com/ezpayjobs/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

"The Accessible Editor" by Corey Vilhauer, from DrupalCon 2018 in Nashville, TN, June 11, 2018

  1. 1. THE ACCESSIBLE EDITOR A very professional presentation by Corey Vilhauer about editorial accessibility for you, the attendees of DrupalCon 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. THE EXCEPTIONS
  25. 25. NOT EVERY IMAGE IS SACRED
  26. 26. alt=“ ” STRUCTURAL
  27. 27. ADJACENT alt = “ ”
  28. 28. VOICE: “A red panda next to a bamboo tree a red panda next to a bamboo tree.”
  29. 29. NO VALUE alt = “ ”
  30. 30. Alternative Text DECISION TREE!
  31. 31. TRANSCRIPTIONS
  32. 32. “Your video and audio content is not ready for the web until there are captions or a transcription.” - Eileen Webb
 @webmeadow
  33. 33. CAPTIONS TRANSCRIPTIONS
  34. 34. TRANSCRIPTIONS
  35. 35. THANK YOU, YOUTUBE OR…THANK YOU, PROFESSIONAL TRANSCRIBERS
  36. 36. THE TITLE FIELD
  37. 37. Our Team | Blend Interactive
  38. 38. Degrees Undergraduate Programs and Majors | University of Choice Undergraduate Programs and Majors, Liberal Arts College | University of Choice, Sioux Falls, South Dakota
  39. 39. EDITORIAL STRUCTURE WHAT IS IT? WRITING FOR ACCESSIBILITY THE ACCESSIBLE EDITOR
  40. 40. “…the target audience can read, understand, and confidently act on the information in your content.” - Center for Plain Language
  41. 41. 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.
  42. 42. 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,
  43. 43. READING LEVEL … SOMETIMES
  44. 44. 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
  45. 45. READING LEVEL REQUIRES CONTEXT
  46. 46. Plain Language Before and After
  47. 47. “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.”
  48. 48. NO JARGON, NO GARBAGE
  49. 49. 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. ↓
  50. 50. HEADING STRUCTURE
  51. 51. h1 h2 h2 h3 h3
  52. 52. h1 - Headline h3 - Sub-headline h5 - Listing ??? ???
  53. 53. H1 - Title Of Page H2 - WYSIWYG Sections H3 - Sub-sections
  54. 54. Methodology: A Definition Why Methodologies Matter Methodologies are Personal Great. So How Do I Do It?
  55. 55. PARAGRAPH TO OUTLINE
  56. 56. PARAGRAPH TO OUTLINE OUTLINE TO PARAGRAPH
  57. 57. DESCRIPTIVE TEXT LINKS
  58. 58. …is arguably the most successful genre in the history of American television, as shown by classics like NYPD Blue, Law & Order, CSI, and NCIS…
  59. 59. 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.
  60. 60. BE CLEAR ABOUT LINK MEDIA alt=“P D F download”
  61. 61. EDITORIAL STRUCTURE WHAT IS IT? WRITING FOR ACCESSIBILITY THE ACCESSIBLE EDITOR THE ACCESSIBLE ENVIRONMENT
  62. 62. WITHOUT PRIORITY, A11Y FAILS
  63. 63. A11Y FOR THE FUTURE
  64. 64. MAKE A CHECKLIST GET SOME BACKUP CREATE AN A11Y CHAMPION MAKE A11Y PART OF EDUCATION BUILDING A WORKFLOW
  65. 65. UNDERSTAND A11Y’S REACH GIVE PEOPLE OPTIONS BE CLEAR AND CONCISE *deep breath*
  66. 66. BE OKAY WITH GREY AREAS
  67. 67. THANK YOU for listening The notes and slide deck are LIVE! Find them at: www.eatingelephant.com/drupalcon18

×