HCID 2012 - Graham Armfield


Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Statistics indicate that over 5 million sites worldwide are built upon WordPressInformation from W3Techs shows that WordPress is used to power over 15% of the world’s one million largest websites and over 54% of all websites using a CMS.WordPress.org reports that 22 out of every 100 new active domains in the US are running WordPress, and the popularity of WordPress can be seen in Google Trends.
  • Going to focus mainly on accessibility of the front end – ie accessibility of the website as rendered by WordPressBut I’m also going to cover the accessibility of the admin back end - the screens that people use to maintain their WordPress site.
  • Choosing the right theme is the first part of the success or failure in our quest to produce an accessible websiteBlog orientated – betrays WordPress’ roots as a blogging tool.Out of date – don’t support newer features like custom menus or static home page, so can’t be used for brochureware sites
  • Accessibility features can be baked in to the page templates at this stage or they can be left out.Most themes typically do not take accessibility into account – and in many casestheme developers probably only get it right by accident. Premium themes are no better in this regard – and can often be worse as they are often geared up for magazine or portfolio sites with lots of functionality which can be inaccessible – flash, ajax calls etc
  • A brand new installation of WordPress will give you two default themes 'twentyten' and the newer 'twentyeleven' – a truly HTML5 theme. These themes are updated from time to time with new WordPress releases.Many people use the default themes as the basis for their site as there are a number of customisation options available (Demonstrate – use church site + flowers)Good NewsThe default WordPress themes are not too bad from an accessibility perspective and they're gradually getting better. Bad NewsUnfortunately there are still some issues that could be better. Examples:Fixed font size in content in twentytenSome colour contrast issues in twentytenKeyboard accessibility – menus still true in both (demonstrate)Search box label missing in twentyten but OK in twentelevenRead more links (demonstrate)Title attributes everywhere (demonstrate)
  • Weaver II is a free, highly featured theme. A premium version is available that offers even more configuration.
  • Could take a while but have started on design.
  • The second opportunity to affect the level of accessibility of a website
  • The functionality normally covers specific needs – eg SEO, Search, Backup, Maintenance, Social Media integration.More extensive ones (and typically more expensive) – eCommerce, Membership sites, etcPlugins can typically 'monkey around' with the HTML that is generated by the site's theme and is being delivered to the browser. So the plugin functionality can add to or subtract from the level of accessibility of a website.
  • Demo - lightbox, carousel
  • Demo – remove title attributes, chgfontsizechgFontSize only works successfully with themes where fixed fonts are not present. You also need to know a suitable container id to get it to work – beyond some people’s capability.
  • Demo – dropdown menus, social bookmarks
  • Content authors are the third strand in creating an accessible WordPress siteWordPress supports many features that authors can put in to ensure accessibility
  • Visibility of focus has improved but still could be much better (demo)Nonsensical links - 5 pagesTab order can be confusingSome skip links would be usefulSome disabled users have learned how to use the backend as it was fairly constant over a period of time. They'd know that the 3rd link from the top was the Profile menu option etc. But with v 3.3 there were some UI changes that have forced people to relearn the screens.Blind users may disable the visual (WYSIWYG) editor as this is hard to use with a screen reader – demo. It helps if you know a bit of HTML.Sighted keyboard users can have a frustrating time because of the lack of visible focus in key areas. It is also v difficult or impossible to tab to key bits of functionality – eg adding images into posts or pages.
  • A few WP developers have some basic knowledge of accessibility and a desire to incorporate it, but most don't.Within WP releases there is often a request for an accessibility review right at the end of the development process. This is really the opposite of what should happen as a11y needs to be built in from the start. There isn't much evidence that the suggestions that are received are implemented. WP developers feel they've be burned by 'accessibility experts' in the past and are suspicious as a result. My view is that it's a fundamental lack of understanding of how disabled users use the web – and significantly that different groups of disabled users have different needs.
  • Demo – Accessible Admin Menus pluginBut then show tab order
  • HCID 2012 - Graham Armfield

    1. 1. #hcid2012 City University London, 12th April 2012 Harnessing Themes, Plugins and Features to Make WordPress Accessible Graham Armfield Coolfields Consulting www.coolfields.co.ukCoolfields Consulting @coolfields
    2. 2. #hcid2012 City University London, 12th April 2012 IntroductionWordpress – Increasingly popular platform for websites – Originally a blogging tool but now a true Content Management System (CMS) – Useful for business websites of many typesQ. But can you create accessible websitesusing WordPress? 2 www.coolfields.co.ukCoolfields Consulting @coolfields
    3. 3. #hcid2012 City University London, 12th April 2012 What Makes Up a WordPress Site? Theme • The overall page template Plugins • Extra functionality for specific tasks Content • What you want the world to see 3 www.coolfields.co.ukCoolfields Consulting @coolfields
    4. 4. #hcid2012 City University London, 12th April 2012 WordPress Themes 4 www.coolfields.co.ukCoolfields Consulting @coolfields
    5. 5. #hcid2012 City University London, 12th April 2012 WordPress Themes – Thousands available – free and premium – Many/most are blog orientated – Many are hideously out of date – Bespoke themes can be built from designs • This is what many developers do – including me 5 www.coolfields.co.ukCoolfields Consulting @coolfields
    6. 6. #hcid2012 City University London, 12th April 2012 WordPress Themes contdQ. So are there themes that include orenable accessible features?A. Of the useful themes, many have somegood practices but very few get close todelivering ‘full accessibility’ 6 www.coolfields.co.ukCoolfields Consulting @coolfields
    7. 7. #hcid2012 City University London, 12th April 2012 WordPress Themes contdWordPress Default Themes – Twentyten – TwentyelevenMany sites are built with these themes –using the customisation options 7 www.coolfields.co.ukCoolfields Consulting @coolfields
    8. 8. #hcid2012 City University London, 12th April 2012 WordPress Themes contdWeaver II – Advantages • extremely configurable • suits business websites, • also includes many useful a11y features – skip links etc – Disadvantage – • extremely configurable means huge learning curve so potentially hard work for anyone who is not a developer. • still not perfect from accessibility perspective 8 www.coolfields.co.ukCoolfields Consulting @coolfields
    9. 9. #hcid2012 City University London, 12th April 2012 WordPress Themes contdOthers alleged to be accessible – Temple Gate – configurable, suits small sites, blog orientated – Dodo – suitable for blogs only, submenus not shown properly – VeryPlainText – no visual focus – Precious – blogs only, poor visual focus – Whitepress - submenus not shown properly – So not much of any use there 9 www.coolfields.co.ukCoolfields Consulting @coolfields
    10. 10. #hcid2012 City University London, 12th April 2012 My Future Theme Project To build a theme that is: • As accessible as I can get it • Sufficiently configurable but not too complex • That suits needs of small businesses • That can be used for blogs and brochureware sites 10 www.coolfields.co.ukCoolfields Consulting @coolfields
    11. 11. #hcid2012 City University London, 12th April 2012 WordPress Plugins 11 www.coolfields.co.ukCoolfields Consulting @coolfields
    12. 12. #hcid2012 City University London, 12th April 2012 WordPress PluginsQ: So what are plugins?A: Nuggets of extra functionality that canbe added to existing WordPress sites. Many are free, but there are also premium ones 12 www.coolfields.co.ukCoolfields Consulting @coolfields
    13. 13. #hcid2012 City University London, 12th April 2012 WordPress Plugins contdQ: So are there useful plugins that don’tcompromise accessibility?A: Fortunately yes. – Relevanssi – improved search capability – Platinum SEO Pack – SEO for your site – Breadcrumb NavXT – breadcrumb trail – Plus others 13 www.coolfields.co.ukCoolfields Consulting @coolfields
    14. 14. #hcid2012 City University London, 12th April 2012 WordPress Plugins contdQ: And any plugins that do compromiseaccessibility?A: Unfortunately yes. – Lightboxes – where does focus go? – Carousel/slider – keyboard focus, movement – Form builders – form elements without labels – Etc, etc 14 www.coolfields.co.ukCoolfields Consulting @coolfields
    15. 15. #hcid2012 City University London, 12th April 2012 WordPress Plugins contdQ: Any accessibility-related plugins?A: Not many. – Remove title attributes – Wp-chgfontsize – Accessible tag cloud – Myreadmore – Plus my own… 15 www.coolfields.co.ukCoolfields Consulting @coolfields
    16. 16. #hcid2012 City University London, 12th April 2012 WordPress Plugins contdMy own plugin projects – Accessible dropdown menus – v0.1 – Accessible social bookmarks – v0.2 – Accessible admin menus – v0.1 – Accessible lightbox – designed – Accessible carousel – some way off 16 www.coolfields.co.ukCoolfields Consulting @coolfields
    17. 17. #hcid2012 City University London, 12th April 2012 WordPress Content 17 www.coolfields.co.ukCoolfields Consulting @coolfields
    18. 18. #hcid2012 City University London, 12th April 2012 Content AuthorsImages andalternate text 18 www.coolfields.co.ukCoolfields Consulting @coolfields
    19. 19. #hcid2012 City University London, 12th April 2012 Content Authors contdLinks and link text Opening new windows 19 www.coolfields.co.ukCoolfields Consulting @coolfields
    20. 20. #hcid2012 City University London, 12th April 2012 Content Authors contdUsing headings 20 www.coolfields.co.ukCoolfields Consulting @coolfields
    21. 21. #hcid2012 City University London, 12th April 2012 Content Authors contdLists If it’s a list of items – use the list capabilityVideo Avoid auto-start Add captions (easier said than done) 21 www.coolfields.co.ukCoolfields Consulting @coolfields
    22. 22. #hcid2012 City University London, 12th April 2012 WordPress Admin Screens 22 www.coolfields.co.ukCoolfields Consulting @coolfields
    23. 23. #hcid2012 City University London, 12th April 2012 WordPress AdminQ: How accessible is the WordPress Adminbackend?A: Patchy – and can be a huge barrier insome areas 23 www.coolfields.co.ukCoolfields Consulting @coolfields
    24. 24. #hcid2012 City University London, 12th April 2012 WordPress Admin contdQ: What are WordPress developers doing tohelp??A: Progress is sporadic and uncoordinated 24 www.coolfields.co.ukCoolfields Consulting @coolfields
    25. 25. #hcid2012 City University London, 12th April 2012 WordPress Admin contdPlugins can help mitigate 25 www.coolfields.co.ukCoolfields Consulting @coolfields
    26. 26. #hcid2012 City University London, 12th April 2012 Any Questions 26 www.coolfields.co.ukCoolfields Consulting @coolfields