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

Jump to bottom

Tech spacing override ac #4059

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Tech spacing override ac #4059

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a3b4008
Adjusting the technique to a sub-set of the CSS.
alastc Jul 11, 2018
878ce7f
Added example of paragraph content
Aug 6, 2018
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
65 changes: 65 additions & 0 deletions techniques/css/example-text-spacing/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<style> nav ul {
list-style-type: none;
}
nav li {
display: inline-block;
background-color: #ccc;

}
nav a {
padding: 3px;
display: block;
}
.example1 li {
width: 6em;
}
.example2 li {

}

.example3 {
width:30em;background:#ccc;
}

</style>

</head>

<body>


<main role="main">
<h1>Examples for small containers allow for text spacing</h1>
<p>The following examples are to show the code from technique "Small containers allow for text spacing".</p>
<section>
<h2>Example 1</h2>
<nav class="example1">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</section>
<section>
<h2>Example 2</h2>
<nav class="example2">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</section>
<section>
<h2>Example 3</h2>
<div class="example3">
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, ‘and what is the use of a book,’ thought Alice ‘without pictures or conversations?’</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, ‘Oh dear! Oh dear! I shall be late!’ (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
</div>
</section>
</main>

</body></html>
83 changes: 83 additions & 0 deletions techniques/css/spacing-override-small.html
View file
Open in desktop
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>Small containers allow for text spacing</title>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/w3c/wcag21/master/css/sources.css"/>
</head>
<body>
<h1>Small containers allow for text spacing</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">
<h2>When to Use</h2>
<p>This technique is applicable to Cascading Style Sheet/HTML technologies where a box does not allow for wrapping text.</p>
</section>
<section id="description">
<h2>Description</h2>
<p>The objective of this technique is to ensure that when a small container with text (such as items in a navigation) have sufficient space to allow text to increase in it's spacing.</p>
</section>
<section id="examples">
<h2>Examples</h2>
<section class="example">
<h3>Example 1: A box sized with space to allow for expansion</h3>
<p>The containers are sized to a value greater than the default width of the text. The links are less than 7em wide, so the 10em width of each list item allows for expanded letter and word width.</p>
<pre xml:space="preserve">
/* CSS */
.nav li { width: 10em; }
&lt;!-- HTML --&gt;
&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/contact/&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;ul&gt;
&lt;/nav&gt;
</pre>
</section>
<section class="example">
<h3>Example 2: A box which expands with the text size</h3>
<p>The containers are given an display of inline-block .</p>
<pre xml:space="preserve">
/* CSS */
.nav li { display: inline-block; }
&lt;!-- HTML --&gt;
&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;/contact/&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
&lt;ul&gt;
&lt;/nav&gt;
</pre>
</section>
</section>
<section id="tests">
<h2>Tests</h2>
<section class="test-procedure">
<h3>Procedure</h3>
<ol>
<li>Display content in a user agent.</li>
<li>Set zoom level to 100%.</li>
<li>Use a tool or another mechanism to apply the text spacing metrics, such as the <a href="http://www.html5accessibility.com/tests/tsbookmarklet.html">Text Spacing
Bookmarklet</a> or a user-style browser plugin.</li>
<li> Check that all content and functionality is available.</li>
</ol>
</section>
<section class="test-results">
<h3>Expected Results</h3>
<ul>
<li>Check number 4 is true.</li>
</ul>
<p><strong>Note</strong>: Where a page has multiple layouts (e.g. in a responsive design) text spacing should be tested in each layout. </p>
</section>
</section>
<section id="related">
<h2>Related Techniques</h2>
<ul>
<li>ID</li>
</ul>
</section>
</body>
</html>
68 changes: 0 additions & 68 deletions techniques/css/spacing-override.html
View file
Open in desktop

This file was deleted.