accessible-html-content-patterns

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>Accessible HTML Content Patterns</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body>  <aside id="section-project-link"> <a href="https://github.com/ericwbailey/accessible-html-content-patterns"> <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"> <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> <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> <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#000000"/> <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"/> <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"/> </svg> </a> </aside>   <nav id="section-table-of-contents" aria-labelledby="title-table-of-contents"> <h1>Accessible HTML Content Patterns</h1> <h2 id="title-table-of-contents">Table of Contents</h2> <ol> <li><a href="#section-about">About</a></li> <li><a href="#section-grouping">Grouping</a></li> <li><a href="#section-headings">Headings</a></li> <li><a href="#section-text-level">Text-level</a> <ol> <li><a href="#subsection-content">Content</a></li> <li><a href="#subsection-lists">Lists</a></li> <li><a href="#subsection-links">Links</a></li> <li><a href="#subsection-code">Code</a></li> <li><a href="#subsection-symbols">Symbols</a></li> <li><a href="#subsection-emoji">Emoji</a></li> </ol> </li> <li><a href="#section-tables">Tables</a></li> <li><a href="#section-interactive">Interactive</a> <ol> <li><a href="#subsection-details">Details</a></li> <li><a href="#subsection-dialog">Dialog</a></li> </ol> </li> <li><a href="#section-embedded">Embedded</a> <ol> <li><a href="#subsection-image">Image</a></li> <li><a href="#subsection-lazy-loaded-image">Lazy-loaded Image</a></li> <li><a href="#subsection-broken-image">Broken Image</a></li> <li><a href="#subsection-figure-with-caption">Figure with Caption</a></li> <li><a href="#subsection-inline-svg">Inline <abbr>SVG</abbr></a></li> <li><a href="#subsection-picture">Picture</a></li> <li><a href="#subsection-image-with-srcset-and-sizes">Image with Srcset and Sizes</a></li> <li><a href="#subsection-iframe">Iframe</a></li> <li><a href="#subsection-audio">Audio</a></li> <li><a href="#subsection-video">Video</a></li> <li><a href="#subsection-object">Object</a></li> <li><a href="#subsection-canvas">Canvas</a></li> </ol> </li> <li><a href="#section-forms">Forms</a> <ol> <li><a href="#subsection-text-input">Text Input</a></li> <li><a href="#subsection-non-text-input">Non-text Input</a></li> <li><a href="#subsection-select">Select</a></li> <li><a href="#subsection-checkboxes-and-radios">Checkboxes and Radio Buttons</a></li> <li><a href="#subsection-buttons">Buttons</a></li> <li><a href="#subsection-output">Output</a></li> <li><a href="#subsection-lockup">Lockup</a></li> <li><a href="#subsection-states-and-validation">States and Validation</a></li> <li><a href="#subsection-autocomplete">Autocomplete</a></li> </ol> </li> <li><a href="#section-credit">Credit</a></li> </ol> </nav>  <hr />  <aside id="section-about" aria-labelledby="title-about"> <h2 id="title-about">About</h2> <p> 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 translate="no"><command></code> and <code translate="no"><menu></code> tags. </p> <p> 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. </p> </aside>  <hr />  <main id="main" tabindex="-1">  <section id="section-grouping" aria-labelledby="title-grouping"> <h2 id="title-grouping">Grouping</h2> <address aria-labelledby="subsection-address"> <h3 id="subsection-address">Address</h3> <p><cite>Represents the contact information for its enclosing section. If it is a child of the body element, then it applies to the document as a whole.</cite></p> <p><a rel="external noopener" href="https://html5doctor.com/the-address-element/">HTML5 Doctor prognosis of <code translate="no"><address></code></a>.</p> </address> <article aria-labelledby="subsection-article"> <h3 id="subsection-article">Article</h3> <p><cite>Represents a section of a page that consists of a composition that forms an independent part of a document, page, or site.</cite></p> <p><a rel="external noopener" href="https://html5doctor.com/the-article-element/">HTML5 Doctor prognosis of <code translate="no"><article></code></a>.</p> </article> <aside aria-labelledby="subsection-aside"> <h3 id="subsection-aside">Aside</h3> <p><cite>Represents a section of a page consisting of content that is tangentially related to the content around the <code translate="no"><aside></code> element, and which could be considered separate from that content.</cite></p> <p><a rel="external noopener" href="https://html5doctor.com/aside-revisited/">HTML5 Doctor prognosis of <code translate="no"><aside></code></a>.</p> </aside> <footer aria-labelledby="subsection-footer"> <h3 id="subsection-footer">Footer</h3> <p><cite>Represents the “footer” of a document or section of a document. The footer element typically contains metadata about its enclosing section, such as who wrote it, links to related documents, copyright data, etc.</cite></p> <p><a rel="external noopener" href="https://html5doctor.com/the-footer-element-update/">HTML5 Doctor prognosis of <code translate="no"><footer></code></a>.</p> </footer> <form aria-labelledby="subsection-form"> <h3 id="subsection-form">Form</h3> <p><cite>The “form” element represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.</cite></p> </form> <header aria-labelledby="subsection-header"> <h3 id="subsection-header">Header</h3> <p><cite>Represents the “header” of a document or section of a document. The header element is typically used to group a set of <code translate="no">h1</code>–<code translate="no">h6</code> elements to mark up a page's title with its subtitle or tagline.</cite></p> <p><a rel="external noopener" href="https://html5doctor.com/the-header-element/">HTML5 Doctor prognosis of <code translate="no"><header></code></a>.</p> </header> <nav aria-labelledby="subsection-nav"> <h3 id="subsection-nav">Nav</h3> <p><cite>Represents navigation for a document. The <code translate="no"><nav></code> element is a section containing links to other documents or to parts within the current document.</cite></p> <p><a rel="external noopener" href="https://html5doctor.com/nav-element/">HTML5 Doctor prognosis of <code translate="no"><nav></code></a>.</p> </nav> <search aria-labelledby="subsection-search"> <h3 id="subsection-search">Search</h3> <p><cite>A region that contains a collection of items and objects that, as a whole, combine to create a search facility.</cite></p> </search> <section aria-labelledby="subsection-section"> <h3 id="subsection-section">Section</h3> <p><cite>Represents a generic document or application section.</cite></p> <p><a rel="external noopener" href="https://html5doctor.com/the-section-element/">HTML5 Doctor prognosis of <code translate="no"><section></code></a>.</p> </section> <h2 id="notes-sections">Notes:</h2> <ul> <li><small><code translate="no"><body></code> is intentionally left out, as it can only be declared once per document.</small></li> <li><small><code translate="no"><main></code> is also intentionally left out, as <a rel="external noopener" href="https://adrianroselli.com/2015/09/use-only-one-main-on-a-page.html">best practice is to only declare it once per document</a>.</small></li> <li><small><code translate="no">aria-label</code> and <code translate="no">aria-labelledby</code> can be used to disambiguate landmarks when more than one is present. You may not need to do this <a rel="external noopener" href="https://adrianroselli.com/2024/06/maybe-dont-name-that-landmark.html">if only one landmark is present</a>.</small></li> <li><small><code translate="no"><search></code>’s use may <a rel="external noopener" href="https://www.scottohara.me/blog/2023/03/24/search-element.html">require testing for support</a>.</small></li> </ul> </section> <hr />  <section id="section-headings" aria-labelledby="title-headings"> <h2 id="title-headings">Headings</h2> <h1>First Header h1</h1> <p> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. </p> <h2>Second header h2</h2> <p> "What's happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. </p> <h3>Third header h3</h3> <p> Gregor then turned to look out the window at the dull weather. Drops of rain could be heard hitting the pane, which made him feel quite sad. "How about if I sleep a little bit longer and forget all this nonsense", he thought, but that was something he was unable to do because he was used to sleeping on his right, and in his present state couldn't get into that position. However hard he threw himself onto his right, he always rolled back to where he was. He must have tried it a hundred times, shut his eyes so that he wouldn't have to look at the floundering legs, and only stopped when he began to feel a mild, dull pain there that he had never felt before. </p> <h4>Fourth header h4</h4> <p> "Oh, God", he thought, "what a strenuous career it is that I've chosen! Travelling day in and day out. Doing business like this takes much more effort than doing your own business at home, and on top of that there's the curse of travelling, worries about making train connections, bad and irregular food, contact with different people all the time so that you can never get to know anyone or become friendly with them. It can all go to Hell!" He felt a slight itch up on his belly; pushed himself slowly up on his back towards the headboard so that he could lift his head better; found where the itch was, and saw that it was covered with lots of little white spots which he didn't know what to make of; and when he tried to feel the place with one of his legs he drew it quickly back because as soon as he touched it he was overcome by a cold shudder. </p> <h5>Fifth header h5</h5> <p> He slid back into his former position. "Getting up early all the time", he thought, "it makes you stupid. You've got to get enough sleep. Other travelling salesmen live a life of luxury. For instance, whenever I go back to the guest house during the morning to copy out the contract, these gentlemen are always still sitting there eating their breakfasts. I ought to just try that with my boss; I'd get kicked out on the spot. But who knows, maybe that would be the best thing for me. </p> <h6>Sixth header h6</h6> <p> If I didn't have my parents to think about I'd have given in my notice a long time ago, I'd have gone up to the boss and told him just what I think, tell him everything I would, let him know just what I feel. He'd fall right off his desk! And it's a funny sort of business to be sitting up there at your desk, talking down at your subordinates from up there, especially when you have to go right up close because the boss is hard of hearing. Well, there's still some hope; once I've got the money together to pay off my parents' debt to him - another five or six years I suppose - that's definitely what I'll do. That's when I'll make the big change. First of all though, I've got to get up, my train leaves at five." </p> <h2 id="title-subtitles">Subtitles</h2> <h2> Title<br /> <span>Subtitle</span> </h2> <header> <h2>Title</h2> <p>Subtitle</p> </header> <header> <h2>Title</h2> <p role="doc-subtitle">Subtitle</p> </header> <h2 id="notes-headings">Notes:</h2> <ul> <li><small>Ensure that headings create a logical order. Apply <abbr="Cascading Style Sheets">CSS</abbr> classes to control visual presentation (e.g. <code translate="no"><h2 class="type-size-medium color-blue-dark">Our services</h2></code> ).</small></li> <li><small><code translate="no">role="doc-subtitle"</code> is used to alternate title for the work, but still has limited support.</small></li> <li><small>Use of <code translate="no"><hgroup></code></small> is considered an antipattern, as it has <a rel="external noopener" href="https://www.tpgi.com/subheadings-subtitles-alternative-titles-and-taglines-in-html/">low to no, or unpredictable support with assistive technology</a>.</li> </ul> </section> <hr />  <section id="section-text-level" aria-labelledby="title-text-level"> <h2 id="title-text-level">Text-level</h2>  <div id="subsection-content" aria-labelledby="subtitle-content"> <h3 id="subtitle-content">Content</h3> <p> And he <em>looked</em> over at <strong>the alarm clock</strong>, ticking on the <i>chest</i> of <b>drawers</b>. "God in <u>Heaven</u>!" he <s>thought</s>. It was <small>half past six</small> and the <abbr>hands</abbr> were <q>quietly moving forwards</q>, it was even later <cite>than half past</cite>, more <dfn>like quarter to seven</dfn>. Had the <sub>alarm</sub> clock not <sup>rung</sup>? He <time>could</time> see from the <code>bed that it had been set</code> for four <kbd>o'clock</kbd> as it <samp>should</samp> have <var>been</var>; it <mark>certainly</mark> must have rung. </p> <blockquote> <p> "Yes, mother, yes, thank-you, I'm getting up now." </p> <footer> Gregor Samsa </footer> </blockquote> <p> Yes, but was it <bdi>possible</bdi> to <bdo>quietly</bdo> sleep <ruby>through</ruby> that <rt>furniture-rattling</rt> noise? <rp>True</rp>, he <span>had not slept</span> peacefully, but <del>probably</del> all the more <ins>deeply</ins> because of that. What should he do now? The next train went at seven; if he were to catch that he would have to rush like mad and the collection of samples was still not packed, and he did not at all feel particularly fresh and lively. </p> <p> The French phrase, <cite lang="fr" translate="no">C'est le ton qui fait la chanson</cite>, might apply here. </p> <h4 id="notes-ins-del">Notes:</h4> <ul> <li> <small><code translate="no"><mark></code>, <code translate="no"><ins></code>, <code translate="no"><del></code>, and <code translate="no"><s></code> elements are not announced by screen readers. Consider <a rel="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> </li> <li> <small>Use the <code translate="no">translate</code> attribute to control <a rel="external noopener" href="https://html.spec.whatwg.org/multipage/dom.html#the-translate-attribute">automatic translation by the browser</a>.</small> </li> </ul> </div>   <div id="subsection-links" aria-labelledby="subtitle-links"> <h3 id="subtitle-links">Links</h3> <p> And even if he did catch the <a href="#">train</a> he would not avoid his boss's anger as the <a href="#" rel="external noopener">office assistant</a> would have been there to see the five o'clock train go, he would have put in his report about <a href="https://twitter.com/twitter" rel="external noopener">Gregor</a>'s not being there a long time ago. The office assistant was the boss's man, spineless, and with no understanding. What about if he reported sick? But that would be <a href="#">extremely strained and suspicious as in fifteen years of service Gregor had never once yet been ill</a>. His boss would certainly come round with the doctor from the medical insurance company, accuse his parents of having a lazy son, and accept the doctor's recommendation not to make any claim as the doctor believed that no-one was ever ill but that many were workshy. And what's more, would he have been entirely wrong in this case? Gregor did in fact, apart from excessive sleepiness after sleeping for so long, feel completely well and even felt much hungrier than usual. </p> <a href="#"> <h2>Block-level link title</h2> <p> He was still hurriedly thinking all this through, unable to decide to get out of the bed, when the clock struck quarter to seven. There was a cautious knock at the door near his head. "Gregor", somebody called - it was his mother - "it's quarter to seven. Didn't you want to go somewhere? </p> </a> <h4 id="notes-lists">Notes:</h4> <p> <small><a href="https://werd.io/2024/browsers-imply-noopener-for-links-in-new-tab" rel="external noopener">Browsers will imply <code translate="no">noopener</code></a> for links that open in a new window/tab.</small> </p> </div>   <div id="subsection-lists" aria-labelledby="subtitle-lists"> <h3 id="subtitle-lists">Lists</h3> <h4>Unordered List</h4> <ul> <li>Apple</li> <li>Apricot</li> <li>Avocado <ul> <li>Fuerte</li> <li>Gwen</li> <li>Hass</li> <li>Pinkerton</li> <li>Reed</li> </ul> </li> <li>Banana <ol> <li>Cavendish</li> <li>Red Dacca</li> <li>Gros Michel</li> <li>East African Highland</li> <li>Bodles Altafort</li> </ol> </li> <li>Bilberry</li> <li>Blackberry</li> <li>Blackcurrant</li> </ul> <h5 id="notes-lists">Notes:</h5> <p> <small>VoiceOver will not <a rel="external noopener" href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">announce unordered lists properly when either the list-style-type is set to none or display is set to inline</a>.</small> </p> <h4>Ordered List</h4> <ol> <li>Alabama</li> <li>Alaska</li> <li>Arizona <ul> <li>Phoenix</li> <li>Tucson</li> <li>Mesa</li> <li>Chandler</li> <li>Glendale</li> </ul> </li> <li>Arkansas</li> <li>California</li> <li>Colorado</li> <li>Connecticut <ol> <li>Bridgeport</li> <li>New Haven</li> <li>Hartford</li> <li>Stamford</li> <li>Waterbury</li> </ol> </li> <li>Delaware </li> <li>Florida</li> <li>Georgia</li> </ol> <h4>Definition List</h4> <dl> <dt>Alternate Character/Glyph</dt> <dd> A non-standard (sometimes decorative) variation of a character that comes as an extra option with a font file. </dd> <dt>Baseline</dt> <dd> The imaginary line on which most letters and other characters sit. </dd> <dt>Character</dt> <dd> An individual symbol of the full character set that makes up a typeface; may take the form of a letter, number, punctuation mark, etc. </dd> <dt>Serif</dt> <dd> A short line or stroke attached to or extending from the open ends of a letterform; also refers to the general category of typefaces that have been designed with this feature. </dd> <dt>Sans-Serif</dt> <dd> Literally “without line”; the general category of typefaces (or an individual typeface) designed without serifs. </dd> </dl> </div>   <div id="subsection-code" aria-labelledby="subtitle-code"> <h3 id="subtitle-code">Code</h3> <code translate="no"> <pre> sudo ipfw pipe 1 config bw 256KByte/s sudo ipfw add 1 pipe 1 src-port 3000 </pre> </code> <samp translate="no"> <pre> ~/Sites/boilerplate ❦ ☢ ☭ ☂ ♞ $ <kbd>ls -gto</kbd> total 88 -rw-r--r-- 1 eric staff 6148 Mar 24 11:50 .DS_Store drwxr-xr-x 9 eric staff 306 Mar 24 13:36 .git/ -rw-rw-r-- 1 eric staff 862 Oct 13 14:38 .gitignore -rw-r--r-- 1 eric staff 472 Feb 22 20:58 .htmlhintrc -rw-r--r-- 1 eric staff 1068 Mar 24 10:57 LICENSE -rw-r--r-- 1 eric staff 4865 Mar 24 13:34 README.md -rw-r--r-- 1 eric staff 58601 Mar 24 11:50 index.html </pre> </samp> <h4 id="notes-code">Notes:</h4> <p> <small>Apply <code translate="no">translate="no"</code> to markup that contains code examples to prevent keywords from being automatically translated.</small> </p> </div>   <div id="subsection-symbols" aria-labelledby="subtitle-symbols"> <h3 id="subtitle-symbols">Symbols</h3> <ul> <li>+</li> <li>−</li> <li>±</li> <li>÷</li> <li>×</li> <li><</li> <li>≤</li> <li>></li> <li>≥</li> <li>=</li> <li>≈</li> <li>≠</li> </ul> <h4 id="notes-symbols">Notes:</h4> <p> <small>Certain screen readers will not <a rel="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 translate="no">role="definition"</code> in conjunction with <code translate="no">aria-label</code> to ensure the symbol is read. Use this technique with caution and discretion, as it will affect how the symbol is rendered by things like Braille readers.</small> </p> </div>   <div id="subsection-emoji" aria-labelledby="subtitle-emoji"> <h3 id="subtitle-emoji">Emoji</h3> <ul> <li>😺</li> <li>🎩</li> <li>⛄️</li> <li>🍺</li> <li><span role="img" aria-label="A butt.">🍑</span></li> </ul> <h4 id="notes-emoji">Notes:</h4> <ul> <li> <small>Certain screen readers will not <a rel="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 translate="no">role="definition"</code> in conjunction with <code translate="no">aria-label</code> to ensure the symbol is read. Use this technique with caution and discretion, as it will affect how the symbol is rendered by things like Braille readers.</small> </li> <li> <small>Use <code translate="no">role="img"</code> in conjunction with <code translate="no">aria-label</code> to <a rel="external noopener" href="https://tink.uk/accessible-emoji/">expose an emoji as an image in the accessibility tree</a>, with the label providing author intent.</small> </li> </ul> </div>  </section>  <hr />  <section id="section-tables" aria-labelledby="title-tables"> <h2 id="title-tables">Tables</h2> <table> <caption> Academy Awards for Best Picture <span class="table__summary">Descriptions of the film title, production company(s), and producers for the years 1980-1989.</span> </caption> <colgroup> <col /> <col /> <col span="2" /> </colgroup> <thead> <tr> <th scope="col">Film</th> <th scope="col">Year</th> <th scope="col">Production Company(s)</th> <th scope="col">Producer(s)</th> </tr> </thead> <tbody> <tr> <th scope="row">Ordinary People</th> <td>1980</td> <td>Paramount</td> <td>Ronald L. Schwary</td> </tr> <tr> <th scope="row">Chariots of Fire</th> <td>1981</td> <td>Enigma Film Productions</td> <td>David Puttnam</td> </tr> <tr> <th scope="row">Gandhi</th> <td>1982</td> <td>Columbia</td> <td>Richard Attenborough</td> </tr> <tr> <th scope="row">Terms of Endearment</th> <td>1983</td> <td>Paramount</td> <td>James L. Brooks</td> </tr> <tr> <th scope="row">Amadeus</th> <td>1984</td> <td>Orion</td> <td>Saul Zaentz</td> </tr> <tr> <th scope="row">Out of Africa</th> <td>1985</td> <td>Universal, Mirage Enterprises</td> <td>Sydney Pollack</td> </tr> <tr> <th scope="row">Platoon</th> <td>1986</td> <td>Orion, Hemdale</td> <td>Arnold Kopelson</td> </tr> <tr> <th scope="row">The Last Emperor</th> <td>1987</td> <td>Recorded Picture Company, Yanco Films, TAO Films, AAA, Soprofilms</td> <td>Jeremy Thomas</td> </tr> <tr> <th scope="row">Rain Man</th> <td>1988</td> <td>United Artists</td> <td>Mark Johnson</td> </tr> <tr> <th scope="row">Driving Miss Daisy</th> <td>1989</td> <td>Warner Bros.</td> <td>Richard D. Zanuck, Lili Fini Zanuck</td> </tr> </tbody> <tfoot> <tr> <td colspan="4">For the first six ceremonies, the eligibility period spanned two calendar years.</td> </tr> </tfoot> </table> <h3 id="notes-tables">Notes:</h3> <p> <small>Use <code translate="no">id</code> and <code translate="no">header</code> attributes for tables with complicated markup (colspans, row headers, etc.).</small> </p> </section>  <hr />  <section id="section-interactive" aria-labelledby="title-interactive"> <h2 id="title-interactive">Interactive</h2>  <h3 id="subsection-details">Details</h3> <details> <summary>What payment options do you accept?</summary> <p>We accept cash, Visa, American Express, money orders, and personal checks.</p> </details> <h4 id="notes-details">Notes:</h4> <ul> <li><small>The <code translate="no">details</code> element is currently not supported by Internet Explorer. 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 translate="no">open</code> attribute was applied.</small></li> <li><small>Declaring <a href="https://developer.chrome.com/docs/css-ui/hidden-until-found" rel="external noopener"><code translate="no">hidden=until-found</code> on the parent hidden element to make it discoverable</a> by browser search.</small></li> </ul>   <h3 id="subsection-dialog">Dialog</h3> <dialog open id="dialog"> <h2>This is a dialog title</h2> <p>This is dialog content.</p> <button type="button"> Close </button> </dialog> <h4 id="notes-dialog">Notes:</h4> <p> <small>The <code translate="no">dialog</code>'s interactivity needs to be controlled with JavaScript.</small> </p>  </section>  <hr />  <section id="section-embedded" aria-labelledby="title-embedded"> <h2 id="title-embedded">Embedded</h2>  <h3 id="subsection-image">Image</h3> <img src="https://dummyimage.com/600x400?text==Image+Example" alt="Image Example" />   <h3 id="subsection-lazy-loaded-image">Lazy-loaded Image</h3> <img src="http://dummyimage.com/500x500?text=Lazy-Loaded+Image+Example" loading="lazy" decoding="async" width="500" height="500" alt="Lazy-loaded Image" />   <h3 id="subsection-broken-image">Broken Image</h3> <img src="nope" alt="Broken Image" />   <h3 id="subsection-figure-with-caption">Figure with Caption</h3> <figure> <img src="http://dummyimage.com/400x250?text=Figure+Example" alt="Figure Example" /> <figcaption> An example figure caption. </figcaption> </figure>   <h3 id="subsection-inline-svg">Inline SVG</h3> <figure> <svg aria-labelledby="svg-title svg-description" role="img" focusable="false" height="162" width="168" viewBox="0 0 28 27" xmlns="http://www.w3.org/2000/svg"> <title id="svg-title">A crab</title> <desc id="svg-description">A solid black illustration of a crab.</desc> <path fill="#000000" d="M28.044,16.791 C26.087,18.748 23.728,18.633 22.257,18.285 C22.405,17.861 22.53,17.441 22.632,17.033 C22.798,17.043 22.961,17.058 23.139,17.058 C25.093,17.058 27.603,16.308 28.96,12.913 C29.075,12.626 28.935,12.3 28.647,12.186 C28.362,12.071 28.034,12.209 27.919,12.497 C26.723,15.487 24.497,16.018 22.852,15.946 C22.905,15.626 22.946,15.317 22.968,15.032 C23.967,14.782 29.374,11.151 28.999,5.999 C28.773,2.892 25.811,-0.282 22.245,0.753 C22.561,0.915 25.731,2.304 24.933,6.958 C24.933,6.958 21.65,5.677 21.27,2.999 C21.27,2.999 18.375,6.958 24.19,11.329 C24.19,11.329 22.142,13.261 19.046,11.12 C18.826,10.911 18.598,10.718 18.36,10.54 L18.36,9 L17.24,9 L17.24,9.869 C16.538,9.541 15.786,10.08 15,10.08 C14.214,10.08 13.462,9.541 12.761,9.869 L12.761,9 L11.641,9 L11.641,10.541 C11.402,10.719 11.173,10.912 10.953,11.121 C7.858,13.262 5.81,11.33 5.81,11.33 C11.624,6.959 8.729,3 8.729,3 C8.349,5.678 5.067,6.959 5.067,6.959 C4.267,2.305 7.437,0.916 7.753,0.754 C4.187,-0.281 1.226,2.893 0.999,6 C0.624,11.152 6.031,14.783 7.03,15.033 C7.053,15.318 7.094,15.627 7.146,15.947 C5.501,16.019 3.275,15.488 2.079,12.498 C1.965,12.211 1.637,12.072 1.351,12.187 C1.064,12.3 0.924,12.626 1.038,12.914 C2.395,16.309 4.906,17.059 6.859,17.059 C7.037,17.059 7.2,17.043 7.366,17.034 C7.468,17.442 7.594,17.862 7.741,18.286 C6.27,18.634 3.911,18.749 1.954,16.792 C1.735,16.573 1.381,16.573 1.162,16.792 C0.943,17.011 0.943,17.364 1.162,17.583 C2.721,19.142 4.511,19.587 6.043,19.587 C6.845,19.587 7.561,19.462 8.151,19.316 C8.233,19.5 8.317,19.681 8.409,19.861 C6.471,20.74 4.358,22.316 4.358,25.029 C4.358,25.338 4.609,25.588 4.917,25.588 C5.227,25.588 5.478,25.338 5.478,25.029 C5.478,22.9 7.272,21.609 8.938,20.863 C9.049,21.045 9.182,21.213 9.332,21.369 C9.434,21.506 9.543,21.639 9.652,21.769 C8.879,22.156 8.108,22.73 7.851,23.576 C7.572,24.502 7.958,25.502 9.001,26.545 C9.11,26.654 9.254,26.709 9.397,26.709 C9.541,26.709 9.683,26.654 9.793,26.545 C10.012,26.326 10.012,25.971 9.793,25.752 C9.064,25.023 8.772,24.4 8.923,23.902 C9.09,23.345 9.783,22.918 10.465,22.629 C11.622,23.666 13.111,24.356 14.997,24.356 C16.883,24.356 18.372,23.667 19.53,22.629 C20.212,22.918 20.904,23.346 21.071,23.902 C21.222,24.4 20.929,25.023 20.201,25.752 C19.982,25.971 19.982,26.326 20.201,26.545 C20.31,26.654 20.454,26.709 20.596,26.709 C20.74,26.709 20.883,26.654 20.992,26.545 C22.036,25.502 22.423,24.502 22.142,23.576 C21.885,22.73 21.114,22.156 20.341,21.769 C20.45,21.638 20.56,21.505 20.661,21.369 C20.81,21.213 20.944,21.045 21.055,20.863 C22.722,21.609 24.515,22.9 24.515,25.029 C24.515,25.338 24.766,25.588 25.076,25.588 C25.386,25.588 25.636,25.338 25.636,25.029 C25.636,22.316 23.523,20.74 21.585,19.861 C21.677,19.681 21.762,19.5 21.843,19.316 C22.434,19.462 23.15,19.587 23.951,19.587 C25.484,19.587 27.273,19.142 28.832,17.583 C29.051,17.364 29.051,17.011 28.832,16.792 C28.617,16.572 28.263,16.572 28.044,16.791 Z" transform="translate(-1)" opacity=".9"/> </svg> <figcaption> <a rel="external noopener" href="https://thenounproject.com/search/?q=crab&i=583446">Crab by Hea Poh Lin</a> from the Noun Project </figcaption> </figure> <h3 id="notes-inline-svg">Notes:</h3> <ul> <li> <small>Use <code translate="no">decoding="async"</code> in conjunction with <code translate="no">loading="lazy"</code> for better performance for browsers that support it.</small> </li> <li> <small>Be sure to provide values for the <code translate="no">height</code> and <code translate="no">width</code> attributes so <abbr>SVGs</abbr> won't expand to fill the page if styles don't load.</small> </li> <li> <small>Different implementations of <abbr>SVG</abbr> have different approaches for being made accessible. Reference these articles by <a rel="external noopener" href="https://css-tricks.com/accessible-svgs/">Heather Migliorisi</a> and <a rel="external noopener" href="https://www.deque.com/blog/creating-accessible-svgs/">Carie Fisher</a>.</small></small> </li> <li> <small>Add whitespace around the <code translate="no">use</code> element in a <abbr>SVG</abbr> icon system to <a rel="external noopener" href="http://simplyaccessible.com/article/7-solutions-svgs/#acc-heading-5">prevent a focus bug with Safari 10</a>.</small> </li> </ul>   <h3 id="subsection-picture">Picture</h3> <picture> <source media="(min-width: 40em)" srcset="http://dummyimage.com/800x450/7ED321/ffffff/?text=1x+Source+w/Breakpoint+Example 1x, http://dummyimage.com/800x600/7ED321/ffffff/?text=2x+Source+w/Breakpoint+Example 2x" /> <source srcset="http://dummyimage.com/500x250/F5A623/ffffff/?text=1x+Source+Example 1x, http://dummyimage.com/500x250/F5A623/ffffff/?text=2x+Source+Example 2x" /> <img src="https://dummyimage.com/600x400?text==Img+Fallback" alt="Picture Element" /> </picture>   <h3 id="subsection-image-with-srcset-and-sizes">Image with Srcset and Sizes</h3> <img srcset="http://dummyimage.com/1024x768/7ED321/ffffff/?text=Large 1024w, http://dummyimage.com/1024x768/F5A623/ffffff/?text=Medium 640w, http://dummyimage.com/320x240/50E3C2/ffffff/?text=Small 320w" sizes="(min-width: 36em) 50vw, 100vw" src="https://dummyimage.com/600x400?text==Img+Fallback" alt="Image with Srcset and Sizes Example" />   <h3 id="subsection-iframe">Iframe</h3> <iframe src="about:blank" title="Example blank iframe" name="iframe"> </iframe> <h4 id="notes-iframe">Notes:</h4> <p> <small>Use the <code translate="no">allow="web-share"</code> declaration to <a rel="external noopener" href="https://www.webkit.org/blog/13708/allowing-web-share-on-third-party-sites/">enable sharing of <code translate="no"><iframe></code> content via the Web Share API</a> on third-party sites.</small> </p>   <h3 id="subsection-audio">Audio</h3> <audio controls> <source src="http://www.noiseaddicts.com/samples_1w72b820/4353.mp3" type="audio/mp3" /> <source src="http://www.noiseaddicts.com/samples_1w72b820/4353.ogg" type="audio/ogg" /> <source src="http://www.noiseaddicts.com/samples_1w72b820/4353.wav" type="audio/wav" /> <track src="http://www.noiseaddicts.com/samples_1w72b820/4353.wav/caption.en.vtt" label="English" srclang="en" kind="captions" /> Your browser does not support the <code translate="no"><audio></code> element. 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. </audio>   <h3 id="subsection-video">Video</h3> <video controls poster="http://dummyimage.com/854x480?text=Video+Poster"> <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4" /> <source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" /> <source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" /> <track src="https://archive.org/download/WebmVp8Vorbis/caption.en.vtt" label="English" srclang="en" kind="captions" /> Your browser does not support the <code translate="no"><video></code> element. Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a download href="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4">download a file</a> for offline viewing. </video> <h3 id="notes-video">Notes:</h3> <p> <small>Accessibility errors concerning the video's missing audio description should go away once the <code translate="no"><track></code>'s source is linked to a valid caption file.</small> </p>   <h3 id="subsection-object">Object</h3> <object> <param name="movie" value="http://www.youtube.com/v/pDHzK3Xe7Yw?fs=1&hl=en_GB"> </param> <param name="wmode" value="window"> </param> <param name="allowFullScreen" value="true"> </param> <param name="allowscriptaccess" value="always"> </param> <embed src="http://www.youtube.com/v/pDHzK3Xe7Yw?fs=1&hl=en_GB" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="390"> </embed> Your browser does not support the <code translate="no"><object></code> element. 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>. </object>   <h3 id="subsection-canvas">Canvas</h3> <canvas id="myCanvas" width="400" height="400"> Your browser does not support the <code translate="no"><canvas></code> element. Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a>. </canvas> <h3 id="notes-canvas">Notes:</h3> <p> <small>Add <code translate="no">role="presentation"</code> to <code translate="no"><track></code> to <a rel="external noopener" href="https://twitter.com/stevefaulkner/status/1039470607719694336">mute epeated announcement of graphic role by some screen readers</a>.</small> </p>  </section>  <hr />  <section id="section-forms" aria-labelledby="title-forms"> <h2 id="title-forms">Forms</h2> <form>  <fieldset id="subsection-text-input"> <legend> <h3 id="subtitle-text-input">Text Input</h3> </legend> <label for="input-text">Text</label> <input id="input-text" name="text" dir="auto" type="text" /> <label for="input-text-with-placeholder">Text with Placeholder</label> <input id="input-text-with-placeholder" name="placeholder" placeholder="Placeholder" dir="auto" type="text" /> <label for="input-email">Email</label> <input id="input-email" name="email" placeholder="name@example.com" autocapitalize="off" autocorrect="off" spellcheck="false" dir="auto" type="email" /> <label for="input-password">Password</label> <input id="input-password" name="password" autocapitalize="off" autocorrect="off" spellcheck="false" dir="auto" type="password" /> <label for="input-url">URL</label> <input id="input-url" name="url" autocapitalize="off" spellcheck="false" dir="auto" type="url" /> <label for="input-telephone">Telephone</label> <input id="input-telephone" name="telephone" autocorrect="off" autocomplete="tel" spellcheck="false" dir="auto" type="tel" /> <label for="input-number" >Number</label> <input id="input-number" type="text" inputmode="numeric" dir="auto" pattern="[0-9]*" /> <search> <label for="input-search">Search</label> <input id="input-search" name="search" spellcheck="false" dir="auto" type="search" /> </search> <label for="input-date">Date</label> <input id="input-date" name="date" type="date" /> <label for="input-datetime-local">Datetime-local</label> <input id="input-datetime-local" name="datetime-local" type="datetime-local" /> <label for="input-month">Month</label> <input id="input-month" name="month" type="month" /> <label for="input-time">Time</label> <input id="input-time" name="time" type="time" /> <label for="input-week">Week</label> <input id="input-week" name="week" type="week" /> <label for="input-datalist">Datalist</label> <input list="dog-breeds" id="input-datalist" name="datalist" dir="auto" type="text"> <datalist id="dog-breeds"> <option value="Beagles"></option> <option value="Boxers"></option> <option value="Bulldogs"></option> <option value="Dachshunds"></option> <option value="French Bulldogs"></option> <option value="German Shepherds"></option> <option value="German Shorthaired Pointers"></option> <option value="Golden Retrievers"></option> <option value="Labrador Retrievers"></option> <option value="Poodles"></option> <option value="Rottweilers"></option> <option value="Siberian Huskies"></option> <option value="Yorkshire Terriers"></option> </datalist> </input> <label for="input-textarea">Textarea</label> <textarea id="input-textarea" name="textarea" dir="auto"></textarea> <h4 id="notes-text-input">Notes:</h4> <ul> <li> <small>Add <code translate="no">dir="auto"</code> to <a rel="external noopener" href="https://mough.xyz/312/psa-add-dir-auto-to-your-inputs-and-textareas">inputs that accept text</a>.</small> </li> <li> <small>Avoid nesting <code translate="no">input</code> elements inside of <code translate="no">label</code> elements for better support for <a rel="external noopener" href="https://www.nuance.com/dragon.html">Dragon Speech Recognition</a>.</small> </li> <li> <small>Add <code translate="no">autocomplete="new-password"</code> to <code translate="no"><input></code> elements with a type of <code translate="no">password</code> to <a rel="external noopener" href="https://twitter.com/mmatuzo/status/1189041007117176832">make supporting browsers suggest secure passwords</a>.</small> </li> <li> <small><code translate="no"><input type="number"></code> has <a rel="external noopener" href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/">numerous issues with Dragon Naturally Speaking and NVDA</a>.</small> </li> <li> <small>Using <code translate="no"><input type="password"></code> needs to also have <code translate="no">spellcheck="false"</code> declared on it to <a rel="external noopener" href="https://www.otto-js.com/news/article/chrome-and-edge-enhanced-spellcheck-features-expose-pii-even-your-passwords">avoid a security risk</a>.</code></small> </li> <li> <small>Safari's password AutoFill feature can be <a rel="external noopener" href="https://developer.apple.com/documentation/security/password_autofill/customizing_password_autofill_rules">configured with custom password criteria</a>.</small> </li> <li> <small>Popular password managers can be disabled by adding <code translate="no">data-1p-ignore data-lpignore="true" data-form-type="other" data-bwignore</code> to <code translate="no"><input type="password"></code>. This will affect 1Password, Lastpass, Dashlane, and Bitwarden.</small> </li> <li> <small><code translate="no">maxlength</code>'s presence is not announced by screen readers.</small> </li> <li> <small>Use <code translate="no">handwriting="true"</code> to allow handwriting input, and <code translate="no">handwriting="false"</code> to disallow it.</small> </li> </ul> </fieldset>   <fieldset id="subsection-non-text-input"> <legend> <h3 id="subtitle-non-text-input">Non-text Input</h3> </legend> <label for="input-color">Color</label> <input id="input-color" name="color" type="color" /> <label for="input-file">File Input</label> <input id="input-file" name="file" type="file" /> <label for="input-range">Range Input</label> <input id="input-range" name="range" type="range" /> <h4 id="notes-non-text-input">Notes:</h4> <p> <small>Some pointers on <a rel="external noopener" href="https://css-tricks.com/sliding-nightmare-understanding-range-input/">styling the range input</a>.</small> </p> </fieldset>   <fieldset id="subsection-select"> <legend> <h3 id="subtitle-select">Select</h3> </legend> <label for="input-select" >Select</label> <select id="input-select" name="select"> <option value="corgis">Corgis</option> <option value="dachshunds">Dachshunds</option> <option value="shiba-inus">Shiba Inus</option> </select> <label for="input-select-with-optgroup">Select with Optgroup</label> <select id="input-select-with-optgroup" name="select-with-optgroup"> <optgroup label="Dog Breeds"> <option value="affenpinscher">Affenpinscher</option> <option value="afghan-hound">Afghan Hound</option> <option value="afghan-shepherd">Afghan Shepherd</option> <option value="aidi">Aidi</option> </optgroup> <optgroup label="Cat Breeds"> <option value="abyssinian">Abyssinian</option> <option value="aegean">Aegean</option> <