├── LICENSE
├── README.md
└── html
    ├── abbreviation.md
    ├── accordion.md
    ├── address.md
    ├── breadcrumb.md
    ├── buttons.md
    ├── cli.md
    ├── contact.md
    ├── content-changes.md
    ├── conversations.md
    ├── cookies-banner.md
    ├── creative-work.md
    ├── credit-card.md
    ├── footnotes.md
    ├── form-fields.md
    ├── glosary.md
    ├── headers.md
    ├── hidden-elements.md
    ├── icon-link.md
    ├── language-switcher.md
    ├── license.md
    ├── list.md
    ├── menu.md
    ├── metadata.md
    ├── navigation.md
    ├── page.md
    ├── pagination.md
    ├── passwords-forms.md
    ├── payment-form.md
    ├── product-list.md
    ├── quotes.md
    ├── range-input.md
    ├── scalar-values.md
    ├── search.md
    ├── tables.md
    └── topbar.md


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Oscar Otero
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Semantic HTML
 2 | 
 3 | Collection of semantic and accessible HTML patterns:
 4 | 
 5 | - [Page](html/page.md). Minimum html code required for any webpage
 6 | - [Abbreviations and acronyms](html/abbreviation.md)
 7 | - [Accordion](html/accordion.md)
 8 | - [Address](html/address.md)
 9 | - [Breadcrumb](html/breadcrumb.md)
10 | - [Buttons](html/buttons.md)
11 | - [Command line interfaces](html/cli.md)
12 | - [Contact](html/contact.md)
13 | - [Content changes](html/content-changes.md)
14 | - [Conversations](html/conversations.md)
15 | - [Cookies banner](html/cookies-banner.md)
16 | - [Creative work](html/creative-work.md)
17 | - [Credit card form](html/credit-card.md)
18 | - [Footnotes](html/footnotes.md)
19 | - [Form fields](html/form-fields.md)
20 | - [Glosary](html/glosary.md)
21 | - [Headers](html/headers.md)
22 | - [Hidden elements](html/hidden-elements.md)
23 | - [Icon link & buttons](html/icon-link.md)
24 | - [Language switcher](html/language-switcher.md)
25 | - [License](html/license.md)
26 | - [List](html/list.md)
27 | - [Menu](html/menu.md)
28 | - [Metadata](html/metadata.md)
29 | - [Navigation](html/navigation.md)
30 | - [Payment form](html/payment-form.md)
31 | - [Pagination](html/pagination.md)
32 | - [Passwords in forms](html/passwords-forms.md)
33 | - [Product list](html/product-list.md)
34 | - [Quotes](html/quotes.md)
35 | - [Range input](html/range-input.md)
36 | - [Scalar values](html/scalar-values.md)
37 | - [Search](html/search.md)
38 | - [Tables](html/tables.md)
39 | - [Top bar](html/topbar.md)
40 | 
41 | ---
42 | 
43 | Useful links:
44 | 
45 | - https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
46 | - https://www.htmhell.dev/adventcalendar/2023/8/
47 | 
48 | ---
49 | 
50 | Contributions like issues or pull request are highly appreciated.
51 | 


--------------------------------------------------------------------------------
/html/abbreviation.md:
--------------------------------------------------------------------------------
 1 | # Abbreviation and acronyms
 2 | 
 3 | Provide an expansion of the abbreviation/acronym, neuronym even, in plain text
 4 | on first use, use an <abbr> to mark up the abbreviation, which provides a hint
 5 | to user agents on how to announce/display the content
 6 | 
 7 | ```html
 8 | <p>
 9 |   <abbr>FWIW</abbr> (For what it's worth) I often get the following confused:
10 |   <abbr>WTF</abbr> and <abbr>FTW</abbr>.
11 | </p>
12 | 
13 | <p>
14 |   By providing a plain text expansion besides the acronyms, myself and probably
15 |   others, are less confused by the jargon. Thus improving usability and <abbr
16 |   >a11y</abbr> (accessibility).
17 | </p>
18 | ```
19 | 
20 | ---
21 | 
22 | - [Short note: The abbreviation appreciation society](https://developer.paciellogroup.com/blog/2019/03/short-note-the-abbreviation-appreciation-society/)
23 | 


--------------------------------------------------------------------------------
/html/accordion.md:
--------------------------------------------------------------------------------
 1 | # Accordion
 2 | 
 3 | ## Simple accordion
 4 | 
 5 | ```html
 6 | <details>
 7 |   This is a simple details content
 8 | </details>
 9 | ```
10 | 
11 | ## Accordion with custom summary
12 | 
13 | ```html
14 | <details>
15 |   <summary>View all details</summary>
16 |   This is a details content with custom summary
17 | </details>
18 | ```
19 | 
20 | ## Pre-opened accordion
21 | 
22 | ```html
23 | <details open>
24 |   This is a simple details content
25 | </details>
26 | ```
27 | 
28 | ## Group of accordions mutually exclusive
29 | 
30 | ```html
31 | <details name="refrigerator">
32 |   <summary>Refrigerator 1</summary>
33 |   Lunches, condiments, yogurt et al.
34 | </details>
35 | 
36 | <details name="refrigerator">
37 |   <summary>Refrigerator 2</summary>
38 |   More Lunches, leftovers from client meeting, stray cans of off-brand soda et
39 |   al.
40 | </details>
41 | 
42 | <details name="refrigerator">
43 |   <summary>Refrigerator 3</summary>
44 |   Cookie dough someone bought from somebody’s child’s fundraiser, expired milk,
45 |   unidentifiable meat et al.
46 | </details>
47 | ```
48 | 
49 | ---
50 | 
51 | - [Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion](https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/)
52 | - [MDN: &lt;details&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details)
53 | - [MDN: &lt;summary&gt;](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary)
54 | - [Can I Use #details](https://caniuse.com/#feat=details)
55 | - [Lesser Known Uses Of Better Known Attributes](https://www.smashingmagazine.com/2025/01/lesser-known-uses-better-known-attributes/)
56 | 


--------------------------------------------------------------------------------
/html/address.md:
--------------------------------------------------------------------------------
 1 | # Address
 2 | 
 3 | ## Generic postal address
 4 | 
 5 | ```html
 6 | <p translate="no">
 7 |   W3C/MIT<br>
 8 |   32 Vassar Street<br>
 9 |   Room 32-G515<br>
10 |   Cambridge, <abbr title="Massachusetts">MA</abbr> 02139 USA
11 | </p>
12 | ```
13 | 
14 | ---
15 | 
16 | - [Markup for postal addresses](https://stackoverflow.com/a/26188004)
17 | 


--------------------------------------------------------------------------------
/html/breadcrumb.md:
--------------------------------------------------------------------------------
 1 | # Breadcrumb
 2 | 
 3 | ## Breadcrumb navigation
 4 | 
 5 | ```html
 6 | <nav aria-labelledby="breadcrumb">
 7 |   <h1 id="breadcrumb">You are here:</h1>
 8 |   <ul id="breadcrumb-list">
 9 |     <li><a href="/">Main</a> →</li>
10 |     <li><a href="/products/">Products</a> →</li>
11 |     <li><a href="/products/dishwashers/">Dishwashers</a> →</li>
12 |     <li><a>Second hand</a></li>
13 |   </ul>
14 | </nav>
15 | ```
16 | 
17 | ## Alternative version
18 | 
19 | This version uses a `<p>` instead of `<ul>` for the links
20 | ([taken from WHATWG](https://html.spec.whatwg.org/multipage/semantics-other.html#bread-crumb-navigation)).
21 | Useful if you have more than one path:
22 | 
23 | ```html
24 | <nav aria-labelledby="breadcrumb">
25 |   <h1 id="breadcrumb">You are here:</h1>
26 |   <p>
27 |     <a href="/">Main</a> ▸
28 |     <a href="/products/">Products</a> ▸
29 |     <a href="/products/dishwashers/">Dishwashers</a> ▸
30 |     <a>Second hand</a>
31 |   </p>
32 |   <p>
33 |     <a href="/">Main</a> ▸
34 |     <a href="/second-hand/">Second hand</a> ▸
35 |     <a>Dishwashers</a>
36 |   </p>
37 | </nav>
38 | ```
39 | 
40 | ---
41 | 
42 | - [Common idioms without dedicated elements](https://www.w3.org/TR/html5/common-idioms-without-dedicated-elements.html#bread-crumb-navigation)
43 | - [Patrones diseño inclusivos - Víctor Rodríguez](https://youtu.be/B2vbQ57Tf-c)
44 | 


--------------------------------------------------------------------------------
/html/buttons.md:
--------------------------------------------------------------------------------
 1 | # Buttons
 2 | 
 3 | ## Native button
 4 | 
 5 | ```html
 6 | <button type="button">Click me</button>
 7 | ```
 8 | 
 9 | ## Button to send a form
10 | 
11 | ```html
12 | <button type="submit">Send data</button>
13 | ```
14 | 
15 | ## Link used as button
16 | 
17 | Used only to triggering in-page functionality, rather than navigating to another
18 | document or section within the current page.
19 | 
20 | ```html
21 | <a href="/fallback-url.html" role="button">Link</a>
22 | ```
23 | 
24 | ## ON/OFF buttons
25 | 
26 | ```html
27 | <!-- This button is NOT active -->
28 | <button aria-label="Favorite" aria-pressed="false">❤</button>
29 | 
30 | <!-- This button IS active -->
31 | <button aria-label="Favorite" aria-pressed="true">❤</button>
32 | ```
33 | 
34 | ---
35 | 
36 | [Button state and accessibility](https://gomakethings.com/button-state-and-accessibility/)
37 | 


--------------------------------------------------------------------------------
/html/cli.md:
--------------------------------------------------------------------------------
 1 | # Command line interface
 2 | 
 3 | ## Output of a program
 4 | 
 5 | ```html
 6 | <p>
 7 |   When the process is complete, the utility will output the text
 8 |   <samp>Scan complete. Found <em>N</em> results.</samp>
 9 | </p>
10 | ```
11 | 
12 | ## CLI
13 | 
14 | Including the user input (with `kbd`) and sofware output:
15 | 
16 | ```html
17 | <pre>
18 | <samp>
19 | <kbd>git pull origin master</kbd>
20 | Already up to date.
21 | </samp></pre>
22 | ```
23 | 
24 | ---
25 | 
26 | - [The Sample Output element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp)
27 | 


--------------------------------------------------------------------------------
/html/contact.md:
--------------------------------------------------------------------------------
 1 | # Contact
 2 | 
 3 | ## Email or social networks links
 4 | 
 5 | ```html
 6 | <address>
 7 |   <a href="mailto:info@example.com">info@example.com</a>,
 8 |   <a href="https://twitter.com/example">@example</a>
 9 | </address>
10 | ```
11 | 
12 | ---
13 | 
14 | - [The Address Element](http://html5doctor.com/the-address-element/)
15 | 


--------------------------------------------------------------------------------
/html/content-changes.md:
--------------------------------------------------------------------------------
 1 | # Content changes
 2 | 
 3 | ## Mark insertion and deletion of content
 4 | 
 5 | ```html
 6 | When dealing with a <ins>suspected</ins> yogurt thief <del>, like Bob,</del> we
 7 | must create a special human resources group to deal with <del>Bob</del>
 8 | <ins>the problem</ins>.
 9 | ```
10 | 
11 | ## Mark insertion and deletion of content, adding the date when the changes have made
12 | 
13 | As an added note, screenreaders do not announce the datetime attribute in this
14 | context.
15 | 
16 | ```html
17 | When dealing with a <ins datetime="2024-11-17">suspected</ins> yogurt thief <del
18 |   datetime="2024-11-17"
19 | >, like Bob,</del> we must create a human resources group to deal with <del
20 |   datetime="2024-11-17"
21 | >Bob</del>
22 | <ins datetime="2024-11-17">the problem</ins>.
23 | ```
24 | 
25 | ---
26 | 
27 | - [Lesser Known Uses Of Better Known Attributes](https://www.smashingmagazine.com/2025/01/lesser-known-uses-better-known-attributes/)
28 | 


--------------------------------------------------------------------------------
/html/conversations.md:
--------------------------------------------------------------------------------
 1 | # Conversations
 2 | 
 3 | ## Simple conversation
 4 | 
 5 | ```html
 6 | <p><b>Costello:</b> Look, you gotta first baseman?</p>
 7 | <p><b>Abbott:</b> Certainly.</p>
 8 | <p><b>Costello:</b> Who’s playing first?</p>
 9 | <p><b>Abbott:</b> That’s right.</p>
10 | <p><i>Costello becomes exasperated.</i></p>
11 | <p>
12 |   <b>Costello:</b> When you pay off the first baseman every month, who gets the
13 |   money?
14 | </p>
15 | <p><b>Abbott:</b> Every dollar of it.</p>
16 | ```
17 | 
18 | ## Chat conversation with time
19 | 
20 | ```html
21 | <p>
22 |   <time>14:22</time>
23 |   <b>egof</b> I’m not that nerdy, I’ve only seen 30% of the star trek episodes
24 | </p>
25 | <p>
26 |   <time>14:23</time>
27 |   <b>kaj</b> if you know what percentage of the star trek episodes you have
28 |   seen, you are inarguably nerdy
29 | </p>
30 | <p>
31 |   <time>14:23</time>
32 |   <b>egof</b> it’s unarguably
33 | </p>
34 | <p>
35 |   <time>14:23</time>
36 |   <i>* kaj blinks</i>
37 | </p>
38 | <p>
39 |   <time>14:24</time>
40 |   <b>kaj</b> you are not helping your case
41 | </p>
42 | ```
43 | 
44 | ---
45 | 
46 | - [Common idioms without dedicated elements](http://w3c.github.io/html/common-idioms-without-dedicated-elements.html#conversations)
47 | 


--------------------------------------------------------------------------------
/html/cookies-banner.md:
--------------------------------------------------------------------------------
 1 | # Cookies banner
 2 | 
 3 | Show a banner asking to manage cookies:
 4 | 
 5 | ```html
 6 | <div role="region" aria-label="Manage Cookies">
 7 |   …
 8 | </div>
 9 | ```
10 | 
11 | ---
12 | 
13 | - [Best intention barriers (ARIA edition)](https://marcus.io/blog/best-intention-barriers-aria)
14 | 


--------------------------------------------------------------------------------
/html/creative-work.md:
--------------------------------------------------------------------------------
 1 | # Creative Work
 2 | 
 3 | How to reference a creative work such:
 4 | 
 5 | - A book
 6 | - A research paper
 7 | - An essay
 8 | - A poem
 9 | - A musical score
10 | - A song
11 | - A play or film script
12 | - A film
13 | - A television show
14 | - A game
15 | - A sculpture
16 | - A painting
17 | - A theatrical production
18 | - A play
19 | - An opera
20 | - A musical
21 | - An exhibition
22 | - A legal case report
23 | - A computer program
24 | - A web site
25 | - A web page
26 | - A blog post or comment
27 | - A forum post or comment
28 | - A tweet
29 | - A Facebook post
30 | - A written or oral statement
31 | - And so forth.
32 | 
33 | ## Reference a book
34 | 
35 | ```html
36 | <p>The book <cite>Mr. Penumbra's 24-Hour Bookstore</cite> is good.</p>
37 | ```
38 | 
39 | ## Reference a book with a link
40 | 
41 | ```html
42 | <p>
43 |   The book <cite><a
44 |       href="https://en.wikipedia.org/wiki/Mr._Penumbra's_24-Hour_Bookstore"
45 |     >Mr. Penumbra's 24-Hour Bookstore</a></cite> is good.
46 | </p>
47 | ```
48 | 
49 | ---
50 | 
51 | - [The citation element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite)
52 | 


--------------------------------------------------------------------------------
/html/credit-card.md:
--------------------------------------------------------------------------------
 1 | # Credit card form
 2 | 
 3 | ```html
 4 | <label for="card-holder">Card holder</label>
 5 | <input
 6 |   type="text"
 7 |   name="card-holder"
 8 |   id="card-holder"
 9 |   autocomplete="cc-name"
10 |   required
11 | >
12 | 
13 | <label for="card-number">Card number</label>
14 | <input
15 |   type="text"
16 |   inputmode="numeric"
17 |   name="card-number"
18 |   id="card-number"
19 |   autocomplete="cc-number"
20 |   required
21 | >
22 | 
23 | <label for="card-expiration-month">Card expiration month</label>
24 | <input
25 |   type="text"
26 |   inputmode="numeric"
27 |   maxlength="2"
28 |   placeholder="MM"
29 |   name="card-expiration-month"
30 |   id="card-expiration-month"
31 |   autocomplete="cc-exp-month"
32 |   required
33 | >
34 | 
35 | <label for="card-expiration-year">Card expiration year</label>
36 | <input
37 |   type="text"
38 |   inputmode="numeric"
39 |   maxlength="4"
40 |   placeholder="YYYY"
41 |   id="card-expiration-year"
42 |   name="card-expiration-year"
43 |   autocomplete="cc-exp-year"
44 |   required
45 | >
46 | 
47 | <label for="card-cvv">CVV</label>
48 | <input
49 |   type="text"
50 |   inputmode="numeric"
51 |   maxlength="3"
52 |   placeholder="000"
53 |   name="card-cvv"
54 |   id="card-cvv"
55 |   autocomplete="cc-csc"
56 |   required
57 | >
58 | ```
59 | 
60 | ## Alternative for expiration date
61 | 
62 | ```html
63 | <label for="card-expiration">Card expiration date</label>
64 | <input
65 |   type="text"
66 |   inputmode="numeric"
67 |   maxlength="7"
68 |   placeholder="MM/YYYY"
69 |   name="card-expiration"
70 |   id="card-expiration"
71 |   autocomplete="cc-exp"
72 |   required
73 | >
74 | ```
75 | 
76 | ---
77 | 
78 | - [HTML attribute: autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
79 | - [The hidden depths of the input element](https://www.htmhell.dev/adventcalendar/2023/8/)
80 | 


--------------------------------------------------------------------------------
/html/footnotes.md:
--------------------------------------------------------------------------------
 1 | # Footnotes
 2 | 
 3 | ## Annotations
 4 | 
 5 | ```html
 6 | <p>
 7 |   <b>Interviewer:</b> Good evening. I have with me in the studio tonight Mr
 8 |   Norman St John Polevaulter, who for the past few years has been contradicting
 9 |   people. Mr Polevaulter, why <em>do</em> you contradict people?
10 | </p>
11 | <p>
12 |   <b>Norman:</b> I don’t. <sup><a href="#fn1" id="r1">[1]</a></sup>
13 | </p>
14 | <p><b>Interviewer:</b> You told me you did!</p>
15 | 
16 | <section role="note">
17 |   <p id="fn1">
18 |     <a href="#r1">[1]</a> This is, naturally, a lie, but paradoxically if it
19 |     were true he could not say so without contradicting the interviewer and thus
20 |     making it false.
21 |   </p>
22 | </section>
23 | ```
24 | 
25 | ## Longer annotations that appy to entire sections
26 | 
27 | ```html
28 | <p><b>Customer</b>: I will not buy this record, it is scratched.</p>
29 | <p><b>Shopkeeper</b>: I’m sorry?</p>
30 | <p><b>Customer</b>: I will not buy this record, it is scratched.</p>
31 | <p><b>Shopkeeper</b>: No no no, this is a tobacconist’s.</p>
32 | 
33 | <aside role="note">
34 |   <p>
35 |     In 1970, the British Empire lay in ruins, and foreign nationalists
36 |     frequented the streets — many of them Hungarians (not the streets — the
37 |     foreign nationals). Sadly, Alexander Yalt has been publishing
38 |     incompetently-written phrase books.
39 |   </p>
40 | </aside>
41 | ```
42 | 
43 | ---
44 | 
45 | - [Common idioms without dedicated elements](https://www.w3.org/TR/html5/common-idioms-without-dedicated-elements.html#footnotes)
46 | - [About the Footnotes](https://daringfireball.net/2005/07/footnotes)
47 | 


--------------------------------------------------------------------------------
/html/form-fields.md:
--------------------------------------------------------------------------------
 1 | # Form fields
 2 | 
 3 | ## Fields within text
 4 | 
 5 | ```html
 6 | <label>The airport is <input type="text" name="miles" size="3" value="8"> miles
 7 |   away.</label>
 8 | ```
 9 | 
10 | ## Field with help text
11 | 
12 | ```html
13 | <label for="username">Username</label>
14 | <input
15 |   type="text"
16 |   name="username"
17 |   id="username"
18 |   aria-invalid="false"
19 |   aria-describedBy="help"
20 | >
21 | <span id="help">Enter your user name</span>
22 | ```
23 | 
24 | ## Field with error message
25 | 
26 | ```html
27 | <label for="username">Username</label>
28 | <input
29 |   type="text"
30 |   name="username"
31 |   id="username"
32 |   aria-invalid="true"
33 |   aria-describedBy="error"
34 | >
35 | <strong id="error">The username is incorrect</strong>
36 | ```
37 | 
38 | ## Field with `pattern`
39 | 
40 | Use the `title` attribute to customize the error message.
41 | 
42 | ```html
43 | <label for="name">Name</label>
44 | <input
45 |   type="text"
46 |   name="name"
47 |   id="name"
48 |   pattern="Bob [A-Za-z].+"
49 |   title="The name must start with 'Bob '"
50 | >
51 | ```
52 | 
53 | ## Multi-part fields
54 | 
55 | ```html
56 | <div role="group" aria-labelledby="label">
57 |   <span id="label">Social Security</span>
58 |   <span>
59 |     <input type="number" name="ss-1" size="3" title="First 3 digits" required>
60 |     <input type="number" name="ss-2" size="2" title="Next 2 digits" required>
61 |     <input type="number" name="ss-3" size="4" title="Last 4 digits" required>
62 |   </span>
63 | </div>
64 | ```
65 | 
66 | > Note: You can use `<fieldset>` instead `<div role="group">` but has layout
67 | > issues
68 | 
69 | ## A group of radio buttons
70 | 
71 | ```html
72 | <div role="radiogroup" aria-labelledby="label">
73 |   <span id="label">Credit Card Type:</span>
74 |   <span>
75 |     <label><input type="radio" name="cct" value="visa"> Visa</label>
76 |     <label><input type="radio" name="cct" value="mastercard"> Master
77 |       Card</label>
78 |     <label><input type="radio" name="cct" value="other"> Other</label>
79 |   </span>
80 | </div>
81 | ```
82 | 
83 | ---
84 | 
85 | - [Marking up forms and reporting violations of forms](http://mars.dequecloud.com/demo/form-markup.htm)
86 | - [Semantic markup for fieldset alternative](https://stackoverflow.com/questions/48413847/semantic-markup-for-fieldset-alternative)
87 | - [Semantic input error message inside label](https://stackoverflow.com/questions/46656151/semantic-input-error-message-inside-label)
88 | - [ARIA21: Using Aria-Invalid to Indicate An Error Field](https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/ARIA21#ARIA21-description)
89 | - [Lesser Known Uses Of Better Known Attributes](https://www.smashingmagazine.com/2025/01/lesser-known-uses-better-known-attributes/)
90 | 


--------------------------------------------------------------------------------
/html/glosary.md:
--------------------------------------------------------------------------------
 1 | # Glosary
 2 | 
 3 | ## Simple glosary
 4 | 
 5 | ```html
 6 | <aside>
 7 |   <h3>Glossary</h3>
 8 |   <dl>
 9 |     <dt><dfn>RSS</dfn></dt>
10 |     <dd>
11 |       An XML format for aggregating information from websites whose content is
12 |       frequently updated.
13 |     </dd>
14 | 
15 |     <dt><dfn>Weblog</dfn></dt>
16 |     <dd>
17 |       Contraction of the term "web log", a weblog is a website that is
18 |       periodically updated, like a journal
19 |     </dd>
20 | 
21 |     <!-- Multiple keys -->
22 |     <dt lang="en-GB"><dfn>colour</dfn></dt>
23 |     <dt lang="en-US"><dfn>color</dfn></dt>
24 |     <dd>
25 |       The visual result of light in their emission, transmission and/or
26 |       reflection. This perception is determined by the hue, brightness and
27 |       saturation of the light at a specific point.
28 |     </dd>
29 | 
30 |     <!-- Multiple descriptions -->
31 |     <dt><dfn>Chips</dfn></dt>
32 |     <dd>
33 |       Strips of potato usually deep fried in fat. Commonly referred to as
34 |       "french fries".
35 |     </dd>
36 |     <dd>
37 |       A small fragment that has been broken off from a larger body (e.g. stone).
38 |     </dd>
39 |   </dl>
40 | </aside>
41 | ```
42 | 
43 | ---
44 | 
45 | - [The dl element](http://html5doctor.com/the-dl-element/)
46 | 


--------------------------------------------------------------------------------
/html/headers.md:
--------------------------------------------------------------------------------
 1 | # Headers
 2 | 
 3 | ## Simple header
 4 | 
 5 | ```html
 6 | <header>
 7 |   <h1>This is the title</h1>
 8 |   <p role="doc-subtitle">This is the subtitle</p>
 9 | </header>
10 | ```
11 | 
12 | ---
13 | 
14 | - [doc-subtitle source](https://twitter.com/stevefaulkner/status/1236241209686966272)
15 | 


--------------------------------------------------------------------------------
/html/hidden-elements.md:
--------------------------------------------------------------------------------
 1 | # Hidden elements
 2 | 
 3 | ## Hide an element
 4 | 
 5 | ```html
 6 | <div hidden>Hidden content</div>
 7 | ```
 8 | 
 9 | ## Hide only from assistive tecnology
10 | 
11 | ```html
12 | <div aria-hidden="true">Hidden content</div>
13 | ```
14 | 
15 | ## Hide only visually
16 | 
17 | ```css
18 | .visually-hidden:not(:focus):not(:active) {
19 |   clip: rect(0 0 0 0);
20 |   clip-path: inset(50%);
21 |   height: 1px;
22 |   overflow: hidden;
23 |   position: absolute;
24 |   white-space: nowrap;
25 |   width: 1px;
26 | }
27 | ```
28 | 
29 | ```html
30 | <div class="visually-hidden">Hidden content</div>
31 | ```
32 | 
33 | ---
34 | 
35 | [Inclusively Hidden](https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html)
36 | 


--------------------------------------------------------------------------------
/html/icon-link.md:
--------------------------------------------------------------------------------
 1 | # Icon link/button
 2 | 
 3 | ## Icon only link
 4 | 
 5 | ```html
 6 | <a
 7 |   href="https://twitter.com/misteroom"
 8 |   title="Follow me on Twitter"
 9 |   aria-label="Follow me on Twitter"
10 | >
11 |   <svg
12 |     aria-hidden="true"
13 |     focusable="false"
14 |     xmlns="http://www.w3.org/2000/svg"
15 |     viewbox="0 0 16 16"
16 |   >
17 |     …
18 |   </svg>
19 | </a>
20 | ```
21 | 
22 | ## Icon only button
23 | 
24 | ```html
25 | <button type="button" aria-label="Follow me on Twitter">
26 |   <svg
27 |     aria-hidden="true"
28 |     focusable="false"
29 |     xmlns="http://www.w3.org/2000/svg"
30 |     viewbox="0 0 16 16"
31 |   >
32 |     …
33 |   </svg>
34 | </button>
35 | ```
36 | 
37 | ## Alternative solution
38 | 
39 | ```html
40 | <button type="button">
41 |   <span class="sr-only">Follow me on Twitter</span>
42 |   <svg
43 |     aria-hidden="true"
44 |     focusable="false"
45 |     xmlns="http://www.w3.org/2000/svg"
46 |     viewbox="0 0 16 16"
47 |   >
48 |     …
49 |   </svg>
50 | </button>
51 | ```
52 | 
53 | `.sr-only` is a CSS class to make the element visible only for screen readers.
54 | 
55 | ---
56 | 
57 | - [Accesible icon links](https://hugogiraudel.com/2020/12/10/accessible-icon-links/)
58 | - [Buttons and the Baader–Meinhof phenomenon](https://www.matuzo.at/blog/2022/button-baader/)
59 | - [Misleading Icons: Icon-Only-Buttons and Their Impact on Screen Readers](https://htmhell.dev/adventcalendar/2024/27/)
60 | 


--------------------------------------------------------------------------------
/html/language-switcher.md:
--------------------------------------------------------------------------------
 1 | # Language switcher
 2 | 
 3 | ## Menu to choose the language of the document
 4 | 
 5 | ```html
 6 | <nav>
 7 |   <h1>Translations of this page</h1>
 8 |   <ul>
 9 |     <li>Galego</li>
10 |     <li><a rel="alternate" href="/es" hreflang="es" lang="es">Español</a></li>
11 |     <li>
12 |       <a rel="alternate" href="/en" hreflang="en-US" lang="en-US"
13 |       >English (US)</a>
14 |     </li>
15 |   </ul>
16 | </nav>
17 | ```
18 | 
19 | ---
20 | 
21 | - [Semantic markup for language switcher](https://stackoverflow.com/a/20157416)
22 | 


--------------------------------------------------------------------------------
/html/license.md:
--------------------------------------------------------------------------------
 1 | # License
 2 | 
 3 | ## Simple license
 4 | 
 5 | ```html
 6 | <p>
 7 |   <small>This article is licensed under a Creative Commons Attribution
 8 |     Share-alike license</small>
 9 | </p>
10 | ```
11 | 
12 | ## License with link
13 | 
14 | ```html
15 | <p>
16 |   <small>This article is licensed under a <a
17 |       rel="license"
18 |       href="http://creativecommons.org/licenses/by-sa/3.0/"
19 |     >Creative Commons Attribution Share-alike license</a></small>
20 | </p>
21 | ```
22 | 
23 | ---
24 | 
25 | - [The small & hr elements](http://html5doctor.com/small-hr-element/)
26 | 


--------------------------------------------------------------------------------
/html/list.md:
--------------------------------------------------------------------------------
 1 | # List
 2 | 
 3 | ## List of ordered elements
 4 | 
 5 | ```html
 6 | <ol>
 7 |   <li>One</li>
 8 |   <li>Two</li>
 9 |   <li>Three</li>
10 | </ol>
11 | ```
12 | 
13 | ## List of ordered elements starting from a different number than 1
14 | 
15 | ```html
16 | <ol>
17 |   <li>One</li>
18 |   <li>Two</li>
19 |   <li>Three</li>
20 |   <li value="10">Ten</li>
21 |   <li>Eleven</li>
22 |   <li>Twelve</li>
23 | </ol>
24 | ```
25 | 
26 | ## List of unordered elements
27 | 
28 | ```html
29 | <ul>
30 |   <li>One</li>
31 |   <li>Two</li>
32 |   <li>Three</li>
33 | </ul>
34 | ```
35 | 
36 | ## Unstyled list of elements
37 | 
38 | If the list is styled with `list-style: none`, the `role="list"` attribute must
39 | be added due the Safari behavior.
40 | 
41 | ```html
42 | <style>
43 |   .no-style {
44 |     list-style: none;
45 |   }
46 | </style>
47 | 
48 | <ul class="no-style" role="list">
49 |   <li>One</li>
50 |   <li>Two</li>
51 |   <li>Three</li>
52 | </ul>
53 | ```
54 | 
55 | ## List of key-value pairs
56 | 
57 | ```html
58 | <dl>
59 |   <dt>Name</dt>
60 |   <dd>Óscar</dd>
61 | 
62 |   <dt>Surname</dt>
63 |   <dd>Otero</dd>
64 | </dl>
65 | ```
66 | 
67 | Alternative version for styling purposes:
68 | 
69 | ```html
70 | <dl>
71 |   <div>
72 |     <dt>Name</dt>
73 |     <dd>Óscar</dd>
74 |   </div>
75 | 
76 |   <div>
77 |     <dt>Surname</dt>
78 |     <dd>Otero</dd>
79 |   </div>
80 | </dl>
81 | ```
82 | 
83 | ---
84 | 
85 | - ["Fixing" Lists](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html)
86 | - [Lesser Known Uses Of Better Known Attributes](https://www.smashingmagazine.com/2025/01/lesser-known-uses-better-known-attributes/)
87 | 


--------------------------------------------------------------------------------
/html/menu.md:
--------------------------------------------------------------------------------
 1 | # Menu
 2 | 
 3 | ## Simple menu
 4 | 
 5 | ```html
 6 | <div aria-label="Accessibility options" role="menu">
 7 |   <button role="menuitem" type="button">Color contrast</button>
 8 |   <button role="menuitem" type="button">Easy language</button>
 9 |   <button role="menuitem" type="button">Font size</button>
10 | </div>
11 | ```
12 | 
13 | ## List
14 | 
15 | The role `menuitem` must be direct descendant of `menu`. That's why we use the
16 | `presentation` role for the middle items.
17 | 
18 | ```html
19 | <ul aria-label="Accessibility options" role="menu">
20 |   <li role="presentation">
21 |     <button role="menuitem" type="button">Color contrast</button>
22 |   </li>
23 |   <li role="presentation">
24 |     <button role="menuitem" type="button">Easy language</button>
25 |   </li>
26 |   <li role="presentation">
27 |     <button role="menuitem" type="button">Font size</button>
28 |   </li>
29 | </ul>
30 | ```
31 | 
32 | ---
33 | 
34 | - [Menu and navigation: The difference](https://stevefrenzel.dev/posts/menu-and-navigation-the-difference/)
35 | 


--------------------------------------------------------------------------------
/html/metadata.md:
--------------------------------------------------------------------------------
 1 | # Metadata
 2 | 
 3 | ## Content metadata
 4 | 
 5 | ```html
 6 | <dl>
 7 |   <dt>Authors:</dt>
 8 |   <dd>Remy Sharp</dd>
 9 |   <dd>Rich Clark</dd>
10 | 
11 |   <dt>Editor:</dt>
12 |   <dd>Brandan Lennox</dd>
13 | 
14 |   <dt>Category:</dt>
15 |   <dd>Comment</dd>
16 | </dl>
17 | ```
18 | 
19 | ---
20 | 
21 | - [The dl element](http://html5doctor.com/the-dl-element/)
22 | 


--------------------------------------------------------------------------------
/html/navigation.md:
--------------------------------------------------------------------------------
 1 | # Navigation
 2 | 
 3 | ## Simple visible menu
 4 | 
 5 | The link to `#main` is the current page, so it works as a skip link.
 6 | 
 7 | ```html
 8 | <nav aria-label="Main menu">
 9 |   <ul>
10 |     <li><a href="/">Home</a></li>
11 |     <li><a href="#main" aria-current="page">About us</a></li>
12 |     <li><a href="/services">Services</a></li>
13 |     <li><a href="/projects">Projects</a></li>
14 |     <li><a href="/contact">Contact</a></li>
15 |   </ul>
16 | </nav>
17 | ```
18 | 
19 | ## Menu with button to show/hide
20 | 
21 | Note: this approach requires javascript to show/hide the list on click the
22 | button
23 | 
24 | ```html
25 | <nav aria-label="Main menu">
26 |   <button aria-expanded="false">
27 |     <svg>...</svg>
28 |     Menu
29 |   </button>
30 | 
31 |   <ul id="menu-list" hidden>
32 |     <li><a href="/">Home</a></li>
33 |     <li><a href="#main" aria-current="page">About us</a></li>
34 |     <li><a href="/services">Services</a></li>
35 |     <li><a href="/projects">Projects</a></li>
36 |     <li><a href="/contact">Contact</a></li>
37 |   </ul>
38 | </nav>
39 | ```
40 | 
41 | ---
42 | 
43 | - [Patrones diseño inclusivos - Víctor Rodríguez](https://youtu.be/B2vbQ57Tf-c)
44 | - [Menu and navigation: The difference](https://stevefrenzel.dev/posts/menu-and-navigation-the-difference/)
45 | 


--------------------------------------------------------------------------------
/html/page.md:
--------------------------------------------------------------------------------
 1 | # Page
 2 | 
 3 | Minimum html needed for any html page:
 4 | 
 5 | ```html
 6 | <!DOCTYPE html>
 7 | 
 8 | <html lang="es">
 9 |   <head>
10 |     <meta charset="UTF-8">
11 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
12 |     <title>Page description | Site name</title>
13 |   </head>
14 |   <body>
15 |     <a href="#main">Go to the main content</a>
16 | 
17 |     <main id="main">
18 |       <h1>Page title</h1>
19 | 
20 |       Main content here
21 |     </main>
22 |   </body>
23 | </html>
24 | ```
25 | 
26 | ---
27 | 
28 | ## `lang` attribute
29 | 
30 | - Help the browser to choose a font that support that language
31 | - Screen readers use this value to select the right voice syntetizer
32 | - Improve content indexing
33 | - Useful for users using Google Translate
34 | 
35 | ## `viewport` config
36 | 
37 | - Make the web responsive, so it can ve viewed in a smartphone allowing zoom.
38 | 
39 | ## `title` element
40 | 
41 | - Must contain the name of the document in an accessible way, using the pattern
42 |   `page description | site name`.
43 | 
44 | ## Skip link
45 | 
46 | - A hidden link, only visible on focus, that allows to jump directly into the
47 |   main region.
48 | 
49 | ## `main` element
50 | 
51 | - Only one `main` element in the page.
52 | - Determines the main content of the page.
53 | - Screen readers can jump directly into this region.
54 | - A useful tip for printing:
55 |   ```css
56 |   @media print {
57 |     body > *:not(main) {
58 |       display: none;
59 |     }
60 |   }
61 |   ```
62 | 
63 | ## `h1` element
64 | 
65 | - Screen readers can jump directly into this element.
66 | 


--------------------------------------------------------------------------------
/html/pagination.md:
--------------------------------------------------------------------------------
 1 | # Pagination
 2 | 
 3 | ## Simple pagination with next/prev pages
 4 | 
 5 | ```html
 6 | <nav aria-label="You are in page 2">
 7 |   <a href="page1" rel="prev">Previous page (1)</a>
 8 |   <a href="page3" rel="next">Next page (3)</a>
 9 | </nav>
10 | ```
11 | 
12 | ## Disabled links
13 | 
14 | The proper way to
15 | [disable a link](https://www.scottohara.me/blog/2021/05/28/disabled-links.html):
16 | 
17 | ```html
18 | <nav aria-label="You are in page 2">
19 |   <a role="link" aria-disabled="true">Previous page</a>
20 |   <a href="page2" rel="next">Next page (2)</a>
21 | </nav>
22 | ```
23 | 
24 | ## Pagination with a map of pages
25 | 
26 | ```html
27 | <nav aria-label="You are in page 2">
28 |   <ul>
29 |     <li><a href="page1" aria-label="Page 1" rel="prev">1</a></li>
30 |     <li><a href="page2" aria-label="Page 2" aria-current="page">2</a></li>
31 |     <li><a href="page3" aria-label="Page 3" rel="next">3</a></li>
32 |     <li><a href="page4" aria-label="Page 4">4</a></li>
33 |     <li><a href="page5" aria-label="Page 5">5</a></li>
34 |   </ul>
35 | </nav>
36 | ```
37 | 
38 | ---
39 | 
40 | - [A11y pagination](https://a11y-style-guide.com/style-guide/section-navigation.html)
41 | - [Page by Page: How Pagination Makes the Web Accessible](https://htmhell.dev/adventcalendar/2024/14/)
42 | - [Disabling a link](https://www.scottohara.me/blog/2021/05/28/disabled-links.html)
43 | 


--------------------------------------------------------------------------------
/html/passwords-forms.md:
--------------------------------------------------------------------------------
 1 | # Forms with passwords
 2 | 
 3 | ## Log in
 4 | 
 5 | Use `autocomplete="current-password"`
 6 | 
 7 | ```html
 8 | <form>
 9 |   <label for="user-password">Password:</label>
10 |   <input
11 |     type="password"
12 |     id="user-password"
13 |     autocomplete="current-password"
14 |     required
15 |   >
16 | </form>
17 | ```
18 | 
19 | ## Sign-up or change the password
20 | 
21 | Use `autocomplete="new-password"`
22 | 
23 | ```html
24 | <form>
25 |   <label for="user-password">New password:</label>
26 |   <input
27 |     type="password"
28 |     id="user-password"
29 |     autocomplete="new-password"
30 |     required
31 |   >
32 | </form>
33 | ```
34 | 
35 | ---
36 | 
37 | - [MDN: Allowing autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password#Allowing_autocomplete)
38 | 


--------------------------------------------------------------------------------
/html/payment-form.md:
--------------------------------------------------------------------------------
 1 | # Payment form
 2 | 
 3 | Using attributes to help users to enter the data:
 4 | 
 5 | ```html
 6 | <form method="post">
 7 |   <label for="number">Card number</label>
 8 |   <input
 9 |     id="number"
10 |     name="number"
11 |     autocomplete="cc-number"
12 |     inputmode="numeric"
13 |     required
14 |   >
15 | 
16 |   <label for="name">Name on card</label>
17 |   <input id="name" name="name" autocomplete="cc-name" required>
18 | 
19 |   <label for="exp">Expiry date</label>
20 |   <input id="exp" name="exp" autocomplete="cc-exp" required>
21 | 
22 |   <label for="csc">Security code</label>
23 |   <input id="csc" name="csc" autocomplete="cc-csc" inputmode="numeric" required>
24 | 
25 |   <button>Complete payment</button>
26 | </form>
27 | ```
28 | 
29 | ---
30 | 
31 | - [Payment form best practices codelab](https://web.dev/articles/codelab-payment-form-best-practices)
32 | 


--------------------------------------------------------------------------------
/html/product-list.md:
--------------------------------------------------------------------------------
 1 | # Product list
 2 | 
 3 | List of any entity (products, posts, etc)
 4 | 
 5 | ## Entity list
 6 | 
 7 | ```html
 8 | <ul>
 9 |   <li>
10 |     <article>
11 |       <a href="product.html" rel="bookmark">
12 |         <!-- Article content -->
13 |       </a>
14 |     </article>
15 |   </li>
16 |   <li>
17 |     <article>
18 |       <a href="product.html" rel="bookmark">
19 |         <!-- Article content -->
20 |       </a>
21 |     </article>
22 |   </li>
23 | </ul>
24 | ```
25 | 
26 | ---
27 | 
28 | - [Which HTML5 tags are semantically correct to represent e-commerce products?](https://stackoverflow.com/questions/46259821/which-html5-tags-are-semantically-correct-to-represent-e-commerce-products)
29 | 


--------------------------------------------------------------------------------
/html/quotes.md:
--------------------------------------------------------------------------------
 1 | # Quotes
 2 | 
 3 | ## Inline quote
 4 | 
 5 | ```html
 6 | <p>Like Hamlet says, <q>To be or not to be</q></p>
 7 | ```
 8 | 
 9 | ## Inline quote with url for the cite:
10 | 
11 | ```html
12 | <p>Like Hamlet says, <q cite="http://example.com">To be or not to be</q></p>
13 | ```
14 | 
15 | ## Simple block quote
16 | 
17 | ```html
18 | <blockquote>
19 |   <p>To be or not to be</p>
20 | </blockquote>
21 | ```
22 | 
23 | ## Block quote with url for the cite
24 | 
25 | ```html
26 | <blockquote cite="http://example.com">
27 |   <p>To be or not to be</p>
28 | </blockquote>
29 | ```
30 | 
31 | ## Block quote with visible cite
32 | 
33 | ```html
34 | <blockquote>
35 |   <p>To be or not to be</p>
36 |   <cite>Prince Hamlet</cite>
37 | </blockquote>
38 | ```
39 | 
40 | ## Block quote with many visible cites
41 | 
42 | ```html
43 | <blockquote>
44 |   <p>To be or not to be</p>
45 |   <footer>
46 |     <cite>Prince Hamlet</cite> in <cite>Hamlet</cite>, by <cite>William
47 |       Shakespeare</cite>
48 |   </footer>
49 | </blockquote>
50 | ```
51 | 
52 | ### Alternative version inside a figure
53 | 
54 | ```html
55 | <figure>
56 |   <blockquote>
57 |     <p>To be or not to be</p>
58 |   </blockquote>
59 |   <figcaption>
60 |     <cite>Prince Hamlet</cite> in <cite>Hamlet</cite>, by <cite>William
61 |       Shakespeare</cite>
62 |   </figcaption>
63 | </figure>
64 | ```
65 | 
66 | ---
67 | 
68 | - [Quoting and citing](http://html5doctor.com/blockquote-q-cite/)
69 | 


--------------------------------------------------------------------------------
/html/range-input.md:
--------------------------------------------------------------------------------
 1 | # Range input
 2 | 
 3 | ## Display the selected value
 4 | 
 5 | ```html
 6 | <form>
 7 |   <label for="flying">Flying Skill Level</label>
 8 |   <input name="flevel" id="flying" type="range" min="0" max="100" value="0">
 9 |   <output for="flying" name="level">0</output>/100
10 | </form>
11 | ```
12 | 
13 | Note: javascript is required to update dinamically the `<output>` value
14 | 
15 | ---
16 | 
17 | - [The output element](http://html5doctor.com/the-output-element/)
18 | 


--------------------------------------------------------------------------------
/html/scalar-values.md:
--------------------------------------------------------------------------------
 1 | # Scalar values
 2 | 
 3 | ## Task related values
 4 | 
 5 | ```html
 6 | Loading: <progress min="0" max="100" value="56">
 7 |   loaded 56% of the content
 8 | </progress>
 9 | ```
10 | 
11 | ## Not task related values
12 | 
13 | ```html
14 | Disc space: <meter min="0" max="100" value="56">
15 |   using 56% of the total space available
16 | </meter>
17 | ```
18 | 
19 | ## Voting or rating
20 | 
21 | ```html
22 | Your score is: <meter min="0" max="10">2 out of 10</meter>
23 | ```
24 | 
25 | ---
26 | 
27 | - [How to use the Meter & Progress Elements](http://blog.teamtreehouse.com/use-meter-progress-elements)
28 | - [Measure up with the meter tag](http://html5doctor.com/measure-up-with-the-meter-tag/)
29 | 


--------------------------------------------------------------------------------
/html/search.md:
--------------------------------------------------------------------------------
 1 | # Search
 2 | 
 3 | ## Search form
 4 | 
 5 | ```html
 6 | <form role="search">
 7 |     <input type="search" aria-label="search text" size="20" enterkeyhint="search">
 8 |     <button type="submit">Search<button>
 9 | </form>
10 | ```
11 | 
12 | ## Alternative version using the new `<search>` element:
13 | 
14 | ```html
15 | <search>
16 |   <form>
17 |     <input
18 |       type="search"
19 |       aria-label="search text"
20 |       size="20"
21 |       enterkeyhint="search"
22 |     >
23 |     <button type="submit">Search</button>
24 |   </form>
25 | </search>
26 | ```
27 | 
28 | ---
29 | 
30 | - [Search Landmark](http://w3c.github.io/aria-practices/examples/landmarks/search.html)
31 | - [enterkeyhint](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute)
32 | - [`<search>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search)
33 | 


--------------------------------------------------------------------------------
/html/tables.md:
--------------------------------------------------------------------------------
 1 | # Tables
 2 | 
 3 | ## With a A11y friendly title
 4 | 
 5 | ```html
 6 | <table>
 7 |   <caption>
 8 |     <h2>Top 10 best-selling albums of all time</h2>
 9 |   </caption>
10 | 
11 |   <!-- Table markup -->
12 | </table>
13 | ```
14 | 
15 | Alternative version using a `figure` and `figcaption`:
16 | 
17 | ```html
18 | <figure>
19 |   <figcaption id="caption">Top 10 best-selling albums of all time</figcaption>
20 |   <table aria-labelledby="caption">
21 |     <!-- Table markup -->
22 |   </table>
23 | </figure>
24 | ```
25 | 
26 | If we want to make the table scrollable, we can use a `div` to wrap the `table`.
27 | The `tabindex` is needed for keyboard navigation:
28 | 
29 | ```html
30 | <figure>
31 |   <figcaption id="caption">
32 |     <h2>Top 10 best-selling albums of all time</h2>
33 |   </figcaption>
34 | 
35 |   <div
36 |     class="table-wrapper"
37 |     role="group"
38 |     aria-labelledby="caption"
39 |     tabindex="0"
40 |   >
41 |     <table><!-- Table markup --></table>
42 |   </div>
43 | </figure>
44 | ```
45 | 
46 | ---
47 | 
48 | - [Accessible front-end patterns for responsive tables](https://www.smashingmagazine.com/2022/12/accessible-front-end-patterns-responsive-tables-part1/)
49 | - [Pure CSS scrolling shadows](https://lea.verou.me/2012/04/background-attachment-local/)
50 | 


--------------------------------------------------------------------------------
/html/topbar.md:
--------------------------------------------------------------------------------
 1 | # Top bar
 2 | 
 3 | ## Using a `<header>`
 4 | 
 5 | We can use the `<header>` element as long as it is NOT a descendant of
 6 | `<aside>`, `<article>`, `<main>`, `<nav>`, or `<section>`.
 7 | 
 8 | ```html
 9 | <body>
10 |   <header>
11 |     <a href="#main" class="skiptocontent">Skip To main content</a>
12 |     <img src="images/logo.png" alt="Website Logo" />
13 |     <h1>Name of the site</h1>
14 |     <nav aria-label="Main menu">…</nav>
15 |   </header>
16 |   …
17 | <body>
18 | ```
19 | 
20 | ## Using `role="banner"`
21 | 
22 | If it's not possible to use a `<header>` element because it's a descendant of
23 | `<aside>`, `<article>`, `<main>`, `<nav>`, or `<section>`, we can use ARIA
24 | roles.
25 | 
26 | The _banner_ role is for defining a global site header, which usually includes a
27 | logo, company name, search feature, and possibly the global navigation or a
28 | slogan.
29 | 
30 | ```html
31 | <body>
32 |   <main>
33 |     <div role="banner">
34 |       <a href="#main" class="skiptocontent">Skip To main content</a>
35 |       <img src="images/logo.png" alt="Website Logo" />
36 |       <h1>Name of the site</h1>
37 |       <nav aria-label="Main menu">…</nav>
38 |     </div>
39 |     …
40 |   </main>
41 | <body>
42 | ```
43 | 
44 | ---
45 | 
46 | - [Best intention barriers (ARIA edition)](https://marcus.io/blog/best-intention-barriers-aria)
47 | - [ARIA: banner role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role)
48 | 


--------------------------------------------------------------------------------