Skip to content

Commit

Permalink
Chore: Change HTML5 references to HTML (pull #1058)
Browse files Browse the repository at this point in the history
Resolves #1020:

- Changes all HTML5 References to HTML
- Changes reference in Landmark examples to WHATWG HTML spec
- Modify Header of references section from "Related W3C Documents" to "Related Documents"
- Adds References to [[SVG2]], [[HTML]] and [[HTML-ARIA]] so these appear correctly in the references section
  • Loading branch information
jnurthen authored and mcking65 committed Jul 1, 2019
1 parent 25eb6c8 commit ee13f15
Show file tree
Hide file tree
Showing 14 changed files with 107 additions and 107 deletions.
64 changes: 32 additions & 32 deletions aria-practices.html
Original file line number Diff line number Diff line change
Expand Up @@ -3285,22 +3285,22 @@ <h2>Landmark Regions</h2>
Landmark regions can also be used as targets for &quot;skip links&quot; and by browser extensions to enhanced keyboard navigation.
</p>
<p>
This section explains how HTML5 sectioning elements and ARIA landmark roles
This section explains how HTML sectioning elements and ARIA landmark roles
are used to make it easy for assistive technology users to understand the meaning of the layout of a page.
</p>
<section>
<h3>HTML5 Sectioning Elements</h3>
<h3>HTML Sectioning Elements</h3>
<p>
Several HTML5 sectioning elements automatically create ARIA landmark regions.
Several HTML sectioning elements automatically create ARIA landmark regions.
So, in order to provide assistive technology users with a logical view of a page,
it is important to understand the effects of using HTML5 sectioning elements.
<a href="https://www.w3.org/TR/html-aria/">More information on HTML5 element role mapping</a>.
it is important to understand the effects of using HTML sectioning elements.
[[HTML-ARIA]] contains more information on HTML element role mapping.
</p>
<table class="widget-features">
<caption>Default landmark roles for HTML5 sectioning elements</caption>
<caption>Default landmark roles for HTML sectioning elements</caption>
<thead>
<tr>
<th>HTML5 Element</th>
<th>HTML Element</th>

<th>Default Landmark Role</th>
</tr>
Expand Down Expand Up @@ -3419,12 +3419,12 @@ <h4 class="widget-name">Banner</h4>
</ul>

<section class="notoc">
<h5>HTML5 Techniques</h5>
<h5>HTML Techniques</h5>
<ul>
<li>The HTML5 <code>header</code> element defines a <code>banner</code> landmark when its context is the <code>body</code> element.</li>
<li>The HTML <code>header</code> element defines a <code>banner</code> landmark when its context is the <code>body</code> element.</li>

<li>
The HTML5 <code>header</code> element is not considered a <code>banner</code> landmark when it is descendant of any of following elements (see <a href="" class="html-mapping">HTML Accessibility Mappings</a> [[HTML-AAM]]):
The HTML <code>header</code> element is not considered a <code>banner</code> landmark when it is descendant of any of following elements (see <a href="" class="html-mapping">HTML Accessibility Mappings</a> [[HTML-AAM]]):
<ul>
<li><code>article</code></li>
<li><code>aside</code></li>
Expand All @@ -3437,7 +3437,7 @@ <h5>HTML5 Techniques</h5>

<h5>ARIA Techniques</h5>

<p>If the HTML5 <code>header</code> element technique is not being used, a <code>role=&quot;banner&quot;</code> attribute should be used to define a <code>banner</code> landmark.</p>
<p>If the HTML <code>header</code> element technique is not being used, a <code>role=&quot;banner&quot;</code> attribute should be used to define a <code>banner</code> landmark.</p>
</section>

<section class="notoc">
Expand All @@ -3463,13 +3463,13 @@ <h4 class="widget-name">Complementary</h4>
</ul>

<section class="notoc">
<h5>HTML5 Technique</h5>
<h5>HTML Technique</h5>

<p>Use the HTML5 <code>aside</code> element to define a <code>complementary</code> landmark.</p>
<p>Use the HTML <code>aside</code> element to define a <code>complementary</code> landmark.</p>

<h5>ARIA Technique</h5>

<p>If the HTML5 <code>aside</code> element technique is not being used, use a <code>role=&quot;complementary&quot;</code> attribute to define a <code>complementary</code> landmark.</p>
<p>If the HTML <code>aside</code> element technique is not being used, use a <code>role=&quot;complementary&quot;</code> attribute to define a <code>complementary</code> landmark.</p>
</section>

<section class="notoc">
Expand Down Expand Up @@ -3498,13 +3498,13 @@ <h4 class="widget-name">Contentinfo</h4>

<section class="notoc">

<h5>HTML5 Techniques</h5>
<h5>HTML Techniques</h5>

<ul>
<li>The HTML5 <code>footer</code> element defines a <code>contentinfo</code> landmark when its context is the <code>body</code> element.</li>
<li>The HTML <code>footer</code> element defines a <code>contentinfo</code> landmark when its context is the <code>body</code> element.</li>

<li>
The HTML5 <code>footer</code> element is not considered a <code>contentinfo</code> landmark when it is descendant of any of following elements (see <a href="" class="html-mapping">HTML Accessibility Mappings</a> [[HTML-AAM]]):
The HTML <code>footer</code> element is not considered a <code>contentinfo</code> landmark when it is descendant of any of following elements (see <a href="" class="html-mapping">HTML Accessibility Mappings</a> [[HTML-AAM]]):
<ul>
<li><code>article</code></li>
<li><code>aside</code></li>
Expand All @@ -3517,7 +3517,7 @@ <h5>HTML5 Techniques</h5>

<h5>ARIA Technique</h5>

<p>If the HTML5 <code>footer</code> element technique is not being used, a <code>role=&quot;contentinfo&quot;</code> attribute should be used to define a <code>contentinfo</code> landmark.</p>
<p>If the HTML <code>footer</code> element technique is not being used, a <code>role=&quot;contentinfo&quot;</code> attribute should be used to define a <code>contentinfo</code> landmark.</p>
</section>

<section class="notoc">
Expand Down Expand Up @@ -3556,9 +3556,9 @@ <h4 class="widget-name">Form</h4>
</ul>

<section class="notoc">
<h5>HTML5 Techniques</h5>
<h5>HTML Techniques</h5>

<p>The HTML5 <code>form</code> element defines a <code>form</code> landmark when it has an accessible name (e.g. <code>aria-labelledby</code>, <code>aria-label</code> or <code>title</code>).</p>
<p>The HTML <code>form</code> element defines a <code>form</code> landmark when it has an accessible name (e.g. <code>aria-labelledby</code>, <code>aria-label</code> or <code>title</code>).</p>

<h5>ARIA Technique</h5>

Expand Down Expand Up @@ -3589,13 +3589,13 @@ <h4 class="widget-name">Main</h4>
</ul>

<section class="notoc">
<h5>HTML5 Technique</h5>
<h5>HTML Technique</h5>

<p>Use the HTML5 <code>main</code> element to define a <code>main</code> landmark.</p>
<p>Use the HTML <code>main</code> element to define a <code>main</code> landmark.</p>

<h5>ARIA Technique</h5>

<p>If the HTML5 <code>main</code> element technique is not being used, use a <code>role=&quot;main&quot;</code> attribute to define a <code>main</code> landmark.</p>
<p>If the HTML <code>main</code> element technique is not being used, use a <code>role=&quot;main&quot;</code> attribute to define a <code>main</code> landmark.</p>
</section>

<section class="notoc">
Expand All @@ -3617,13 +3617,13 @@ <h4 class="widget-name">Navigation</h4>
</ul>

<section class="notoc">
<h5>HTML5 Technique</h5>
<h5>HTML Technique</h5>

<p>Use the HTML5 <code>nav</code> element to define a <code>navigation</code> landmark.</p>
<p>Use the HTML <code>nav</code> element to define a <code>navigation</code> landmark.</p>

<h5>ARIA Technique</h5>

<p>If the HTML5 <code>nav</code> element technique is not being used, use a <code>role=&quot;navigation&quot;</code> attribute to define a <code>navigation</code> landmark.</p>
<p>If the HTML <code>nav</code> element technique is not being used, use a <code>role=&quot;navigation&quot;</code> attribute to define a <code>navigation</code> landmark.</p>

</section>

Expand All @@ -3648,13 +3648,13 @@ <h4 class="widget-name">Region</h4>
</ul>

<section class="notoc">
<h5>HTML5 Technique</h5>
<h5>HTML Technique</h5>

<p>The HTML5 <code>section</code> element defines a <code>region</code> landmark when it has an accessible name (e.g. <code>aria-labelledby</code>, <code>aria-label</code> or <code>title</code>).</p>
<p>The HTML <code>section</code> element defines a <code>region</code> landmark when it has an accessible name (e.g. <code>aria-labelledby</code>, <code>aria-label</code> or <code>title</code>).</p>

<h5>ARIA Technique</h5>

<p>If the HTML5 <code>section</code> element technique is not being used, use a <code>role=&quot;region&quot;</code> attribute to define a <code>region</code> landmark.</p>
<p>If the HTML <code>section</code> element technique is not being used, use a <code>role=&quot;region&quot;</code> attribute to define a <code>region</code> landmark.</p>
</section>

<section class="notoc">
Expand All @@ -3676,8 +3676,8 @@ <h4 class="widget-name">Search</h4>
</ul>

<section class="notoc">
<h5>HTML5 Technique</h5>
<p>There is no HTML5 element that defines a <code>search</code> landmark.</p>
<h5>HTML Technique</h5>
<p>There is no HTML element that defines a <code>search</code> landmark.</p>

<h5>ARIA Technique</h5>

Expand Down Expand Up @@ -5384,7 +5384,7 @@ <h3>Keyboard Navigation Between Components (The Tab Sequence)</h3>
<p> As explained in section <a href="#kbd_generalnav"></a>, all interactive UI components need to be reachable via the keyboard. This is best achieved by either including them in the tab sequence or by making them accessible from a component that is in the tab sequence, e.g., as part of a composite component. This section addresses building and managing the tab sequence, and subsequent sections cover making focusable elements that are contained within components keyboard accessible. </p>

<p>
The <a href="https://www.w3.org/TR/html5/editing.html#attr-tabindex">HTML tabindex</a> and <a href="https://www.w3.org/TR/SVG2/struct.html#tabindexattribute">SVG tabindex</a> attributes can be used to add and remove elements from the tab sequence.
The [[HTML]] <a href="https://html.spec.whatwg.org/multipage/interaction.html#the-tabindex-attribute">tabindex</a> and [[SVG2]] <a href="https://www.w3.org/TR/SVG2/struct.html#tabindexattribute">tabindex</a> attributes can be used to add and remove elements from the tab sequence.
The value of tabindex can also influence the order of the tab sequence, although authors are strongly advised not to use tabindex for that purpose.
</p>

Expand Down
2 changes: 1 addition & 1 deletion examples/grid/LayoutGrids.html
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ <h4 id="grid1_label">Related Documents</h4>
<span role="gridcell" class="list-link"><a tabindex="-1" href="https://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></span>
<span role="gridcell" class="list-link"><a tabindex="-1" href="https://www.w3.org/WAI/intro/aria.php">WAI-ARIA Overview</a></span>
<span role="gridcell" class="list-link"><a tabindex="-1" href="https://www.w3.org/WAI/intro/wcag">WCAG Overview</a></span>
<span role="gridcell" class="list-link"><a tabindex="-1" href="https://www.w3.org/TR/html5/">HTML 5 Specification</a></span>
<span role="gridcell" class="list-link"><a tabindex="-1" href="https://html.spec.whatwg.org/">HTML Specification</a></span>
<span role="gridcell" class="list-link"><a tabindex="-1" href="https://www.w3.org/TR/SVG2/">SVG 2 Specification</a></span>
</div>
</div>
Expand Down
22 changes: 11 additions & 11 deletions examples/landmarks/HTML5.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html >
<html lang="en">
<head>
<title>HTML5 Sectioning Elements: ARIA Landmarks Example</title>
<title>HTML Sectioning Elements: ARIA Landmarks Example</title>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" media="screen"/>
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen"/>
Expand All @@ -27,7 +27,7 @@ <h1>ARIA Landmarks Example</h1>
<nav>
<ul class="nav nav-pills nav-stacked">
<li><a href="index.html">Principles</a></li>
<li class="active"><a href="HTML5.html" aria-current="page">HTML5</a></li>
<li class="active"><a href="HTML5.html" aria-current="page">HTML</a></li>
<li><a href="banner.html">Banner</a></li>
<li><a href="complementary.html">Complementary</a></li>
<li><a href="contentinfo.html">Contentinfo</a></li>
Expand All @@ -43,14 +43,14 @@ <h1>ARIA Landmarks Example</h1>
</div>
<div class="col-xs-12 col-sm-9 col-md-6 col-lg-7">
<main>
<h1 id="id1">HTML5 Sectioning Elements</h1>
<p>It is important to understand that many HTML5 sectioning (e.g. <code>main</code>, <code>nav</code>, <code>aside</code> ...) elements by default define ARIA landmarks.
If HTML5 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.
<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.
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 HTML5 sectioning elements">
<table class="table table-striped table-hover" aria-label="Default landmark roles for HTML sectioning elements">
<thead>
<tr>
<th>HTML5 Element</th>
<th>HTML Element</th>
<th>Default Landmark Role</th>
</tr>
</thead>
Expand All @@ -62,7 +62,7 @@ <h1 id="id1">HTML5 Sectioning Elements</h1>
<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 HTML5 sectioning elements:
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,7 +79,7 @@ <h1 id="id1">HTML5 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 HTML5 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>
Expand Down Expand Up @@ -118,15 +118,15 @@ <h2 id="id4">Landmarks</h2>
</ul>
</aside>
<aside aria-labelledby="id3">
<h2 id="id3">Related W3C Documents</h2>
<h2 id="id3">Related Documents</h2>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
<li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
<li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
<li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
<li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
<li><a href="http://www.w3.org/TR/html5/">HTML5 Specification</a></li>
<li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
<li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
<li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
<li><a href="http://www.w3.org/TR/WCAG/">WCAG Specification</a></li>
Expand Down
6 changes: 3 additions & 3 deletions examples/landmarks/at.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ <h1>ARIA Landmarks Example</h1>
<nav>
<ul class="nav nav-pills nav-stacked">
<li><a href="index.html">Principles</a></li>
<li><a href="HTML5.html">HTML5</a></li>
<li><a href="HTML5.html">HTML</a></li>
<li><a href="banner.html">Banner</a></li>
<li><a href="complementary.html">Complementary</a></li>
<li><a href="contentinfo.html">Contentinfo</a></li>
Expand Down Expand Up @@ -233,15 +233,15 @@ <h2 id="id4">Landmarks</h2>
</ul>
</aside>
<aside aria-labelledby="id3">
<h2 id="id3">Related W3C Documents</h2>
<h2 id="id3">Related Documents</h2>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
<li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
<li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
<li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
<li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
<li><a href="http://www.w3.org/TR/html5/">HTML5 Specification</a></li>
<li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
<li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a>
<li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
<li><a href="http://www.w3.org/TR/WCAG/">WCAG Specification</a></li>
Expand Down
Loading

0 comments on commit ee13f15

Please sign in to comment.