Skip to content

Commit

Permalink
Landmark Example pages: Make HTML techniques tab active on page load …
Browse files Browse the repository at this point in the history 
…(pull #1441)

Resolves issue #1391 by revising the landmark region example pages to select and load the HTML techniques by default on page load.

Also corrects spelling of VoiceOver and improves alt text for some images.

Co-authored-by: Matt King <a11yThinker@Gmail.com>
  • Loading branch information
@jongund @mcking65
jongund and mcking65 authored Jul 19, 2020
1 parent eddfdee commit 85eb889
Show file tree
Hide file tree
Showing 12 changed files with 339 additions and 375 deletions.
26 changes: 13 additions & 13 deletions examples/landmarks/HTML5.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ <h1>ARIA Landmarks Example</h1>
<div class="col-xs-12 col-sm-9 col-md-6 col-lg-7">
<main>
<h1 id="id1">HTML Sectioning Elements</h1>
<p>It is important to understand that many HTML sectioning (e.g. <code>main</code>, <code>nav</code>, <code>aside</code> ...) elements by default define ARIA landmarks.
<p>It is important to understand that many HTML sectioning (e.g. <code>main</code>, <code>nav</code>, <code>aside</code> ...) elements by default define ARIA landmarks.
If HTML sectioning elements are used without understanding the associated landmark structure, assistive technology users will most likely be confused and less efficient in accessing content and interacting with web pages.
</p>
<table class="table table-striped table-hover" aria-label="Default landmark roles for HTML sectioning elements">
Expand All @@ -61,8 +61,8 @@ <h1 id="id1">HTML Sectioning Elements</h1>
</tr>
<tr>
<td><code>footer</code></td>
<td><code>contentinfo</code> when in context of the <code>body</code> element.
The <code>footer</code> element is <strong>not</strong> a <code>contentinfo</code> landmark when it is a descendant of the following HTML sectioning elements:
<td><code>contentinfo</code> when in context of the <code>body</code> element.
The <code>footer</code> element is <strong>not</strong> a <code>contentinfo</code> landmark when it is a descendant of the following HTML sectioning elements:
<ul>
<li><code>article</code></li>
<li><code>aside</code></li>
Expand All @@ -79,15 +79,15 @@ <h1 id="id1">HTML Sectioning Elements</h1>
<tr>
<td><code>header</code></td>
<td><code>banner</code> when in context of the <code>body</code> element.
The <code>header</code> element is <strong>not</strong> a <code>banner</code> landmark when it is a descendant of the following HTML sectioning elements:
The <code>header</code> element is <strong>not</strong> a <code>banner</code> landmark when it is a descendant of the following HTML sectioning elements:
<ul>
<li><code>article</code></li>
<li><code>aside</code></li>
<li><code>main</code></li>
<li><code>nav</code></li>
<li><code>section</code></li>
</ul>
</td>
</td>
</tr>
<tr>
<td><code>main</code></td>
Expand Down Expand Up @@ -140,17 +140,17 @@ <h2 id="id3">Related Documents</h2>
W3C ARIA Authoring Practices Task Force
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
Copyright 2016
Copyright 2020
</div>
</footer>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-accessibility.min.js"></script>
<script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
<script type="text/javascript" src="js/visua11y.js"></script>
<script type="text/javascript" src="js/show.js"></script>
<script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
<script type="text/javascript" src="js/visua11y.js"></script>
<script type="text/javascript" src="js/show.js"></script>
<script type="text/javascript" >
// Use the SkipTo defaults, but just showing custom configuration
var SkipToConfig =
Expand All @@ -163,6 +163,6 @@ <h2 id="id3">Related Documents</h2>
}
};
</script>
<script type="text/javascript" src="js/SkipTo.min.js"></script>
<script type="text/javascript" src="js/SkipTo.min.js"></script>
</body>
</html>
</html>
75 changes: 22 additions & 53 deletions examples/landmarks/at.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,14 +45,13 @@ <h1>ARIA Landmarks Example</h1>
<main>
<h1>Assistive Technology</h1>

<p>The following sections demonstrate how various popular
<p>The following sections demonstrate how various popular
assistive technologies support landmark navigation</p>

<ul>
<li><a href="#jaws">JAWS Screen Reader for Windows</a></li>
<li><a href="#nvda">NVDA Screen Reader for Windows</a></li>
<li><a href="#we">Window-Eyes Screen Reader for Windows</a></li>
<li><a href="#vo">Voice Over Screen Reader for OSX</a></li>
<li><a href="#vo">VoiceOver Screen Reader for macOS</a></li>
<li><a href="#orca">ORCA Screen Reader for Linux/Gnome</a></li>
</ul>

Expand Down Expand Up @@ -86,12 +85,12 @@ <h2 id="jaws">JAWS Screen Reader for Windows</h2>
<td>List of landmarks</td>
</tr>
</tbody>

</table>

<p>Screen shot of list of landmarks in JAWS</p>
<p><img src="images/landmarks-jaws.png" alt="Screen shot of list of landmarks in voice over"></p>
<p><img src="images/landmarks-jaws.png" alt="Screen shot of list of landmarks in JAWS"></p>

</section>

<section aria-labelledby="nvda">
Expand Down Expand Up @@ -120,45 +119,15 @@ <h2 id="nvda">NVDA Screen Reader for Windows</h2>
<td>List of landmarks</td>
</tr>
</tbody>

</table>
<p>Screen shot of list of landmarks in NVDA</p>
<p><img src="images/landmarks-nvda.png" alt="Screen shot of list of landmarks in voice over"></p>
</section>

<section aria-labelledby="we">
<h2 id="we">Window-Eyes Screen Reader for Windows</h2>
<p>The following commands are available in Window-Eyes screen reader (since version 8.4) for navigating landmarks:</p>

<table class="table table-striped table-hover" aria-labelledby="we">

<thead>
<tr>
<th>Command</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>;</td>
<td>Go to next landmark</td>
</tr>
<tr>
<td>Shift+;</td>
<td>Go to previous landmark</td>
</tr>
<tr>
<td>Insert+Tab, Alt+K</td>
<td>List of landmarks</td>
</tr>
</tbody>

</table>
</table>
<p>Screen shot of list of landmarks in NVDA</p>
<p><img src="images/landmarks-nvda.png" alt="Screen shot of list of landmarks in N V D A"></p>
</section>

<section aria-labelledby="vo">
<h2 id="vo">Voice Over Screen Reader for OS X (Mac OS)</h2>
<p>The following commands are available in Voice Over screen reader for OS X El Capitan (10.11) for navigating landmarks:</p>
<h2 id="vo">VoiceOver Screen Reader for macOS</h2>
<p>The following commands are available in VoiceOver screen reader for navigating landmarks:</p>
<table class="table table-striped table-hover" aria-labelledby="vo">

<thead>
Expand All @@ -181,9 +150,9 @@ <h2 id="vo">Voice Over Screen Reader for OS X (Mac OS)</h2>
<td>List of landmarks</td>
</tr>
</tbody>
</table>
<p>Screen shot of list of landmarks in Voice Over</p>

</table>
<p>Screen shot of list of landmarks in VoiceOver</p>
<p><img src="images/landmarks-vo.png" alt="Screen shot of list of landmarks in voice over"></p>
</section>

Expand Down Expand Up @@ -255,18 +224,18 @@ <h2 id="id3">Related Documents</h2>
W3C ARIA Authoring Practices Task Force
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
Copyright 2016
Copyright 2020
</div>
</footer>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
<script type="text/javascript" src="js/bootstrap-accessibility.min.js"></script>
<script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
<script type="text/javascript" src="js/visua11y.js"></script>
<script type="text/javascript" src="js/show.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
<script type="text/javascript" src="js/bootstrap-accessibility.min.js"></script>
<script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
<script type="text/javascript" src="js/visua11y.js"></script>
<script type="text/javascript" src="js/show.js"></script>
<script type="text/javascript" >
// Use the SkipTo defaults, but just showing custom configuration
var SkipToConfig =
Expand All @@ -279,6 +248,6 @@ <h2 id="id3">Related Documents</h2>
}
};
</script>
<script type="text/javascript" src="js/SkipTo.min.js"></script>
<script type="text/javascript" src="js/SkipTo.min.js"></script>
</body>
</html>
46 changes: 23 additions & 23 deletions examples/landmarks/banner.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,28 +51,18 @@ <h2>Design Patterns</h2>
<ul>
<li>Each page may have one <code>banner</code> landmark.</li>
<li>The <code>banner</code> landmark should be a top-level landmark.</li>
<li>When a page contains nested <code>document</code> and/or <code>application</code> roles (e.g. typically through the use of <code>iframe</code> and <code>frame</code> elements),
<li>When a page contains nested <code>document</code> and/or <code>application</code> roles (e.g. typically through the use of <code>iframe</code> and <code>frame</code> elements),
each <code>document</code> or <code>application</code> role may have one <code>banner</code> landmark.
</li>
<li>If a page includes more than one <code>banner</code> landmark, each should have a unique label.</li>
</ul>
<section aria-label="Coding Techniques">
<ul id="myTabs" class="nav nav-tabs" role="tablist">
<li class="active"><a id="tab1" href="#tabpanel1" aria-controls="tabpanel1" role="tab" data-toggle="tab">ARIA Techniques</a></li>
<li><a id="tab2" href="#tabpanel2" aria-controls="tabpanel2" role="tab" data-toggle="tab">HTML Techniques</a></li>
<li class="active"><a id="tab2" href="#tabpanel2" aria-controls="tabpanel2" role="tab" data-toggle="tab">HTML Techniques</a></li>
<li><a id="tab1" href="#tabpanel1" aria-controls="tabpanel1" role="tab" data-toggle="tab">ARIA Techniques</a></li>
</ul>
<div class="tab-content">
<div id="tabpanel1" aria-labelledby="tab1" role="tabpanel" class="tab-pane active" >
<p>A <code>role="banner"</code> attribute is used to define a <code>banner</code> landmark.</p>
<h3>ARIA Example</h3>
<div class="code">
&lt;div <strong>role="banner"</strong>&gt;<br>
&nbsp;&nbsp;&lt;h1&gt;<em>page title identifying website</em>&lt;h1&gt;<br>
&nbsp;&nbsp;.... <em>banner content</em>.... <br>
&lt;/div&gt;<br>
</div>
</div>
<div id="tabpanel2" aria-labelledby="tab2" role="tabpanel" class="tab-pane">
<div id="tabpanel2" aria-labelledby="tab2" role="tabpanel" class="tab-pane active">
<ul>
<li>The HTML <code>header</code> element defines a <code>banner</code> landmark when its context is the <code>body</code> element.</li>
<li>
Expand All @@ -95,6 +85,16 @@ <h3>HTML Example</h3>
<strong>&lt;/header&gt;</strong>
</div>
</div>
<div id="tabpanel1" aria-labelledby="tab1" role="tabpanel" class="tab-pane" >
<p>A <code>role="banner"</code> attribute is used to define a <code>banner</code> landmark.</p>
<h3>ARIA Example</h3>
<div class="code">
&lt;div <strong>role="banner"</strong>&gt;<br>
&nbsp;&nbsp;&lt;h1&gt;<em>page title identifying website</em>&lt;h1&gt;<br>
&nbsp;&nbsp;.... <em>banner content</em>.... <br>
&lt;/div&gt;<br>
</div>
</div>
</div>
</section>
</main>
Expand Down Expand Up @@ -135,18 +135,18 @@ <h2 id="id3">Related Documents</h2>
W3C ARIA Authoring Practices Task Force
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
Copyright 2016
Copyright 2020
</div>
</footer>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
<script type="text/javascript" src="js/bootstrap-accessibility.min.js"></script>
<script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
<script type="text/javascript" src="js/visua11y.js"></script>
<script type="text/javascript" src="js/show.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
<script type="text/javascript" src="js/bootstrap-accessibility.min.js"></script>
<script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
<script type="text/javascript" src="js/visua11y.js"></script>
<script type="text/javascript" src="js/show.js"></script>
<script type="text/javascript" >
// Use the SkipTo defaults, but just showing custom configuration
var SkipToConfig =
Expand All @@ -159,6 +159,6 @@ <h2 id="id3">Related Documents</h2>
}
};
</script>
<script type="text/javascript" src="js/SkipTo.min.js"></script>
<script type="text/javascript" src="js/SkipTo.min.js"></script>
</body>
</html>
</html>
Loading

0 comments on commit 85eb889

Please sign in to comment.