Wordpress Accessibility Jim Byrne Click here for the web version of - PowerPoint PPT Presentation

Wordpress Accessibility Jim Byrne Click here for the web version of this presentation.

This presentation will give you: • More confidence in your ability to keep your website accessible. • A better understanding of what accessibility is. • Useful tools, techniques and resources - and examples of how to use them.

We will do this: • By looking at the practice of keeping a Wordpress website accessible. • By making changes to the default Wordpress settings. • By finding ways to make the editing environment simpler. • By suggesting useful plugins to install.

Help you serve information to disabled people • The 15% of the population (UK) with specific learning difficulties (e.g. 10% with Dyslexia). • The 4.5% with colour blindness. • The 7% of working age adults have a severe dexterity difficulty. • The 4%-5% of people in the US, UK and Canada suffer from hearing impairment.

Jim Byrne • 1996: MCU: Web Accessibility Consultancy. • 2005: Jim Byrne Accessible Website Design • webdesign@jimbyrne.co.uk • Tel: 07810 098119 • Web design and web application development (VLE’s, mobile and tablet apps, database development), website accessibility auditing, Website accessibility training.

An approach to Website accessibility • Perfect accessibility is impossible. • It’s about remove as many barriers to accessing your content as you can. • Your attitude is the most important thing. • Visual design is important. Flexibility is the key word

How to make content more accessible • Create well organised pages. • Add appropriate labels to images and other non-text elements. • Add skip links, if helpful. • Ensure links make sense when read out of context. • Ensure good colour contrast.

How to make content more accessible • Make links within content areas underlined. • Provide ‘hover focus’ and make visited links different from unvisited links. • Ensure your forms are accessible. • Avoid: auto play on videos and audio, opening new windows without warning.

Working with Wordpress • Accessible Templates/Themes. • An editing environment that helps rather than hinders. • Plugins that generate accessible HTML/content. • Training for your content editors.

Setting up Wordpress • Turn on ‘perma’ links (i.e. more human friendly urls). • Wordpress Admin Settings/Writing - check 'WordPress should correct invalidly nested XHTML automatically’. • Install MCE Advanced toolbar: customise the WYSWYG toolbar. • Install the ‘WP Accessibility’ plugin by Joe Dolson. • Install Contact Form 7: and change the config file settings.

Configure MCE Advanced • Turn off ‘Editor menu' to simplify the toolbar. • Remove buttons: Justify, Outdent, Indent, Text colour, Toggle toolbar, More, Strikethrough. • Add the formats menu. • Click ‘Stop removing the <p> and <br /> tags when saving and show them in the Text editor'.

Contact Form 7 • The default setup does not add labels or explicitly link those labels to form fields. • Make changes to stop it adding it’s own markup, it’s own style sheet and its’ own Javascript. • Make changes to Wordpress config file, wp-config.php (it will be in the root folder of your Wordpress install). Add the following after your the settings: /* wp-contact-from-7 */define ('WPCF7_AUTOP', false);define ('WPCF7_LOAD_CSS', false);define ('WPCF7_LOAD_JS', false);

More accessible contact forms • Remove the default markup then add your own code. • Add labels with for attributes and add id’s to input fields: <label for="yourname">Your Name (required)</label>[text* your-name id:yourname]

Install ‘ WP Accessibility ’ Plugin by Joe Dolson • This plugin will help strip a lot of clutter from pages for people using screen readers (e.g. title attributes). • Removes target attributes, tab index, title attributes from images inserted into posts. • Solves the problem of having lot of ‘more’ links by adding the the post title to the link. • Adds an accessibility toolbar - allowing colour contrast and font-size adjustments.

Plugins to check out • GSpeech: a text to speech solution • WP YouTube Lyte: Offer optimal accessibility: • Zoom enables site users to resize the predefined areas • EsAudioPlayer: accessible audio player • My Read More replaces the default "read more" with custom text.

Jim Byrne • 1996: MCU: Web Accessibility Consultancy. • 2005: Jim Byrne Accessible Website Design • webdesign@jimbyrne.co.uk • Tel: 07810 098119 • Web design and web application development (VLE’s, mobile and tablet apps, database development), website accessibility auditing, Website accessibility training.