Skip to main content

Jim Byrne Accessible Website Design Glasgow for The Third Sector, Voluntary, Charities and Not for Profits

Accessible, Responsive Website Design
Jim Byrne Web Designer

WCAG 2.1 Guidelines Explained

A history lesson: where did the website accessibility guidelines come from and what’s in them?

  • 1995: The first web accessibility guidelines were compiled by Gregg Vanderheiden shortly after the 1995 Chicago WWW II Conference.
  • 1998: University of Wisconsin–Madison compiled the Unified Web Site Accessibility Guidelines.
  • 1999: they formed the basis for WCAG 1.0.

WCAG 1.0. were focused on HTML and web pages.

  • 14 guidelines.
  • 65 checkpoints.
  • Each with a priority level: A, AA. AAA.

A Compliance: the guidelines must be satisfied otherwise it will be impossible for one or more groups to access the Web content.

AA Compliance: should be satisfied, otherwise some groups will find it difficult to access the Web content.

AAA Compliance: may be satisfied: to make it easier for some groups to access the Web content.

14 WCAG 1 Guidelines

  • Guideline 1: Provide equivalent alternatives to auditory and visual content.
  • Guideline 2: Don’t rely on colour alone.
  • Guideline 3: Use markup and style sheets, and do so properly.
  • Guideline 4: Clarify natural language usage.
  • Guideline 5: Create tables that transform gracefully.
  • Guideline 6: Ensure that pages featuring new technologies transform gracefully.
  • Guideline 7: Ensure user control of time-sensitive content changes.
  • Guideline 8: Ensure direct accessibility of embedded user interfaces.
  • Guideline 9: Design for device independence.
  • Guideline 10: Use interim solutions.
  • Guideline 11: Use W3C technologies and guidelines.
  • Guideline 12: Provide context and orientation information.
  • Guideline 13: Provide clear navigation mechanisms.
  • Guideline 14: Ensure that documents are clear and simple.

WCAG 2 – Published 2008

Not just websites, but also PDF, Google Docs, Spreadsheets, e-Books… and other ‘digital assets’.

WCAG 2.1 – Published 2018

  • WCAG 2.1 does not deprecate or supersede WCAG 2.0.
  • The differences between WCAG 2.0 and 2.1 are mostly related to the use of tablets and mobile devices.
  • They are designed to make content more accessible to a wider range of people, including accommodations for blindness and low vision.

WCAG 2.1 Based on 4 Principles

  • Perceivable.
  • Operable.
  • Understandable.
  • Robust

What principles?

  • Perceivable?
  • Operable?
  • Understandable?
  • Robust?

What do the principles mean?

Perceivable

WCAG speak: information and user interface components must be presentable to users in ways they can perceive.

Jim speak: the site visitor must be able to recognise that the content exists. For example, by being able to see it, hear it or touch it.

Operable

  • WCAG speak: user interface components and navigation must be operable.
  • Jim speak: the site visitor must be able to navigate around the site and use the features and functions presented.

Understandable

  • WCAG speak: information and the operation of user interfaces must be understandable.
  • Jim speak: not only should visitors be able to recognise the existence of the content and be able to interact with it, but they must also be able to understand it.

Robust

  • WCAG speak: content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
  • Jim speak: it must be possible to access the content using everything from a text-only web browser to the latest Firefox browser. And everything in between, including screen readers and all the different brands and versions of browsers now available.

Each Principle Has A Set Of Guidelines

1. Perceivable: the guidelines relate to:

  • Text alternatives for non-text content.
  • Captions and other alternatives for multimedia.
  • Content can be presented in different ways, including by assistive technologies, without losing meaning.

Operable: the guideline Relate To:

  • Ensuring functionality is available for keyboard users.
  • Giving users enough time to read and use content.
  • Avoiding content that causes seizures or physical reactions.
  • Help users navigate and find content.
  • Making it easier to use inputs other than by keyboard.

Understandable: the guideline Relate To:

  • Make text readable and understandable.
  • Make content appear and operate in predictable ways.
  • Help users avoid and correct mistakes.

Robust: the guideline Relate To:

  • Maximising compatibility with current and future user tools.
  • For example, by using valid code.

For Each Principle

There are guidelines – these are the basic goals that authors should work toward in order to make content more accessible.

And For Each Guideline

Ther are ‘testable success criteria’.

  • Three levels of conformance are defined as: A (lowest), AA, and AAA (highest).
  • Techniques and examples are provided for meeting those criteria.

Mobile Platforms

  • All ‘success criteria’ apply to mobile platforms as well as desktop platforms.
  • However, the techniques sections does not yet fully cover mobile techniques.

Jim Byrne


Plugins to check out (Slide Ten: WordPress Accessibility)


Install ‘WP Accessibility’ Plugin by Joe Dolso (Slide Nine: WordPress Accessibility)

  • This plugin will help strip a lot of clutter from pages for people using screen readers – such as the title attributes.
  • Also removes target attributes, tab index, title attributes from images inserted into posts and featured images.
  • Solves the problem of having lot of ‘more’ links – by adding the the post title to the link. This was something I did myself in my own continent management system; content management systems are awash with ‘more’ links.
  • Adds an accessibility toolbar – allowing colour contrast and font-size adjustments.


More accessible contact forms (Slide Eight: WordPress Accessibility)

  • Remove the default markup then add your own code
  • Add labels with for attributes and add id’s to input fields:

<h;label for=”yourname”&grt; Your Name (required)<h;/label&grt; [text* your-name id:yourname]


Configure MCE Advanced (Slide Seven: WordPress Accessibility)

  • Turn off ‘Editor menu’ to simplify the toolbar
  • Remove buttons: Justify, Outdent, Indent, Text colour, Toggle toolbar, More, Strikethrough.
  • Add the formats menu. To give access to ‘Blockquote’ and other structured markup elements.
  • Click ‘Stop removing the

    and
    tags when saving and show them in the Text editor’


Setting up WordPress (Slide Six: WordPress Accessibility)

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


Working with WordPress (Slide Five: WordPress Accessibility)

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


Is a WordPress site different (Slide Four: WordPress Accessibility)

  • Well organised pages, logically marked up
  • Images and other non-text elements with appropriate labels Skip links, if helpful
  • Links should make sense when read out of context
  • Good colour contrast
  • Underlined links within content areas
  • Hover focus, visited link highlighting


An approach to Website accessibility (Slide Three: WordPress Accessibility)

  • Perfect accessibility is impossible
  • Don’t create barriers for those who visit your site
  • Your attitude is the most important thing – not technical guidelines
  • Visual design is important

Contact us today. We are hugely experienced award winning web designers and developers. Please read what our clients are saying about how we helped them meet their aims.

Or phone to talk over your ideas: 07810 098 119.


What will we do today? (Slide Two: WordPress Accessibility)

  • Consider an approach to accessibility
  • The practice of keeping a WordPress website accessible
  • Discover useful resources

Contact us today. We are hugely experienced award winning web designers and developers. Please read what our clients are saying about how we helped them meet their aims.

Or phone to talk over your ideas: 07810 098 119.


Other posts in this category

View a list of all blog posts.

Let's Chat

07810 098 119

Alternative access to client feedback ››

“The audit was extremely comprehensive, clear and demonstrated Jim’s expertise in the area of accessible web design.” Peter Madden, Project Manager, Sealed Envelope Ltd