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.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Creating Accessible Content with WordPress

Download to read offline

A perfectly coded website will still break down if the content isn’t written and built accessibly. Learn how to write content that is accessible to everyone, and how to quickly evaluate themes and plugins for basic accessibility.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Creating Accessible Content with WordPress

  1. 1. JERRY JONES / @JURYJOWNS You make great content. Make sure everyone can access it. 🙌 CreatingAccessibleContent withWordPress
  2. 2. - Themes & Accessibility in relation to content - Quick Tips on Accessible Content - The Importance of Headings / Titles - Images and Writing Good Alt Text - Links - Color - Cognitive Accessibility - How to Quickly Evaluate Plugins and Sites for Baseline Accessibility - Evaluate some plugins, themes, or websites WHATWILLWETALKABOUT?
  3. 3. - Themes are not accessible. - A theme doesn’t have content. - “Accessible Ready” - Only a site with content can be accessible. THEMES&ACCESSIBILITY
  4. 4. CONTENT
  5. 5. - Capitalize multi-word hashtags - Don’t 👏 use 👏 lots 👏 of 👏 emojis 👏 - Caption videos - Provide transcripts for audio CONTENTCONSIDERATIONS
  6. 6. HEADINGS
  7. 7. - Like Chapters in a book, gives the page structure - <h1>The Page Title</h1> - H1 - H6 - Screen Readers can navigate by Heading HEADINGS
  8. 8. - H1: Creating Accessible Content with WordPress - H2: Themes and Accessibility - H2: Content Considerations - H2: Headings - H3: Add Headings in WordPress - H2: Images and Alt Text - H3: Select the Alt Text - Creating Accessible Content with WordPress - Themes and Accessibility - Content Considerations - Headings - Add Headings in WordPress - Images and Alt Text - Select the Alt Text NOSTRUCTURE SEMANTIC
  9. 9. Add a heading block. ADDHEADINGS INWORDPRESS
  10. 10. Select the level you want in the block toolbar (select the H2) or in the block sidebar Heading settings > Level. ADDHEADINGS INWORDPRESS
  11. 11. Automatically add a heading-level with ## > Heading 2 ### > Heading 3 #### > Heading 4 ADDHEADINGS INWORDPRESS
  12. 12. IMAGESANDALTTEXT
  13. 13. - Don’t use images of text - Images need alt text - Almost always need alt text. - “Presentational” / Does not carry meaning. - If you’re not sure, add it. IMAGES
  14. 14. WRITINGALTTEXT - Be descriptive, but succinct (1 – 3 sentences max). - Highlight the important details in the image that are relevant to the page content. - Don’t start it with “An image of” or “A gif of.” - Telephone Test
  15. 15. SELECTTHEALTTEXT I was excited until I sat down and the small cart shook. “It will be worth it,” I reassured myself. A. Image containing mountains, clouds, cable cars, trees. Blue and white with small houses. Photo taken from above. B. Mountains and tiny cable cars. C. Beautiful view of the mountains as we traveled across the land in cable cars, right before we passed through the clouds. D. Cable cars about to travel underneath the clouds with large mountains in the background.
  16. 16. Use the Media Library to set general alt text for the image. ADDALTTEXT INWORDPRESS
  17. 17. Add alt text in the block sidebar for that image in context. This will not save it to the media library alt text! ADDALTTEXT INWORDPRESS
  18. 18. LINKS
  19. 19. - Don’t open links in a new tab - Use underlines for body text links - Avoid generic phrases like “click here” or “read more” LINKS VS - Buy Now - Upcoming Events - all of our available properties
  20. 20. COLORS
  21. 21. COLORCONTRAST Can people read the text? Best Minimum
  22. 22. COLORBLINDNESS Don’t rely on color only
  23. 23. - Make it easy to understand - Bulleted lists - Short sentences, smaller words - Bolded text - No timers - Don't autoplay anything COGNITIVEACCESSIBILITY
  24. 24. EVALUATINGFORACCESSIBILITY
  25. 25. ⌨ Keyboard Interactions 🔎 Zoom 🏷 Input Labels 🎨 Color Contrast 5MINUTEACCESSIBILITYAUDIT
  26. 26. KEYBOARDNAVIGATION - Tab to move focus - Arrow keys within groups
  27. 27. ZOOM In: Command + Out: Command - Reset: Command 0
  28. 28. - Labels describe the field - Placeholders are not labels - Placeholders are unnecessary, but, if used, are examples LABELINPUTS
  29. 29. Hmmm…
  30. 30. LET’SEVALUATE!
  31. 31. - Accessibility 101 for Content Creators - Jerry Jones - Accessible Images for When They Matter Most - Carie Fisher - The Importance of HTML - Jerry Jones - The Complete Guide to Accessibility for WordPress Websites - Ross Johnson - How to Choose an Accessibility Ready WordPress Theme (and Why) - Claire Brotherton - Cognitive Accessibility - MDN - The 5 Minute Accessibility Audit - Jerry Jones RESOURCES

A perfectly coded website will still break down if the content isn’t written and built accessibly. Learn how to write content that is accessible to everyone, and how to quickly evaluate themes and plugins for basic accessibility.

Views

Total views

1,021

On Slideshare

0

From embeds

0

Number of embeds

14

Actions

Downloads

3

Shares

0

Comments

0

Likes

0

×