Why WCAG 2.0 doesn’t comply with its own line length criterion of 1.4.8?

WCAG 2.0 Success Criterion 1.4.8 clearly specifies that to achieve AAA conformance level, Reading content in a single line should not exceed 80 characters for non-CJK (Chinese Japanese & Korean) characters.

But the paragraphs which wrote the same stuff has more than 111 characters in a single line including space. (Space is also a character: ASCII code 32) Even if we omit the space, The character count is way over 80. So what is the deal here? Am I missing something?

Is there any mention of the line length requirements for AA or A?

enter image description here

WCAG 2.0 compliance: do I have to support browsers which don’t support JavaScript?

WCAG 2.0 has some requirements on robustness: “Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies”, but it doesn’t mention JavaScript explicitly.

Now I have a project where I have to meet WCAG 2.0 recommendations. Do I have to support browsers / user agents which don’t support JavaScript?

WCAG 2.1 contrast issue for Google/Angular Material Design

I’m relatively new to accessibility compliance, but my research has found a confusing anomaly: The Angular Material buttons, links, etc are apparently WCAG compliant, yet do not seem to have the required focus state contrast to pass. So I’m a little perplexed.

I’m talking specifically about the change in color when (for example) a button receives focus. From what I can tell from the WCAG it should have at least a 3:1 contrast ratio, but Material design elements are nowhere close to that.

For reference, here are some links to the Angular Material design: https://material.angular.io/components/button/examples https://material.io/design/interaction/states.html#anatomy

Thanks in advance for the help.

WCAG 2.0 Redundant Links

I’ve tried searching but can’t seem to find a straight answer regarding redundant links and WCAG compliance.

I have a product collection/category page with a list of products. Each product has a product image, name, price, and Learn More button. The product image and Learn More button both go to the same destination.

<div class="product-wrap">     <div class="product-image">         <a href="product-page.html"><img src="product-image.jpg"></a>     </div>     <div class="product-name">         Sample Product Name     </div>     <div class="product-price">         $  29.99     </div>     <div class="product-learn-more"         <a href="product-page.html">Learn More</a>     </div> </div> 

Based off what I’ve read having adjacent links go to the same location is not compliant.

I can’t link the whole product since I don’t want everything clickable so I’m not sure what my options are.

Does anything have any idea how to make this compliant?

Thanks!