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
```html
<!-- 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
```html
<!-- 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
```html
<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
```html
<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
```javascript
// 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
```css
.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
```html
<!-- 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
```html
<!-- 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
```html
<meta name="description" content="En demonstrasjon av MVC-arkitektur i en nettbutikk-applikasjon">
<html lang="no">
```

### 2. Structured Pricing
```html
<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
```css
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.*