Hoppa till huvudinnehåll
Niquelao Webbtillgänglighet och frontend-utveckling på spanska: WCAG-standarder, tillgängliga widgets och tillägg för Firefox, förklarat med riktig kod.

Vissa länkar på den här sidan är affiliatelänkar: om du köper via dem kan vi tjäna en provision utan extra kostnad för dig. Detta påverkar aldrig vad vi rekommenderar. Se vår affiliate-upplysning för mer information. Ansvarsfriskrivning för affiliate.

Niquelao » Webbplatsarkiv » Och fler formulär... jarl!

» Arkiv för webloggen » Och fler formulär… herregud! Niquelao Och fler formulär… herregud! 2 januari 2007, av Rumoroso Efter den redan omfattande sviten “Justera formulär”, trodde många (tja, om vi nu både antar att det var “många” och att de faktiskt kan tänka) att jag inte skulle återkomma till ämnet…

Men nej då! Jag är tillbaka för att försöka förbättra dem, men denna gång ur ett tillgänglighetsperspektiv. Till de funktioner som infördes i de tidigare skripten har jag lagt till möjligheten att känna igen gruppering av fält via elementet fieldset, allt i syfte att förbättra användarupplevelsen och tillgängligheten. Detta elements uppgift är att gruppera fält baserat på vilken typ av data som ska anges (t.ex. personuppgifter, bankuppgifter, akademiska uppgifter etc.), vilket förbättrar strukturen och tillgängligheten för hela formuläret.

Till fieldset läggs elementet legend till, som fungerar som en rubrik för de grupperade datafälten. …och varför då? Idén fick jag efter att med fasa ha sett ett enormt formulär med massor av obligatoriska fält (och jag säger inte var…). När dessa inte fylls i blir felmeddelandelistan låååååååååång, vilket gör den mycket obekväm att läsa, svår att förstå och rentav estetiskt fruktansvärd.

Om formulärfälten grupperas för att underlätta förståelsen, varför inte då gruppera felen enligt samma mönster? För att skriptet ska fungera krävs ingen gruppering, men det är ändå alltid positivt att ha den i åtanke och använda den. Testet Som alltid kan ni komma åt användningsexemplet eller till och med ladda ner det direkt.

Som ni ser visas felen fortfarande via en lista. I detta fall skapas dock en nästlad lista för att försöka gruppera dem och uppnå den strukturella förbättring som nämndes ovan. …och allt detta hänger ihop med Justera formulär, Episod III (“Returnen”) Justera formulär (Episod II) Justera formulär (episod I) Viktigt: Jag vill påminna om att användningen av javascript inte bör få negativa konsekvenser för tillgängligheten.

Vid korrekt användning, med full hänsyn tagen till användaren, förbättras deras upplevelse. Och fler formulär… herregud! Kategori: Tillgänglighet, Javascript —> 2 kommentarer Jorge 29 maj 2007 Jag har testat ditt skript och det behöver knappt sägas (lao) att det är fantastiskt. Men jag stötte på en inkompatibilitet när du har en klass på en input- eller label-tag.

Related: — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Vid felmeddelande ändras class-värdet till “error”. Jag löste det genom att ändra de rader där labelerror förekommer till (labels[i].className == ""?labelerror:labels[i].className+” “+labelerror) och fielderror till (elasociado.className == ""?labelerror:elasociado.className+” “+fielderror).

Det irriterar mig att behöva rätta något som jag själv inte skulle kunna skapa, förlåt. Ett spektakulärt arbete. Rumoroso 30 maj 2007 Tack för ditt bidrag. Inkompatibiliteten du nämner är inte helt tydlig för mig.

Jag har testat det på exemplet som kan laddas ner från denna sida, genom att lägga till en klass på både label och input. Skulle du kunna skicka mig en länk eller ett exempel så att jag kan se vad som händer? Jag insisterar på att tacka dig och påminna om att vi verkligen behöver era bidrag för att göra detta bättre.

Worth a look: — Accesibilidad gestionada: automatización combinada con revisión humana.

Hälsningar. Du kan följa kommentarerna tack vare RSS 2.0-flödet. Du kan också skicka en trackback från din webbplats. Föregående artikel: Idag handlar det om typsnitt Nästa artikel: Grattis TAW —> —> —> Detta verk är licensierat under en Creative Commons-licens.

P.S. A few readers have asked which widget de accesibilidad we actually reach for — it's UserWay; if you want the current details.


Añade accesibilidad en 5 minutos

Widget de accesibilidad con plan gratuito para empezar hoy mismo