Skip to content

Commit

Permalink
Merge branch 'ACT_Method_proposal' into 2021-11_review
Browse files Browse the repository at this point in the history
  • Loading branch information
Michael Cooper committed Oct 7, 2021
2 parents 506f0cc + e5780e3 commit cca46dc
Show file tree
Hide file tree
Showing 16 changed files with 691 additions and 322 deletions.
41 changes: 41 additions & 0 deletions methods/decorative-images/background.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Method - Background</title>
</head>
<body>
<header>
<h1>Background</h1>
</header>
<main>
<section id="w3c">
<h2>W3C Resources</h2>
<ul>
<li><a href="https://www.w3.org/WAI/tutorials/images/decorative/">Web Accessibility Tutorials: Images: Decorative Images</a></li>
<li><a href="https://www.w3.org/TR/css-content-3/#alt">CSS Generated Content Module Level 3 Working Draft</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF4.html">PDF4 Hiding decorative images with the Artifact tag in PDF documents</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Techniques/html/H67.html">H67: Using null alt text and no title attribute on img elements for images that AT should ignore</a></li>
<li><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html">Understanding Success Criterion 1.1.1: Non-text Content</a></li>
</ul>
</section>
<section id="external">
<h2>Non-W3C Resources</h2>
<ul>
<li><a href="http://kb.daisy.org/publishing/docs/html/images.html">Accessible Publishing Knowledge Base: HTML: Images</a></li>
</ul>
</section>
<section id="accessibility-support">
<h2>Accessibility Support</h2>
<p>No accessibility support issues known.</p>
</section>
<section id="assumptions">
<h2>Assumptions</h2>
<ul>
<li>svg elements with a <a href="https://www.w3.org/WAI/standards-guidelines/act/rules/image-not-in-acc-tree-is-decorative-e88epe/#semantic-role">semantic role</a> of graphics-document and with an empty ("") <a href="https://www.w3.org/WAI/standards-guidelines/act/rules/image-not-in-acc-tree-is-decorative-e88epe/#accessible-name">accessible name</a> are ignored by assistive technologies tested for this rule. If some assistive technology does not ignore these elements, and that assistive technology is required for conformance, passing this rule does not ensure all decorative svg elements can be ignored, and the <a href="https://www.w3.org/TR/WCAG21/#non-text-content">Success Criterion 1.1.1 Non-Text Content</a> may still not be satisfied. The same is true for canvas elements with no semantic role and an empty ("").</li>
<li>A web page with informative images without an accessible name may conform to <abbr title="Web Content Accessibility Guidelines">WCAG</abbr> 2.1 Level A when the information provided by that image is available elsewhere on the web page itself. For example if an equivalent text is adjacent to the image, or if the text alternative is included in the accessible name of a parent element.
</li>
</ul>
</section>
</main>
</body>
</html>
33 changes: 0 additions & 33 deletions methods/decorative-images/description.html
View file

This file was deleted.

296 changes: 242 additions & 54 deletions methods/decorative-images/examples.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,60 +8,248 @@
<h1>Examples</h1>
</header>
<main>
<ul>
<li><a href="#example1">HTML decorative bitmaps</a></li>
<li><a href="#example2">HTML decorative SVG</a></li>
<li><a href="#example3">CSS</a></li>
<li><a href="#example4">ePub</a></li>
<li><a href="#example5">PDF</a></li>
</ul>
<section class="example" id="example1">
<h3>HTML decorative bitmaps</h3>
<p>In HTML, decorative bitmap images need to have an alt attribute with no value (e.g. alt=”” or alt). For example:</p>
<pre>
&lt;img alt=”” src=”clipart-of-business-people-looking-at-a-computer-screen.jpg”>
&lt;img alt src=”clipart-of-someone-smiling-and-eating-a-salad.jpg”>
</pre>
</section>
<section class="example" id="example2">
<h3>HTML decorative SVG</h3>
<p>In HTML, decorative SVGs need to use the aria-hidden attribute with a value of “true”. For example:</p>
<pre>
&lt;button type=”button”>
&lt;svg aria-hidden=”true” viewBox=”0 0 30 30”>
&lt;use href=”#help-icon” />
&lt;/svg>
&lt;span>Help&lt;/span>
&lt;/button>
</pre>
</section>
<section class="example" id="example3">
<h3>CSS</h3>
<p>The <a href="https://www.w3.org/TR/css-content-3/#alt">CSS Generated Content Module Level 3 Working Draft</a> includes support for alternative text for generated content. Alternative text with an empty value is specified as "". In the following example, if the pseudo-element is purely decorative and its function is covered elsewhere, setting alt to the empty string can avoid reading out the decorative element. Here the ARIA attribute will be spoken as <q>collapsed</q>. Without the empty string alt value, the content would also be spoken as <q>Black right-pointing pointer</q>. </p>
<pre>
.expandable::before {
content: "\25BA" / "";
/* a.k.a. ► */
}
</pre>
</section>
<section class="example" id="example4">
<h3>ePub</h3>
<p>If a <a href="http://kb.daisy.org/publishing/docs/html/images.html">decorative image is placed in an ePub document using HTML</a>, it needs to have an alt attribute with no value and a role attribute with a value of presentation:</p>
<pre>
&lt;img alt="" role="presentation" src="images/decorative-edge.png" />
</pre>
<p>Adding the role attribute with a value of presentation will hide a decorative SVG in an ePub document: </p>
<pre>
&lt;svg lang="en" role="presentation" xml:lang="en" xmlns="http://www.w3.org/2000/svg">
…
&lt;/svg>
</pre>
</section>
<section class="example" id="example5">
<h3>PDF</h3>
<p>Tagging PDFs for accessibility is covered in WCAG 2’s <a href="https://www.w3.org/WAI/WCAG21/Techniques/pdf/PDF4.html">PDF4 Hiding decorative images with the Artifact tag in PDF documents</a>.</p>
</section>


<section id="passed">
<h2>Passed</h2>

<h3>Passed example 1</h3>
<p>This <code class="language-html">img</code> element with an empty <code class="language-html">alt</code> attribute which is not <a href="glossary.html#included-in-the-accessibility-tree">included in the accessibility tree</a> is <a href="https://www.w3.org/TR/WCAG21/#dfn-pure-decoration">purely decorative</a>.</p>

<pre class="language-html">
<code class="language-html">
&lt;p&gt;</span>Happy new year!&lt;/p&gt;
&lt;img src="/test-assets/shared/fireworks.jpg" alt="" /&gt;
</code>
</pre>

<h3>Passed example 2</h3>
<pre class="language-html"><code class="language-html">
&lt;p&gt;Happy new year!&lt;/p&gt;
&lt;img src="/test-assets/shared/fireworks.jpg" aria-hidden="true" role="img" alt="" /&gt;
</code>
</pre>

<h3>Passed example 3</h3>
<p>This <code class="language-html">img</code> element that is ignored by assistive technologies because it has an <a href="glossary.html#explicit-semantic-role">explicit semantic role</a> of <code class="language-text">none</code> is <a href="https://www.w3.org/TR/WCAG21/#dfn-pure-decoration">purely decorative</a>.</p>
<pre class="language-html">
<code class="language-html">
&lt;p&gt;Happy new year!&lt;/p&gt;
&lt;img src="/test-assets/shared/fireworks.jpg" role="none" alt="ignore me" /&gt;
</code>
</pre>

<h3>Passed example 4</h3>
<p>This <code class="language-text">svg</code> element that is ignored by assistive technologies because it has no attribute that would give it an <a href="glossary.html#accessible-name">accessible name</a> is <a href="https://www.w3.org/TR/WCAG21/#dfn-pure-decoration">purely decorative</a>.</p>
<pre class="language-html">
<code class="language-html">&lt;p&gt;Happy new year!&lt;/p&gt;
&lt;svg height="200" xmlns="http://www.w3.org/2000/svg"&gt;
&lt;polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow" /&gt;
&lt;/svg&gt;
</code>
</pre>

<h3>Passed example 5</h3>
<p>This <code class="language-html">canvas</code> element that is ignored by assistive technologies because it has no attribute that would give it an <a href="glossary.html#accessible-name">accessible name</a> is <a href="https://www.w3.org/TR/WCAG21/#dfn-pure-decoration">purely decorative</a>.</p>
<pre class="language-html">
<code class="language-html">
&lt;p&gt;Happy new year!&lt;/p&gt;
&lt;canvas id="newyear" width="200" height="200"&gt;&lt;/canvas&gt;
&lt;script&gt;
const ctx = document.querySelector('#newyear').getContext('2d')
ctx.fillStyle = 'yellow'
ctx.beginPath()
ctx.moveTo(100, 10)
ctx.lineTo(40, 180)
ctx.lineTo(190, 60)
ctx.lineTo(10, 60)
ctx.lineTo(160, 180)
ctx.fill()
&lt;/script&gt;
</code>
</pre>
</section>

<section id="failed">
<h2>Failed</h2>

<h3>Failed example 1</h3>

<p>This <code class="language-html">img</code> element with an empty (<code class="language-html">""</code>) <code class="language-html">alt</code> is not <a href="https://www.w3.org/TR/WCAG21/#dfn-pure-decoration">purely decorative</a>.</p>

<pre class="language-html">
<code class="language-html">
&lt;img src="/test-assets/shared/w3c-logo.png" alt="" /&gt;
</code>
</pre>

<h3>Failed example 2</h3>

<p>This <code class="language-html">img</code> element which is not <a href="glossary.html#included-in-the-accessibility-tree">included in the accessibility tree</a> because it has an <a href="glossary.html#explicit-semantic-role">explicit semantic role</a> of <code class="language-text">none</code> is not <a href="https://www.w3.org/TR/WCAG21/#dfn-pure-decoration">purely decorative</a>.</p>

<pre class="language-html">
<code class="language-html">
&lt;img src="/test-assets/shared/w3c-logo.png" aria-hidden="true" alt="W3C logo" /&gt;
</code>
</pre>

<h3>Failed example 3</h3>
<p>This <code class="language-html">img</code> element which is not <a href="glossary.html#included-in-the-accessibility-tree">included in the accessibility tree</a> because it has an <a href="glossary.html#explicit-semantic-role">explicit semantic role</a> of <code class="language-text">none</code> is not <a href="https://www.w3.org/TR/WCAG21/#dfn-pure-decoration">purely decorative</a>.</p>

<pre class="language-html">
<code class="language-html">
&lt;img src="/test-assets/shared/w3c-logo.png" role="none" alt="W3C logo" /&gt;
</code>
</pre>

<h3>Failed example 4</h3>
<p>This <code class="language-text">svg</code> element which has a <a href="glossary.html#semantic-role">semantic role</a> of <code class="language-text">graphics-document</code> and an empty (<code class="language-text">""</code>) <a href="glossary.html#accessible-name">accessible name</a> is not <a href="https://www.w3.org/TR/WCAG21/#dfn-pure-decoration">purely decorative</a>.</p>

<pre class="language-html">
<code class="language-html">&lt;p&gt;Best W3C logo:&lt;/p&gt;
&lt;svg viewBox="0 0 512 512"&gt;
&lt;path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6"/&gt;
&lt;path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512" /&gt;
&lt;path fill="#f16529" d="M256 480.5V131H404.3L376 447" /&gt;
&lt;path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26" /&gt;
&lt;path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8" /&gt;
&lt;/svg&gt;
</code>
</pre>

<h3>Failed example 5</h3>
<p>This <code class="language-html">canvas</code> element which has no <a href="glossary.html#semantic-role">semantic role</a> and an empty (<code class="language-text">""</code>) <a href="glossary.html#accessible-name">accessible name</a> is not <a href="https://www.w3.org/TR/WCAG21/#dfn-pure-decoration">purely decorative</a>.</p>
<pre class="language-html">
<code class="language-html">
&lt;canvas id="w3c" width="200" height="60"&gt;&lt;/canvas&gt;
&lt;script&gt;
const ctx = document.querySelector('#w3c').getContext('2d')
ctx.font = '30px Arial'
ctx.fillText"('WCAG Rules!', 20, 40)
&lt;/script&gt;
</code>
</pre>
</section>

<section id="inapplicable">

<h2>Inapplicable</h2>

<h3>Inapplicable example 1</h3>

<p>This <code class="language-html">img</code> element is <a href="glossary.html#included-in-the-accessibility-tree">included in the accessibility tree</a> because the <code class="language-html">alt</code> attribute is not empty (<code class="language-text">""</code>).</p>
<pre class="language-html">
<code class="language-html">
&lt;img src="/test-assets/shared/w3c-logo.png" alt>="W3C" /&gt;
</code>
</pre>

<h3>Inapplicable example 2</h3>

<p>This <code class="language-html">img</code> element is neither <a href="glossary.html#visible">visible</a> nor <a href="glossary.html#included-in-the-accessibility-tree">included in the accessibility tree</a>.</p>

<pre class="language-html">
<code class="language-html">&lt;img src="/test-assets/shared/w3c-logo.png" style="display:none" alt="" /&gt;
</code>
</pre>

<h3>Inapplicable example 3</h3>

<p>This <code class="language-html">img</code> element is not <a href="glossary.html#visible">visible</a> because it is positioned off screen.</p>

<pre class="language-html">
<code class="language-html">
&lt;style&gt;
img {
position: absolute;
top: -9999em;
}
&lt;/style&gt;
&lt;img src="/test-assets/shared/fireworks.jpg" alt="" /&gt;
</code>
</pre>

<h3>Inapplicable example 4</h3>
<p>This <code class="language-text">svg</code> element is ignored because it is a child of a link that provides its <a href="glossary.html#accessible-name">accessible name</a>.</p>

<pre class="language-html">
<code class="language-html">
&lt;a href="https://example.org" aria-label="SVG star"&gt;
&lt;svg height="200" xmlns="http://www.w3.org/2000/svg"&gt;
&lt;polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow" /&gt;
&lt;/svg&gt;
&lt;/a&gt;
</code>
</pre>

<h3>Inapplicable example 5</h3>
<p>This <code class="language-text">svg</code> element has a <a href="glossary.html#semantic-role">semantic role</a> of <code class="language-html">img</code> and an <a href="glossary.html#accessible-name">accessible name</a> from its <code class="language-html">aria-label</code> attribute.</p>

<pre class="language-html">
<code class="language-html">
&lt;svg viewBox="0 0 512 512" role="img" aria-label="HTML 5 logo"&gt;
&lt;path d="M108.4 0h23v22.8h21.2V0h23v69h-23V46h-21v23h-23.2M206 23h-20.3V0h63.7v23H229v46h-23M259.5 0h24.1l14.8 24.3L313.2 0h24.1v69h-23V34.8l-16.1 24.8l-16.1-24.8v34.2h-22.6M348.7 0h23v46.2h32.6V69h-55.6" /&gt;
&lt;path fill="#e44d26" d="M107.6 471l-33-370.4h362.8l-33 370.2L255.7 512" /&gt;
&lt;path fill="#f16529" d="M256 480.5V131H404.3L376 447" /&gt;
&lt;path fill="#ebebeb" d="M142 176.3h114v45.4h-64.2l4.2 46.5h60v45.3H154.4M156.4 336.3H202l3.2 36.3 50.8 13.6v47.4l-93.2-26" /&gt;
&lt;path fill="#fff" d="M369.6 176.3H255.8v45.4h109.6M361.3 268.2H255.8v45.4h56l-5.3 59-50.7 13.6v47.2l93-25.8" /&gt;
&lt;/svg&gt;
</code>
</pre>

<h3>Inapplicable example 6</h3>
<p>This <code class="language-html">canvas</code> element is not <a href="glossary.html#visible">visible</a> because it is completely transparent.</p>

<pre class="language-html"><code class="language-html">&lt;canvas width="200" height="200"&gt;&lt;/canvas&gt;</code></pre>

<h3>Inapplicable example 7</h3>
<p>This <code class="language-text">canvas</code> element has a <a href="glossary.html#semantic-role">semantic role</a> of <code class="language-html">img</code> and an <a href="glossary.html#accessible-name">accessible name</a> from its <code class="language-text">aria-label</code> attribute.</p>

<pre class="language-html">
<code class="language-html">
&lt;canvas id="w3c" width="200" height="60" role="img" aria-label="WCAG Rules!"&gt;&lt;/canvas&gt;
&lt;script&gt;
const ctx = document.querySelector('#w3c').getContext('2d')
ctx.font = '30px Arial'
ctx.fillText('WCAG Rules!', 20, 40)
&lt;/script&gt;
</code>
</pre>

<h3>Inapplicable example 8</h3>
<p>This <code class="language-html">img</code> element is <a href="glossary.html#visible">visible</a> but <a href="glossary.html#included-in-the-accessibility-tree">included in the accessibility tree</a>.</p>

<p role="note"><strong>Note</strong>: While it might be better for the <abbr title="Portable Document Format">PDF</abbr> icon to be ignored by assistive technologies, because assistive technologies will announce &#8220;PDF&#8221; twice, the image is not <a href="https://www.w3.org/TR/WCAG21/#dfn-pure-decoration">purely decorative</a>. Having assistive technologies ignore it is not required by <a href="https://www.w3.org/TR/WCAG21/#non-text-content">Success Criterion 1.1.1 Non-text content</a>.</p>

<pre class="language-html">
<code class="language-html">
&lt;img src="/test-assets/shared/pdf-icon.png" alt="PDF" /&gt; PDF document
</code>
</pre>

<h3>Inapplicable example 9</h3>
<p>This is a <code class="language-html">div</code> element with a background image. Background images must be tested separate from this rule.</p>

<pre class="language-html"><code class="language-html">&lt;p&gt;Happy new year!&lt;/p&gt;
&lt;div
style="
width: 260px;
height: 260px;
background:url(/test-assets/shared/fireworks.jpg) no-repeat;"
&gt;&lt;/div&gt;
</code>
</pre>

<h3>Inapplicable example 10</h3>
<p>This <code class="language-text">img</code> element has an <code class="language-html">src</code> attribute which will cause the <a href="https://html.spec.whatwg.org/multipage/images.html#img-req-state">image request state</a> to be <a href="https://html.spec.whatwg.org/multipage/images.html#img-error">Broken</a>.</p>

<pre class="language-html">
<code class="language-html">
&lt;img src="/test-assets/does-not-exist.png" alt="" /&gt;
</code>
</pre>

</section>
</main>
</body>
</html>
Loading

0 comments on commit cca46dc

Please sign in to comment.