How to Build an Accessible WordPress Theme
•
1 recomendación•1,658 vistas
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.
Recomendados
Recomendados
Más contenido relacionado
Similar a How to Build an Accessible WordPress Theme
Similar a How to Build an Accessible WordPress Theme (20)
Más de Graham Armfield
Más de Graham Armfield (20)
Último
Último (20)
How to Build an Accessible WordPress Theme
- 1. Graham Armfield Coolfields Consulting 1 How to Build an Accessible WordPress Theme
- 2. A bit about me 2 I’m a… Web Accessibility Consultant WordPress Developer @coolfields Photo by Kari Leigh London coolfields.co.uk
- 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. Why is accessibility important? Photo by Kari Leigh London
- 6. Why is accessibility important? The legal answer @coolfields Accessibility as a legal requirement
- 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. Dessigning an accessible WordPress theme
- 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
- 11. Define focus as well as hover styles 11 Hover styles Focus styles
- 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. Text justification 13 Left aligned text Can make life very difficult for dyslexics - around 8 - 10% of the population. Fully justified text
- 14. 14 Building your accessible theme
- 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. Use semantic markup Screen readers rely on the semantics to communicate structure to users. Speech recognition software also relies on good semantics. 16
- 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. 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. 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. Heading strategy 3 Widget headings - keep heading hierarchy sensible if you can in the widget areas Editing content - see later 20
- 21. Landmarks
- 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. 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. Landmarks <header role="banner"> <nav role="navigation"> <footer role="contentinfo"> <main role="main"> <aside role= "complementary"> <form role="search">
- 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. Are your blog links meaningful? 27 1 1 2 3 4 5 6 7 2 3 4 5 6 7
- 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?
- 30. Logos Typically, site logos are links to home page. So alt attribute of logo should be set to the link destination 30
- 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. Alternate text strategy depends on whether they are links or not. Here, the featured image is not a link. Featured images 32
- 33. Featured images 33 Here, the featured image is a link to the post.
- 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. NB: Resizing and zooming are not the same thing. Can your theme handle resizing? 35@coolfields Larger text sizeNormal text size
- 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. 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
- 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. 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. 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. Other quick build points • Avoid tabindex values > 0 • Avoid movement on pages, or allow users to stop it 42
- 43. 43 Pesky plugins How plugins can break accessibility
- 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. 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. Form plugin example 46 Do screen reader users get to hear these error messages? Are these labels linked to input fields?
- 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. 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 Helping your content authors get things right
- 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. 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. 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/
- 54. From http://a11ymemes.tumblr.com Webaim Million site survey: https://webaim.org/projects/million/
- 55. Thanks for listening Any questions? graham.armfield@coolfields.co.uk @coolfields 55
Notas del editor
- I work with organisations to help them improve the accessibility of their digital offerings. Do accessibility testing and guide designers and developers in solutions to the issues found. WordPress developer – have built many accessible websites using WordPress. I've delivered presentations to many WordCamps inc London, Sheffield, Edinburgh, Lancaster, Manchester, Bournemouth – and a number of WordPress meetup groups. This is me in Sheffield a couple of years ago. The presentation is called So, How Do I Know if My WordPress Website is Accessible and focusses on easy accessibility tests that you can do on your own WordPress website. If you've not seen me do that one – and I know that some of you have - the slides are still on Slideshare , and the deck has been viewed over 12,000 times now.
- - WP theme review guidelines
- Get some overview stats to put in here…
- Similar in a way to designing for mobile.
- Similar in a way to designing for mobile.