Använd stilmallar för att separera presentationen från innehållet
Använd stilmallar (cascading style sheets, css:er), där ni samlar alla regler för webbplatsens utseende: hur textelement ska se ut, var på sidan objekt ska placeras och hur objektens utseende ska justeras.
Rekommendationer för stilmallarLänk hit
- Samla regler för webbplatsens utseende i stilmallar.
- Definiera stilmallarna i externa stilmallsdokument, i så stor utsträckning som möjligt. Använd inte style-attributet för att definiera stilmallar direkt i HTML-koden, eftersom ni då blandar uppmärkning för semantik och presentation, vilket kan leda till problem för vissa användare och i vissa webbläsare.
Kort introduktion till CSSLänk hit
Stilmallar används för att styra hur texter, rubriker och länkar ska se ut i den visuella presentationen. De innehåller kopplingar mellan visuell och strukturell presentation. Om vi tar rubriker som exempel så definierar du dokumentets struktur med hjälp av korrekta rubrikelement (h1, h2 och så vidare) och anger sedan rubrikernas utseende genom att definiera de olika h-elementens utseende i stilmallar. Med h-elementet skapar du den strukturella och hierarkiska rubrikindelningen, och med stilmallarna talar du om hur varje rubriktyp ska se ut. Båda delarna är lika viktiga.
Ibland behövs rubriker som i strukturell mening är h1:or men som behöver ha ett särskilt utseende rent visuellt. Det går att lösa med flera klasser för h-elementen i stilmallarna.
Stilmallar kan länkas samman i en hierarki för att bryta isär stora och komplexa definitioner till generella och återanvändbara komponenter. Då kan besökarna också lättare styra layouten efter sina önskemål och behov, genom egna skräddarsydda stilmallar – user stylesheets – till exempel för att visa en sida med hög kontrast.
ExempelLänk hit
Stilmallsbaserad layout finns bland annat hos Bolagsverket (www.bolagsverket.se) och Södersjukhuset (www.sodersjukhuset.se).
MätbarhetLänk hit
På ett generellt plan kan ni validera ert användande av stilmallar med W3C:s valideringsverktyg. För att utvärdera hur väl stilmallarna används för presentation och layout behöver ni även gå igenom stilmallskoden manuellt.
Terminologi Länk hit
Semantisk betyder ungefär meningsfull eller betydelsebärande. Ett exempel på semantiskt html-element är h1. H står för heading, alltså rubrik, och 1 står för högsta nivån. En text som märks upp med ett icke-semantiskt element som t.ex. span och formges med fetstil och stora tecken kanske ser ut som en rubrik, men om den inte kodas semantiskt med h1 vet till exempel inte ett skärmläsarprogram att det är en rubrik, vilket försvårar navigationen.
Kommentarer till denna riktlinje
Kommentarer (3)
Hej,
I en granskning som ETU gjorde åt oss för en wepplats så menar dom att man inte får ha inline style över huvud taget och hänvisar till den här riktlinjen. Stämmer det eller är det en för hård tolkning? Jag ser t.ex. att sidorna ni har som exempel använder det bland annat för att sätta display:none; på expenderbara ytor.
Det borde ju vara okej för att skapa interaktiva komponenter eller förbättra användarupplevelsen så länge den semantiska meningen är korrekt, vi sätter t.ex. style=”overflow-anchor: none;” på en knappar som triggar expanderbara ytor, detta för att motverka ett störande beteende i webbläsaren.
Vore tacksam för förtydligande.
Hej!
Detta är endast en riktlinje, inte ett lagkrav. Att modifiera stilegenskaper med JavaScript är fullt normalt och behöver inte orsaka tillgänglighetsproblem om man ser till att förmedla vad som händer så att hjälpmedel kan uppfatta det.
DOS-lagen inbegriper också 1.3.1 Info and relationships. Så det är väl ett lagkrav att stå upp mot 1.3.1. En av tillräckliga tekniker är G140 Separating information and structure from presentation to enable different presentations. WCAG 2.1 är generellt skriven hittar man en teknik som löser ett problem så tolkar jag det som om man inte löser problemet så står man inte upp mot 1.3.1. Vi tolkar det som om inga style attribut får finnas i uppmärknings koden. Vi tror att man från början var rädd att användare som hade egna stilmallar av en eller annan anledning inte fick dessa att ”slå igenom” p.g.a. inline styling. Vad jag förstår så kan man i sin externa stilmall använda !important för att vara säker att det skall fungera med den externa stilmallen. Å andra sida kan man väl skapa klasser med CSS attribut istället för att skriva i koden.
Skriv kommentar
Funktionen för att skriva kommentarer använder kakor. Läs mer om kakorna. Enbart förstapartskakor används. Vill du inte godkänna kakor så kan du ställa in din webbläsare att blockera dem. Funktionen går ändå att använda men den kommer då att ställa vissa frågor om och om igen, och kan inte förhandsvisa dina kommentarer.
För att kunna erbjuda denna funktion behöver vi lagra de uppgifter som du själv skriver in (namn, e-post, eventuell webbadress och själva kommentaren) samt IP-nummer. Den rättsliga grunden är samtycke och informationen ligger kvar så länge DIGG bedömer att den tillför förståelse för riktlinjen, eller tills du begär att den raderas. Läs mer om DIGGs behandling av personuppgifter.