Tillgängliga inforutor

Publicerad fredag den 11 Feb 2011 21:02

Jag har blivit tillfrågad två gånger av olika personer senaste veckan om en inforuta jag gjorde åt en kund på jobbet. Jag tänkte därför att det kanske kunde vara av intresse för fler om jag delade med mig av tekniken.

Rutan ska klara följande krav:

  • Då man för muspekaren över i-symbolen ska en inforuta dyka upp. När man tar bort muspekaren ska rutan försvinna.
  • Man ska kunna hoppa mellan inforutorna med tangentbordet, rutorna ska visas då i:et har fokus.
  • Rutorna ska fungera utan att JavaScript är på i webbläsaren.
  • Med JavaScript på så ska rutorna dyka upp och försvinna med en snygg effekt.
  • Infotexten i rutorna ska kunna innehålla HTML.
  • Infotexten ska vara läsbar för personer som använder skärmläsare eller liknande hjälpmedel.

Det som gör det hela lite mer omständigt och som gör att jag vill använda JavaScript och inte enbart CSS är att jag dels ska visa/dölja lite snyggt – rutan ska tona in och ut. Jag vill också ge lite mer utrymme för att dra muspekaren in i inforutan för att markera texten. Med enbart en CSS-lösning så försvinner rutan direkt om man vinglar till lite med muspekaren. Med JavaScript så kan man ha en liten fördröjning på stängandet av rutan så att man får chansen att vingla tillbaka in med muspekaren utan att rutan har hunnit stängas.

Istället för att beskriva lösningen i ord så hittar du den här i form av ett exempel:
http://demos.henrikekelof.se/inforutor/

Koden är rikligt kommenterad, all CSS & JavaScript ligger direkt i sidan.

Det som tyvärr inte fungerar är att rutorna inte visas vid tangentbordsnavigering med JavaScript av i IE6-8 eftersom de inte har stöd för :focus. IE6 har inte heller stöd för +-selektorn. Den som får problem är alltså en seende person som måste navigera med tangentbordet med JavaScript avslaget i IE6, 7 eller 8. För en person som använder skärmläsare är det inget problem i någon av IE-versionerna. En lösning (om man tvunget måste stödja detta extrema specialfall) skulle kunna vara att inte ha en dold ruta i IE6, 7 & 8 utan att alltid visa infotexten då JavaScript är av i de webbläsarna.

Den här lösningen skulle självklart kunna användas till annat än inforutor.

Kort adress till sidan: http://eklf.se/j