Användning av <dialog>:
- Skapa modala dialogrutor som dyker upp ovanför innehållet på sidan.
- Används för att visa ytterligare information, bekräftelseförfrågningar eller datainsamling.
Attribut för <dialog>:
- id: Unik identifierare för dialogrutan.
- open: Anger om dialogrutan ska vara öppen som standard.
- maxlength: Anger maximal längd på inputfälten i dialogrutan.
- novalidate: Anger att formulär i dialogrutan inte ska valideras.
Exempel med <dialog>:
<dialog id="myDialog">
<form>
<label for="name">Namn:</label>
<input type="text" id="name">
<input type="submit" value="Skicka">
</form>
</dialog>
<button type="button" onclick="document.getElementById('myDialog').showModal()">Öppna dialogruta</button>
Förbättrad tillgänglighet och användarvänlighet för <dialog>:
- Använd aria-labelledby för att ange etiketten för dialogrutan.
- Använd aria-describedby för att ange en beskrivning av dialogrutan.
- Använd tabindex för att ställa in tabbordning inom dialogrutan.
- Ge dialogrutan en roll="dialog" för att tydligt identifiera den som en dialogruta.