Best Practices: Accessibility & SEO in HTML/CSS

1. Welcome and Icebreaker:

• Icebreaker: “Have you ever used a screen reader or searched for something and not found it? What was it?”

2. Outline the Session:

• Agenda:
  • Writing semantic markup
  • Using ARIA roles
  • SEO optimization techniques
• Learning Outcomes:
  • Write accessible HTML
  • Improve SEO with best practices
• Structure:
  • Theory, live coding, and hands-on practice
  • Interactive Q&A

3. Concept Explanation:

Accessibility means making your website usable for everyone, including people with disabilities (visual, auditory, motor, or cognitive). SEO (Search Engine Optimization) is about making your site discoverable and understandable by search engines. Both rely on writing clean, semantic HTML and following best practices.

Accessibility Principles

• Semantic HTML: Use elements like <header>, <nav>, <main>, <article>, <section>, and <footer> to give meaning to your content.
• ARIA Roles: Use ARIA (Accessible Rich Internet Applications) attributes to enhance accessibility when native HTML is not enough (e.g., role="navigation", aria-label).
• Alt Text: Always provide descriptive alt attributes for images so screen readers can describe them.
• Keyboard Navigation: Ensure all interactive elements (links, buttons, forms) are accessible via keyboard (Tab, Enter, Space).
• Color Contrast: Use sufficient contrast between text and background for readability.
• Labels: Use <label> elements for form controls.

SEO Principles

• Headings: Use headings (<h1>–<h6>) in a logical order. Only one <h1> per page, describing the main topic.
• Meta Tags: Use <title>, <meta name="description">, and other meta tags in the <head> for better indexing.
• Descriptive Links: Use meaningful link text (avoid “click here”).
• Image Alt Text: Helps search engines understand images.
• Structured Data: Use schema.org or JSON-LD for rich search results (advanced).

Why does this matter?

• Accessibility is a legal requirement in many countries and improves user experience for everyone.
• Good SEO increases your site’s visibility and traffic.

Best Practices:

• Test your site with screen readers (VoiceOver, NVDA, JAWS).
• Use browser accessibility tools (Lighthouse, axe DevTools).
• Validate your HTML and use semantic tags.
• Write clear, descriptive content and link text.
• Use responsive design for all devices.

Common Pitfalls:

• Using <div> or <span> for structure instead of semantic elements.
• Missing alt text on images.
• Poor heading structure (skipping levels, multiple <h1>s).
• Low color contrast.
• Unlabeled form controls.

4. Live Coding Demonstration:

Here is a more complete example of accessible and SEO-friendly HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Accessible & SEO-Friendly Site</title>
  <meta name="description" content="A demo of best practices for accessibility and SEO in HTML and CSS.">
</head>
<body>
  <header>
    <h1>Accessible Site</h1>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <article>
      <h2>Welcome</h2>
      <img src="profile.jpg" alt="Portrait of the site author" width="150" height="150">
      <p>This site is accessible and SEO-friendly. All users, including those using assistive technologies, can navigate and understand the content.</p>
    </article>
    <section>
      <h2>Contact</h2>
      <form>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">Submit</button>
      </form>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 Accessible Site</p>
  </footer>
</body>
</html>

Step-by-step:

• Use semantic tags for structure (<header>, <nav>, <main>, <article>, <section>, <footer>).
• Add ARIA roles or labels for navigation and landmarks.
• Use headings in order and only one <h1>.
• Provide alt text for images.
• Use labels for form fields.
• Add meta tags for SEO.

Best Practice: Test with screen readers and SEO tools (Lighthouse, axe, etc.). Common Pitfall: Using divs for everything, missing alt text, or poor heading structure.

5. Tasks:

Exercise:

1. Create a new HTML file named accessible-seo-demo.html.
2. Add a semantic structure: header, nav, main, article, section, and footer.
3. Use ARIA roles or labels where appropriate (e.g., aria-label on nav).
4. Add a heading structure with only one <h1>, and use <h2> for sections.
5. Add an image with descriptive alt text.
6. Add a form with labeled fields.
7. Add meta tags in the <head> for title and description.
8. Test your page with a screen reader or browser accessibility tool.

Bonus Challenge:

• Add a button that is accessible by keyboard and screen reader (e.g., with aria-pressed or aria-label).
• Check your color contrast using an online tool (like WebAIM Contrast Checker).

Feel free to share your code or ask questions for feedback!