The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Understandable: Information and Operation

Next ►
►

In this section, we will explore the principle of making web content understandable. This involves ensuring that both the information presented and the operation of the user interface are clear and comprehensible to all users, including those with cognitive disabilities.

Key Concepts

  1. Readable Content

    • Use clear and simple language.
    • Provide definitions for jargon or complex terms.
    • Use headings and lists to organize content logically.

  2. Predictable Navigation

    • Ensure that navigation mechanisms are consistent across pages.
    • Avoid unexpected changes in context unless initiated by the user.

  3. Input Assistance

    • Provide instructions and feedback for user inputs.
    • Offer error prevention and correction mechanisms.

Practical Examples

Example 1: Simplifying Language

Before:

<p>The utilization of this application necessitates the comprehension of multifaceted terminologies.</p>

After:

<p>To use this application, you need to understand some complex terms.</p>

Explanation:

  • The revised text uses simpler language, making it more accessible to a broader audience.

Example 2: Consistent Navigation

HTML Structure:

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about">About Us</a></li>
    <li><a href="/services">Services</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Explanation:

  • Ensure that the navigation menu is consistent across all pages, helping users predict where to find information.

Example 3: Input Assistance

HTML Form:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <span class="error" id="emailError" style="display:none;">Please enter a valid email address.</span>
  <button type="submit">Submit</button>
</form>

JavaScript for Validation:

document.querySelector('form').addEventListener('submit', function(event) {
  const emailInput = document.getElementById('email');
  const emailError = document.getElementById('emailError');
  
  if (!emailInput.validity.valid) {
    emailError.style.display = 'block';
    event.preventDefault();
  } else {
    emailError.style.display = 'none';
  }
});

Explanation:

  • The form provides immediate feedback if the email input is invalid, helping users correct errors before submission.

Exercises

Exercise 1: Simplify a Paragraph

Task: Rewrite the following paragraph to make it more understandable:

"Subsequent to the completion of the registration process, participants will be endowed with the capability to access the exclusive content."

Solution: "After you register, you can access the exclusive content."

Exercise 2: Consistent Navigation

Task: Create a navigation menu for a website with the following pages: Home, Blog, Portfolio, Contact. Ensure the menu is consistent across all pages.

Solution:

<nav>
  <ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/portfolio">Portfolio</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Exercise 3: Form Validation

Task: Add client-side validation to a form with a username and password field. Display an error message if the fields are empty.

Solution:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
  <span class="error" id="usernameError" style="display:none;">Username is required.</span>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>
  <span class="error" id="passwordError" style="display:none;">Password is required.</span>
  
  <button type="submit">Submit</button>
</form>

<script>
document.querySelector('form').addEventListener('submit', function(event) {
  const usernameInput = document.getElementById('username');
  const passwordInput = document.getElementById('password');
  const usernameError = document.getElementById('usernameError');
  const passwordError = document.getElementById('passwordError');
  
  let valid = true;
  
  if (!usernameInput.value) {
    usernameError.style.display = 'block';
    valid = false;
  } else {
    usernameError.style.display = 'none';
  }
  
  if (!passwordInput.value) {
    passwordError.style.display = 'block';
    valid = false;
  } else {
    passwordError.style.display = 'none';
  }
  
  if (!valid) {
    event.preventDefault();
  }
});
</script>

Conclusion

In this section, we covered the importance of making web content understandable by focusing on readability, predictable navigation, and input assistance. By implementing these principles, you can create a more inclusive web experience for all users. In the next section, we will explore the principle of robustness, ensuring compatibility with current and future technologies.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved