## WEB ACCESSIBILITY PRACTICAL EXAMPLES

### 1. Using Arial label:

##### HTML:

<button class="accessible-button" aria-label="Submit" onclick="handleSubmit()">Submit</button>

##### CSS:

.accessible-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

### 2. Using TabIndex:

##### HTML:

<nav>
  <ul class="accessible-menu">
    <li><a href="#" tabindex="0">Home</a></li>
    <li><a href="#" tabindex="0">About</a></li>
    <li><a href="#" tabindex="0">Services</a></li>
    <li><a href="#" tabindex="0">Contact</a></li>
  </ul>
</nav>

##### CSS:

 .accessible-menu {
  list-style: none;
  padding: 0;
}

.accessible-menu li {
  margin-bottom: 10px;
}

.accessible-menu a {
  text-decoration: none;
  color: #333;
  display: inline-block;
  padding: 5px;
}

.accessible-menu a:hover,
.accessible-menu a:focus {
  background-color: #007bff;
  color: #fff;
}

### 3. Using role:

<button id="openModalButton" onclick="openModal()">Open Modal</button>

<div id="modal" class="accessible-modal" role="dialog" aria-labelledby="modalTitle" aria-describedby="modalDesc" aria-hidden="true">
  <div class="modal-content">
    <h2 id="modalTitle">Modal Title</h2>
    <p id="modalDesc">Modal description.</p>
    <button onclick="closeModal()">Close</button>
  </div>
</div>

### 4. Image with Alt Text:

<img src="image.jpg" alt="A beautiful sunset over the ocean">

### 5. Semantic HTML:

<header>
  <h1>Welcome to Our Website</h1>
</header>

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<main>
  <article>
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>
</main>

<footer>
  <p>&copy; 2023 Company Name. All rights reserved.</p>
</footer>

### 7. Form with Labels and Inputs:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

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

#### 9. Keyboard Navigation:
Ensure all interactive elements can be navigated and activated using the keyboard alone.A typical example is a dropdown of items.

Color Contrast:
Ensure sufficient color contrast between text and background for readability.

#### 9. Focus styles:

:focus {
  outline: 2px solid #007bff;
  outline-offset: 2px;
}

#### 10. Aria Roles and Landmarks:

<div role="banner">Header content</div>

<main role="main">Main content</main>

<nav role="navigation">Navigation links</nav>

<aside role="complementary">Sidebar content</aside>

<footer role="contentinfo">Footer content</footer>

#### 11. Error Messages:

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<div role="alert" class="error-message">Please enter a valid email address.</div>

#### 12. Video with Captions:

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track src="captions.vtt" kind="captions" label="English" srclang="en">
</video>

Other use cases for web accessibility include:

1. Dropdown Menus:

Use proper semantic HTML and ARIA roles to make dropdown menus accessible. Ensure keyboard navigation and that menu items are announced correctly by screen readers.

2. Animated Content:

Ensure that animated content, such as carousels or sliders, can be paused or controlled by users. Provide alternative text or captions for videos and animations.

3. Modal Dialogs:

Implement modal dialogs with appropriate ARIA attributes. Make sure they are keyboard accessible and can be closed using the keyboard.

4. Tabbed Navigation:

Design tabbed interfaces that can be navigated using the keyboard, and that screen readers announce the selected tab content.

5. Dynamic Content:

For dynamically loaded content (e.g., infinite scroll), make sure screen readers announce the new content and provide a clear way for users to understand and navigate through it.

5. Responsive Design:

Ensure your design is responsive and accommodates users on various devices, including those with different screen sizes and orientations.

6. Forms with Error Handling:

Provide clear error messages for form validation. Ensure that screen readers announce error messages and explain how to correct the issues.

7. Multi-Language Support:

If your website is available in multiple languages, ensure that screen readers announce content in the correct language and that language changes are communicated properly.

8. Accessible Tables:

When using tables, make sure to use semantic table elements `<table>`, `<th>`, `<td>`) and provide appropriate headers and captions for screen readers.

9. Custom Widgets:

If you're building custom interactive widgets (like custom sliders or widgets), ensure they are keyboard navigable and have proper ARIA roles.

10. Keyboard Traps:

Avoid keyboard traps where users get stuck in a certain element and can't navigate further using the keyboard. Ensure users can easily navigate back and forth.

Audio-only Content:

11. Provide transcripts or captions for audio-only content like podcasts to make them accessible to users who are deaf or hard of hearing.

12. High Contrast Mode:

Test your website in high contrast mode to ensure that all content remains readable and usable with high contrast settings.

13. Consistent Navigation:

Maintain a consistent navigation structure and layout across different pages of your website to help users predict where to find information.

### Conclusion:
These practical examples cover a range of accessibility considerations, from semantic HTML structure to keyboard navigation, form inputs, color contrast, and more. Implementing these techniques helps create a web experience that's usable and inclusive for all users. Always refer to web accessibility guidelines and conduct thorough testing with assistive technologies to ensure compliance.