second commit
This commit is contained in:
parent
0d337a818f
commit
bffdcf4bdf
16 changed files with 2366 additions and 4 deletions
252
webshop_app/mvc-emne2/ACCESSIBILITY.md
Normal file
252
webshop_app/mvc-emne2/ACCESSIBILITY.md
Normal file
|
|
@ -0,0 +1,252 @@
|
|||
# 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.*
|
||||
Loading…
Add table
Add a link
Reference in a new issue