Genereer Toegankelijkheidsverbeteringen met CodeWhisperer voor Mijn Applicatie
description
Helpt ontwikkelaars proactief de toegankelijkheid van hun applicatie te verbeteren met intelligente suggesties van CodeWhisperer, waardoor het risico op non-compliance afneemt en de gebruikerservaring voor mensen met een beperking verbetert. In tegenstelling tot generieke codebeoordelingen richt deze prompt zich specifiek op toegankelijkheid en biedt concrete codeverbeteringen.
prompt
Analyseer mijn applicatiecode op toegankelijkheidsproblemen met Amazon CodeWhisperer. Programmeertaal: <voer je programmeertaal in>. Beschrijving van de applicatie: <beschrijf kort je applicatie of functionaliteit>. I ...
try_prompt
generate_helper
disclaimerOnPageApi
tags
ai_answers
provider: openai
model: gpt-4.1-nano
Natuurlijk! Hier is een overzicht van mogelijke toegankelijkheidsproblemen in jouw JavaScript single-page webapp voor evenementenregistratie, samen met suggesties en voorbeeldcode om deze te verbeteren:
1. **Onvoldoende gebruik van ARIA-rollen en labels**
*Probleem:* Elementen zoals knoppen, formulieren en instructies zijn mogelijk niet correct gelabeld of missen ARIA-rollen, waardoor schermlezers moeite kunnen hebben om ze te identificeren.
*Oplossing:* Voeg juiste labels en ARIA-rollen toe om de semantiek te verbeteren.
*Voorbeeld:*
```html
<!-- Verbeterde knop met label -->
<button id="registreren" aria-label="Registreren voor evenement">Registreren</button>
<!-- Formulier met labels -->
<form id="registratieForm" aria-labelledby="formTitle">
<h2 id="formTitle" class="sr-only">Evenement registratieformulier</h2>
<label for="naam">Naam:</label>
<input type="text" id="naam" name="naam" aria-required="true" />
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" aria-required="true" />
<button type="submit">Verzenden</button>
</form>
```
2. **Ontbrekende toetsenbordnavigatie en focusbeheer**
*Probleem:* Sommige interactieve elementen zijn mogelijk niet toegankelijk via toetsenbord of hebben geen focusindicator.
*Oplossing:* Zorg dat alle interactieve elementen focusbaar zijn en een duidelijke focusindicator hebben. Gebruik `tabindex` indien nodig.
*Voorbeeld:*
```css
/* Focusstijl toevoegen voor duidelijkheid */
button:focus, input:focus {
outline: 3px solid #005fcc;
outline-offset: 2px;
}
```
3. **Gebrek aan instructies en feedback voor schermlezers**
*Probleem:* Gebruikers krijgen mogelijk geen duidelijke instructies of feedback bij acties.
*Oplossing:* Gebruik `aria-live` voor dynamische updates en voeg instructies toe.
*Voorbeeld:*
```html
<div id="feedback" aria-live="polite" class="sr-only"></div>
<script>
document.getElementById('registratieForm').addEventListener('submit', function(e) {
e.preventDefault();
// Validatie en verwerking
document.getElementById('feedback').textContent = 'Registratie succesvol! Bedankt voor je inschrijving.';
});
</script>
```
4. **Gebrek aan visuele en tekstuele contrasten**
*Probleem:* Tekst en knoppen kunnen te weinig contrast hebben, wat moeilijk leesbaar is voor slechtzienden.
*Oplossing:* Gebruik voldoende contrast (minimaal 4.5:1 voor tekst).
*Voorbeeld:* Controleer en pas CSS aan:
```css
body {
background-color: #ffffff;
color: #000000;
}
button {
background-color: #007bff;
color: #ffffff;
}
```
5. **Gebruik van niet-semantische elementen voor interactieve onderdelen**
*Probleem:* Interactieve functies gebruiken mogelijk `<div>` of `<span>` zonder juiste event handlers en ARIA-rollen.
*Oplossing:* Gebruik `<button>` of andere semantische elementen en voeg juiste event handlers toe.
*Voorbeeld:*
```html
<button id="toggleDetails" aria-expanded="false" aria-controls="detailsSection">
Meer details
</button>
<div id="detailsSection" hidden>
<!-- Details hier -->
</div>
<script>
document.getElementById('toggleDetails').addEventListener('click', function() {
const section = document.getElementById('detailsSection');
const expanded = this.getAttribute('aria-expanded') === 'true';
this.setAttribute('aria-expanded', String(!expanded));
section.hidden = expanded;
});
</script>
```
**Samenvatting van aanbevelingen:**
- Voeg duidelijke labels en ARIA-rollen toe.
- Zorg voor volledige toetsenbordnavigatie en focusmanagement.
- Gebruik `aria-live` voor dynamische feedback.
- Zorg voor voldoende contrast en leesbaarheid.
- Gebruik semantische HTML-elementen voor interactieve onderdelen.
Als je specifieke codefragmenten hebt, kan ik gerichte verbeteringen voorstellen.
provider: deepseek
model: deepseek-chat
Hier is een analyse van mogelijke toegankelijkheidsproblemen in uw JavaScript single-page evenementenregistratie-app, met verbetersuggesties:
## Veelvoorkomende toegankelijkheidsproblemen en oplossingen
### 1. Semantische HTML en ARIA-rollen
**Probleem**: Gebruik van generieke `<div>` elementen zonder semantische betekenis.
```javascript
// ❌ Slechte praktijk
const createButton = () => {
const div = document.createElement('div');
div.textContent = 'Registreer';
div.className = 'clickable';
return div;
};
// ✅ Verbeterde versie
const createButton = () => {
const button = document.createElement('button');
button.textContent = 'Registreer';
button.setAttribute('role', 'button');
button.setAttribute('aria-label', 'Registreer voor evenement');
return button;
};
```
### 2. Toetsenbordnavigatie
**Probleem**: Elementen niet focusbaar of geen keyboard handlers.
```javascript
// ✅ Toegankelijke component
const createEventCard = (event) => {
const card = document.createElement('article');
card.setAttribute('role', 'article');
card.setAttribute('aria-labelledby', `event-title-${event.id}`);
card.tabIndex = 0;
card.innerHTML = `
<h3 id="event-title-${event.id}">${event.title}</h3>
<p>${event.description}</p>
<button aria-describedby="event-desc-${event.id}">Meer info</button>
`;
// Keyboard event handlers
card.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
card.click();
}
});
return card;
};
```
### 3. Formulier toegankelijkheid
**Probleem**: Ontbrekende labels en validatie feedback.
```javascript
// ✅ Toegankelijk registratieformulier
const createRegistrationForm = () => {
const form = document.createElement('form');
form.setAttribute('role', 'form');
form.setAttribute('aria-label', 'Evenement registratieformulier');
form.innerHTML = `
<div class="form-group">
<label for="name">Naam *</label>
<input
type="text"
id="name"
name="name"
required
aria-required="true"
aria-describedby="name-help"
>
<span id="name-help" class="help-text">Vul uw volledige naam in</span>
</div>
<div class="form-group">
<label for="email">E-mailadres *</label>
<input
type="email"
id="email"
name="email"
required
aria-required="true"
aria-invalid="false"
>
</div>
<fieldset>
<legend>Toegankelijkheidsvereisten</legend>
<div class="checkbox-group">
<input type="checkbox" id="wheelchair" name="accessibility">
<label for="wheelchair">Rolstoeltoegankelijkheid nodig</label>
</div>
</fieldset>
`;
return form;
};
```
### 4. Dynamische content updates
**Probleem**: Geen announcements voor schermlezers bij SPA updates.
```javascript
// ✅ Screen reader announcements
class AccessibilityManager {
constructor() {
this.liveRegion = this.createLiveRegion();
}
createLiveRegion() {
const region = document.createElement('div');
region.setAttribute('aria-live', 'polite');
region.setAttribute('aria-atomic', 'true');
region.className = 'sr-only';
document.body.appendChild(region);
return region;
}
announce(message) {
this.liveRegion.textContent = message;
// Reset voor volgende announcements
setTimeout(() => {
this.liveRegion.textContent = '';
}, 1000);
}
}
// Gebruik bij route changes
const handleRouteChange = (newView) => {
const accessibility = new AccessibilityManager();
accessibility.announce(`Pagina geladen: ${newView}`);
// Focus management
const mainContent = document.getElementById('main-content');
if (mainContent) {
mainContent.setAttribute('tabindex', '-1');
mainContent.focus();
}
};
```
### 5. Skip links en focus management
```javascript
// ✅ Skip naar hoofdcontent link
const createSkipLink = () => {
const skipLink = document.createElement('a');
skipLink.href = '#main-content';
skipLink.className = 'skip-link';
skipLink.textContent = 'Ga direct naar inhoud';
skipLink.setAttribute('aria-label', 'Sla navigatie over en ga naar hoofdinhoud');
skipLink.addEventListener('click', (e) => {
e.preventDefault();
const mainContent = document.getElementById('main-content');
if (mainContent) {
mainContent.tabIndex = -1;
mainContent.focus();
}
});
return skipLink;
};
```
### 6. Error handling en statusmeldingen
```javascript
// ✅ Toegankelijke error messages
const showErrorMessage = (message) => {
const errorDiv = document.createElement('div');
errorDiv.setAttribute('role', 'alert');
errorDiv.setAttribute('aria-live', 'assertive');
errorDiv.className = 'error-message';
errorDiv.textContent = message;
// Automatisch verwijderen na tijd
setTimeout(() => {
errorDiv.remove();
}, 5000);
return errorDiv;
};
// ✅ Loading states
const createLoadingIndicator = () => {
const loader = document.createElement('div');
loader.setAttribute('role', 'status');
loader.setAttribute('aria-live', 'polite');
loader.setAttribute('aria-label', 'Laden');
loader.className = 'loading-indicator';
loader.innerHTML = `
<span class="sr-only">Gegevens worden geladen</span>
<div class="spinner" aria-hidden="true"></div>
`;
return loader;
};
```
## CSS voor toegankelijkheid
```css
/* Screen reader only class */
.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;
}
/* Skip link styling */
.skip-link {
position: absolute;
top: -40px;
left: 6px;
background: #000;
color: #fff;
padding: 8px;
z-index: 1000;
text-decoration: none;
}
.skip-link:focus {
top: 6px;
}
/* Focus indicators */
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: 2px solid #005fcc;
outline-offset: 2px;
}
```
## Aanbevolen teststrategie
1. Gebruik toetsenbordnavigatie (Tab, Shift+Tab, Enter, Space)
2. Test met screen readers (NVDA, VoiceOver)
3. Controleer kleurcontrast (minimaal 4.5:1)
4. Valideer met accessibility tools (axe-core, WAVE)
Implementeer deze verbeteringen om uw evenementenregistratie-app toegankelijk te maken voor alle gebruikers, inclusief mensen met beperkingen.