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.

Designing Inclusive Web Content


Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

Designing Inclusive Web Content

  1. 1. Designing Inclusive Web Content Rebecca Blakiston Ferris State University May 15, 2019
  2. 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. 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. 4. Tip #1: Know your audience Create content with your readers in mind.
  5. 5. People are goal-driven. What do they want to know? What do they want to do?
  6. 6. imagine Stacy the current student
  7. 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. 8. imagine Pete the potential student
  9. 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. 10. imagine Felix the faculty member
  11. 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. 12. What do you know about Stacy, Pete, and Felix? Who is your primary audience for your website?
  13. 13. People skim websites. This includes Stacy, Pete, and Felix. They depend on headings and hunt for links.
  14. 14. People are impatient. This includes Stacy, Pete, and Felix. They’ll lose confidence quickly.
  15. 15. People experience content differently. Stacy uses a screen reader. Pete is a non-native English speaker. Felix has color blindness.
  16. 16. Universal design is the design of products or environments to be usable by all people to the greatest extent possible.
  17. 17. Tip #2: Keep it focused and simple Reduce cognitive load with straightforward and succinct content.
  18. 18. Plain language is content that readers will immediately understand, without hesitation.
  19. 19. Pick simple words ● Avoid fluff or “happy talk” ● Use strong nouns and verbs that your audience will understand.
  20. 20. 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!
  21. 21. I believe the road to hell is paved with adverbs. - Stephen King On Writing: A Memoir of the Craft
  22. 22. Original Revised very large huge very small tiny very happy thrilled argue strongly insist
  23. 23. Focus ● Prioritize ● Break content up ● Layer Or your key messages get lost.
  24. 24. 2018
  25. 25. 2019
  26. 26. Remove all unnecessary content Cut, cut, and cut again. ● Instructions ● Modifiers ● Redundancies ● “… Form” ● “Click here to…”
  27. 27. 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
  28. 28. 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
  29. 29. Tip #3: Focus on clarity Strive for immediate comprehension.
  30. 30. Be direct Write like you talk ● Use active voice ● Be authentic ● Treat it as a conversation ● Avoid long noun phrases
  31. 31. 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.
  32. 32. Remove ambiguity Don’t make them think ● Avoid idioms ● Explain any jargon ● Write out any acronyms
  33. 33. Original Revised ODL Office of Digital Learning circulation borrowing piece of cake easy
  34. 34. 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
  35. 35. 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)
  36. 36. peop
  37. 37. Provide write-in options for ethnicity, religion, gender, dietary restrictions, and discipline. National Center for Faculty Development & Diversity
  38. 38. Include a “prefer not to say” option and/or make it optional. LinkedIn
  39. 39. Tip #4: Organize and structure Your content flow should be intentional, point-of-need, and easy to skim.
  40. 40. 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
  41. 41. Use semantic headings to break up content and help people navigate. University of Michigan Library
  42. 42. <p><strong>
  43. 43. <title> <h1> <h1> <p> <p>
  44. 44. Parallelism Be consistent in grammatical structure (e.g. imperative verbs, gerunds, nouns). Original Revised ● Interviewing ● Networking ● Design Your Search ● Interviewing ● Networking ● Designing Your Search
  45. 45. 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
  46. 46. Specific link text sets sincere expectations and fulfils them, and is substantial enough to stand alone while remaining succinct. - Kate Moran Nielsen Norman Group
  47. 47. Tip #5: Make it readable Be intentional with font choice, white space, and formatting.
  48. 48. Keep stuff short Learn to love white space ● 3 sentences per paragraph ● 25 words per sentence
  49. 49. Make links look like links so people know they are clickable.
  50. 50. Use bulleted lists for lists of related items. Cal Poly Robert E. Kennedy Library
  51. 51. Duke University Library Use numbered lists for steps in a process.
  52. 52. Use tables for tabular and if, then content. (But never for layout).
  53. 53. Grand Valley State University Libraries
  54. 54. Consider color choices Aim for high contrast and don’t use color alone to indicate meaning.
  55. 55. Avoid justification It leads to inconsistent spacing and makes things harder to read.
  56. 56. Left justify, rag right
  57. 57. Avoid ALL CAPS They are harder to read and sound like you’re shouting.
  58. 58. Avoid unnecessary capitalization It decreases readability and can cause confusion.
  59. 59. Avoid italics They are harder to read and also sound like you’re shouting.
  60. 60. Avoid underlines They look like links.
  61. 61. 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
  62. 62. Questions and discussion Let’s talk.