8
Accessible Javascript Not Vodoo – not much Dirk Ginader Barcamp Brighton 2 h>p://blog.ginader.de

Accessible Javascript - Barcamp Brighton 2

Embed Size (px)

DESCRIPTION

A quick overview about how to make Javascript Accessible. Held at Barcamp Brighton 2

Citation preview

Page 1: Accessible Javascript - Barcamp Brighton 2

AccessibleJavascript

NotVodoo–notmuchDirkGinader

BarcampBrighton2h>p://blog.ginader.de

Page 2: Accessible Javascript - Barcamp Brighton 2

SemanCcMarkup

• MarkupyourContenttomakeitworkbyitself•  ThinkabouteveryelementanditsRole– HaveyoureallyfoundanewUseforDL?;‐)

Page 3: Accessible Javascript - Barcamp Brighton 2

ServersideInteracCon

•  EverythingyouwanttodousingJavascriptMagicyoufirsthavetosolvewithout

•  ThinkwhatyoucandowithPagereloads(yesIknowthey’renotthecoolKidsanymore…)

Page 4: Accessible Javascript - Barcamp Brighton 2

ProgressiveEnhancement

•  Everybodyshouldhaveheardaboutthisbynow.Doyou?

• WheneverythingworksstartaddingMagic

•  HijackExisCngElementsandaddnewFuncConality

•  AddnewControlsforJavascriptonly

Page 5: Accessible Javascript - Barcamp Brighton 2

CSS

•  PayA>enConwhatyouhide,howandwhen•  Display:noneandvisibility:hiddenarenotgenerallyuselessorevilbuto_en

Page 6: Accessible Javascript - Barcamp Brighton 2

UpdateandInform

•  (Most)ScreenReadersknowJavascript• MostoftheStuffactuallyworks,theyjustdon’tknow

• Makethemknowsomethingchangedbyseangthefocus()

•  UseahiddenFormElementtoforcetheScreenReaderrebuilditsVirtualBuffer

Page 7: Accessible Javascript - Barcamp Brighton 2

NotOnlyScreenReaders

•  ThinkaboutKeyboardonlyUsers•  TabyourApp.Doesitwork?•  DohiddenElementsShowonfocus?

Page 8: Accessible Javascript - Barcamp Brighton 2

GoodRessources

h>p://www.isolani.co.uk/blog/h>p://www.accessibilityCps.com/

h>p://juicystudio.com/

h>p://learningtheworld.eu/

h>p://uk.tv.yahoo.com/(TheSearchontheupperrightwasusedfortheExample)