get-frontend/webshop_app/mvc-emne2/ACCESSIBILITY.md

Accessibility & Semantic HTML Improvements

Overview

The MVC webshop application has been enhanced with proper semantic HTML elements and accessibility features to ensure it's usable by all users, including those using assistive technologies.

Semantic HTML Elements Added

1. Document Structure

• <main>: Wraps the primary content area
• <header>: Used for page headers and section headers
• <footer>: Used for cart totals and action areas
• <nav>: Navigation elements including breadcrumbs
• <section>: Content sections with proper roles
• <article>: Individual content items (products, cart items)

2. Navigation Improvements

<!-- Before -->
<div class="navbar">
  <h1 class="logo">Nettbutikk</h1>
  <ul class="nav-links">...</ul>
</div>

<!-- After -->
<header>
  <nav class="navbar">
    <h1 class="logo">Nettbutikk</h1>
    <ul class="nav-links">...</ul>
  </nav>
</header>

3. Product Cards

<!-- Before -->
<div class="product-card">
  <div class="product-image">🎧</div>
  <div class="product-name">Hodetelefoner</div>
  <!-- ... -->
</div>

<!-- After -->
<article class="product-card" role="listitem" tabindex="0">
  <header>
    <div class="product-image" role="img" aria-label="Produktbilde: Hodetelefoner">🎧</div>
    <h3 class="product-name">Hodetelefoner</h3>
  </header>
  <div class="product-info">
    <p class="product-price" aria-label="Pris: 99.99 kroner">
      <span class="currency">kr</span> <span class="amount">99.99</span>
    </p>
    <!-- ... -->
  </div>
  <footer>
    <button aria-label="Legg Hodetelefoner i handlekurv">...</button>
  </footer>
</article>

4. Product Detail Page

<main>
  <section role="main" aria-label="Produktdetaljer">
    <nav aria-label="Breadcrumb">
      <button aria-label="Gå tilbake til produktoversikt">← Tilbake</button>
    </nav>
    <article class="product-detail">
      <header>
        <div role="img" aria-label="Produktbilde: Produktnavn">🎧</div>
        <h1 class="product-name">Produktnavn</h1>
      </header>
      <!-- ... -->
    </article>
  </section>
</main>

5. Shopping Cart

<section role="main" aria-label="Handlekurv">
  <header>
    <h2>Handlekurv</h2>
    <p class="cart-summary" aria-live="polite">3 varer i handlekurven</p>
  </header>
  <div role="list" aria-label="Varer i handlekurv">
    <article class="cart-item" role="listitem">
      <header class="cart-item-info">
        <h3 class="cart-item-name">Produktnavn</h3>
        <!-- ... -->
      </header>
      <!-- ... -->
    </article>
  </div>
  <footer class="cart-total">
    <div role="status" aria-live="polite" aria-label="Totalt beløp: 299.97 kroner">
      Totalt: <span class="amount">299.97 kr</span>
    </div>
    <!-- ... -->
  </footer>
</section>

ARIA Attributes Added

1. Roles

• role="main": Main content areas
• role="list": Product grids and cart items
• role="listitem": Individual products and cart items
• role="img": Emoji images with descriptions
• role="status": Dynamic content updates
• role="application": Root app container
• role="alert": Error messages

2. Labels

• aria-label: Descriptive labels for interactive elements
• aria-labelledby: References to heading elements
• aria-describedby: Additional descriptions

3. Live Regions

• aria-live="polite": Non-urgent updates (cart count, totals)
• aria-live="assertive": Important notifications

4. Groups

• role="group": Quantity controls
• aria-label on groups: "Antall Produktnavn"

Keyboard Navigation

1. Focus Management

• All interactive elements are keyboard accessible
• Product cards have tabindex="0" and keyboard event handlers
• Clear focus indicators with CSS outline styles

2. Event Handlers

// Product cards support both click and keyboard activation
onkeydown="if(event.key==='Enter'||event.key===' ') showProductDetail(${product.id})"

Screen Reader Support

1. Screen Reader Only Content

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

2. Descriptive Labels

• Product images: aria-label="Produktbilde: [Product Name]"
• Prices: aria-label="Pris: [Amount] kroner"
• Buttons: aria-label="Legg [Product Name] i handlekurv"
• Quantity controls: aria-label="Øk antall [Product Name]"

Dynamic Content Updates

1. Live Regions

<!-- Cart summary updates automatically -->
<p class="cart-summary" aria-live="polite">3 varer i handlekurven</p>

<!-- Total amount announces changes -->
<div role="status" aria-live="polite" aria-label="Totalt beløp: 299.97 kroner">
  Totalt: <span class="amount">299.97 kr</span>
</div>

<!-- Quantity changes announced -->
<span class="quantity" role="status" aria-live="polite" aria-label="3 stykker">3</span>

2. Loading States

<!-- Initial loading indicator -->
<div class="loading" role="status" aria-live="polite">Laster innhold...</div>

<!-- Empty cart state -->
<div class="empty-cart" role="status" aria-live="polite">
  <h3>Handlekurven din er tom</h3>
  <p>Legg til noen produkter for å komme i gang!</p>
</div>

Meta Information

1. Document Meta Tags

<meta name="description" content="En demonstrasjon av MVC-arkitektur i en nettbutikk-applikasjon">
<html lang="no">

2. Structured Pricing

<p class="product-price" aria-label="Pris: 99.99 kroner">
  <span class="currency">kr</span> <span class="amount">99.99</span>
</p>

CSS Accessibility Features

1. Focus Indicators

button:focus,
a:focus,
[tabindex]:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

2. Button Variants

• Primary buttons: .btn-primary for main actions
• Danger buttons: .btn-danger for destructive actions
• Remove buttons: .btn-remove for cart item removal

Testing Recommendations

1. Screen Reader Testing

• Test with NVDA, JAWS, or VoiceOver
• Verify all content is announced properly
• Check navigation flow makes sense

2. Keyboard Navigation

• Tab through entire interface
• Verify all interactive elements are reachable
• Test Enter and Space key activation

3. ARIA Validation

• Use axe-core or similar accessibility testing tools
• Validate ARIA attributes are used correctly
• Check for missing or redundant labels

Benefits of These Improvements

1. Screen Reader Compatibility: All content is properly announced
2. Keyboard Navigation: Full keyboard accessibility without mouse
3. Clear Structure: Semantic HTML provides document outline
4. Dynamic Updates: Live regions announce changes
5. Context Awareness: ARIA labels provide context for all interactions
6. Standards Compliance: Follows WCAG 2.1 guidelines
7. Better SEO: Semantic HTML improves search engine understanding

---

These accessibility improvements ensure the webshop is usable by everyone, regardless of their abilities or the assistive technologies they use.