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.

How to Build an Accessible WordPress Theme

623 views

Published on

In an era where the number of web accessibility legal actions is growing rapidly, it's important that those who build websites do what they can to make their websites accessible. Good accessibility also brings in more potential customers for your products or services - which is good for any business.

This presentation looks at some simple tricks and techniques to improve accessibility that can be incorporated when you're building a WordPress theme - either for yourself or for a client.

It also has a section on what to tell content authors and editors so that they don't mess up the accessibility of the website once you've built it.

Published in: Technology
  • Be the first to like this

How to Build an Accessible WordPress Theme

  1. 1. Graham Armfield Coolfields Consulting 1 How to Build an Accessible WordPress Theme
  2. 2. A bit about me 2 I’m a… Web Accessibility Consultant WordPress Developer @coolfields Photo by Kari Leigh London coolfields.co.uk
  3. 3. What I'm going to cover • Why accessibility is important • When to think about accessibility • Designing your theme • Building your theme @coolfields • Adding plugins • What to tell your content authors • The checklist
  4. 4. Why is accessibility important? Photo by Kari Leigh London
  5. 5. Accessibility can help everyone
  6. 6. Why is accessibility important? The legal answer @coolfields Accessibility as a legal requirement
  7. 7. When to think about accessibility? Do not leave it until last – as time goes by it becomes harder and costlier to fix… Treat it as you would any other requirement – think about it at every stage.
  8. 8. Dessigning an accessible WordPress theme
  9. 9. Designing for accessibility Presentation slides: https://www.slideshare.net/coolfields/designing-for-accessibility- wordcamp-london-2017 WordPress TV: https://wordpress.tv/2017/05/30/graham-armfield-designing-for- accessibility/ 9
  10. 10. Colour contrast 10
  11. 11. Define focus as well as hover styles 11 Hover styles Focus styles
  12. 12. Making links look like links 12@coolfields Users who are colour blind or who have poor vision may struggle to see links with no underline.
  13. 13. Text justification 13 Left aligned text Can make life very difficult for dyslexics - around 8 - 10% of the population. Fully justified text
  14. 14. 14 Building your accessible theme
  15. 15. WordPress theme review guidelines For coding standards etc: https://make.wordpress.org/themes/handbook/review/required/ But also for accessibility: https://make.wordpress.org/themes/handbook/review/accessibility/ 15
  16. 16. Use semantic markup Screen readers rely on the semantics to communicate structure to users. Speech recognition software also relies on good semantics. 16
  17. 17. Indicating page language Enables screen readers to voice words correctly Use lang attribute on <html> element. <html lang="en-gb"> List of language codes: http://www.metamodpro.com/browser-language-codes 17
  18. 18. Heading strategy 1 Headings are used as in-page navigation by screen reader users - so very important to get this right. One top level heading <h1> per page/post - should be equivalent of page/post <title> 18
  19. 19. Heading strategy 2 It's OK to start the page with other headings - eg <h2> just before primary navigation <h2 class="srt">Main navigation</h2> <nav>…</nav> <main> <h1>Meet the team</h1> 19
  20. 20. Heading strategy 3 Widget headings - keep heading hierarchy sensible if you can in the widget areas Editing content - see later 20
  21. 21. Landmarks
  22. 22. Landmarks Who uses landmarks in their themes? Who uses these HTML5 elements in their themes? <nav>, <main>, <header>, <footer>, <section>, etc These are all understood as landmarks, by screen readers in certain situations…
  23. 23. Landmarks A way of defining discrete regions or areas of a page. For example: the banner, the navigation, main content, etc. Increasingly used by screen reader users to help them navigate around pages. Sometimes indicated by role="navigation", role="main", etc Use aria-label to give more information if required: <nav aria-label="primary">
  24. 24. Landmarks <header role="banner"> <nav role="navigation"> <footer role="contentinfo"> <main role="main"> <aside role= "complementary"> <form role="search">
  25. 25. Coolfields Consulting Photo: Links
  26. 26. Skip links 26 • Make it the first link in page. • Visible when it gets focus. • Should point at <main id="main">. <a href="#main">Skip to content</a> These are really useful for sighted keyboard users and screen reader users.
  27. 27. Are your blog links meaningful? 27 1 1 2 3 4 5 6 7 2 3 4 5 6 7
  28. 28. Pagination links By default these links are just numbers - no context for screen reader users. So, add some screen reader text to give context. But how do you do that?
  29. 29. Pagination links From: https://codex.wordpress.org/Function_Reference/paginate_links *
  30. 30. Logos Typically, site logos are links to home page. So alt attribute of logo should be set to the link destination 30
  31. 31. Icons as links/buttons Depending on how they are added to page, icons may not give any useful information to screen readers. So hide the icon from screen readers, and add aria-label on link/button. <a href="blah" aria-label="Twitter"> <i class="socmed-twitter" aria-hidden="true"> </a> 31
  32. 32. Alternate text strategy depends on whether they are links or not. Here, the featured image is not a link. Featured images 32
  33. 33. Featured images 33 Here, the featured image is a link to the post.
  34. 34. Featured images 34 Set what you want the alternate text to be in here, or function will use whatever is set in media manager.
  35. 35. NB: Resizing and zooming are not the same thing. Can your theme handle resizing? 35@coolfields Larger text sizeNormal text size
  36. 36. Best practices: • Define font sizes in em and rem - not px. • Define breakpoints in em values • Don't fix box heights. Catering for text resizing 36@coolfields
  37. 37. Please don't do this… <meta name="viewport" content="width=device- width, initial-scale=1, maximum-scale=1, user- scalable=no"> Instead, do this… <meta name="viewport" content="width=device- width, initial-scale=1.0"> Don't block zooming on mobiles 37@coolfields
  38. 38. Coolfields Consulting Keyboard Interaction
  39. 39. Keyboard interaction Important for sighted keyboard users and screen reader users: • Anything actionable must be able to get focus - and show that it has focus. Remember we specified this at the design stage. • Anything actionable must be able to be actioned using appropriate keystrokes. • Does your dropdown navigation work with a keyboard? 39
  40. 40. Forms - contact, comments, etc • Always add labels to your input fields. • In special situations these could be hidden with screen reader text - eg Search. • Ensure any error messages can be accessed by screen reader users. 40
  41. 41. Other quick build points • Say "No" to title attributes • Avoid accesskey attributes • Avoid opening new windows without warning users - sighted and screen reader 41
  42. 42. Other quick build points • Avoid tabindex values > 0 • Avoid movement on pages, or allow users to stop it 42
  43. 43. 43 Pesky plugins How plugins can break accessibility
  44. 44. Lightbox plugin example 44 Screen reader users know these are links, but do they know what they are for? And that they open a new panel?
  45. 45. Lightbox plugin example 45 Is alternate text added to the large images? When this lightbox opens, focus remains on page below Do these icons get keyboard focus? And are they labelled?
  46. 46. Form plugin example 46 Do screen reader users get to hear these error messages? Are these labels linked to input fields?
  47. 47. Slider/carousel plugin example 47 Can I stop the slider using the keyboard? Can I attach alternate text to the images? Do these buttons or links label their purpose? Does the carousel 'break' if I tab into it?
  48. 48. Cookie warning plugin example 48 Cookie warning panel is position:fixed - can hide important links and buttons for keyboard users. These items are the very last items in the tab order of the page. Frustrating for sighted keyboard users.
  49. 49. 49 Helping your content authors get things right
  50. 50. A guide for content authors? @coolfields The people who add or edit the content can have a significant impact on the accessibility of a site. Do we just assume they know what they're doing?
  51. 51. A guide for content authors? @coolfields Maybe provide a 'cheat sheet' to help them get it right? • Headings - importance, hierarchy • Link text - avoid 'Click here' • Adding images with alternate text, especially if the image is a link • Lists of items
  52. 52. Maybe a plugin could help? Link with title attribute present Image with empty alt attribute Link that opens new window Empty header On GitHub: https://github.com/boswall/Co ntent-Author-Accessibility- Preview Now at: https://wordpress.org/plugins/c ontent-author-accessibility- preview/
  53. 53. https://www.coolfields.co.uk/2019/04/accessibility-checklist/ The checklist
  54. 54. From http://a11ymemes.tumblr.com Webaim Million site survey: https://webaim.org/projects/million/
  55. 55. Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 55

×