En sida med länkar till olika sidor där vi kan prova olika hjälpmedel.

ARIA

Flera olika sidor där vi provar aria.
I de nio första exemplen testar vi aria-live och efter det kommer lite blandat.

• Aria-atomic=false
  • aria-atomic=false + aria-live=off
  • aria-atomic=false + aria-live=polite
  • aria-atomic=false + aria-live=assertive
  • aria-atomic=false + aria-live=rude
• Aria-atomic=true
  • aria-atomic=true + aria-live=off
  • aria-atomic=true + aria-live=polite
  • aria-atomic=true + aria-live=assertive
  • aria-atomic=true + aria-live=rude
• Aria-live med auto complete dropdown
  • aria-live i en autocomplete dropdown
• Aria-level(Ändra rubrik nivåer)
  • aria-level exempel + role=header
• Aria-describedby
  • Test exempel med aria-describedby i länkar
  • NY > Test exempel med aria-describedby och aria-labelledby i fielsets i fielsets
• Aria-current
  • aria-current exempel
  • NY > Exemepl 2 med de flesta olika status för aria-current
• Aria-haspopup
  • aria-haspopup exempel
  • aria-haspopup med exempel från H&Ms undermenyer
• Alert/Modal Dialog
  • alert dialog exempel
  • modal dialog exempel
  • modal dialog exempel 2
  • NY > modal exempel 3 - 2 olika exempel på samma sida
• Role-presentation/none
  • role-presentation
  • role-none
• Role-graphics-document
  • role-graphics-document (svg)
  • role-graphics-object (svg)
  • role-graphics-symbol (svg)

Landmarks

Olika HTML element med olika landmarks

• Mängder med olika exempel på landmarks

Hidden attributet

En sida med 2st main element där en av de har attributet hidden

• Test med main elementet

SVG

De två första testerna är baserade på Leonie Watsons rekomendationer https://www.sitepoint.com/tips-accessible-svg/

• SVG 1.1 - 10 olika exempel
• SVG - Funkas rekomendationer(gammal?)

Testar text som bild (svg)

• SVG - Text som bild med olika attribut

Canvas

Ett canvas exemepel där script ritar ut en rektangel

• Canvas - exemepl

HTML5 formulär

En sida där vi kan prova HTML5 formulär. Många av de nya attributen fungerar bara i Opera och/eller Safari

• HTML5 formuläret

Flash/Film

Här provar vi olika sätt att visa flash filer.

• En flashfil länkas in på sidan på flera olia sätt.

Tabeller

Här provar vi tabeller med olika element och attribut.

• En tabell med elementen thead, tbody och tfooter.
• En mer komplex tabell.

Imagemap

3 olika sidor, en sida med title-texter, en sida med alt-texter och en sida med båda.

• En sida med enbart alt-texter på Imagemap
• En sida med enbart title-texter på Imagemap
• En sida där Imagemap har både title och alt beskrivningar

Aural test

Olika typer av röster och hastigheter på talet.

• En sida för att prova skärmläsare med olika röster.

srcset test

Vi byter ut sökvägen till en bild med srcset

• En sida som ska byta bild fyra gånger beroende på skärmbredd.

Länkar med extra information som dold text

2 sidor där den dolda delen av länken är dolda med olika css tekniker.

• En sida för att prova skärmläsare med olika röster.
• En sida för att prova skärmläsare med olika röster.

Länkar med olika attributet

Hur fungerar olika attribut i ett hjälpemedel? Låt oss se hur t.ex "rel" och "download" fungerar.

• En sida för att prova olika attribut på länkar.

Responsiva tabeller där vi döljer tabell rubriker, th, på olika sätt

Olika exempel där vi på liten skärm döljer kod.

• Responsive Table 1 - hidden thead with display-none on small screen
• Responsive Table 2 - hidden th with display-none on small screen
• Responsive Table 3 - hidden thead with position-absolute on small screen
• Responsive Table 4 - hidden th with position-absolute on small screen
• Responsive Table 5 - Rekommenderat

En tabell som fungerar med jaws men inte med andra skärmläsare

Exemplet har Torbjörn hittad men vi gör en egen test på den.

• Data table with TH row/columns headers with SCOPE

Test av olika HTML element som döljs med display:none men som har en referens

1 sida med flera olika HTML-element som döljs med display:none och som har en referens. Här vill vi veta om en skärmläsare får informationen om ett annat HTML-element genom en referens även fast valt element är dolt med display:none.

• Referens test.