Overview of 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 the 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 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:
- Perceivable – Information and user interface components must be presentable to users in ways they perceive.
- This means that users must be able to perceive the information being presented (it can’t be invisible to all of their senses)
- 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)
- Understandable – Information and the operation of the 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)
- Robust – Content must be robust enough to be interpreted reliably by various 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
The working group has also documented various techniques for each of the guidelines and success criteria in the WCAG 2.0 document itself. The techniques are informative and fall into two categories:
- those that are sufficient for meeting the success criteria and
- 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. ”
* Creative by Clark has 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 everyone can make sense of a site structure just because the business owner and the majority of the public can. Realize that what works for you when using assistive devices or facing some disabilities might not be appropriate. Compliant search functions, intuitive menus, and 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.
We have H1 through H6 tags, aka Heading 1 through Heading 6, and in the WordPress visual editor, selecting a line of text and toggling to a different heading name and size is very easy. 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, using a special CSS class for some items is more appropriate than 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 clearly marked as decorative: those 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.” 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 pay attention to accessibility in their coding standards, there often isn’t a workaround.
On the Creative by Clark website, I 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:
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 using said scripts. And there are even other issues that are not serious but do involve considerable re-development.
Section 508 and WordPress. An expensive premium WordPress plugin will help scan and address all the 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 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 more easily complies with the Stanca Act. Business websites that rely on a European market, especially in Italy, should research Stanca Act.
Sources:
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 is authoritative and included directly in this article and deserve proper accreditation.
ACCESSIBILITY.WORKS: http://www.accessibility.works/resources/ – Much of the information 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 that have technically competent staff. Several articles include overviews, and some have direct how-to approaches.