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

▶
wordpress accessibility
SMART_READER_LITE
LIVE PREVIEW

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

Oct 15, 2023 334 likes •503 views

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.

slide-1
SLIDE 1

Wordpress Accessibility

Jim Byrne

Click here for the web version of this presentation.

slide-2
SLIDE 2

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
  • f how to use them.
slide-3
SLIDE 3

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.
slide-4
SLIDE 4

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.

slide-5
SLIDE 5

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.

slide-6
SLIDE 6

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

slide-7
SLIDE 7

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.
slide-8
SLIDE 8

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.

slide-9
SLIDE 9

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.
slide-10
SLIDE 10

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.

slide-11
SLIDE 11

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'.

slide-12
SLIDE 12

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);

slide-13
SLIDE 13

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]

slide-14
SLIDE 14

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.

slide-15
SLIDE 15

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.

slide-16
SLIDE 16

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.