Semantisk HTML
Semantisk HTML använder element efter deras betydelse. En riktig knapp har egenskaper som ett formgivet textblock inte får automatiskt.
Använd element för deras avsedda uppgift
Semantisk HTML beskriver innehåll och kontroller med lämpliga HTML-element. Rubriker strukturerar innehåll, en länk leder till ett mål och en knapp utför en åtgärd. Det ger webbläsare och hjälpmedel information om gränssnittets betydelse.
För att spara en adress i ett tänkt portalexempel passar en button. Ett visuellt identiskt div-block får inte automatiskt samma betydelse eller det vanliga tangentbordsbeteendet. Ett a-element med en lämplig href passar däremot för att gå till adresslistan.
CSS bestämmer presentationen; stor text blir inte automatiskt en rubrik. Semantisk HTML är en viktig grund men garanterar inte ensam en fullt tillgänglig applikation. Etiketter, tillstånd och faktiskt beteende måste också vara rätt.
Källor
Relaterade begrepp
- ARIAARIA kompletterar information om roller, tillstånd och egenskaper för hjälpmedel. Det beskrivna beteendet måste faktiskt vara implementerat.
- SkärmläsareEn skärmläsare gör digitalt innehåll tillgängligt via tal eller punktskrift. Meningsfull struktur och etiketter gör användningen begriplig.
- TangentbordsanvändningTangentbordsanvändning gör det möjligt att utföra uppgifter utan mus. Funktionerna behöver kunna nås i en begriplig ordning.
- FokusordningFokusordningen bestämmer vägen genom element som kan få fokus. Den ska bevara betydelse och användbarhet även vid dynamiska ändringar.
- TangentbordsfällaI en tangentbordsfälla fastnar användningen i ett område. Avsiktlig fokusbegränsning i en dialog behöver en utgång som kan användas med tangentbordet.
- Länk för att hoppa till huvudinnehålletEn hopplänk går förbi upprepad navigering till huvudinnehållet. Även nästa steg med tangentbordet måste fortsätta på rätt plats.
Artiklar om ämnet
Design & UX med ASES
Användarupplevelse, gränssnitt och varumärke