Skip to content

Commit

Permalink
Understanding WCAG 2.1 2019年3月6日版の追加
Browse files Browse the repository at this point in the history
  • Loading branch information
@momdo
momdo committed Dec 31, 2020
0 parents commit 433b1cf
Show file tree
Hide file tree
Showing 142 changed files with 39,852 additions and 0 deletions.
585 changes: 585 additions & 0 deletions wcag21/understanding/abbreviations.html

Large diffs are not rendered by default.

86 changes: 86 additions & 0 deletions wcag21/understanding/adaptable.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Understanding Guideline 1.3: Adaptable</title>
<link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/base" />
<link rel="stylesheet" type="text/css" href="understanding.css" />
<link rel="stylesheet" type="text/css" href="slicenav.css" />
</head>
<body>
<nav>
<ul id="navigation">
<li><a href="." title="Table of Contents">Contents</a></li>
<li><a href="time-based-media">Previous <abbr title="Guideline">GL</abbr>: Time-based Media</a></li>
<li><a href="info-and-relationships">First <abbr title="Success Criterion">SC</abbr>: Info and Relationships</a></li>
<li><a href="distinguishable">Next <abbr title="Guideline">GL</abbr>: Distinguishable</a></li>
</ul>
</nav>
<nav class="navtoc">
<p>On this page:</p>
<ul id="navbar">
<li><a href="#intent">Intent</a></li>
<li><a href="#advisory">Advisory Techniques</a></li>
<li><a href="#success-criteria">Success Criteria</a></li>
</ul>
</nav>
<h1>Understanding Guideline 1.3: Adaptable</h1>
<blockquote class="scquote">
<p>Guideline <a href="https://w3c.github.io/wcag/guidelines/#adaptable" style="font-weight: bold;">1.3 Adaptable</a>: Create content that can be presented in different ways (for example simpler layout)
without losing information or structure.

</p>
</blockquote>
<main>
<section id="intent">
<h2>Intent</h2>
<p>The purpose of this guideline is to ensure that all information is available in a
form that can be perceived by all users, for example, spoken aloud, or presented in
a simpler visual layout. If all of the information is available in a form that can
be determined by software, then it can be presented to users in different ways (visually,
audibly, tactilely etc.). If information is embedded in a particular presentation
in such a way that the structure and information cannot be programmatically determined
by the assistive technology, then it cannot be rendered in other formats as needed
by the user.

</p>
<p>The Success Criteria under this guideline all seek to ensure that different types
of information that are often encoded in presentation are also available so that they
can be presented in other modalities.

</p>
<ul>


<li>
the way the parts of a Web page are organized in relation to each other;
and the way
a collection of Web pages is organized


</li>


<li>
rendering of the content in a form that can be perceived by users


</li>


</ul>
</section>
<section id="success-criteria">
<h2>Success Criteria for this Guideline</h2>
<ul>
<li><a href="info-and-relationships">1.3.1 Info and Relationships</a></li>
<li><a href="meaningful-sequence">1.3.2 Meaningful Sequence</a></li>
<li><a href="sensory-characteristics">1.3.3 Sensory Characteristics</a></li>
<li><a href="orientation">1.3.4 Orientation</a></li>
<li><a href="identify-input-purpose">1.3.5 Identify Input Purpose</a></li>
<li><a href="identify-purpose">1.3.6 Identify Purpose</a></li>
</ul>
</section>
</main>
</body>
</html>
206 changes: 206 additions & 0 deletions wcag21/understanding/animation-from-interactions.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta charset="UTF-8" />
<title>Understanding Success Criterion 2.3.3: Animation from Interactions</title>
<link rel="stylesheet" type="text/css" href="https://www.w3.org/StyleSheets/TR/2016/base" />
<link rel="stylesheet" type="text/css" href="understanding.css" />
<link rel="stylesheet" type="text/css" href="slicenav.css" />
</head>
<body>
<nav>
<ul id="navigation">
<li><a href="." title="Table of Contents">Contents</a></li>
<li><a href="seizures-and-physical-reactions"><abbr title="Guideline">GL</abbr>: Seizures and Physical Reactions</a></li>
<li><a href="three-flashes">Previous <abbr title="Success Criterion">SC</abbr>: Three Flashes</a></li>
<li><a href="bypass-blocks">Next <abbr title="Success Criterion">SC</abbr>: Bypass Blocks</a></li>
</ul>
</nav>
<nav class="navtoc">
<p>On this page:</p>
<ul id="navbar">
<li><a href="#intent">Intent</a></li>
<li><a href="#benefits">Benefits</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#resources">Related Resources</a></li>
<li><a href="#techniques">Techniques</a></li>
<li><a href="#key-terms">Key Terms</a></li>
</ul>
</nav>
<h1>Understanding Success Criterion 2.3.3: Animation from Interactions</h1>
<blockquote class="scquote">
<p>Success Criterion <a href="https://w3c.github.io/wcag/guidelines/#animation-from-interactions" style="font-weight: bold;">2.3.3 Animation from Interactions</a> (Level AAA):
<a href="https://w3c.github.io/wcag/guidelines/#dfn-motion-animation" target="terms">Motion animation</a> triggered by interaction can be disabled, unless the animation is <a href="https://w3c.github.io/wcag/guidelines/#dfn-essential" target="terms">essential</a> to the functionality or the information being conveyed.
</p>
</blockquote>
<main>
<section id="intent">
<h2>Intent</h2>
<p>The intent of this Success Criterion is to allow users to prevent animation from being
displayed on Web pages. Some users experience distraction or nausea from animated
content. For example, if scrolling a page causes elements to move (other than the
essential movement associated with scrolling) it can trigger vestibular disorders.
Vestibular (inner ear) disorder reactions include dizziness, nausea and headaches.
Another animation that is often non-essential is parallax scrolling. Parallax scrolling
occurs when backgrounds move at a different rate to foregrounds. Animation that is
essential to the functionality or information of a web page is allowed by this Success
Criterion.
</p>
<p>"Animation from interactions" applies when a user’s interaction initiates non-essential
animation. In contrast, <a href="">2.2.2 Pause, Stop, Hide</a> applies when the web page initiates animation.
</p>
<div class="note">
<div role="heading" class="note-title marker" aria-level="3">Note</div>
<p>The impact of animation on people with vestibular disorders can be quite severe. Triggered
reactions include nausea, migraine headaches, and potentially needing bed rest to
recover.
</p>
</div>
<p><strong>How can a website reduce the chances of triggering a vestibular disorder?</strong> Choose any one of the following solutions. Avoid using unnecessary animation. Provide
a control for users to turn off non-essential animations from user interaction. Take
advantage of the reduce motion feature in the user-agent or operating system.
</p>
<p><strong>What about movement caused by a user scrolling a page?</strong> Moving new content into the viewport is essential for scrolling. The user controls
the essential scrolling movement so it is allowed. Only add non-essential animation
to the scrolling interaction in a responsible way. Always give users the ability to
turn off unnecessary movement.
</p>
</section>
<section id="benefits">
<h2>Benefits</h2>
<ul>

<li><strong>Vestibular Disorder</strong>

<ul>

<li>People with vestibular disorders need control over movement triggered by interactions.
Non-essential movement can trigger vestibular disorder reactions. Vestibular (inner
ear) disorder reactions include distraction, dizziness, headaches and nausea.
</li>

<li>Persona Quote: "Stop that extra movement! You are making me so dizzy I cannot concentrate.
Now I have to turn off my computer and go lie down."
</li>

</ul>

</li>

</ul>
</section>
<section id="examples">
<h2>Examples</h2>
<ul>

<li><strong>Parallax scrolling with option to turn off unnecessary motion globally:</strong>

<ul>

<li>A site includes extra animations when the user scrolls. Decorative elements move in
and out of view horizontally when the essential page content is scrolled vertically.
A control at the top of each page allows the user to turn off unnecessary animations.
The ability to turn off non-essential animations is a site-wide setting.
</li>

</ul>

</li>

<li><strong>Transitions that support the reduce motion preference:</strong>

<ul>

<li>A site includes a non-essential transition when loading new content. The transition
is a page-flipping animation that respects the reduce-motion CSS media query. When
the user enables the reduce motion preference, the page-flipping animation is turned
off.
</li>

</ul>

</li>

<li><strong>Essential animation:</strong>

<ul>

<li>A web application provides a feature to author animated sequences. As part of this
tool the author needs to preview the animation.
</li>

</ul>

</li>

</ul>
</section>
<section id="resources">
<h2>Related Resources</h2>
<p>Resources are for information purposes only, no endorsement implied.</p>
<ul>

<li><a href="https://css-tricks.com/introduction-reduced-motion-media-query/">An Introduction to the Reduced Motion Media Query</a></li>

<li><a href="http://alistapart.com/article/designing-safer-web-animation-for-motion-sensitivity">Designing Safer Web Animations for Motion Sensitivity</a></li>

</ul>
</section>
<section id="techniques">
<h2>Techniques</h2>
<p>Each numbered item in this section represents a technique or combination of techniques
that the WCAG Working Group deems sufficient for meeting this Success Criterion. However,
it is not necessary to use these particular techniques. For information on using other
techniques, see <a href="understanding-techniques">Understanding Techniques for WCAG Success Criteria</a>, particularly the "Other Techniques" section.
</p>
<section id="sufficient">
<h3>Sufficient Techniques</h3>
<ul>

<li><a href="https://w3c.github.io/wcag/techniques/css/C39">C39: Using the CSS reduce-motion query to prevent motion</a></li>

<li>Gx: Allowing users to set a preference that prevents animation.</li>

</ul>
</section>
</section>
<section id="key-terms">
<h2>Key Terms</h2>
<dt id="dfn-essential">essential</dt>
<dd>
<definition xmlns="">


<p xmlns="http://www.w3.org/1999/xhtml">if removed, would fundamentally change the information or functionality of the content,
<strong>and</strong> information and functionality cannot be achieved in another way that would conform

</p>


</definition>
</dd>
<dt id="dfn-motion-animation">motion animation</dt>
<dd>
<definition xmlns="">


<p xmlns="http://www.w3.org/1999/xhtml" class="change">New</p>


<p xmlns="http://www.w3.org/1999/xhtml">addition of steps between conditions to create the illusion of movement or to give
a sense of a smooth transition
</p>

<p xmlns="http://www.w3.org/1999/xhtml" class="example">For example, an element which moves into place or changes size while appearing is
considered to be animated. An element which appears instantly without transitioning
is not using animation. Motion animation does not include changes of color, blurring
or opacity.
</p>


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

0 comments on commit 433b1cf

Please sign in to comment.