creatively strategic…strategically creative

What Exactly is W3C WCAG 2-AA Compliance?

W3C WCAG 2-AA Compliance

Overview to W3C WCAG 2-AA Compliance

The W3C, also known as the World Wide Web Consortium, has created Web Content Accessibility Guidelines 2.0 and amongst the entire scope, the most popular goal should be W3C WCAG 2-AA Compliance.  These standards are go-to for organizations including the Department of Justice in evaluating legal cases relevant to the topic.  There are three degrees in the guidelines (A, AA and AAA), and it is generally considered that WCAG 2-AA is the most common guideline most websites should strive to for minimal compliance.

Creative by Clark is pleased that we not only comply with WCAG 2-AA but also WCAG 2-AAA guidelines.  Doing so was a lot of hard work, and it will be an ongoing endeavor!

To date, unless a developer is hired to build an ADA compliant website, it is rare that the majority of existing websites can pass the litmus test.  Many website designers and developers are unfamiliar with WCAG unless they have been directly involved in an ADA audit or taken it upon themselves to become an expert with the guidelines and differences in coding and construction standards.

The 4 Principles of Accessibility:

The foundation for Web Accessibility starts with the following 4 Principles, and from these emanate methodologies to achieve compliance success:

  1. Perceivable – Information and user interface components must be presentable to users in ways they can perceive.
    • This means that users must be able to perceive the information being presented (it can’t be invisible to all of their senses)
  2. Operable – User interface components and navigation must be operable.
    • This means that users must be able to operate the interface (the interface cannot require interaction that a user cannot perform)
  3. Understandable – Information and the operation of user interface must be understandable.
    • This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding)
  4. Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
    • This means that users must be able to access the content as technologies advance (as technologies and user agents evolve, the content should remain accessible)

The following information is extracted directly from the W3C WCAG 2.0 website

“The Guidelines:

There are 12 guidelines that provide the details about what is needed to accomplish success for the 4 Principles.

The 12 guidelines provide the basic goals that authors should work toward in order to make content more accessible to users with different disabilities. The guidelines are not testable, but provide the framework and overall objectives to help authors understand the success criteria and better implement the techniques.

Success Criteria

For each guideline, testable success criteria are provided to allow WCAG 2.0 to be used where requirements and conformance testing are necessary such as in design specification, purchasing, regulation, and contractual agreements.

Three levels of conformance are defined as referenced above: A (lowest), AA, and AAA (highest).

Sufficient and Advisory Techniques

For each of the guidelines and success criteria in the WCAG 2.0 document itself, the working group has also documented a wide variety of techniques. The techniques are informative and fall into two categories:

  1. those that are sufficient for meeting the success criteria and
  2. those that are advisory.

The advisory techniques go beyond what is required by the individual success criteria and allow authors to better address the guidelines. “

WCAG 2 diagram via Avoka.com
WCAG 2.0 as presented by source Avoka.com

* Creative by Clark has long taken the approach of multiple avenues of access long before mandated.  Going back to educational design, one always has to consider there are different learning styles for the target audience.  In meeting Accessibility compliance, one cannot make assumptions that just because the business owner and majority of the public can make sense out of a site structure that everyone can.  Realize that when using assistive devices or faced with some disabilities, what works for you might not be appropriate.  Compliant search functions, intuitive menus and on deep sites, provide repeated opportunities to reach the same page – possibly with different labels, skip links for devices, hamburger/mobile device menus, a sitemap page for an overview of navigation, and use of a deep category and tag taxonomy with options to see lists of posts.  This is just a start.

Typical Obstacles to W3C WCAG 2-AA Compliance

In the majority of websites that I have scanned for W3C WCAG 2-AA compliance, the typical obstacles that surface are:

Header Nesting Issues

In a scan, the error might display as:

Header Nesting – header following h1 is incorrect

The common misnomer is that headers are not intended to be “decorative” and therefore cannot be randomly used.  Headers are employed to make the content more navigable and structured to display the logical hierarchy of the content.

Most designers and content managers do not understand that just because a CMS like WordPress and built-in visual editors provide tremendous creative freedom in content presentation, those handy tools like Heading Tags should be used and selected with a decorative purpose.

wordpress visual editor text tag selector
We have H1 through H6 tags aka Heading 1 through Heading 6, and in the WordPress visual editor, and it is very easy to select a line of text and toggle to a different heading name and size. Similarly, in many supplemental page-builder plugins such as WP Bakery Visual Composer, Beaver Builder, Divi Builder, Conductor, etc. selecting a different heading is also easy by selecting elements or again, using the visual editor integration.

The problem is that with such incredible freedom, most individuals use heading tags quite randomly and mix them up merely to achieve visual impact and design emphasis.  However, it is actually more appropriate to use a special CSS class for some items rather than use a heading tag in the wrong order.

Wrong order?  Yes.  Technically, H1 through H6 should be used in a specific order on the page and retain that hierarchy.  The page or post title should be the default H1 (Heading 1).  Then additional headings normally start at H2.  Think of a page using an old-fashioned outline structure using roman numerals, and replace the major headings and subheadings as it relates to content importance and organization.

Organic SEO is also impacted by using heading tags properly

Images Missing Alternative Text

When an assistive device such as a screen reader is used, when an image is encountered, there should be Alternative Text (also known as an Alt Tag) to provide a very brief amount of text to identify the image.  There are also image descriptions and captions that again provide more information about each image for those who have vision issues.

Every image used in a website needs to have Alternative Text except those that are clearly marked as decorative:  those images that are used in constructing the visual design, such as background and typical theme images.  Decorative images are not considered to be part of the actual website content.

Use of ‘i’ versus ’em’ for italics or ‘i’ tag is an ‘icon’ tag

Italics should be coded with the <em>italic text here</em> tag, but some plugins may still use <i></i>.  The same issue exists with <strong>bold text here</strong> vs <b></b>.  The difference in the coding is between HTML and XHTML as is used by most devices that utilize XML.

Unfortunately, many themes and plugins use icon libraries such as “font awesome” and these plugins use an ‘i’ tag for these icons.  Many terrific menu systems that offer the choice to add an icon display the code with an ‘i’ tag.  Until plugin and theme developers are paying attention to accessibility in their coding standards, there often isn’t a work around.

On the Creative by Clark website I specifically opted out of my initially preferred mega menu and completely disabled font awesome to ensure I could comply.  Once developers get more on board after being pressured by those who realize the importance of taking their websites to WCAG 2-AA compliance, perhaps it will be possible to revisit those options.

Beyond WCAG 2.0 AA

So what’s the next step?  Compliance with the AAA Guidelines and for any business or organization doing business with the Federal Government (including educational institutions), WCAG 2.0 AA might not be enough!

Creative by Clark is pleased that our website meets WCAG 2.0 AAA compliance:


Level Triple-A conformance, W3C WAI Web Content Accessibility Guidelines 2.0

However, meeting the further Section 508 or Stanca Act Guidelines is far more difficult.

For our site to pass Section 508, we would need to address about 23 JavaScript applications and provide a “noscript” option immediately after that provides the same functionality without JavaScript (Guideline L = Script must have functional text).  Further, we have another 43 probably issues with our Cascading Style Sheets (CSS), and providing an option that would enable functionality without the use of said scripts.  And there are even other issues that are not serious, but do involve considerable re-development.

Section 508 and WordPress.  There is an expensive premium WordPress plugin available that will help scan and address all the various components that must be addressed to achieve Section 508 compliance.  I know it exists, is very expensive (but likely much cheaper than other options), and it is only compatible with WordPress.

In screening the Creative by Clark website against the Stanca Act Guidelines (Italian Accessibility Guidelines), again, we would have a lot of work to do despite our WCAG 2.0 AAA compliance.  It would be interesting to see whether a website meeting Section 508 guidelines would more easily comply with the Stanca Act.  Business websites that rely on a European market, especially in Italy, should research Stanca Act.

Sources:

https://www.w3.org/TR/WCAG20/

Please copy & paste the following source article links in your browser as these websites do not yet employ https.  Outbound linking from our site would trigger mixed content security errors, but the information on these sites are authoritative and included directly in this article and deserve proper accreditation.

ACCESSIBILITY.WORKS: http://www.accessibility.works/resources/  – Much of the information as presented above is on their site, and all the information about the Guidelines is directly sourced from the W3C link above. However, their blog includes other wonderful articles and an excellent Resource page (link above) that includes a list of links to many lawsuits/legal cases.

ACRL Tech Connect Blog: http://acrl.ala.org/techconnect/post/category/accessibility  — this is a tremendous technical resource for those eager to tackle a do-it-yourself project.  That is strongly encouraged for businesses and organizations who have technically competent staff.  There are several articles that include overviews and some with direct how-to approaches.

Facebook Share Icon
Twitter Share Icon
Google Plus Share Icon
LinkedIn Share Icon
Mail Share Icon

Blog Categories

Tags

Font Resize