Skip to content

Commit

Permalink
Merge branch 'master' into understanding-cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
Michael Cooper committed Sep 13, 2018
2 parents 13eca3c + 304344c commit 5638f11
Show file tree
Hide file tree
Showing 17 changed files with 549 additions and 21 deletions.
8 changes: 0 additions & 8 deletions .travis.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,6 @@ env:
git:
depth: 3

branches:
only:
master

before_script:
- git config --global user.email "cooper@w3.org"
- git config --global user.name "michael-n-cooper"

script:
- mkdir output
- git clone --depth=1 --branch=gh-pages https://github.com/w3c/wcag.git output
Expand Down
149 changes: 149 additions & 0 deletions techniques/css/C31.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Using CSS Flexbox to reflow content</title>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
</head>
<body>
<h1>Using CSS Flexbox to reflow content</h1>
<section id="meta">
<h2>Metadata</h2>
<p id="id"></p>
<p id="technology">css</p>
<p id="type">sufficient</p>
</section>
<section id="applicability">

</section>
<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to be able to present content without introducing a horizontal scroll bar at a width equivalent to 320 CSS pixels, or a vertical scroll bar at a height equivalent to 256 CSS pixels for text intended to scroll horizontally. This is done by using layout techniques that adapt to the available viewport space.</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox layouts</a> define layout regions that reflow as needed to display the region on the screen. Although the exact layout therefore varies, the relationship of elements and the reading order remains the same when done right. This is an effective way to create designs that present well on different devices and for users with different zoom preferences.</p>
<p>The basic principles of flexbox layouts are to:</p>
<ol>
<li>Define the size of layout regions using flexbox properties and media queries for specific viewport sizes, so they enlarge, shrink or wrap in the available space and respond to zoom levels;</li>
<li>Position the layout regions in the flexbox container as a row of adjacent flexbox items, which may wrap to new rows as needed in much the same way as words in a paragraph wrap.</li>
</ol>

<p class="note">Flexbox has the possibility to cause a keyboard navigation disconnect by using the order and reverse properties. The <a href="https://www.w3.org/TR/css-flexbox-1/#order-accessibility">CSS Flexible Box Layout module warns</a> against resequencing content logic as they cause incorrect source ordering and are non-conforming.</p>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Example 1: Medium complex flexbox layout in HTML and CSS</h3>
<p>The following medium complex example uses HTML and CSS to create a flexbox layout. The layout regions adjust their size as the viewport is adjusted. When the total viewport width matches the width defined via media queries, columns wrap to be positioned below, rather than beside each other or vice versa.</p>
<p>The zoom level can be increased to 400% without requiring scrolling in more than one direction. This particular example uses percent sizes for the flex items by using the "flex-basis" property and are laid out in source order.</p>

<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Using CSS Flexbox for Reflow&lt;/title&gt;
&lt;style&gt;

/* Reflow Styling */

.row {
width: 100%;
display: flex;
flex-flow: row wrap;
}

.row-nested {
width: calc(100% + 2em);
margin: 0 -1em 1em -1em;
}

.col {
padding: 1em;
flex: 0 1 100%;
}

@media all and (min-width: 576px) {
.col-panel {
flex: 0 1 50%;
padding-bottom: 0.25em;
}
}

@media all and (min-width: 992px) {
main[role="main"] {
flex: 0 1 66.333333%;
}
aside[role="complementary"] {
flex: 0 1 33.333333%;
margin-top: 0;
}
}

&lt;/style&gt;

&lt;/head&gt;

&lt;body class="row"&gt;

&lt;header role="banner" class="col"&gt;
...
&lt;/header&gt;

&lt;main role="main" class="col"&gt;
...
...
&lt;div class="row row-nested"&gt;
&lt;div class="col col-panel"&gt;
...
&lt;/div&gt;
&lt;div class="col col-panel"&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;/main&gt;

&lt;aside role="complementary" class="col"&gt;
...
&lt;/aside&gt;

&lt;footer role="contentinfo" class="col"&gt;
...
&lt;/footer&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>

<p class="working-example">Working example: <a href="../../working-examples/css-flexbox/">Using CSS Flexbox for Reflow</a></p>
</section>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure</h3>
<ol>
<li>Display the web page in a user agent capable of 400% zoom and set the viewport dimensions (in CSS pixels) to 1280 wide and 1024 high.</li>
<li>Zoom in by 400%.</li>
<li>For content read horizontally, check that all content and functionality is available without horizontal scrolling.</li>
<li>For content read vertically, check that all content and functionality is available without vertical scrolling.</li>
</ol>
<p class="note">If the browser is not capable of zooming to 400%, you can reduce the width of the browser proportionally. For example, at 300% zoom the viewport should be sized to 960px wide.</p>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<p>#3 and #4 are true.</p>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li><a href="https://w3c.github.io/wcag/techniques/css/C32">Grid reflow technique</a></li>
</ul>
</section>
<section id="resources">
<h2>Related resources</h2>
<ul>
<li><a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout"><abbr title="Mozilla Development Network">MDN</abbr> Flexible Box Layout</a></li>
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">CSS Tricks Guide to Flexbox</a></li>
</ul>
</section>
</body>
</html>
83 changes: 83 additions & 0 deletions techniques/failures/F94.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Failure of Success Criterion 1.4.4 due to text sized in viewport units</title>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
</head>
<body>
<h1>Failure of Success Criterion 1.4.4 due to text sized in viewport units</h1>
<section id="meta">
<h2>Metadata</h2>
<p id="id"></p>
<p id="technology">CSS</p>
<p id="type"></p>
</section>
<section id="applicability">

</section>
<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to document the failure of text to re-scale when <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length">viewport units</a> are used on text. As these units are relative to the viewport, it means they cannot be resized by zooming or adjusting text-size.</p>
<p>There are various methods to increase and decrease the size of text and other content, but viewport units applied to text (generally via <code>font-size</code> in CSS) prevent most available methods. Attempts to use browser controls to zoom or adjust text-size will not work. Only methods that completely override the CSS will work, and those could cause other issues such as layouts collapsing or text overlapping.</p>

<p class="note">If media queries were used to adjust the size of text or unit of measure at different screen sizes, it may not be a failure of <a href="https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html">Resize text</a>. On-page controls provided by the author are also a way of passing the resize text success criteria.</p>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Failure example 1</h3>
<p>The following CSS and HTML snippet uses VW units to size the text.</p>
<pre><code>/* CSS */
.callout {
font-size:1vw;
}

&lt;p class="callout"&gt;
Text that scales by viewport units&lt;p/&gt;</code></pre>
<p class="working-example">Example <a href="../../working-examples/failure-viewport-units/">page with an example of text sized in <code>vh</code> units</a>.</p>
</section>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure</h3>
<p>In a desktop browser with a resizable window:</p>
<ol>
<li>Set zoom level to 100%.</li>
<li>Set window size to 1280 pixels wide.</li>
<li>Visit the page to be tested.</li>
<li>Use any of the following methods to resize text when available:
<ul>
<li>the zoom feature of the browser</li>
<li>the text-sizing feature of the browser,</li>
<li>on-page controls for resizing text.</li>
</ul>
</li>
<li>Check that the text resizes by one of the methods above, and can be resized to at least 200% of the default.</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>If step #5 is false, then this failure condition applies and the content fails Success Criteria 1.4.4, Resize Text.</li>
</ul>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li><a href="../../techniques/general/G179">G179</a></li>
<li><a href="../../techniques/css/C12">C12</a></li>
<li><a href="../../techniques/css/C13">C13</a></li>
<li><a href="../../techniques/css/C14">C14</a></li>
</ul>
</section>
<section id="resources">
<h2>Related Resources</h2>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length"><abbr title="Mozilla Development Network">MDN</abbr> CSS units</a> including <code>vh</code> and <code>vw</code> units.</li>
<li><a href="https://www.w3.org/TR/css-values/#viewport-relative-lengths">Viewport percentage lengths</a> in the CSS Values and Units Module Level 4 specification.</li>
</ul>
</section>
</body>
</html>
85 changes: 85 additions & 0 deletions techniques/html/H98.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Using HTML 5.2 autocomplete attributes</title>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
</head>
<body>
<h1>Using HTML 5.2 autocomplete attributes</h1>
<section id="meta">
<h2>Metadata</h2>
<p id="id"></p>
<p id="technology">html. It should also be noted that as of the summer 2018, neither Edge nor IE support the functionality found in Chrome, Firefox or Safari with regard to auto-filling the form inputs.</p>
<p id="type">sufficient</p>
</section>
<section id="applicability">
<h2>When to Use</h2>
<p>All HTML form fields that map to the <a href="https://www.w3.org/TR/WCAG21/#input-purposes">HTML 5.2 autofill tokens</a>.</p>
</section>
<section id="description">
<h2>Description</h2>

<p>The objective of this technique is to programmatically link a pre-defined and published taxonomic term to the input, so that the inputs can also be machine-interpreted. This way the input will always have a common, referable and identifiable value associated to it, no matter what language is used, or what visible on-screen term is used to label the input. Then it can be further customized or otherwise machine-manipulated to help users.</p>

<p>The technique works by adding the appropriate autocomplete token to each form field on the form to make the identified inputs Programmatically Determinable. This will help people with cognitive disabilities who may not immediately know the purpose of the field because the label used by the author is not familiar to them. When inputs have been programmatically assigned, third party plugins and software can manipulate these form fields to make them more accessible to people with cognitive disabilities. For instance, a plugin could detect an autocomplete token with the text string "tel" and insert a telephone icon. It will further enable third party software to swap out the existing labels for text labels that the user finds more familiar. For instance, it could change "Given Name" to "First Name".</p>

<p>The <code>autocomplete</code> attribute also improves the browser's ability to pre-populate form fields with user-preferred values. When the input has been properly 'tagged' with the known token value, the value entered by the user is stored locally on the host machine and associated with the token value for reuse. It helps those with dexterity disabilities who have trouble typing, those who may need more time, and anyone who wishes to reduce effort to fill out a form.</p>

<p>The <code>autocomplete</code> attribute allows the browser to do a pattern match against a list of values locally stored with the browser, and supplies the appropriate corresponding value when the input is programmatically tagged. This is a User setting that can be turned on or off, or modified by the end user. This reduces typing and reliance on memory because it uses stored values to fill in the fields.</p>

<p>It's important to note the success criterion <a href="identify-input-purpose">Identify Input Purpose</a> and autocomplete attribute only place requirements on input fields collecting information <em><strong>about the user</strong></em>.</p>

<p>For the success criterion, it is assumed that the <code>autocomplete</code> attribute is not used on form fields that do not correspond to an autocomplete field described in the <a href="https://www.w3.org/TR/html52/sec-forms.html#autofilling-form-controls-the-autocomplete-attribute">HTML 5.2 specification</a>. If the <code>autocomplete</code> field is used to describe a "custom" taxonomy, rather than that described in the specification, this rule may produce incorrect results. </p>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Example 1: Currency</h3>
<p>This is a simple form that collects contact and credit card information from the user.</p>
<pre><code>&lt;form method="post" action="step2"&gt;
&lt;div&gt;
&lt;label for="fname"&gt;First Name&lt;/label&gt;
&lt;input id="fname" type="text" <strong>autocomplete="given-name"</strong> ... &gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for="lname"&gt;Last Name Name&lt;/label&gt;
&lt;input id="lname" type="text" <strong>autocomplete="family-name"</strong> ... &gt;
&lt;label for="cc-num"&gt;Credit card number:&lt;/label&gt;
&lt;input type="text" id="cc-num" <strong>autocomplete="cc-number"</strong>&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;label for="exp-date"&gt;Expiry Date:&lt;/label&gt;
&lt;input type="month" id="exp-date" <strong>autocomplete="cc-exp"</strong>&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;input type="submit" value="Continue..."&gt;
&lt;/div&gt;
&lt;/form&gt;</code></pre>
</section>
</section>

<section id="tests">
<h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure</h3>
<p>For each form field that collects information about the user and corresponds to an autocomplete field described in <a href="https://www.w3.org/TR/WCAG21/#input-purposes">WCAG 2.1 7. Section 7: Input Purposes for User Interface Components</a>, check the following:</p>
<ol>
<li>The form field has a valid and well-formed autocomplete attribute and value pair.</li>
<li>The purpose of the form field indicated by the label corresponds with the autocomplete token on the input.</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>If #1 and #2 are true, then the test passes and the technique has been successfully implemented</li>
</ul>
</section>
</section>
<section id="related-resources">
<h2>Related Resources</h2>
<ul>
<li>Autocomplete test in the <a href="https://github.com/auto-wcag/auto-wcag/pull/170/files#diff-975065c206dc7448c6810fcbba89923b">automated test suite.</a> [@@ will update to published link when available]</li>
</ul>
</section>
</body>
</html>
1 change: 1 addition & 0 deletions understanding/20/resize-text.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -348,6 +348,7 @@ <h3>Failures for Resize text</h3>
</a>

</li>
<li><a href="../../techniques/failures/F94">F94</a></li>

</ul>

Expand Down
10 changes: 5 additions & 5 deletions understanding/21/content-on-hover-or-focus.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,21 +83,21 @@ <h2>Examples</h2>
<section class="example">
<h3>Example 1: Dismissable Tooltip</h3>
<figure>
<img src="https://i.imgur.com/K3k8WYk.png" alt="Screenshot of a button with a mouse pointer over it, and a tooltip displayed below the button" />
<img src="https://i.imgur.com/i0ndsmP.png" alt="Screenshot of a button with a mouse pointer over it, and no tooltip" />
<img src="img/button-pointer-tooltip.png" alt="Screenshot of a button with a mouse pointer over it, and a tooltip displayed below the button" />
<img src="img/button-pointer.png" alt="Screenshot of a button with a mouse pointer over it, and no tooltip" />
<figcaption>A tooltip is displayed below a LVTF button on hover so as not to obscure the button itself. It does however obscure content below the button (the next red button, called ~comment-zoom-content). To meet the Dismissible requirement, a user can press the Escape key to clear the tooltip without moving the mouse, as demonstrated in the second image.</figcaption>
</figure>
<figure>
<img src="https://i.imgur.com/625Nyod.png" alt="Screenshot of a button with a focus indicator on it, and no tooltip" />
<img src="img/button-focus-indicator.png" alt="Screenshot of a button with a focus indicator on it, and no tooltip" />
<figcaption>The button's tooltip also appears on focus and can be removed with the Escape key. The screen shot shows the same LVTF button with focus, but the tooltip has been dismissed and is no longer visible.</figcaption>
</figure>
</section>

<section class="example">
<h3>Example 2: Hoverable Tooltip</h3>
<figure>
<img src="https://i.imgur.com/9Br0nqM.png" alt="Screenshot of a button with a large mouse pointer over it, and a tooltip displayed below the button which is obscured by the large pointer" />
<img src="https://i.imgur.com/aa1LTLl.png" alt="Screenshot of a button with a tooltip below it, and a large mouse pointer at the bottom of the tooltip" />
<img src="img/button-pointer-on-tooltip.png" alt="Screenshot of a button with a large mouse pointer over it, and a tooltip displayed below the button which is obscured by the large pointer" />
<img src="img/button-pointer-below-tooltip.png" alt="Screenshot of a button with a tooltip below it, and a large mouse pointer at the bottom of the tooltip" />
<figcaption>A button's tooltip is displayed directly below it on mouse hover which can easily be obscured by a large pointer. The tooltip itself is able to be hovered so the mouse pointer can be moved down to its bottom edge in order to view the tooltip text.</figcaption>
</figure>
</section>
Expand Down
Loading

0 comments on commit 5638f11

Please sign in to comment.