🔞 ARIA Roles 🚭

<div> elements instead of the HTML 5 elements

          <div role="banner">
            <p>Put company logo, etc. here.</p>
          </div>
          <div role="navigation">
            <ul>
              <li>Put navigation here</li>
            </ul>
          </div>
          <div role="main">
            <p>Put main content here.</p>
          </div>
          <div role="contentinfo">
            <p>Put copyright, etc. here.</p>
          </div>
        

HTML 5 Elements and ARIA Landmarks

          <header role="banner">
            <p>Put company logo, etc. here.</p>
          </header>
          <nav role="navigation">
            <ul>
              <li>Put navigation here</li>
            </ul>
          </nav>
          <main role="main">
              <p>Put main content here.</p>
          </main>
          <footer role="contentinfo">
              <p>Put copyright, etc. here.</p>
          </footer>
        

Tablist

          <ul role="tablist">
            <li role="tab">Home</li>
            <li role="tab">Products</li>
            <li role="tab">Services</li>
          </ul>
          <div role="tabpanel">
            <p>Info about products</p>
          </div>
          <div role="tabpanel">
            <p>Info about products</p>
          </div>
          <div role="tabpanel">
            <p>Info about products</p>
          </div>            
        

Dialog 💬

          <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc">
            <h3 id="dialog1Title">Your personal details were successfully updated</h3>
            <p id="dialog1Desc">You can change your details at any time in the user account section.</p>
            <button>Close</button>
          </div>
        

Slide️r

          <label for="fader">Volume</label>
          <input type="range"
            min="1"
            id="fader"
            max="100"
            value="50"
            step="1"
            aria-valuemin="1"
            aria-valuemax="100"
            aria-valuenow="50">
        

Texbox 📑

          <div id="txtboxLabel" class="label">Enter zipcode</div>
          <div
            role="textbox"
            contenteditable="true"
            aria-placeholder="5-digit zipcode"
            aria-labelledby="txtboxLabel"
          ></div>

          <div id="txtboxMultilineLabel" class="label">Enter the tags</div>
          <div
            role="textbox"
            contenteditable="true"
            aria-multiline="true"
            aria-labelledby="txtboxMultilineLabel"
            aria-required="true"
          ></div>

          <label for="txtbox">Enter zipcode</label>
          <input type="text" placeholder="5-digit zipcode" id="txtbox" />

          <label for="txtboxMultiline">Enter the tags</label>
          <textarea id="txtboxMultiline" required placeholder="Enter the tags"></textarea>
        

Headings

          <p role="heading" aria-level="1">Heading #1</p>
          <p role="heading" aria-level="2">Subheading #2</p>
        

Heading #1

Subheading #2

Checkbox

          <span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="pref-label">
          </span> <label id="pref-label" class="inline">Remember preferences</label>
        

Definitions in Footnotes 📜

          <blockquote>
            <p>"Today's sub-40s have different horrors, prominent among which are <span id="anomie">anomie</span><sup><a href="#note-anomie">[1]</a></sup> and <span id="solipsism">solipsism</span><sup><a href="#note-solipsism">[2]</a></sup> and a peculiarly American loneliness: the prospect of dying without once having loved something more than yourself."
            <br>
            ―	David Foster Wallace, <em> Consider the Lobster and Other Essays</em></p>
          </blockquote>
          <ol>
            <li id="note-anomie"role="definition" aria-labelledby="anomie">social instability resulting from a breakdown of standards and values</li>
            <li id="note-solipsism" role="definition" aria-labelledby="solipsism">a theory in philosophy that your own existence is the only thing that is real or that can be known" or "extreme egocentrism&quot;</li>
          </ol>
        

"Today's sub-40s have different horrors, prominent among which are anomie^[1] and solipsism^[2] and a peculiarly American loneliness: the prospect of dying without once having loved something more than yourself.""
― David Foster Wallace, Consider the Lobster and Other Essays

1. social instability resulting from a breakdown of standards and values
2. a theory in philosophy that your own existence is the only thing that is real or that can be known" or "extreme egocentrism"

No recognition by screen reader

          <h3 role="presentation">Deep Thoughts</h3>
          <a href="https://google.com" role="presentation">Google</a>
        

Deep Thoughts