Skip to content

Commit 9473c27

Browse files
ericwbaileyericwbailey
committed
Rebuild docs
1 parent 326bcab commit 9473c27

File tree

1 file changed

+60
-24
lines changed

1 file changed

+60
-24
lines changed

‎docs/index.html

Lines changed: 60 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,9 @@ <h1>Accessible HTML Content Patterns</h1>
1717

1818
<aside id="section__project-link" aria-labelledby="title__project"><!-- Start of #section__project-link -->
1919
<a href="https://github.com/ericwbailey/accessible-html-content-patterns">
20-
<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 250 250" fill="#ffffff" style="position: absolute; top: 0; right: 0">
21-
<title id="title__project" style="border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;">View project repository on GitHub</title>
22-
<desc style="border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;">A ribbon banner featuring a silhouette of GitHub's logo, the Octocat.</desc>
20+
<svg aria-labelledby="project__title project__description" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 250 250" fill="#ffffff" role="img" style="position: absolute; top: 0; right: 0">
21+
<title id="project__title" style="border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;">View project repository on GitHub</title>
22+
<!--[if !IE]> --><desc id="project__description" style="border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;">A ribbon banner featuring a silhouette of GitHub's logo, the Octocat.</desc><!-- <![endif]-->
2323
<path d="M0 0l115 115h15l12 27 108 108V0z" fill="#000000"/>
2424
<path class="octo-arm" d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16" style="-webkit-transform-origin: 130px 106px; transform-origin: 130px 106px"/>
2525
<path class="octo-body" d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"/>
@@ -31,22 +31,28 @@ <h1>Accessible HTML Content Patterns</h1>
3131

3232
<nav id="section__table-of-contents" aria-labelledby="title__table-of-contents"><!-- Start of #section__table-of-contents -->
3333
<h2 id="title__table-of-contents">Table of Contents</h2>
34-
<ul>
34+
35+
<ol>
3536
<li><a href="#section__about">About</a></li>
3637
<li><a href="#section__headings">Headings</a></li>
3738
<li><a href="#section__text-level">Text-level</a>
38-
<ul>
39+
<ol>
3940
<li><a href="#subsection__content">Content</a></li>
4041
<li><a href="#subsection__lists">Lists</a></li>
4142
<li><a href="#subsection__links">Links</a></li>
4243
<li><a href="#subsection__code">Code</a></li>
4344
<li><a href="#subsection__symbols">Symbols</a></li>
4445
<li><a href="#subsection__emoji">Emoji</a></li>
45-
</ul>
46+
</ol>
4647
</li>
4748
<li><a href="#section__tables">Tables</a></li>
49+
<li><a href="#section__interactive">Interactive</a></li>
50+
<ol>
51+
<li><a href="#subsection__details">Details</a></li>
52+
<li><a href="#subsection__dialog">Dialog</a></li>
53+
</ol>
4854
<li><a href="#section__embedded">Embedded</a></li>
49-
<ul>
55+
<ol>
5056
<li><a href="#subsection__image">Image</a></li>
5157
<li><a href="#subsection__broken-image">Broken Image</a></li>
5258
<li><a href="#subsection__figure-with-caption">Figure with Caption</a></li>
@@ -58,9 +64,9 @@ <h2 id="title__table-of-contents">Table of Contents</h2>
5864
<li><a href="#subsection__video">Video</a></li>
5965
<li><a href="#subsection__object">Object</a></li>
6066
<li><a href="#subsection__canvas">Canvas</a></li>
61-
</ul>
67+
</ol>
6268
<li><a href="#section__forms">Forms</a>
63-
<ul>
69+
<ol>
6470
<li><a href="#subsection__text-input">Text Input</a></li>
6571
<li><a href="#subsection__non-text-input">Non-text Input</a></li>
6672
<li><a href="#subsection__select">Select</a></li>
@@ -70,10 +76,10 @@ <h2 id="title__table-of-contents">Table of Contents</h2>
7076
<li><a href="#subsection__lockup">Lockup</a></li>
7177
<li><a href="#subsection__states-and-validation">States and Validation</a></li>
7278
<li><a href="#subsection__autocomplete">Autocomplete</a></li>
73-
</ul>
79+
</ol>
7480
</li>
7581
<li><a href="#section__credit">Credit</a></li>
76-
</ul>
82+
</ol>
7783
</nav><!-- End of #section__table-of-contents -->
7884

7985
<hr />
@@ -82,7 +88,7 @@ <h2 id="title__table-of-contents">Table of Contents</h2>
8288
<h2 id="title__about">About</h2>
8389

8490
<p>
85-
Accessible, semantic markup patterns for HTML content. Uses the full <a rel="external noopener" href="http://html5doctor.com/element-index/"><cite>HTML5 Doctor Element Index</cite></a>, minus the <code>&lt;details&gt;</code>, <code>&lt;summary&gt;</code>, <code>&lt;command&gt;</code>, and <code>&lt;menu&gt;</code> tags.
91+
Accessible, semantic markup patterns for HTML content. Uses the full <a rel="external noopener" href="http://html5doctor.com/element-index/"><cite>HTML5 Doctor Element Index</cite></a>, minus the <code>&lt;command&gt;</code> and <code>&lt;menu&gt;</code> tags.
8692
</p>
8793
<p>
8894
Reference <a rel="external noopener" href="http://alistairduggin.co.uk/">Alistair Duggin</a>'s <a rel="external noopener" href="http://aduggin.github.io/accessibility-fails/"><cite>Accessibility Fails</cite></a> for common markup pattern accessibility mistakes, and <a rel="external noopener" href="http://pauljadam.com/">Paul J. Adam</a>'s <a rel="external noopener" href="http://pauljadam.com/demos/landmarks.html"><cite>WAI-ARIA Landmarks Site Navigation Structure Demo</cite></a> for semantic, accessible page landmarks.
@@ -425,20 +431,50 @@ <h3>Notes:</h3>
425431

426432
<hr />
427433

434+
<section id="section__interactive" aria-labelledby="title__interactive"><!-- Start of #section__interactive -->
435+
<h2 id="title__interactive">Interactive</h2>
436+
437+
<h3 id="subsection__details">Details</h3><!-- Start of #subsection__details -->
438+
<details>
439+
<summary>What payment options do you accept?</summary>
440+
<p>We accept cash, Visa, American Express, money orders, and personal checks.</p>
441+
</details>
442+
443+
<h4>Notes:</h4>
444+
<p>
445+
<small>The <code>details</code> element is currently not supported by Microsoft Edge or Internet Explorer. These browsers will <a rel="external noopener" href="https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/">display the content in an opened state</a>, as if the <code>open</code> attribute was applied.</small>
446+
</p><!-- End of #subsection__details -->
447+
448+
<h3 id="subsection__details">Dialog</h3><!-- Start of #subsection__details -->
449+
<dialog id="dialog">
450+
<p>This is dialog content.</p>
451+
<button type="button">
452+
Close
453+
</button>
454+
</dialog>
455+
456+
<h4>Notes:</h4>
457+
<p>
458+
<small>The <code>dialog</code>'s interactivity needs to be controlled with JavaScript.</small>
459+
</p><!-- End of #subsection__details -->
460+
</section><!-- End of #section__interactive -->
461+
462+
<hr />
463+
428464
<section id="section__embedded" aria-labelledby="title__embedded"><!-- Start of #section__embedded -->
429465
<h2 id="title__embedded">Embedded</h2>
430466

431-
<h2 id="subsection__image">Image</h2><!-- Start of #subsection__image -->
467+
<h3 id="subsection__image">Image</h3><!-- Start of #subsection__image -->
432468
<img
433469
src="http://placehold.it/600x400?text=Image+Example"
434470
alt="Image Exmaple" /><!-- End of #subsection__image -->
435471

436-
<h2 id="subsection__broken-image">Broken Image</h2><!-- Start of #subsection__broken-image -->
472+
<h3 id="subsection__broken-image">Broken Image</h3><!-- Start of #subsection__broken-image -->
437473
<img
438474
src="nope"
439475
alt="Broken Image" /><!-- End of #subsection__broken-image -->
440476

441-
<h2 id="subsection__figure-with-caption">Figure with Caption</h2><!-- Start of #subsection__figure-with-caption -->
477+
<h3 id="subsection__figure-with-caption">Figure with Caption</h3><!-- Start of #subsection__figure-with-caption -->
442478
<figure>
443479
<img
444480
src="http://placehold.it/400x250?text=Figure+Example"
@@ -448,7 +484,7 @@ <h2 id="subsection__figure-with-caption">Figure with Caption</h2><!-- Start of #
448484
</figcaption>
449485
</figure><!-- End of #subsection__figure-with-caption -->
450486

451-
<h2 id="subsection__inline-svg">Inline SVG</h2><!-- Start of #subsection__inline-svg -->
487+
<h3 id="subsection__inline-svg">Inline SVG</h3><!-- Start of #subsection__inline-svg -->
452488
<figure>
453489
<svg
454490
aria-labelledby="svg__title svg__description"
@@ -479,7 +515,7 @@ <h3>Notes:</h3>
479515
</li>
480516
</ul>
481517

482-
<h2 id="subsection__picture">Picture</h2><!-- Start of #subsection__picture -->
518+
<h3 id="subsection__picture">Picture</h3><!-- Start of #subsection__picture -->
483519
<picture>
484520
<source
485521
media="(min-width: 40em)"
@@ -493,7 +529,7 @@ <h2 id="subsection__picture">Picture</h2><!-- Start of #subsection__picture -->
493529
alt="Picture Element" />
494530
</picture><!-- End of #subsection__picture -->
495531

496-
<h2 id="subsection__image-with-srcset-and-sizes">Image with Srcset and Sizes</h2><!-- Start of #subsection__image-with-srcset-and-sizes -->
532+
<h3 id="subsection__image-with-srcset-and-sizes">Image with Srcset and Sizes</h3><!-- Start of #subsection__image-with-srcset-and-sizes -->
497533
<img
498534
srcset="http://placehold.it/1024x768/7ED321/ffffff/?text=Large 1024w,
499535
http://placehold.it/1024x768/F5A623/ffffff/?text=Medium 640w,
@@ -502,14 +538,14 @@ <h2 id="subsection__image-with-srcset-and-sizes">Image with Srcset and Sizes</h2
502538
src="http://placehold.it/600x400?text=Img+Fallback"
503539
alt="Image with Srcset and Sizes Example" /><!-- End of #subsection__image-with-srcset-and-sizes -->
504540

505-
<h2 id="subsection__iframe">Iframe</h2><!-- Start of #subsection__iframe -->
541+
<h3 id="subsection__iframe">Iframe</h3><!-- Start of #subsection__iframe -->
506542
<iframe
507543
src="about:blank"
508544
title="about:blank"
509545
name="iframe"><!-- End of #subsection__iframe -->
510546
</iframe>
511547

512-
<h2 id="subsection__audio">Audio</h2><!-- Start of #subsection__audio -->
548+
<h3 id="subsection__audio">Audio</h3><!-- Start of #subsection__audio -->
513549
<audio controls>
514550
<source
515551
src="http://www.noiseaddicts.com/samples_1w72b820/4353.mp3"
@@ -529,7 +565,7 @@ <h2 id="subsection__audio">Audio</h2><!-- Start of #subsection__audio -->
529565
Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a download href="http://www.noiseaddicts.com/samples_1w72b820/4353.mp3">download a file</a> for offline listening.
530566
</audio><!-- End of #subsection__audio -->
531567

532-
<h2 id="subsection__video">Video</h2><!-- Start of #subsection__video -->
568+
<h3 id="subsection__video">Video</h3><!-- Start of #subsection__video -->
533569
<video
534570
controls
535571
poster="http://placehold.it/854x480?text=Video+Poster">
@@ -556,7 +592,7 @@ <h3>Notes:</h3>
556592
<small>Accessibility errors concerning the video's missing audio description should go away once the <code>&lt;track&gt;</code>'s source is linked to a valid caption file.</small>
557593
</p>
558594

559-
<h2 id="subsection__object">Object</h2><!-- Start of #subsection__object -->
595+
<h3 id="subsection__object">Object</h3><!-- Start of #subsection__object -->
560596
<object>
561597
<param
562598
name="movie"
@@ -582,7 +618,7 @@ <h2 id="subsection__object">Object</h2><!-- Start of #subsection__object -->
582618
Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a rel="external noopener" href="https://www.youtube.com/watch?v=pDHzK3Xe7Yw">view the video on YouTube</a>.
583619
</object><!-- End of #subsection__object -->
584620

585-
<h2 id="subsection__canvas">Canvas</h2><!-- Start of #subsection__canvas -->
621+
<h3 id="subsection__canvas">Canvas</h3><!-- Start of #subsection__canvas -->
586622
<canvas
587623
id="myCanvas"
588624
width="400"
@@ -1647,7 +1683,7 @@ <h4>Notes:</h4>
16471683

16481684
<hr />
16491685

1650-
<footer id="section__credit" aria-labelledby="title__credit"><!-- Start of #section__credit -->
1686+
<footer id="section__credit" aria-labelledby="title__credit" role="contentinfo"><!-- Start of #section__credit -->
16511687
<h2 id="title__credit">Credit</h2>
16521688

16531689
<p>

0 commit comments

Comments
 (0)