HTML5 Validation and Accessibility Basics

Introduction to Validation and Accessibility

Welcome to our afternoon session on HTML validation and accessibility basics! These two topics might seem separate at first glance, but they're actually closely related. Properly validated HTML forms the foundation of accessible websites, ensuring your content can be used by everyone, regardless of their abilities or the devices they use.

Imagine you're building a physical structure. Validation is like making sure your building meets code requirements - it ensures the structural integrity. Accessibility is like adding ramps, elevators, and clear signage - making sure everyone can use the building regardless of their abilities. Both are essential for creating robust, inclusive digital spaces.

In today's session, we'll explore why these concepts matter, how to validate your HTML, and the fundamental principles of web accessibility that every developer should know.

Why Validation and Accessibility Matter

The Importance of HTML Validation

HTML validation ensures your code follows the official specifications. But why does this matter?

Consistent rendering: Valid HTML is more likely to display correctly across different browsers and devices.
Future compatibility: Valid code is more likely to work with future browser versions.
Better performance: Browsers process valid HTML more efficiently.
Easier maintenance: Valid code is easier to update and debug.
Foundation for accessibility: Valid HTML provides the structure that assistive technologies rely on.

Analogy: Think of HTML validation like spell-checking and grammar-checking a document. The document might still convey meaning with errors, but correcting those errors ensures the clearest possible communication with the widest audience.

The Value of Web Accessibility

Web accessibility means designing and developing websites that can be used by everyone, including people with disabilities. This includes people with:

Visual impairments (blindness, low vision, color blindness)
Hearing impairments (deafness, hard of hearing)
Motor impairments (limited dexterity, paralysis, tremors)
Cognitive disabilities (learning disabilities, attention disorders, memory issues)

But accessibility benefits everyone:

Legal compliance: Many jurisdictions have laws requiring web accessibility.
Broader audience: Around 15-20% of the global population has some form of disability.
SEO advantages: Many accessibility practices improve search engine optimization.
Better usability for all: Clear structure, good contrast, and keyboard navigation help everyone.
Mobile users: Many accessibility features improve mobile usability.

Real-world impact: Without accessible websites, someone who is blind might not be able to shop online, a deaf person might miss important information in podcasts without transcripts, and someone with motor disabilities might be unable to navigate sites that require precise mouse movements.

HTML Validation Fundamentals

What Makes HTML Valid?

Valid HTML adheres to the rules and specifications of the HTML standard you're using (HTML5 in our case). This includes:

Proper document structure (DOCTYPE, html, head, body)
Correctly nested elements
Elements with proper opening and closing tags
Unique ID attributes
Required attributes for certain elements
Correctly formatted attribute values

Common Validation Errors

Let's look at some of the most frequent validation issues:

1. Missing DOCTYPE Declaration

Invalid:

<html>
    <head>
        <title>My Page</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

Valid:

<!DOCTYPE html>
<html>
    <head>
        <title>My Page</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

2. Unclosed Elements

Invalid:

<p>This paragraph is not closed properly.
<p>This creates a validation error.</p>

Valid:

<p>This paragraph is closed properly.</p>
<p>This creates valid HTML.</p>

3. Improperly Nested Elements

Invalid:

<em><strong>This text is emphasized and strong</em></strong>

Valid:

<em><strong>This text is emphasized and strong</strong></em>

4. Missing Required Attributes

Invalid:

<img src="logo.png">

Valid:

<img src="logo.png" alt="Company Logo">

5. Duplicate ID Attributes

Invalid:

<div id="container">First container</div>
<div id="container">Second container</div>

Valid:

<div id="container1">First container</div>
<div id="container2">Second container</div>

Using the W3C Validator

The World Wide Web Consortium (W3C) provides the official HTML validator. You can use it in several ways:

1. Online Validation

Visit validator.w3.org
Validate by URL, file upload, or direct input

2. Browser Extensions

HTML Validator extensions are available for Chrome, Firefox, and other browsers
These provide real-time validation as you develop

3. Command Line Tools

Tools like html-validate can be integrated into your development workflow
These can be combined with CI/CD pipelines for automated checking

Understanding Validator Output

The validator will return three types of messages:

Errors: These must be fixed for valid HTML
Warnings: These are potential issues that don't invalidate your HTML but might cause problems
Info messages: These provide additional information but don't indicate problems

Each message typically includes:

Line and column numbers where the issue occurs
Description of the problem
The problematic code snippet
Hints for fixing the issue

Practical Exercise: Finding and Fixing Validation Errors

Let's practice identifying and fixing common validation errors:

<!DOCTYPE html>
<html>
<head>
    <title>Validation Exercise<title>
</head>
<body>
    <h1>My Favorite Hobbies<h1>
    <div id="hobbies">
        <ul>
            <li>Reading</li>
            <li>Hiking
            <li>Cooking</li>
        </ul>
    </div>
    <img src="profile.jpg">
    <div id="hobbies">
        <p>Contact me at: <email>example@domain.com</email></p>
    </div>
</body>

Take a moment to identify the validation errors in this code. How many can you find? What would you do to fix them?

Errors and Solutions:

Missing closing tag for <title> element
Missing closing tag for <h1> element
Unclosed <li> element (Hiking)
Missing alt attribute for <img> element
Duplicate id attribute (hobbies)
<email> is not a valid HTML element
Missing closing <html> tag

Corrected Code:

<!DOCTYPE html>
<html>
<head>
    <title>Validation Exercise</title>
</head>
<body>
    <h1>My Favorite Hobbies</h1>
    <div id="hobbies-list">
        <ul>
            <li>Reading</li>
            <li>Hiking</li>
            <li>Cooking</li>
        </ul>
    </div>
    <img src="profile.jpg" alt="My profile picture">
    <div id="contact-info">
        <p>Contact me at: <a href="mailto:example@domain.com">example@domain.com</a></p>
    </div>
</body>
</html>

Accessibility Fundamentals

The POUR Principles

The Web Content Accessibility Guidelines (WCAG) are organized around four principles, often remembered by the acronym POUR:

Perceivable: Information must be presentable to users in ways they can perceive, regardless of sensory abilities.
Operable: User interface components and navigation must be operable by everyone.
Understandable: Information and operation of the user interface must be understandable.
Robust: Content must be robust enough to be interpreted reliably by a wide variety of user agents, including assistive technologies.

Analogy: Think of POUR like building a public library. It must be perceivable (books in multiple formats including braille and audiobooks), operable (accessible entrances and book shelves), understandable (clear signage and organization), and robust (built to accommodate various needs and technologies).

Essential HTML Accessibility Techniques

Let's explore the fundamental HTML techniques that form the foundation of web accessibility:

1. Semantic HTML

Using the right HTML elements for their intended purpose is perhaps the single most important accessibility practice:

Inaccessible:

<div class="heading">About Our Company</div>
<div class="paragraph">We provide services for...</div>
<div class="button" onclick="submitForm()">Submit</div>

Accessible:

<h2>About Our Company</h2>
<p>We provide services for...</p>
<button onclick="submitForm()">Submit</button>

When you use semantic HTML:

Screen readers announce elements appropriately ("Heading level 2", "Button", etc.)
Users can navigate via landmarks and element types
Elements get appropriate keyboard behavior by default
Search engines better understand your content

2. Text Alternatives for Images

All non-decorative images need text alternatives:

Inaccessible:

<img src="chart.png">

Accessible:

<img src="chart.png" alt="Bar chart showing sales increased 25% in Q4 2022">

Guidelines for Writing Effective Alt Text:

Describe the content and function of the image
Keep it concise but comprehensive
No need to begin with "image of" or "picture of"
For decorative images, use empty alt text: alt=""
For complex images like charts, consider more detailed descriptions

3. Proper Heading Structure

Headings create a document outline that helps users navigate your content:

Inaccessible (poor structure):

<h1>Company Website</h1>
<h3>About Us</h3>
<p>Our company history...</p>
<h6>Our Mission</h6>
<p>We strive to...</p>
<h2>Services</h2>

Accessible (logical structure):

<h1>Company Website</h1>
<h2>About Us</h2>
<p>Our company history...</p>
<h3>Our Mission</h3>
<p>We strive to...</p>
<h2>Services</h2>

Proper heading hierarchy:

Creates a logical document outline
Allows screen reader users to navigate via headings
Helps all users scan and understand content structure
Improves SEO by signaling content hierarchy to search engines

4. Accessible Links

Links should make sense even when read out of context:

Inaccessible:

<p>To learn about our services, <a href="services.html">click here</a>.</p>
<p>Download our annual report <a href="report.pdf">here</a>.</p>

Accessible:

<p><a href="services.html">Learn about our services</a>.</p>
<p><a href="report.pdf">Download our annual report (PDF, 2.5MB)</a>.</p>

Accessible links:

Make sense when read in isolation (screen reader users often navigate by links)
Indicate the destination or purpose
Inform users about file types and sizes for downloads
Avoid generic phrases like "click here," "read more," or "learn more"

5. Tables for Tabular Data Only

Tables should be used for data relationships, not layout:

Proper Table Usage:

<table>
    <caption>Quarterly Sales Report</caption>
    <thead>
        <tr>
            <th scope="col">Quarter</th>
            <th scope="col">Sales</th>
            <th scope="col">Growth</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Q1</th>
            <td>$10,000</td>
            <td>10%</td>
        </tr>
        <tr>
            <th scope="row">Q2</th>
            <td>$15,000</td>
            <td>50%</td>
        </tr>
    </tbody>
</table>

Accessible tables include:

Captions that describe the table's purpose
Header cells (<th>) with appropriate scope attributes
Proper structure with <thead>, <tbody>, and <tfoot> when applicable
Simple, logical organization of data

Complex tables may need additional attributes like headers and id to establish relationships between cells.

6. Form Accessibility

Forms are often challenging for users with disabilities. Make them accessible with:

Inaccessible:

<form>
    Name:
    <input type="text">
    
    Email:
    <input type="text">
    
    <input type="checkbox"> Subscribe to newsletter
    
    <input type="submit" value="Submit">
</form>

Accessible:

<form>
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required aria-required="true">
    </div>
    
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required aria-required="true">
    </div>
    
    <div>
        <input type="checkbox" id="subscribe" name="subscribe">
        <label for="subscribe">Subscribe to newsletter</label>
    </div>
    
    <button type="submit">Submit</button>
</form>

Accessible forms include:

Proper <label> elements associated with form controls
Appropriate input types (email, tel, number, etc.)
Clear focus states for keyboard navigation
Logical tab order
Error messages linked to the relevant fields
Required field indications (both visually and with required and aria-required)
Fieldsets and legends for grouping related fields

7. Language Specification

Specify the document language and any language changes within the document:

Inaccessible:

<html>
    <!-- No language specified -->
</html>

Accessible:

<html lang="en">
    <!-- English document -->
    <p>Welcome to our website. <span lang="es">¡Bienvenido!</span></p>
</html>

Specifying language:

Helps screen readers pronounce content correctly
Assists translation tools
Helps browsers apply appropriate typography
Supports content indexing by search engines

Testing Accessibility

While automated tools can help identify some accessibility issues, manual testing is essential. Here are some basic testing approaches:

1. Keyboard Navigation

Navigate your entire site using only the keyboard (Tab, Enter, Space, arrows)
Ensure all interactive elements are accessible and have visible focus indicators
Check that tab order is logical and follows the visual layout

2. Screen Reader Testing

Learn to use a screen reader (NVDA, VoiceOver, JAWS)
Navigate your site to ensure content is announced correctly
Check that form controls, images, and links provide adequate information

3. Automated Tools

WAVE (Web Accessibility Evaluation Tool): wave.webaim.org
Axe DevTools: Browser extensions for accessibility testing
Lighthouse in Chrome DevTools includes accessibility audits
HTML5 Validator (accessibility issues often correlate with validation errors)

Remember: Automated tools typically catch only about 30% of accessibility issues. Manual testing and empathy are essential for truly accessible websites.

Introduction to ARIA

ARIA (Accessible Rich Internet Applications) is a set of attributes that enhance accessibility when HTML alone isn't sufficient. It's particularly useful for dynamic content and custom UI components.

The First Rule of ARIA

Don't use ARIA if you can use a native HTML element instead.

Native HTML elements have built-in semantics and behaviors that ARIA attempts to replicate. Always prefer semantic HTML when possible.

Unnecessary ARIA:

<div role="button" tabindex="0" onclick="submitForm()">Submit</div>

Better Solution:

<button onclick="submitForm()">Submit</button>

Basic ARIA Concepts

ARIA attributes fall into three main categories:

1. Roles

Define what an element is or does:

<div role="navigation">...</div>
<div role="search">...</div>
<div role="tab">...</div>

2. Properties

Define properties of elements that don't change often:

<div aria-required="true">...</div>
<div aria-label="Close menu">...</div>
<div aria-haspopup="true">...</div>

3. States

Define the current condition of an element (often updated with JavaScript):

<div aria-expanded="false">...</div>
<div aria-selected="true">...</div>
<div aria-disabled="false">...</div>

Common ARIA Use Cases

Here are some practical examples of when ARIA is helpful:

1. Error Messages for Form Fields

<label for="email">Email:</label>
<input type="email" id="email" aria-describedby="email-error">
<div id="email-error" class="error" aria-live="polite"></div>

<!-- When an error occurs, JavaScript updates the error div: -->
document.getElementById('email-error').textContent = 'Please enter a valid email address';

2. Custom Toggle Buttons

<div class="toggle-button" role="button" tabindex="0" 
     aria-pressed="false" onclick="toggleMenu()">
    Menu
</div>

<!-- When clicked, JavaScript updates the state: -->
element.setAttribute('aria-pressed', 'true');

3. Accordion Components

<div class="accordion">
    <h3>
        <button aria-expanded="false" aria-controls="section1">
            Section 1
        </button>
    </h3>
    <div id="section1" hidden>
        <p>Content for section 1...</p>
    </div>
    
    <h3>
        <button aria-expanded="false" aria-controls="section2">
            Section 2
        </button>
    </h3>
    <div id="section2" hidden>
        <p>Content for section 2...</p>
    </div>
</div>

ARIA Cautions

ARIA can enhance accessibility, but it can also make things worse if used incorrectly:

ARIA doesn't change browser behavior - it only changes what's announced to assistive technology
Adding ARIA roles doesn't automatically add keyboard support or expected interactions
Testing with actual screen readers is essential when using ARIA
Too much ARIA can create verbose and confusing experiences

For our course, we'll focus primarily on semantic HTML and basic accessibility principles. We'll dive deeper into ARIA in later sessions when we cover more complex UI components.

Practical Exercise: Fixing Accessibility Issues

Let's practice identifying and fixing accessibility issues in a sample page:

<!DOCTYPE html>
<html>
<head>
    <title>Coffee Shop</title>
</head>
<body>
    <div class="header">
        <div class="logo"><img src="logo.png"></div>
        <div class="nav">
            <div><a href="#">Home</a></div>
            <div><a href="#">Menu</a></div>
            <div><a href="#">About</a></div>
            <div><a href="#">Contact</a></div>
        </div>
    </div>
    
    <div class="main">
        <div class="title">Welcome to Bean There Coffee Shop</div>
        
        <div class="section">
            <div class="subtitle">Our Story</div>
            <div>Founded in 2010, Bean There has been serving premium coffee...</div>
            <div><img src="coffee-shop.jpg"></div>
            <div>Learn more <a href="about.html">here</a>.</div>
        </div>
        
        <div class="section">
            <div class="subtitle">Menu Highlights</div>
            <div>
                <div class="menu-item">
                    <div class="item-name">Espresso</div>
                    <div class="item-price">$3.50</div>
                    <div>Our signature blend, rich and robust.</div>
                </div>
                <div class="menu-item">
                    <div class="item-name">Cold Brew</div>
                    <div class="item-price">$4.25</div>
                    <div>Smooth and refreshing, steeped for 12 hours.</div>
                </div>
            </div>
            <div>View full menu <a href="menu.html">click here</a>.</div>
        </div>
        
        <div class="section">
            <div class="subtitle">Contact Us</div>
            <form>
                Name: <input type="text"><br>
                Email: <input type="text"><br>
                Message: <textarea></textarea><br>
                <div onclick="submitForm()" class="button">Send Message</div>
            </form>
        </div>
    </div>
    
    <div class="footer">
        <div>© 2023 Bean There Coffee Shop</div>
        <div>123 Coffee Lane, Brewsville</div>
    </div>
</body>
</html>

Your Task:

Identify accessibility issues in this code and create an improved version that addresses them. Consider HTML validation, semantic structure, and accessibility best practices we've covered.

Improved Version:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bean There Coffee Shop</title>
</head>
<body>
    <header>
        <img src="logo.png" alt="Bean There Coffee Shop Logo">
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="menu.html">Menu</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <h1>Welcome to Bean There Coffee Shop</h1>
        
        <section>
            <h2>Our Story</h2>
            <p>Founded in 2010, Bean There has been serving premium coffee...</p>
            <figure>
                <img src="coffee-shop.jpg" alt="Interior of our coffee shop with customers enjoying coffee">
                <figcaption>Our main location in downtown Brewsville</figcaption>
            </figure>
            <p><a href="about.html">Learn more about our story</a>.</p>
        </section>
        
        <section>
            <h2>Menu Highlights</h2>
            <div class="menu-items">
                <article class="menu-item">
                    <h3>Espresso</h3>
                    <p class="item-price">$3.50</p>
                    <p>Our signature blend, rich and robust.</p>
                </article>
                <article class="menu-item">
                    <h3>Cold Brew</h3>
                    <p class="item-price">$4.25</p>
                    <p>Smooth and refreshing, steeped for 12 hours.</p>
                </article>
            </div>
            <p><a href="menu.html">View our full menu</a>.</p>
        </section>
        
        <section>
            <h2>Contact Us</h2>
            <form action="submit.php" method="post">
                <div>
                    <label for="name">Name:</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div>
                    <label for="email">Email:</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div>
                    <label for="message">Message:</label>
                    <textarea id="message" name="message" required></textarea>
                </div>
                <button type="submit">Send Message</button>
            </form>
        </section>
    </main>
    
    <footer>
        <p>© 2023 Bean There Coffee Shop</p>
        <address>123 Coffee Lane, Brewsville</address>
    </footer>
</body>
</html>

Improvements Made:

Added language attribute to the <html> element
Added meta viewport tag for responsive design
Replaced generic div elements with semantic elements like header, nav, main, section, footer, etc.
Used proper heading hierarchy (h1, h2, h3)
Added alt text to images
Used <figure> and <figcaption> for the coffee shop image
Added proper list structure (<ul> and <li>) for navigation
Improved link text to be more descriptive than "here" and "click here"
Added <label> elements properly associated with form controls
Replaced the div "button" with a proper <button> element
Used <address> element for contact information
Added method and action attributes to the form
Used appropriate input types (email) and added required attribute

Assignment: Validation and Accessibility Audit

For this assignment, you will perform a validation and accessibility audit on a webpage and make improvements.

Requirements:

Download the starter file from /week_4/assignments/accessibility_starter.html
Run the file through the W3C HTML Validator and document all errors and warnings
Create a copy of the file named accessibility_improved.html
Fix all validation errors
Improve the semantic structure using appropriate HTML5 elements
Ensure all images have appropriate alt text
Create a proper heading hierarchy
Improve form accessibility with labels and appropriate input types
Create descriptive link text
Add any other accessibility improvements you can identify
Create a brief document (text or Markdown) explaining the issues you found and how you fixed them

Submission:

Submit the following to your GitHub repository:

Your improved HTML file (accessibility_improved.html)
Your explanatory document (accessibility_audit.md or accessibility_audit.txt)
A screenshot of the W3C Validator results for your improved version, showing any errors resolved

Due: Before tomorrow morning's session

Folder location: Save your files in /week_4/assignments/

Additional Resources

HTML Validation

Accessibility Resources

ARIA Resources

Tools

Coming Up Next

Tomorrow we'll dive into CSS Fundamentals, where we'll learn how to style our HTML. We'll cover:

CSS selectors and specificity
Box model and layout basics
Colors, backgrounds, and borders
Text styling and typography

The validation and accessibility principles we've learned today will continue to be important as we add styles to our HTML.