Gå direkt till innehållet

help.sitevision.se hänvisar alltid till senaste versionen av Sitevision

Panelen Inställningar på en layout

När du högerklickar på en layout/grid/gridrad/gridspalt kan du längst ned välja att gå till layoutens egenskaper. Under panelen Inställningar visas följande information:

Inställningar på layout sv6

Typ

Här ser du vald typ - radvis eller kolumnvis layout - på den layout du har markerat. Det går också att byta typ här om du egentligen ville ha kolumnvis layout. Välj typ i listan.

Vertikal justering

Här anger du hur du vill att innehållet i layouten ska placeras på raden. Alternativen som du kan välja är:

  • top
  • middle
  • bottom

Horisontell justering

Här anger du hur du vill att innehållet i layouten ska placeras i kolumnen. Alternativen är:

    • left
    • center
    • right

    Elementtyp (HTML5)

    Semantisk html innebär att man ska använda rätt element för rätt innehåll. Det vill säga att för en lista ska man använda sig av html-elementen <ul>, <ol>, <li>, för rubriker så ska elementen <h[1-6]> användas osv. HTML5 inkluderar en mängd nya semantiska taggar som:

    • div - en del av ett dokument.
    • header - den översta delen av webbsidan. Kan till exempel innehålla <h1>-<h6>, logotyp, sökfält med mera.
    • footer - den nedre delen av webbsidan.
    • main - specificerar huvudinnehållet i dokumentet.
    • nav - för navigationen på en sida, till exempel en meny.
    • section- exempelvis ett kapitel. En hemsida kan struktureras upp i olika sektioner så som nyheter, introduktion och kontaktinformation.
    • article - anger oberoende , fristående innehåll.
    • aside - används för att skilja delar av innehållet från det som är det viktiga. Till exempel kan <aside> användas för citatblock, reklam, navigation el dyl i en <article>.
    • hgroup - representerar en heading av en sektion. Elementet är till för att gruppera ett flertal <h1>-<h6> i en section. Användbart när det kan finnas flera nivåer av headings.
    • time - för att presentera ett datum eller en tid.
    • mark - för att markera text för till exempel referenser.
    Elementtyp

    Här kan du använda WAI-ARIA landmärkesroller, som main, navigation, banner, contentinfo, complementary för att göra webbinnehåll mer tillgängligt. Du kan läsa mer om Aria-roller på webbriktlinjers webb: https://webbriktlinjer.se/aria/ Länk till annan webbplats, öppnas i nytt fönster.

    Aria-roller gör att användare med exempelvis skärmläsare på ett standardiserat sätt kan navigera mellan sidans olika delar. Helst ska du märka upp din information på sidan med html 5 men när det inte räcker till så kan du använda aria-roller. Exempelvis search är bra att använda då den inte finns med som elementtyp i html 5.

    Nästla inte roller av samma typ. Landmärkes roller måste ha en etikett (h1,h2) om det finns fler än en roll av samma typ på en sida. ARIA roller har högre prioritet än elementtyp, definiera inte om ordinarie HTML element.

    Det finns 8 olika standardalternativ:

    • banner
    • complementary (exempelvis en sidospalt)
    • contentinfo(metadata om en sida exempelvis copyright)
    • formmain (the main content of the page)
    • main
    • navigation
    • region
    • search

    Du kan välja bland de förvalda alternativen i listan eller skriva dit ett eget alternativ.

    Då alla webbläsare och hjälpmedel inte kan översätta HTML 5 elementtyper ännu så förordar vi att man använder ARIA landmärkesroller parallellt med HTML 5 elementtyper.

    https://webbriktlinjer.se/riktlinjer/75-gruppera-och-skapa-mojlighet-att-hoppa-forbi-delar-pa-sidorna/ Länk till annan webbplats, öppnas i nytt fönster.

    ARIA-role

    ARIA-label

    Under ARIA-roll finns bara landmärksroller. Här kan lägga till egna ARIA-roller som inte finns med i listan ovan.

    Denna sida publicerades:

    Hjälpte informationen dig?

    Följ oss