You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/index.html
+30-24Lines changed: 30 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -88,7 +88,7 @@ <h2 id="title__table-of-contents">Table of Contents</h2>
88
88
<h2id="title__about">About</h2>
89
89
90
90
<p>
91
-
Accessible, semantic markup patterns for HTML content. Uses the full <arel="external noopener" href="http://html5doctor.com/element-index/"><cite>HTML5 Doctor Element Index</cite></a>, minus the <code><command></code> and <code><menu></code> tags.
91
+
Accessible, semantic markup patterns for HTML content. Uses the full <arel="external noopener" href="http://html5doctor.com/element-index/"><cite>HTML5 Doctor Element Index</cite></a>, minus the <codetranslate="no"><command></code> and <codetranslate="no"><menu></code> tags.
92
92
</p>
93
93
<p>
94
94
Reference <arel="external noopener" href="http://alistairduggin.co.uk/">Alistair Duggin</a>'s <arel="external noopener" href="http://aduggin.github.io/accessibility-fails/"><cite>Accessibility Fails</cite></a> for common markup pattern accessibility mistakes, and <arel="external noopener" href="http://pauljadam.com/">Paul J. Adam</a>'s <arel="external noopener" href="http://pauljadam.com/demos/landmarks.html"><cite>WAI-ARIA Landmarks Site Navigation Structure Demo</cite></a> for semantic, accessible page landmarks.
@@ -137,7 +137,7 @@ <h2>Title</h2>
137
137
138
138
<h2>Notes:</h2>
139
139
<p>
140
-
<small>Ensure that headings create a logical order. Apply <abbr="Cascading Style Sheets">CSS</abbr> classes to control visual presentation (e.g. <code><h2 class="type-size-medium color-blue-dark">Our services</h2></code> ).</small>
140
+
<small>Ensure that headings create a logical order. Apply <abbr="Cascading Style Sheets">CSS</abbr> classes to control visual presentation (e.g. <codetranslate="no"><h2 class="type-size-medium color-blue-dark">Our services</h2></code> ).</small>
<small><code><mark></code>, <code><ins></code>, <code><del></code>, and <code><s></code> elements are not announced by screen readers. Consider <arel="external noopener" href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">using CSS to indicate their presence</a>.</small>
171
+
<small><codetranslate="no"><mark></code>, <codetranslate="no"><ins></code>, <codetranslate="no"><del></code>, and <codetranslate="no"><s></code> elements are not announced by screen readers. Consider <arel="external noopener" href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">using CSS to indicate their presence</a>.</small>
172
172
</li>
173
173
<li>
174
-
<small>Use the <code>translate</code> attribute to control <arel="external noopener" href="https://html.spec.whatwg.org/multipage/dom.html#the-translate-attribute">automatic translation by the browser</a>.</small>
174
+
<small>Use the <codetranslate="no">translate</code> attribute to control <arel="external noopener" href="https://html.spec.whatwg.org/multipage/dom.html#the-translate-attribute">automatic translation by the browser</a>.</small>
175
175
</li>
176
176
</ul>
177
177
</div><!-- End of #subsection__content -->
@@ -276,13 +276,13 @@ <h3>Definition List</h3>
276
276
</div><!-- End of #subsection__lists -->
277
277
<divid="subsection__code" aria-labelledby="subtitle__code"><!-- Start of #subsection__code -->
-rw-r--r-- 1 eric staff 58601 Mar 24 11:50 index.html
300
300
</pre>
301
301
</samp>
302
+
303
+
<h4>Notes:</h4>
304
+
<p>
305
+
<small>Apply <codetranslate="no">translate="no"</code> to markup that contains code examples to prevent keywords from being automatically translated.</small>
306
+
</p>
307
+
302
308
</div><!-- End of #subsection__code -->
303
309
<divid="subsection__symbols" aria-labelledby="subtitle__symbols"><!-- Start of #subsection__symbols -->
<small>Certain screen readers will not <arel="external noopener" href="http://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/">read certain symbols out loud</a>. Use <code>role="definition"</code> in conjunction with <code>aria-label</code> to ensure the symbol is read.</small>
328
+
<small>Certain screen readers will not <arel="external noopener" href="http://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/">read certain symbols out loud</a>. Use <codetranslate="no">role="definition"</code> in conjunction with <codetranslate="no">aria-label</code> to ensure the symbol is read.</small>
<small>Certain screen readers will not <arel="external noopener" href="http://tink.uk/accessible-emoji/">expose emoji as images in the accessibility treee</a>. Use <code>role="img"</code> in conjunction with <code>aria-label</code> to ensure the symbol is read.</small>
344
+
<small>Certain screen readers will not <arel="external noopener" href="http://tink.uk/accessible-emoji/">expose emoji as images in the accessibility treee</a>. Use <codetranslate="no">role="img"</code> in conjunction with <codetranslate="no">aria-label</code> to ensure the symbol is read.</small>
<small>Use <code>id</code> and <code>header</code> attributes for tables with complicated markup (colspans, row headers, etc.).</small>
443
+
<small>Use <codetranslate="no">id</code> and <codetranslate="no">header</code> attributes for tables with complicated markup (colspans, row headers, etc.).</small>
438
444
</p>
439
445
440
446
</section><!-- End of #section__tables -->
@@ -452,7 +458,7 @@ <h3 id="subsection__details">Details</h3><!-- Start of #subsection__details -->
452
458
453
459
<h4>Notes:</h4>
454
460
<p>
455
-
<small>The <code>details</code> element is currently not supported by Microsoft Edge or Internet Explorer. These browsers will <arel="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>
461
+
<small>The <codetranslate="no">details</code> element is currently not supported by Microsoft Edge or Internet Explorer. These browsers will <arel="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 <codetranslate="no">open</code> attribute was applied.</small>
456
462
</p><!-- End of #subsection__details -->
457
463
458
464
<h3id="subsection__details">Dialog</h3><!-- Start of #subsection__details -->
@@ -465,7 +471,7 @@ <h3 id="subsection__details">Dialog</h3><!-- Start of #subsection__details -->
465
471
466
472
<h4>Notes:</h4>
467
473
<p>
468
-
<small>The <code>dialog</code>'s interactivity needs to be controlled with JavaScript.</small>
474
+
<small>The <codetranslate="no">dialog</code>'s interactivity needs to be controlled with JavaScript.</small>
469
475
</p><!-- End of #subsection__details -->
470
476
</section><!-- End of #section__interactive -->
471
477
@@ -515,13 +521,13 @@ <h3 id="subsection__inline-svg">Inline SVG</h3><!-- Start of #subsection__inline
515
521
<h3>Notes:</h3>
516
522
<ul>
517
523
<li>
518
-
<small>Be sure to provide values for the <code>height</code> and <code>width</code> attributes so <abbr>SVGs</abbr> won't expand to fill the page if styles don't load.</small>
524
+
<small>Be sure to provide values for the <codetranslate="no">height</code> and <codetranslate="no">width</code> attributes so <abbr>SVGs</abbr> won't expand to fill the page if styles don't load.</small>
519
525
</li>
520
526
<li>
521
527
<small>Different implementations of <abbr>SVG</abbr> have <arel="external noopener" href="https://css-tricks.com/accessible-svgs/">different approaches for being made accessible</a>.</small>
522
528
</li>
523
529
<li>
524
-
<small>Add whitespace around the <code>use</code> element in a <abbr>SVG</abbr> icon system to <arel="external noopener" href="http://simplyaccessible.com/article/7-solutions-svgs/#acc-heading-5">prevent a focus bug with Safari 10</a>.</small>
530
+
<small>Add whitespace around the <codetranslate="no">use</code> element in a <abbr>SVG</abbr> icon system to <arel="external noopener" href="http://simplyaccessible.com/article/7-solutions-svgs/#acc-heading-5">prevent a focus bug with Safari 10</a>.</small>
525
531
</li>
526
532
</ul>
527
533
@@ -571,7 +577,7 @@ <h3 id="subsection__audio">Audio</h3><!-- Start of #subsection__audio -->
571
577
label="English"
572
578
srclang="en"
573
579
kind="captions" />
574
-
Your browser does not support the <code><audio></code> element.
580
+
Your browser does not support the <codetranslate="no"><audio></code> element.
575
581
Please <arel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <adownloadhref="http://www.noiseaddicts.com/samples_1w72b820/4353.mp3">download a file</a> for offline listening.
576
582
</audio><!-- End of #subsection__audio -->
577
583
@@ -593,13 +599,13 @@ <h3 id="subsection__video">Video</h3><!-- Start of #subsection__video -->
593
599
label="English"
594
600
srclang="en"
595
601
kind="captions" />
596
-
Your browser does not support the <code><video></code> element.
602
+
Your browser does not support the <codetranslate="no"><video></code> element.
597
603
Please <arel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <adownloadhref="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4">download a file</a> for offline viewing.
598
604
</video><!-- End of #subsection__video -->
599
605
600
606
<h3>Notes:</h3>
601
607
<p>
602
-
<small>Accessibility errors concerning the video's missing audio description should go away once the <code><track></code>'s source is linked to a valid caption file.</small>
608
+
<small>Accessibility errors concerning the video's missing audio description should go away once the <codetranslate="no"><track></code>'s source is linked to a valid caption file.</small>
603
609
</p>
604
610
605
611
<h3id="subsection__object">Object</h3><!-- Start of #subsection__object -->
@@ -624,7 +630,7 @@ <h3 id="subsection__object">Object</h3><!-- Start of #subsection__object -->
624
630
width="640"
625
631
height="390">
626
632
</embed>
627
-
Your browser does not support the <code><object></code> element.
633
+
Your browser does not support the <codetranslate="no"><object></code> element.
628
634
Please <arel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <arel="external noopener" href="https://www.youtube.com/watch?v=pDHzK3Xe7Yw">view the video on YouTube</a>.
629
635
</object><!-- End of #subsection__object -->
630
636
@@ -633,13 +639,13 @@ <h3 id="subsection__canvas">Canvas</h3><!-- Start of #subsection__canvas -->
633
639
id="myCanvas"
634
640
width="400"
635
641
height="400">
636
-
Your browser does not support the <code><canvas></code> element.
642
+
Your browser does not support the <codetranslate="no"><canvas></code> element.
637
643
Please <arel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a>.
638
644
</canvas
639
645
640
646
<h3>Notes:</h3>
641
647
<p>
642
-
<small>Add <code>role="presentation"</code> to <code><track></code> to <arel="external noopener" href="https://twitter.com/stevefaulkner/status/1039470607719694336">mute epeated announcement of graphic role by some screen readers</a>.
648
+
<small>Add <codetranslate="no">role="presentation"</code> to <codetranslate="no"><track></code> to <arel="external noopener" href="https://twitter.com/stevefaulkner/status/1039470607719694336">mute epeated announcement of graphic role by some screen readers</a>.
<small>Add <code>type="button"</code> to <code><button></code> elements placed outside of forms to prevent some browsers from attempting to submit form data.</small>
1083
+
<small>Add <codetranslate="no">type="button"</code> to <codetranslate="no"><button></code> elements placed outside of forms to prevent some browsers from attempting to submit form data.</small>
1078
1084
</li>
1079
1085
<li>
1080
-
<small>Add <code>pointer-events: none;</code> to <arel="external noopener" href="https://twitter.com/stowball/status/857707052545613824">inline SVG icons placed in buttons</a>.</small>
1086
+
<small>Add <codetranslate="no">pointer-events: none;</code> to <arel="external noopener" href="https://twitter.com/stowball/status/857707052545613824">inline SVG icons placed in buttons</a>.</small>
1081
1087
</li>
1082
1088
<li>
1083
-
<small>Add <code>focusable="false"</code> to SVG inside of a focusable element (links, buttons, etc.) to prevent <arel="external noopener" href="https://simplyaccessible.com/article/7-solutions-svgs#acc-heading-4">a bug with Internet Explorer</a>.</small>
1089
+
<small>Add <codetranslate="no">focusable="false"</code> to SVG inside of a focusable element (links, buttons, etc.) to prevent <arel="external noopener" href="https://simplyaccessible.com/article/7-solutions-svgs#acc-heading-4">a bug with Internet Explorer</a>.</small>
1084
1090
</li>
1085
1091
<li>
1086
-
<small>Use <code>tabindex="0"</code> in conjunction with <code>role="button"</code> to ensure that the text button is focusable. Use <code>cursor: pointer;</code> in the CSS to communicate that it is interactable. Learn more about <arel="external noopener" href="https://css-tricks.com/use-button-element/"><cite>When To Use The Button Element</cite></a>.</small>
1092
+
<small>Use <codetranslate="no">tabindex="0"</code> in conjunction with <codetranslate="no">role="button"</code> to ensure that the text button is focusable. Use <codetranslate="no">cursor: pointer;</code> in the CSS to communicate that it is interactable. Learn more about <arel="external noopener" href="https://css-tricks.com/use-button-element/"><cite>When To Use The Button Element</cite></a>.</small>
<small>Use <code>:hover</code>, <code>:focus</code>, and <code>:active</code> selectors to control the other button states. Learn more about <arel="external noopener" href="https://css-tricks.com/user-facing-state/">semantically managing state</a> and using <arel="external noopener" href="https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23#.b1p96hsrw"><cite>Buttons in Design Systems</cite></a>.</small>
1277
+
<small>Use <codetranslate="no">:hover</code>, <codetranslate="no">:focus</code>, and <codetranslate="no">:active</code> selectors to control the other button states. Learn more about <arel="external noopener" href="https://css-tricks.com/user-facing-state/">semantically managing state</a> and using <arel="external noopener" href="https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23#.b1p96hsrw"><cite>Buttons in Design Systems</cite></a>.</small>
1272
1278
</p>
1273
1279
</div><!-- End of #subsection__buttons -->
1274
1280
</fieldset><!-- End of #subsection__states-and-validation -->
0 commit comments