keys78/sample.html

## sample.html
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Sample description" />
  <title>Article - DESIGNING FOR ALL -  THE A11Y WAY</title>
</head>

<body>
  <!-- 1. Semantic HTML -->

  <!-- Headers - Non-Semantic  -->
  <div class="title">About Us</div>
  <div class="content">Our history, mission, and values.</div>

  <!-- Headers - Semantic  -->
  <h1>About Us</h1>
  <p>Our history, mission, and values.</p>


  <!-- Navbars Before -->
  <div class="menu">
    <div class="item">Home</div>
    <div class="item">About</div>
    <div class="item">Contact</div>
  </div>

  <!-- Navbars After -->
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>


<!--  ARIA   -->
<!--  aria-label  -->
  <button aria-label="Play video">
    <img src="play-button.png" alt="Play">
</button>

<!-- aria-labelledby   -->
  <div id="section-heading">Important Information</div>
<div aria-labelledby="section-heading">This is a critical update for all users.</div>

<!-- aria-describedby   -->
<input type="text" aria-describedby="username-hint">
<div id="username-hint">Please enter your username (minimum 8 characters).</div>

<!-- aria-expanded/aria-hidden   -->
  <button aria-expanded="false" aria-controls="menu-content">Show Menu</button>
<div id="menu-content" aria-hidden="true"> <!-- Hidden content here --> </div>

<!-- role  -->
 <div role="alert">This is a critical announcement.</div>

<!--  aria-live  -->
<div aria-live="polite" id="live-region">New message received.</div>

<!--  aria-activedescendant  -->
<input aria-autocomplete="list" aria-activedescendant="suggestion-1">
<ul role="listbox">
   <li id="suggestion-1">Option 1</li>
    <li id="suggestion-2">Option 2</li>
    <!-- More options -->
</ul>


<!-- FORM  -->
 <form>
    <label for="name">Name:</label>
    <input type="text" id="name" aria-describedby="name-desc" required>
    <div id="name-desc">Enter your full name.</div>

    <label for="email">Email:</label>
    <input type="email" id="email" aria-describedby="email-desc" required>
    <div id="email-desc">Provide a valid email address.</div>

     <label for="username">Username:</label>
    <input type="text" id="username" aria-invalid="true" required>
    <div id="username-error" role="alert">Please enter a valid username.</div>

    <button type="submit">Submit
   </button>
</form>


<!-- TABLES  -->
<!--  TABLE 1  -->
<table>
    <caption>Monthly Expenses</caption>
    <thead>
        <tr>
            <th scope="col">Month</th>
            <th scope="col">Expense</th>
            <th scope="col">Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">January</th>
            <td>Rent</td>
            <td>$1,000</td>
        </tr>
        <tr>
            <th scope="row">February</th>
            <td>Utilities</td>
            <td>$200</td>
        </tr>
    </tbody>
</table>


<!-- TABLE 2  -->
<table>
    <caption>Stock Prices</caption>
    <thead>
        <tr>
            <th id="symbol" scope="col">Symbol</th>
            <th id="price" scope="col">Price</th>
            <th id="change" scope="col">Change</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th headers="symbol">AAPL</th>
            <td headers="price">$150.25</td>
            <td headers="change" aria-label="Positive change">+0.75%</td>
        </tr>
    </tbody>
</table>

</body>

</html>
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="UTF-8" />
	<link rel="icon" type="image/svg+xml" href="/vite.svg" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="description" content="Sample description" />
	<title>Article - DESIGNING FOR ALL - THE A11Y WAY</title>
	</head>

	<body>
	<!-- 1. Semantic HTML -->

	<!-- Headers - Non-Semantic -->
	<div class="title">About Us</div>
	<div class="content">Our history, mission, and values.</div>

	<!-- Headers - Semantic -->
	<h1>About Us</h1>
	<p>Our history, mission, and values.</p>




	<!-- Navbars Before -->
	<div class="menu">
	<div class="item">Home</div>
	<div class="item">About</div>
	<div class="item">Contact</div>
	</div>

	<!-- Navbars After -->
	<nav>
	<ul>
	<li><a href="/">Home</a></li>
	<li><a href="/about">About</a></li>
	<li><a href="/contact">Contact</a></li>
	</ul>
	</nav>


	<!-- ARIA -->
	<!-- aria-label -->
	<button aria-label="Play video">
	<img src="play-button.png" alt="Play">
	</button>

	<!-- aria-labelledby -->
	<div id="section-heading">Important Information</div>
	<div aria-labelledby="section-heading">This is a critical update for all users.</div>

	<!-- aria-describedby -->
	<input type="text" aria-describedby="username-hint">
	<div id="username-hint">Please enter your username (minimum 8 characters).</div>

	<!-- aria-expanded/aria-hidden -->
	<button aria-expanded="false" aria-controls="menu-content">Show Menu</button>
	<div id="menu-content" aria-hidden="true"> <!-- Hidden content here --> </div>

	<!-- role -->
	<div role="alert">This is a critical announcement.</div>

	<!-- aria-live -->
	<div aria-live="polite" id="live-region">New message received.</div>

	<!-- aria-activedescendant -->
	<input aria-autocomplete="list" aria-activedescendant="suggestion-1">
	<ul role="listbox">
	<li id="suggestion-1">Option 1</li>
	<li id="suggestion-2">Option 2</li>
	<!-- More options -->
	</ul>


	<!-- FORM -->
	<form>
	<label for="name">Name:</label>
	<input type="text" id="name" aria-describedby="name-desc" required>
	<div id="name-desc">Enter your full name.</div>

	<label for="email">Email:</label>
	<input type="email" id="email" aria-describedby="email-desc" required>
	<div id="email-desc">Provide a valid email address.</div>

	<label for="username">Username:</label>
	<input type="text" id="username" aria-invalid="true" required>
	<div id="username-error" role="alert">Please enter a valid username.</div>

	<button type="submit">Submit
	</button>
	</form>


	<!-- TABLES -->
	<!-- TABLE 1 -->
	<table>
	<caption>Monthly Expenses</caption>
	<thead>
	<tr>
	<th scope="col">Month</th>
	<th scope="col">Expense</th>
	<th scope="col">Amount</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<th scope="row">January</th>
	<td>Rent</td>
	<td>$1,000</td>
	</tr>
	<tr>
	<th scope="row">February</th>
	<td>Utilities</td>
	<td>$200</td>
	</tr>
	</tbody>
	</table>


	<!-- TABLE 2 -->
	<table>
	<caption>Stock Prices</caption>
	<thead>
	<tr>
	<th id="symbol" scope="col">Symbol</th>
	<th id="price" scope="col">Price</th>
	<th id="change" scope="col">Change</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<th headers="symbol">AAPL</th>
	<td headers="price">$150.25</td>
	<td headers="change" aria-label="Positive change">+0.75%</td>
	</tr>
	</tbody>
	</table>

	</body>

	</html>