accessibility: a journey to accessible rich components

Download Accessibility: A Journey to Accessible Rich Components

Post on 15-Jan-2017

589 views

Category:

Technology

3 download

Embed Size (px)

TRANSCRIPT

A Journey to Accessible Rich UI Componentswith Jason JangJourney sounds inappropriately epic and kind of cornered me into a theme, for this, my first talk.

What to ExpectMy storyImportant Considerations for our organizationCode Examples of making a Rich UI Component accessible

Sometimes the hardest part of learning a language, is learning the language around the language.DisclaimerWhoa, deep.

In my experience, the velocity at which you can learn a new language is often correlated with how quickly you get good at googling your issues.a11y btw = accessiblity

Some Terminologya11y > accessibilitycomponent > a part of an interfaceRich UI > interactive componentsWhoa, deep.

In my experience, the velocity at which you can learn a new language is often correlated with how quickly you get good at googling your issues.a11y btw = accessiblity

My StoryWhoa, deep.

In my experience, the velocity at which you can learn a new language is often correlated with how quickly you get good at googling your issues.a11y btw = accessiblity

In the beginning...Making websites was a hobby that became a side gig that became a part-time gig that became a full-time gig at an agency that became a stint as a freelancer that became a full-time gig at AchieversThere. Theres your journey.

started as a hobbywas really into design and the interface side of thingsagency work was static websites. Glorified brochuresFreelancer where i worked on getting in debt

First Encounter with a11yEveryone uses the InternetPeople use screen readers? Never got use one.A11y considered a checkmarkAll text and images

The INTERNET is one of the greatest inventions in recent human history, everyone should have access to it. This was the first time I had even heard of the concept of a screen reader.

DEFINE SCREEN READER

The agency I worked for considered a11y as a checkmark for the deliverable. Something you do once.The websites we worked on were mostly text and images

First Encounter with a11ySemantic HTML and good markupHeadings, Lists, Links vs Landmark Roles: Sensible document structureROLE is an often overlooked attribute.a11y relies on these landmark roles to determine context as they browse the pageAt the time, we used tools like this to determine if our site was accessible.Still a very useful tool today, but not so much in the context of our platform.a11y ToolsWAVE Accessibility ToolaCheckerQuail (JS Accessibility Tool)Google Accessibility ToolVery Practical tools for assessing markup quality for static sites.Fast-forward 5 or so yearsI lost countPlatform DemoJason, can we make this accessible?At the time, we used tools like this to determine if our site was accessible.Still a very useful tool today, but not so much in the context of our platform.At the time, we used tools like this to determine if our site was accessible.Still a very useful tool today, but not so much in the context of our platform.At the time, we used tools like this to determine if our site was accessible.Still a very useful tool today, but not so much in the context of our platform.At the time, we used tools like this to determine if our site was accessible.Still a very useful tool today, but not so much in the context of our platform.ARIA SAVES THE DAY!WHY ARIA?...and not Arya?WAI-ARIA!Web Accessibility Initiative Accessible Rich Internet ApplicationsHenceforth referred to as accessibility API or ARIAMost improtant tool for Accessibility has a name that is nearly innaccessible to an english speakerlistitemlogmainmarqueemathmenumenubarmenuitemmenuitemcheckboxmenuitemradionavigationnoteoptionpresentationdialogdirectorydocumentformgridtablegridcellgroupheadingimginput (abstract role)landmark linklistlistboxalertalertdialogapplicationarticlebannerbuttoncheckboxcolumnheadercomboboxcommandcomplementarycompositecontentinfodefinitionprogressbarradioradiogrouprange (abstract role)regionroletype (abstract role)rowrowgrouprowheaderscrollbarsearchsection (abstract role)LOOK AT ALL THESE ROLES!In recent years the Web Accessibility Initiative introduced a new accessibility API. alertalertdialogapplicationarticlebannerbuttoncheckboxcolumnheadercomboboxcommandcomplementarycompositecontentinfodefinitiondialogdirectorydocumentformgridtablegridcellgroupheadingimginput (abstract role)landmark linklistlistboxlistitemlogmainmarqueemathmenumenubarmenuitemmenuitemcheckboxmenuitemradionavigationnoteoptionpresentationlistitemlogmainmarqueemathmenumenubarmenuitemmenuitemcheckboxmenuitemradionavigationnoteoptionpresentationdialogdirectorydocumentformgridtablegridcellgroupheadingimginput (abstract role)landmark linklistlistboxprogressbarradioradiogrouprange (abstract role)regionroletype (abstract role)rowrowgrouprowheaderscrollbarsearchsection (abstract role)LOOK AT ALL THESE ROLES!In recent years the Web Accessibility Initiative introduced a new accessibility API. a11y: Youve ChangedThis is not the Aria you were looking for, and thats a reference to something else entirely.a11y: Youve ChangedSupport for Rich Interfacesnew roles presentation changes asynchronous contenta11y evaluation tools still useful elsewhereWere all equipped and ready to go!Right?WaitBefore we could dig into it...Important ConsiderationsFor your OrganizationThere were severalImportant ConsiderationsDefine UsersAssistive TechnologiesTake Stock of Codebase and UIDetermine rollout planHow will you influence a Paradigm Shift?Define Users - like with any software, its important to define who your users are1. Define Users1. Define UsersVision-impairedDexterity-impairedHearing impairedVision Impaired - cant see the cursorDexterity Impaired - cant use a mouse and sometimes require a special input devicesHearing Impaired - cant hear auditory cues1a. Assistive TechnologiesLearn about the ToolsJAWS, NVDA, VoiceOverWindows Eyes, ZoomTextSpecialized Input DevicesJAWS is especially well known.Each piece of software comes with its own set of tools and shortcut keys. Keyboard based UI for traversing webpages, and with JAWS and VOICE OVER your whole OS2. Take Stock of YourCodebase and UI2. Take Stock of Codebase and UIHow is your markup?Identify and address Anti-PatternsBreakdown features into components so you can tackle them individually (Agile)How is your markup?Use a11y tools to assess where your shortcomings areDefine ANTI-PATTERNSIs a design that may conflict with perceived design conventions.If it doesnt have a role, or doesnt fit into one of the roles identified in the ARIA guidelines, theres a good chance it is an Anti-PatternHurdles like that can often be solved with a redesignSometimes we design things for a specific need while ignoring design conventions and not recognizing that we have existing form elements for that type of thing, or there are conventions out there that poeple have embraced, including the people behind WAI-ARIA.3. Take Stock of Codebase and UI3. Determine Rollout PlanPrioritize core featuresBreak down into componentsTackle global elementsDont omit features or contentlive in a reality with stakeholders4. Influence a Paradigm Shifta11y is NOT a checkmarkAffects everyone in the development lifecycle4. Influence a Paradigm Shifta11y is not a checkmark you achieve once and forget aboutIf you want to do it properly, effectively, scalably, it is a paradigm shift for your development organizationEducationDevs and Testers need software trainingDesigners need to understand a11y needs for both users and developersProject Managers need to know how to break the work down4. Influence a Paradigm Shifta11y is not a checkmark you achieve once and forget aboutIf you want to do it properly, effectively, scalably, it is a paradigm shift for your development organization4. Influence a Paradigm ShiftProcess ImprovementDesign mocks need to be vetted for a11y at design stage before development beginsPattern/Component Library even more valuablea11y is not a checkmark you achieve once and forget aboutIf you want to do it properly, effectively, scalably, it is a paradigm shift for your development organization4. Influence a Paradigm ShiftTestinga11y testing can be expensiveSome automation possibleManual testing requiredTesting with real users is the only real testa11y is not a checkmark you achieve once and forget aboutIf you want to do it properly, effectively, scalably, it is a paradigm shift for your development organizationOkay, with all things considered...Accessible Rich UI ComponentsThe Code Demoa11y Rich UI Components...1. ...use WAI-ARIA for communicating:RolesPresentation changes like state and visibilityAsynchronous content changes2. are fully keyboard accessible2 Most imporant parts of Rich UI componentsTime for a quickSCREEN READER DEMOand now for someCODE EXAMPLESCode Examples1. Form Basics2. Live Regions3. Slider Example4. Tabs and Tab PanelsCode Example 1: Form Basics (1 of 3)Code Example 1: Form Basics (2 of 3)Your emailReason for contactingQuestionsAdmirationCan I get your number?MessageCode Example 1: Form Basics (3 of 3)Your emailReason for contactingQuestionsAdmirationCan I get your number?MessageCode Example 2: Live Region (1 of 3)MessageThere was an error with your messageCode Example 2: Live Region (2 of 3) function formSubmit() { $("form").submit(function() { showThrobber(); $.ajax( "formSubmit.php" ) .done(function() { hideThrobber(); alert( "success" ); }) .fail(function() { hideThrobber(); alert( "error" ); }); }); }Code Example 2: Live Region (2 of 3)Code Example 2: Live Region (3 of 3) function formSubmit() { $("form").submit(function() { showThrobber(); $.ajax( "formSubmit.php" ) .done(function() { hideThrobber(); updateLiveRegion("Form submitted successfully"); })

View more >