SlideShare a Scribd company logo
#hcid2012
                    City University London, 12th April 2012




     Harnessing Themes, Plugins and
      Features to Make WordPress
               Accessible
                 Graham Armfield
                  Coolfields Consulting




                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



                  Introduction
Wordpress
  – Increasingly popular platform for websites
  – Originally a blogging tool but now a true
    Content Management System (CMS)
  – Useful for business websites of many types

Q. But can you create accessible websites
using WordPress?
                                                                               2
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#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.uk
Coolfields Consulting                                            @coolfields
#hcid2012
                    City University London, 12th April 2012




   WordPress Themes

                                                                               4
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#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.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



        WordPress Themes contd
Q. So are there themes that include or
enable accessible features?

A. Of the useful themes, many have some
good practices but very few get close to
delivering ‘full accessibility’

                                                                               6
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



        WordPress Themes contd
WordPress Default Themes
  – Twentyten
  – Twentyeleven


Many sites are built with these themes –
using the customisation options

                                                                               7
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                      City University London, 12th April 2012



        WordPress Themes contd
Weaver 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.uk
Coolfields Consulting                                             @coolfields
#hcid2012
                    City University London, 12th April 2012



        WordPress Themes contd
Others 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.uk
Coolfields Consulting                                           @coolfields
#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.uk
Coolfields Consulting                                             @coolfields
#hcid2012
                    City University London, 12th April 2012




    WordPress Plugins

                                                                               11
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



              WordPress Plugins

Q: So what are plugins?

A: Nuggets of extra functionality that can
be added to existing WordPress sites.

  Many are free, but there are also premium
  ones
                                                                               12
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



        WordPress Plugins contd
Q: So are there useful plugins that don’t
compromise 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.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



        WordPress Plugins contd
Q: And any plugins that do compromise
accessibility?

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.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



        WordPress Plugins contd
Q: Any accessibility-related plugins?
A: Not many.
  – Remove title attributes
  – Wp-chgfontsize
  – Accessible tag cloud
  – Myreadmore
  – Plus my own…
                                                                               15
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



        WordPress Plugins contd

My 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.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012




   WordPress Content

                                                                               17
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



               Content Authors

Images and
alternate text




                                                                               18
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



          Content Authors contd

Links and link text               Opening new windows




                                                                               19
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



          Content Authors contd

Using headings




                                                                               20
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



          Content Authors contd
Lists
  If it’s a list of items
  – use the list
  capability

Video
  Avoid auto-start
  Add captions (easier
  said than done)
                                                                               21
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012




     WordPress Admin
         Screens
                                                                               22
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



               WordPress Admin

Q: How accessible is the WordPress Admin
backend?

A: Patchy – and can be a huge barrier in
some areas

                                                                               23
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



         WordPress Admin contd

Q: What are WordPress developers doing to
help??

A: Progress is sporadic and uncoordinated


                                                                               24
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012



         WordPress Admin contd
Plugins can help mitigate




                                                                               25
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields
#hcid2012
                    City University London, 12th April 2012




                 Any Questions




                                                                               26
                                                        www.coolfields.co.uk
Coolfields Consulting                                           @coolfields

More Related Content

Similar to HCID 2012 - Graham Armfield

Tools for Captioning YouTube Videos - a11yLDN2012
Tools for Captioning YouTube Videos - a11yLDN2012Tools for Captioning YouTube Videos - a11yLDN2012
Tools for Captioning YouTube Videos - a11yLDN2012Graham Armfield
 
The W3C and the web design ecosystem
The W3C and the web design ecosystemThe W3C and the web design ecosystem
The W3C and the web design ecosystem
Chris Mills
 
Open standards and open source mean open for business cms expo session mc-k...
Open standards and open source mean open for business   cms expo session mc-k...Open standards and open source mean open for business   cms expo session mc-k...
Open standards and open source mean open for business cms expo session mc-k...
Cheryl McKinnon
 
Technology in Education, 4 10-12
Technology in Education, 4 10-12Technology in Education, 4 10-12
Technology in Education, 4 10-12
Bill Carozza, Principal, Harold Martin School
 
Newbies, you are not alone
Newbies, you are not aloneNewbies, you are not alone
Newbies, you are not alone
Brandon Dove
 
BlogForever eChallenges 2012
BlogForever eChallenges 2012BlogForever eChallenges 2012
BlogForever eChallenges 2012
BlogForever
 
WordPress and Web Accessibility - TCUK 2012
WordPress and Web Accessibility - TCUK 2012WordPress and Web Accessibility - TCUK 2012
WordPress and Web Accessibility - TCUK 2012
Graham Armfield
 
WordPress London - Favourite Plugins - March 2012
WordPress London - Favourite Plugins - March 2012WordPress London - Favourite Plugins - March 2012
WordPress London - Favourite Plugins - March 2012
Graham Armfield
 
Moodle new student presentation
Moodle new student presentationMoodle new student presentation
Moodle new student presentationClive McGoun
 
2013 website redesign_project_charter_final
2013 website redesign_project_charter_final2013 website redesign_project_charter_final
2013 website redesign_project_charter_final
libamend
 
Presentation_PFE2015_WS_V1.0a
Presentation_PFE2015_WS_V1.0aPresentation_PFE2015_WS_V1.0a
Presentation_PFE2015_WS_V1.0aWalid Sakhana
 
ICONUK 2015: Files, files everywhere! Do you know where your organisations do...
ICONUK 2015: Files, files everywhere! Do you know where your organisations do...ICONUK 2015: Files, files everywhere! Do you know where your organisations do...
ICONUK 2015: Files, files everywhere! Do you know where your organisations do...
Femke Goedhart
 
Pukunui Moodle Intro
Pukunui Moodle IntroPukunui Moodle Intro
Pukunui Moodle Intro
Shane Elliott
 
School library websites power point
School library websites power pointSchool library websites power point
School library websites power pointckdozier
 
RSC EM Mug 2012 11-13
RSC EM Mug 2012 11-13RSC EM Mug 2012 11-13
RSC EM Mug 2012 11-13
Jisc RSC East Midlands
 
Ukcorr hydra presentation
Ukcorr hydra presentationUkcorr hydra presentation
Ukcorr hydra presentation
Chris Awre
 
oEmbed in Drupal
oEmbed in DrupaloEmbed in Drupal
oEmbed in Drupal
Pure Sign
 
Sample You Tube tutorial for Drupal
Sample You Tube tutorial for DrupalSample You Tube tutorial for Drupal
Sample You Tube tutorial for Drupal
sivaprasad balamara
 
Hippo gettogether april 2012 faceted navigation a tale of daemons
Hippo gettogether april 2012 faceted navigation   a tale of daemonsHippo gettogether april 2012 faceted navigation   a tale of daemons
Hippo gettogether april 2012 faceted navigation a tale of daemons
Hippo
 

Similar to HCID 2012 - Graham Armfield (20)

Tools for Captioning YouTube Videos - a11yLDN2012
Tools for Captioning YouTube Videos - a11yLDN2012Tools for Captioning YouTube Videos - a11yLDN2012
Tools for Captioning YouTube Videos - a11yLDN2012
 
The W3C and the web design ecosystem
The W3C and the web design ecosystemThe W3C and the web design ecosystem
The W3C and the web design ecosystem
 
Open standards and open source mean open for business cms expo session mc-k...
Open standards and open source mean open for business   cms expo session mc-k...Open standards and open source mean open for business   cms expo session mc-k...
Open standards and open source mean open for business cms expo session mc-k...
 
Technology in Education, 4 10-12
Technology in Education, 4 10-12Technology in Education, 4 10-12
Technology in Education, 4 10-12
 
Newbies, you are not alone
Newbies, you are not aloneNewbies, you are not alone
Newbies, you are not alone
 
BlogForever eChallenges 2012
BlogForever eChallenges 2012BlogForever eChallenges 2012
BlogForever eChallenges 2012
 
WordPress and Web Accessibility - TCUK 2012
WordPress and Web Accessibility - TCUK 2012WordPress and Web Accessibility - TCUK 2012
WordPress and Web Accessibility - TCUK 2012
 
WordPress London - Favourite Plugins - March 2012
WordPress London - Favourite Plugins - March 2012WordPress London - Favourite Plugins - March 2012
WordPress London - Favourite Plugins - March 2012
 
Moodle new student presentation
Moodle new student presentationMoodle new student presentation
Moodle new student presentation
 
2013 website redesign_project_charter_final
2013 website redesign_project_charter_final2013 website redesign_project_charter_final
2013 website redesign_project_charter_final
 
Presentation_PFE2015_WS_V1.0a
Presentation_PFE2015_WS_V1.0aPresentation_PFE2015_WS_V1.0a
Presentation_PFE2015_WS_V1.0a
 
The Drupal Way
The Drupal WayThe Drupal Way
The Drupal Way
 
ICONUK 2015: Files, files everywhere! Do you know where your organisations do...
ICONUK 2015: Files, files everywhere! Do you know where your organisations do...ICONUK 2015: Files, files everywhere! Do you know where your organisations do...
ICONUK 2015: Files, files everywhere! Do you know where your organisations do...
 
Pukunui Moodle Intro
Pukunui Moodle IntroPukunui Moodle Intro
Pukunui Moodle Intro
 
School library websites power point
School library websites power pointSchool library websites power point
School library websites power point
 
RSC EM Mug 2012 11-13
RSC EM Mug 2012 11-13RSC EM Mug 2012 11-13
RSC EM Mug 2012 11-13
 
Ukcorr hydra presentation
Ukcorr hydra presentationUkcorr hydra presentation
Ukcorr hydra presentation
 
oEmbed in Drupal
oEmbed in DrupaloEmbed in Drupal
oEmbed in Drupal
 
Sample You Tube tutorial for Drupal
Sample You Tube tutorial for DrupalSample You Tube tutorial for Drupal
Sample You Tube tutorial for Drupal
 
Hippo gettogether april 2012 faceted navigation a tale of daemons
Hippo gettogether april 2012 faceted navigation   a tale of daemonsHippo gettogether april 2012 faceted navigation   a tale of daemons
Hippo gettogether april 2012 faceted navigation a tale of daemons
 

More from City University London

Behind the Scenes of City Interaction Lab
Behind the Scenes of City Interaction LabBehind the Scenes of City Interaction Lab
Behind the Scenes of City Interaction Lab
City University London
 
HCID 2014: Join the geeks: why designers should contribute to Free and Open S...
HCID 2014: Join the geeks: why designers should contribute to Free and Open S...HCID 2014: Join the geeks: why designers should contribute to Free and Open S...
HCID 2014: Join the geeks: why designers should contribute to Free and Open S...
City University London
 
HCID 2014: The Graphics Revolution and how Visual Effects became accessible t...
HCID 2014: The Graphics Revolution and how Visual Effects became accessible t...HCID 2014: The Graphics Revolution and how Visual Effects became accessible t...
HCID 2014: The Graphics Revolution and how Visual Effects became accessible t...
City University London
 
HCID 2014: Developing jewellery for the future. Dan Moller, Kovert Designs.
HCID 2014: Developing jewellery for the future. Dan Moller, Kovert Designs.HCID 2014: Developing jewellery for the future. Dan Moller, Kovert Designs.
HCID 2014: Developing jewellery for the future. Dan Moller, Kovert Designs.
City University London
 
HCID 2014: Designing Out The Screen. Steve Taylor, The Alloy.
HCID 2014: Designing Out The Screen. Steve Taylor, The Alloy.HCID 2014: Designing Out The Screen. Steve Taylor, The Alloy.
HCID 2014: Designing Out The Screen. Steve Taylor, The Alloy.
City University London
 
HCID 2014: Defending users, helping businesses: the transactional aspects of ...
HCID 2014: Defending users, helping businesses: the transactional aspects of ...HCID 2014: Defending users, helping businesses: the transactional aspects of ...
HCID 2014: Defending users, helping businesses: the transactional aspects of ...
City University London
 
HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Mirand...
HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Mirand...HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Mirand...
HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Mirand...
City University London
 
HCID2014: Using Sci-Fi to brainstorm ux. Oliver Shreeve, Spotless.
HCID2014: Using Sci-Fi to brainstorm ux. Oliver Shreeve, Spotless.HCID2014: Using Sci-Fi to brainstorm ux. Oliver Shreeve, Spotless.
HCID2014: Using Sci-Fi to brainstorm ux. Oliver Shreeve, Spotless.
City University London
 
HCID2014: Personifying your portfolio. Nick Grantham, Source.
HCID2014: Personifying your portfolio. Nick Grantham, Source.HCID2014: Personifying your portfolio. Nick Grantham, Source.
HCID2014: Personifying your portfolio. Nick Grantham, Source.
City University London
 
HCID2014: In interfaces we trust? End user interactions with smart systems. D...
HCID2014: In interfaces we trust? End user interactions with smart systems. D...HCID2014: In interfaces we trust? End user interactions with smart systems. D...
HCID2014: In interfaces we trust? End user interactions with smart systems. D...
City University London
 
HCID2014: Evaluating the effects of a virtual communication environment for p...
HCID2014: Evaluating the effects of a virtual communication environment for p...HCID2014: Evaluating the effects of a virtual communication environment for p...
HCID2014: Evaluating the effects of a virtual communication environment for p...
City University London
 
HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck
HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duckHCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck
HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck
City University London
 
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, AbilitynetHCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
City University London
 
HCID2014: How to involve children in design. Monica Ferraro, City University ...
HCID2014: How to involve children in design. Monica Ferraro, City University ...HCID2014: How to involve children in design. Monica Ferraro, City University ...
HCID2014: How to involve children in design. Monica Ferraro, City University ...
City University London
 
Ways of seeing: Innovative Research Techniques In Video Ethnography - Nick Le...
Ways of seeing: Innovative Research Techniques In Video Ethnography - Nick Le...Ways of seeing: Innovative Research Techniques In Video Ethnography - Nick Le...
Ways of seeing: Innovative Research Techniques In Video Ethnography - Nick Le...City University London
 
How to be Pixel Perfect (Replaces Making Accessibility Accessible) - Matt Gy...
How to be Pixel Perfect  (Replaces Making Accessibility Accessible) - Matt Gy...How to be Pixel Perfect  (Replaces Making Accessibility Accessible) - Matt Gy...
How to be Pixel Perfect (Replaces Making Accessibility Accessible) - Matt Gy...City University London
 
Type on Screens: What to Consider and Why - Toshi Omagari, Monotype
Type on Screens: What to Consider and Why - Toshi Omagari, Monotype Type on Screens: What to Consider and Why - Toshi Omagari, Monotype
Type on Screens: What to Consider and Why - Toshi Omagari, Monotype City University London
 
Storytelling applied to the digital context - Rebeca Miranda, System Concepts
Storytelling applied to the digital context - Rebeca Miranda, System ConceptsStorytelling applied to the digital context - Rebeca Miranda, System Concepts
Storytelling applied to the digital context - Rebeca Miranda, System ConceptsCity University London
 
So You Think You Know How to Brainstorm? - Alison Duffy & Sue Whittle, Persp...
So You Think You Know How to Brainstorm?  - Alison Duffy & Sue Whittle, Persp...So You Think You Know How to Brainstorm?  - Alison Duffy & Sue Whittle, Persp...
So You Think You Know How to Brainstorm? - Alison Duffy & Sue Whittle, Persp...City University London
 

More from City University London (20)

Behind the Scenes of City Interaction Lab
Behind the Scenes of City Interaction LabBehind the Scenes of City Interaction Lab
Behind the Scenes of City Interaction Lab
 
HCID 2014: Join the geeks: why designers should contribute to Free and Open S...
HCID 2014: Join the geeks: why designers should contribute to Free and Open S...HCID 2014: Join the geeks: why designers should contribute to Free and Open S...
HCID 2014: Join the geeks: why designers should contribute to Free and Open S...
 
HCID 2014: The Graphics Revolution and how Visual Effects became accessible t...
HCID 2014: The Graphics Revolution and how Visual Effects became accessible t...HCID 2014: The Graphics Revolution and how Visual Effects became accessible t...
HCID 2014: The Graphics Revolution and how Visual Effects became accessible t...
 
HCID 2014: Developing jewellery for the future. Dan Moller, Kovert Designs.
HCID 2014: Developing jewellery for the future. Dan Moller, Kovert Designs.HCID 2014: Developing jewellery for the future. Dan Moller, Kovert Designs.
HCID 2014: Developing jewellery for the future. Dan Moller, Kovert Designs.
 
HCID 2014: Designing Out The Screen. Steve Taylor, The Alloy.
HCID 2014: Designing Out The Screen. Steve Taylor, The Alloy.HCID 2014: Designing Out The Screen. Steve Taylor, The Alloy.
HCID 2014: Designing Out The Screen. Steve Taylor, The Alloy.
 
HCID 2014: Defending users, helping businesses: the transactional aspects of ...
HCID 2014: Defending users, helping businesses: the transactional aspects of ...HCID 2014: Defending users, helping businesses: the transactional aspects of ...
HCID 2014: Defending users, helping businesses: the transactional aspects of ...
 
HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Mirand...
HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Mirand...HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Mirand...
HCID 2014: Film & broadcasting techniques applied to UX design. Rebeca Mirand...
 
HCID2014: Using Sci-Fi to brainstorm ux. Oliver Shreeve, Spotless.
HCID2014: Using Sci-Fi to brainstorm ux. Oliver Shreeve, Spotless.HCID2014: Using Sci-Fi to brainstorm ux. Oliver Shreeve, Spotless.
HCID2014: Using Sci-Fi to brainstorm ux. Oliver Shreeve, Spotless.
 
HCID2014: Personifying your portfolio. Nick Grantham, Source.
HCID2014: Personifying your portfolio. Nick Grantham, Source.HCID2014: Personifying your portfolio. Nick Grantham, Source.
HCID2014: Personifying your portfolio. Nick Grantham, Source.
 
HCID2014: In interfaces we trust? End user interactions with smart systems. D...
HCID2014: In interfaces we trust? End user interactions with smart systems. D...HCID2014: In interfaces we trust? End user interactions with smart systems. D...
HCID2014: In interfaces we trust? End user interactions with smart systems. D...
 
HCID2014: Evaluating the effects of a virtual communication environment for p...
HCID2014: Evaluating the effects of a virtual communication environment for p...HCID2014: Evaluating the effects of a virtual communication environment for p...
HCID2014: Evaluating the effects of a virtual communication environment for p...
 
HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck
HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duckHCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck
HCID2014: Adapting to responsive web design. Matt Gibson, Cyber-duck
 
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, AbilitynetHCID2014: Accessibility primer. Joe Chidzik, Abilitynet
HCID2014: Accessibility primer. Joe Chidzik, Abilitynet
 
HCID2014: How to involve children in design. Monica Ferraro, City University ...
HCID2014: How to involve children in design. Monica Ferraro, City University ...HCID2014: How to involve children in design. Monica Ferraro, City University ...
HCID2014: How to involve children in design. Monica Ferraro, City University ...
 
Robot study recruitment
Robot study recruitmentRobot study recruitment
Robot study recruitment
 
Ways of seeing: Innovative Research Techniques In Video Ethnography - Nick Le...
Ways of seeing: Innovative Research Techniques In Video Ethnography - Nick Le...Ways of seeing: Innovative Research Techniques In Video Ethnography - Nick Le...
Ways of seeing: Innovative Research Techniques In Video Ethnography - Nick Le...
 
How to be Pixel Perfect (Replaces Making Accessibility Accessible) - Matt Gy...
How to be Pixel Perfect  (Replaces Making Accessibility Accessible) - Matt Gy...How to be Pixel Perfect  (Replaces Making Accessibility Accessible) - Matt Gy...
How to be Pixel Perfect (Replaces Making Accessibility Accessible) - Matt Gy...
 
Type on Screens: What to Consider and Why - Toshi Omagari, Monotype
Type on Screens: What to Consider and Why - Toshi Omagari, Monotype Type on Screens: What to Consider and Why - Toshi Omagari, Monotype
Type on Screens: What to Consider and Why - Toshi Omagari, Monotype
 
Storytelling applied to the digital context - Rebeca Miranda, System Concepts
Storytelling applied to the digital context - Rebeca Miranda, System ConceptsStorytelling applied to the digital context - Rebeca Miranda, System Concepts
Storytelling applied to the digital context - Rebeca Miranda, System Concepts
 
So You Think You Know How to Brainstorm? - Alison Duffy & Sue Whittle, Persp...
So You Think You Know How to Brainstorm?  - Alison Duffy & Sue Whittle, Persp...So You Think You Know How to Brainstorm?  - Alison Duffy & Sue Whittle, Persp...
So You Think You Know How to Brainstorm? - Alison Duffy & Sue Whittle, Persp...
 

Recently uploaded

Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024
Pierluigi Pugliese
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
Matthew Sinclair
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
Laura Byrne
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
Ana-Maria Mihalceanu
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
nkrafacyberclub
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 

Recently uploaded (20)

Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024By Design, not by Accident - Agile Venture Bolzano 2024
By Design, not by Accident - Agile Venture Bolzano 2024
 
20240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 202420240605 QFM017 Machine Intelligence Reading List May 2024
20240605 QFM017 Machine Intelligence Reading List May 2024
 
UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
The Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and SalesThe Art of the Pitch: WordPress Relationships and Sales
The Art of the Pitch: WordPress Relationships and Sales
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
Monitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR EventsMonitoring Java Application Security with JDK Tools and JFR Events
Monitoring Java Application Security with JDK Tools and JFR Events
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 

HCID 2012 - Graham Armfield

  • 1. #hcid2012 City University London, 12th April 2012 Harnessing Themes, Plugins and Features to Make WordPress Accessible Graham Armfield Coolfields Consulting www.coolfields.co.uk Coolfields Consulting @coolfields
  • 2. #hcid2012 City University London, 12th April 2012 Introduction Wordpress – Increasingly popular platform for websites – Originally a blogging tool but now a true Content Management System (CMS) – Useful for business websites of many types Q. But can you create accessible websites using WordPress? 2 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 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.uk Coolfields Consulting @coolfields
  • 4. #hcid2012 City University London, 12th April 2012 WordPress Themes 4 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 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.uk Coolfields Consulting @coolfields
  • 6. #hcid2012 City University London, 12th April 2012 WordPress Themes contd Q. So are there themes that include or enable accessible features? A. Of the useful themes, many have some good practices but very few get close to delivering ‘full accessibility’ 6 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 7. #hcid2012 City University London, 12th April 2012 WordPress Themes contd WordPress Default Themes – Twentyten – Twentyeleven Many sites are built with these themes – using the customisation options 7 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 8. #hcid2012 City University London, 12th April 2012 WordPress Themes contd Weaver 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.uk Coolfields Consulting @coolfields
  • 9. #hcid2012 City University London, 12th April 2012 WordPress Themes contd Others 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.uk Coolfields Consulting @coolfields
  • 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.uk Coolfields Consulting @coolfields
  • 11. #hcid2012 City University London, 12th April 2012 WordPress Plugins 11 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 12. #hcid2012 City University London, 12th April 2012 WordPress Plugins Q: So what are plugins? A: Nuggets of extra functionality that can be added to existing WordPress sites. Many are free, but there are also premium ones 12 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 13. #hcid2012 City University London, 12th April 2012 WordPress Plugins contd Q: So are there useful plugins that don’t compromise 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.uk Coolfields Consulting @coolfields
  • 14. #hcid2012 City University London, 12th April 2012 WordPress Plugins contd Q: And any plugins that do compromise accessibility? 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.uk Coolfields Consulting @coolfields
  • 15. #hcid2012 City University London, 12th April 2012 WordPress Plugins contd Q: Any accessibility-related plugins? A: Not many. – Remove title attributes – Wp-chgfontsize – Accessible tag cloud – Myreadmore – Plus my own… 15 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 16. #hcid2012 City University London, 12th April 2012 WordPress Plugins contd My 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.uk Coolfields Consulting @coolfields
  • 17. #hcid2012 City University London, 12th April 2012 WordPress Content 17 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 18. #hcid2012 City University London, 12th April 2012 Content Authors Images and alternate text 18 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 19. #hcid2012 City University London, 12th April 2012 Content Authors contd Links and link text Opening new windows 19 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 20. #hcid2012 City University London, 12th April 2012 Content Authors contd Using headings 20 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 21. #hcid2012 City University London, 12th April 2012 Content Authors contd Lists If it’s a list of items – use the list capability Video Avoid auto-start Add captions (easier said than done) 21 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 22. #hcid2012 City University London, 12th April 2012 WordPress Admin Screens 22 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 23. #hcid2012 City University London, 12th April 2012 WordPress Admin Q: How accessible is the WordPress Admin backend? A: Patchy – and can be a huge barrier in some areas 23 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 24. #hcid2012 City University London, 12th April 2012 WordPress Admin contd Q: What are WordPress developers doing to help?? A: Progress is sporadic and uncoordinated 24 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 25. #hcid2012 City University London, 12th April 2012 WordPress Admin contd Plugins can help mitigate 25 www.coolfields.co.uk Coolfields Consulting @coolfields
  • 26. #hcid2012 City University London, 12th April 2012 Any Questions 26 www.coolfields.co.uk Coolfields Consulting @coolfields

Editor's Notes

  1. 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.
  2. 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.
  3. 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
  4. 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
  5. 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)
  6. Weaver II is a free, highly featured theme. A premium version is available that offers even more configuration.
  7. Could take a while but have started on design.
  8. The second opportunity to affect the level of accessibility of a website
  9. 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.
  10. Demo - lightbox, carousel
  11. 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.
  12. Demo – dropdown menus, social bookmarks
  13. Content authors are the third strand in creating an accessible WordPress siteWordPress supports many features that authors can put in to ensure accessibility
  14. 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.
  15. 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.
  16. Demo – Accessible Admin Menus pluginBut then show tab order