Softonic

Generator för tillgänglig CSS-spinner

Steg 1 / 2
Nästa

En snurrande ring betyder ingenting för någon som använder skärmläsare, och ständig rörelse kan störa personer som är känsliga för den. Skapa spinnern här och lägg sedan till markupen och regeln för reducerad rörelse nedan.

Så gör du spinnern tillgänglig

  1. 1

    Skapa ringen

    Ställ in storlek, tjocklek, färg och hastighet i verktyget och kopiera sedan CSS:en.

  2. 2

    Kontrollera färgkontrasten

    Välj en färg för bågen som tydligt sticker ut mot den ljusgrå banan och sidans bakgrund.

  3. 3

    Lägg till statusmarkupen

    Ge spinner-elementet en roll och en etikett, så som visas på den här sidan.

  4. 4

    Lägg till regeln för reducerad rörelse

    Klistra in mediafrågan nedan under den genererade CSS:en.

Vad den genererade CSS:en gör och inte täcker

Verktyget ger dig den visuella delen: en kantad cirkel och en rotation. En rent visuell laddningsindikator betyder ingenting för hjälpmedel, eftersom elementet är tomt. Tillgängligheten kommer från markupen och en extra CSS-regel som du lägger till runt den.

Markup som meddelar tillståndet

<div class="loader" role="status" aria-label="Laddar resultat"></div>

role="status" markerar elementet som en live-region, så att många skärmläsare läser upp dess etikett när det visas. aria-label ska säga vad som laddas, till exempel “Laddar resultat” eller “Sparar”, i stället för ett allmänt ord. Ta bort elementet när arbetet är klart och visa det nya innehållet.

Du kan också lägga synlig text bredvid ringen. Synlig text hjälper alla, även personer som har svårt att se rörelsen tydligt.

Respektera reducerad rörelse

Vissa besökare slår på en systeminställning som ber webbplatser begränsa animationer. Respektera den med en mediafråga efter den genererade CSS:en:

@media (prefers-reduced-motion: reduce) {
  .loader {
    animation-duration: 3s;
  }
}

Detta bromsar rotationen i stället för att ta bort den, så att spinnern fortfarande ser levande ut utan snabb rörelse. Om du föredrar en statisk signal använder du animation: none; och visar texten “Laddar” bredvid ringen.

Kontroll av kontrast och storlek

Kontroll Vad du ska sikta på
Bågen mot sidan Tydligt synlig, helst ett kontrastförhållande på 3:1 eller mer
Bågen mot den grå banan Tydligt skild, så att bågen går att följa
Storlek Minst 24 px för sådant som besökaren måste märka
Hastighet Mellan 0,8 och 1,5 sekunder per varv

Begränsningar

  • Generatorn väljer banans färg (#eee) åt dig. Ändra den i den inklistrade CSS:en om din sidbakgrund liknar den.
  • Ett mycket lågt hastighetsvärde får ringen att flimra. Undvik allt under cirka 0,5 sekunder.
  • Förlita dig inte bara på spinnern vid långa väntetider. Berätta i text vad som händer.

Testa snabbt

Slå på alternativet för reducerad rörelse i operativsystemet och ladda om sidan: ringen ska rotera långsammare. Tabba sedan igenom sidan med tangentbordet för att kontrollera att spinnern aldrig flyttar fokus från kontrollen som besökaren använde. Slå slutligen på en skärmläsare och utlös laddningsläget en gång, för att höra om etiketten läses upp när elementet visas och om det nya innehållet går att nå efteråt.

Vanliga frågor

Bara när du lägger till markup. Ett tomt element är tyst, så ge det role=“status” och en beskrivande aria-label.

Det är en CSS-mediafråga som matchar när en besökare har bett sin enhet att minska animationer. Du kan använda den för att bromsa eller stoppa spinnern.

Båda sätten är godtagbara. Att bromsa den behåller en känsla av aktivitet, medan att stoppa den är det säkraste valet om du dessutom visar ett textmeddelande som “Laddar”.

Beskriv åtgärden med vanliga ord, till exempel “Laddar resultat” eller “Sparar ändringar”. Undvik vaga etiketter som “spinner”.

En större storlek och stark kontrast gör den lättare att se, men de ersätter inte textetiketten som hjälpmedel läser upp.

Relaterade verktyg

Webpack-konfigurationsgenerator

Skapa en webpack.config.js för webpack 5 med vanlig JavaScript, React eller Vue: TypeScript, Babel, CSS eller Sass, bilder, HtmlWebpackPlugin, en utvecklingsserver och raden för npm install.

Protocol Buffers-avkodare

Avkoda Protobuf-byte lokalt från hex, Base64, Base64URL, text eller fil, granska fälttolkningar och exportera en privat rapport.

XSD-validerare

Validera ett XML-dokument mot ett XSD-schema och rapportera element- och typavvikelser med exakta radnummer.

YAML till JSON

Omvandla YAML-konfiguration till JSON för verktyg och API:er som bara accepterar JSON. Hanterar ankare, merge-nycklar och nästlade strukturer.

XML-formaterare

Snygga till XML-dokument med konsekvent indrag och fånga formfel med exakta radnummer.

XML till JSON

Omvandla XML-dokument till ren JSON, med bevarade attribut, textnoder och arrayer där det behövs. Tre stilar: kompakt, Badgerfish eller literal.

Verktyget finns på andra språk

Guider och användningsområden