Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ACT method proposal #542

Merged
merged 26 commits into from
Nov 17, 2021
Merged

ACT method proposal #542

Show file tree
Hide file tree
Changes from 22 commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
9679fd5
Editorial fixes from PR#526
jspellman Jun 6, 2021
deb7509
Update Explainer from June 8 meeting
jspellman Jun 15, 2021
5818f8a
Update Explainer with Inclusion goal
jspellman Jun 16, 2021
22b144c
rename and update Resources page
fstrr Jul 16, 2021
5983fe2
initial commit of glossary page
fstrr Jul 16, 2021
65560ea
update description page
fstrr Jul 16, 2021
d157c87
delete into page
fstrr Jul 16, 2021
3e60b2d
fix copy and paste errors
fstrr Jul 16, 2021
89fb1f7
fixexed resources heading
fstrr Jul 20, 2021
555e673
add link to glossary
fstrr Jul 20, 2021
ae54b02
remove pdf from list of technologies
fstrr Jul 20, 2021
243196a
remove introduction link
fstrr Jul 20, 2021
4332491
update tests to include all relevant ACT tests
fstrr Jul 20, 2021
2036189
update glossary to add missing definitions.
fstrr Jul 20, 2021
9cd5e20
remove empty dependencies section
fstrr Jul 20, 2021
22ac9ca
whitespace tweak
fstrr Jul 20, 2021
c79c8fb
update tabs
fstrr Jul 21, 2021
192ad2d
Remove explainer edits from this methods PR
Jul 22, 2021
0948e2d
add link to WAI easy checks to test page.
fstrr Jul 26, 2021
b743f47
update proposal
fstrr Aug 2, 2021
896ae2a
fix mislabel of Examples
jspellman Sep 8, 2021
fe2314e
Update templates
jspellman Sep 8, 2021
148347a
filename to match content
Sep 24, 2021
b6c88c3
same change to method as template
Sep 24, 2021
3139058
Remove template changes from this branch, moved to Reformat_Methods
Sep 24, 2021
e5780e3
filesystem error
Sep 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions explainer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ <h3>Structure of these guidelines</h3>
<p>Some of these sections are in this document. You can find others in links within the sections.</p>
</details>
<figure id="guidelines-structure-diagram" aria-labelledby="guidelines-structure-description" class="figure-float">
<img src="../guidelines/img/structure-core.svg" />
<img alt="" src="../guidelines/img/structure-core.svg" />
<figcaption>Core Structure</figcaption>
</figure>
<p><a href="#guidelines-structure-diagram">Figure 1</a> shows <span id="guidelines-structure-description">the core structure of WCAG 3.0. WCAG 3.0 has three levels of content with associated documentation. Guidelines form the top level. Each guideline contains multiple outcomes, with associated critical errors and outcomes scoring. Each outcome contains multiple methods, with an associated description and examples, tests, and test scoring.</span></p>
Expand Down Expand Up @@ -199,7 +199,7 @@ <h4>Outcome rating</h4>
<section>
<h3>Methods structure</h3>
<figure id="method_screenshot" aria-labelledby="method_screenshot_description" class="figure-float screenshot">
<img src="../guidelines/img/method.png" />
<img alt="" src="../guidelines/img/method.png" />
<figcaption>Screenshot of a Method for Structured Content</figcaption>
</figure>
<p>Each outcome has one or more <a href="#methods-structure">methods</a>. There are three types of methods:</p>
Expand Down Expand Up @@ -252,14 +252,14 @@ <h4>Additional Documentation and Scoring Information</h4>

<p>The core structure has inter-relationships with supporting documents and the scoring process. <span id="guidelines--full-structure-description"> Functional needs inform both outcomes and functional categories. The tests within methods are used to inform the scores for each outcome. Then outcome scores are aggregated to create scores by functional category and an overall score. These then result in a bronze rating. Silver and gold ratings build on the bronze rating to demonstrate improved accessibility. General information about guidelines is available in How To documents. </span></p>
<figure id="guidelines-full-structure-diagram" aria-labelledby="guidelines--full-structure-description" class="figure-full">
<img src="../guidelines/img/structure-scoring.svg" />
<img alt="" src="../guidelines/img/structure-scoring.svg" />
<figcaption>Documentation and Scoring Structure</figcaption>
</figure>
<section>
<h3>How tos</h3>
<p>The <a>How-To</a> content provides explanatory material for each guideline that applies across technologies. This guidance explains how to apply the concepts presented in the guidelines for non-technical readers. This plain language resource includes information on getting started, who the guideline helps and how, as well information for project managers, designers and developers.  </p>
<figure id="howTo_screenshot" aria-labelledby="howTo_screenshot_description" class="figure-float screenshot">
<img src="../guidelines/img/how-to.png" />
<img alt="" src="../guidelines/img/how-to.png" />
<figcaption>Example screenshot of a How-To for Structured Content</figcaption>
</figure>
<p id="howTo_screenshot_description">The example of a How-To for Structured Content provides basic information organized by tabs to help people get started with accessibility for structured content, plan for implementing accessible structured content across a project, design accessible structured content, and basics for developers new to accessibility of structured content. It also includes information on examples, the outcomes for meeting the guideline, and resources.</p>
Expand Down
41 changes: 41 additions & 0 deletions methods/decorative-images/background.html
View file
Open in desktop
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>
52 changes: 40 additions & 12 deletions methods/decorative-images/description.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,50 @@ <h1>Description</h1>
<section id="outcome">
<h2>Outcome</h2>
<p>This method supports the outcome <a href="../../outcomes/text-alternative-available.html" class="outcome-link">Text alternatives available</a>.</p>
</section>
<section id="platform">
<h2>Platform</h2>
<ul>
<li>All web platforms</li>
</ul>
</section>
<section id="details">
<h2>Detailed description</h2>
<p>Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.</p>
<p>In these cases, a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.</p>
<p>Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page. Images may be decorative when they are:</p>
<section id="technology">
<h2>Technology</h2>
<ul>
<li><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn></li>
<li><dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn></li>
<li><dfn><abbr title="Accessible Rich Internet Applications">ARIA</abbr></dfn></li>
<li><dfn><abbr title="Electronic Publication">ePub</abbr></dfn></li>
</ul>
</section>
<section id="input-aspects-for-testing">
<h2>Input aspects for testing</h2>
<ul>
<li>Visual styling such as borders, spacers, and corners; </li>
<li>Supplementary to link text to improve its appearance or increase the clickable area; </li>
<li>Illustrative of adjacent text but not contributing information (“eye-candy”); </li>
<li>Identified and described by surrounding text. </li>
<li><dfn><abbr title="Document Object Model">DOM</abbr></dfn> tree</li>
<li>Accessibility tree</li>
<li>CSS styling</li>
</ul>
</section>
<section id="dependencies">
<h2>Dependencies</h2>
<p>None</p>
<section id="summary">
<h2>Summary</h2>
<p>Decorative images don&#8217;t add information to the content of a page. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Merely omitting the alternative text can cause problems as some screen readers will try to repair the omission by reading the image filename. Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page. </p>
</section>
<section id="user-need">
<h2>How it solves user need</h2>
<p>Explicitly marking an image as decorative will cause assistive technology to skip over the image as if it didn&#8217;t exist on the page. This reduces time and fatigue needed to listen to descriptions of decorative images or long cryptic file names. </p>
</section>
<section id="when-to-use">
<h2>When To Use</h2>
<p>Decorative images don&#8217;t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.</p>
<p>In these cases, a null (empty) <code class="language-html">alt</code> text should be provided (<code class="language-html">alt=""</code>) so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out the <code class="language-html">alt</code> attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.</p>
<p>Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page. Images may be decorative when they are:</p>
<ul>
<li>A background behind textual content;</li>
<li>Visual styling such as borders, spacers, and corners;</li>
<li>Supplementary to link text to improve its appearance or increase the clickable area;</li>
<li>Illustrative of adjacent text but not contributing information (&#8220;eye-candy&#8221;);</li>
<li>Identified and described by surrounding text.</li>
</ul>
</section>
</main>
</body>
Expand Down
Loading