Embed Size (px)
Citation preview
Web Accessibility Laws Coding Practices and Testing Tools
Greg Kraus(Temporarily Able-Bodied)
EDUCAUSE Live Webinar
bull Freebull Accessibility for CIOs and Campus Leadersbull Wednesday 1245PM (100-200)bull UNC-W Teaching Laboratory Building Room
1053bull Visitor parking lot next to the building
What do you think of when you hear ldquoaccessible web siterdquo
Types of Disabilities
bull Physicalbull Auditorybull Visualbull Cognitivebull (Age-Related)
What Percentage of People in the US have a disability
bull 5bull 10bull 20bull 30
Speech Recognition Software
Mouth Stick
Braille Display
Sip and Puff Switch
Types of Assistive Technologies
bull Screen Readerbull Screen Magnifierbull High Contrast Modebull Speech Recognition Softwarebull Keyboard Only Accessbull Sticky Keysbull Literacy Software
What is accessibility
bull All people regardless of any impairment can interact with your content
bull Can your Web page be translated to work with these technologies
Universal Design
hellip the design of products and environments to be usable by all people to the greatest extent possible without the need for adaptation or specialized designrdquo
ndashRon Mace Center for Universal Design NC State University
Curb Cuts
Automatically Opening Doors
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
EDUCAUSE Live Webinar
bull Freebull Accessibility for CIOs and Campus Leadersbull Wednesday 1245PM (100-200)bull UNC-W Teaching Laboratory Building Room
1053bull Visitor parking lot next to the building
What do you think of when you hear ldquoaccessible web siterdquo
Types of Disabilities
bull Physicalbull Auditorybull Visualbull Cognitivebull (Age-Related)
What Percentage of People in the US have a disability
bull 5bull 10bull 20bull 30
Speech Recognition Software
Mouth Stick
Braille Display
Sip and Puff Switch
Types of Assistive Technologies
bull Screen Readerbull Screen Magnifierbull High Contrast Modebull Speech Recognition Softwarebull Keyboard Only Accessbull Sticky Keysbull Literacy Software
What is accessibility
bull All people regardless of any impairment can interact with your content
bull Can your Web page be translated to work with these technologies
Universal Design
hellip the design of products and environments to be usable by all people to the greatest extent possible without the need for adaptation or specialized designrdquo
ndashRon Mace Center for Universal Design NC State University
Curb Cuts
Automatically Opening Doors
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
What do you think of when you hear ldquoaccessible web siterdquo
Types of Disabilities
bull Physicalbull Auditorybull Visualbull Cognitivebull (Age-Related)
What Percentage of People in the US have a disability
bull 5bull 10bull 20bull 30
Speech Recognition Software
Mouth Stick
Braille Display
Sip and Puff Switch
Types of Assistive Technologies
bull Screen Readerbull Screen Magnifierbull High Contrast Modebull Speech Recognition Softwarebull Keyboard Only Accessbull Sticky Keysbull Literacy Software
What is accessibility
bull All people regardless of any impairment can interact with your content
bull Can your Web page be translated to work with these technologies
Universal Design
hellip the design of products and environments to be usable by all people to the greatest extent possible without the need for adaptation or specialized designrdquo
ndashRon Mace Center for Universal Design NC State University
Curb Cuts
Automatically Opening Doors
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Types of Disabilities
bull Physicalbull Auditorybull Visualbull Cognitivebull (Age-Related)
What Percentage of People in the US have a disability
bull 5bull 10bull 20bull 30
Speech Recognition Software
Mouth Stick
Braille Display
Sip and Puff Switch
Types of Assistive Technologies
bull Screen Readerbull Screen Magnifierbull High Contrast Modebull Speech Recognition Softwarebull Keyboard Only Accessbull Sticky Keysbull Literacy Software
What is accessibility
bull All people regardless of any impairment can interact with your content
bull Can your Web page be translated to work with these technologies
Universal Design
hellip the design of products and environments to be usable by all people to the greatest extent possible without the need for adaptation or specialized designrdquo
ndashRon Mace Center for Universal Design NC State University
Curb Cuts
Automatically Opening Doors
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
What Percentage of People in the US have a disability
bull 5bull 10bull 20bull 30
Speech Recognition Software
Mouth Stick
Braille Display
Sip and Puff Switch
Types of Assistive Technologies
bull Screen Readerbull Screen Magnifierbull High Contrast Modebull Speech Recognition Softwarebull Keyboard Only Accessbull Sticky Keysbull Literacy Software
What is accessibility
bull All people regardless of any impairment can interact with your content
bull Can your Web page be translated to work with these technologies
Universal Design
hellip the design of products and environments to be usable by all people to the greatest extent possible without the need for adaptation or specialized designrdquo
ndashRon Mace Center for Universal Design NC State University
Curb Cuts
Automatically Opening Doors
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Speech Recognition Software
Mouth Stick
Braille Display
Sip and Puff Switch
Types of Assistive Technologies
bull Screen Readerbull Screen Magnifierbull High Contrast Modebull Speech Recognition Softwarebull Keyboard Only Accessbull Sticky Keysbull Literacy Software
What is accessibility
bull All people regardless of any impairment can interact with your content
bull Can your Web page be translated to work with these technologies
Universal Design
hellip the design of products and environments to be usable by all people to the greatest extent possible without the need for adaptation or specialized designrdquo
ndashRon Mace Center for Universal Design NC State University
Curb Cuts
Automatically Opening Doors
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Mouth Stick
Braille Display
Sip and Puff Switch
Types of Assistive Technologies
bull Screen Readerbull Screen Magnifierbull High Contrast Modebull Speech Recognition Softwarebull Keyboard Only Accessbull Sticky Keysbull Literacy Software
What is accessibility
bull All people regardless of any impairment can interact with your content
bull Can your Web page be translated to work with these technologies
Universal Design
hellip the design of products and environments to be usable by all people to the greatest extent possible without the need for adaptation or specialized designrdquo
ndashRon Mace Center for Universal Design NC State University
Curb Cuts
Automatically Opening Doors
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Braille Display
Sip and Puff Switch
Types of Assistive Technologies
bull Screen Readerbull Screen Magnifierbull High Contrast Modebull Speech Recognition Softwarebull Keyboard Only Accessbull Sticky Keysbull Literacy Software
What is accessibility
bull All people regardless of any impairment can interact with your content
bull Can your Web page be translated to work with these technologies
Universal Design
hellip the design of products and environments to be usable by all people to the greatest extent possible without the need for adaptation or specialized designrdquo
ndashRon Mace Center for Universal Design NC State University
Curb Cuts
Automatically Opening Doors
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Sip and Puff Switch
Types of Assistive Technologies
bull Screen Readerbull Screen Magnifierbull High Contrast Modebull Speech Recognition Softwarebull Keyboard Only Accessbull Sticky Keysbull Literacy Software
What is accessibility
bull All people regardless of any impairment can interact with your content
bull Can your Web page be translated to work with these technologies
Universal Design
hellip the design of products and environments to be usable by all people to the greatest extent possible without the need for adaptation or specialized designrdquo
ndashRon Mace Center for Universal Design NC State University
Curb Cuts
Automatically Opening Doors
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Types of Assistive Technologies
bull Screen Readerbull Screen Magnifierbull High Contrast Modebull Speech Recognition Softwarebull Keyboard Only Accessbull Sticky Keysbull Literacy Software
What is accessibility
bull All people regardless of any impairment can interact with your content
bull Can your Web page be translated to work with these technologies
Universal Design
hellip the design of products and environments to be usable by all people to the greatest extent possible without the need for adaptation or specialized designrdquo
ndashRon Mace Center for Universal Design NC State University
Curb Cuts
Automatically Opening Doors
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
What is accessibility
bull All people regardless of any impairment can interact with your content
bull Can your Web page be translated to work with these technologies
Universal Design
hellip the design of products and environments to be usable by all people to the greatest extent possible without the need for adaptation or specialized designrdquo
ndashRon Mace Center for Universal Design NC State University
Curb Cuts
Automatically Opening Doors
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Universal Design
hellip the design of products and environments to be usable by all people to the greatest extent possible without the need for adaptation or specialized designrdquo
ndashRon Mace Center for Universal Design NC State University
Curb Cuts
Automatically Opening Doors
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Curb Cuts
Automatically Opening Doors
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Automatically Opening Doors
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Closed Captioning
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Anticipating the Userrsquos Need
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Accessibility Requirements
In general which Web accessibility laws and standards do Universities have to follow
A Section 504B Section 508C Americans with Disabilities ActD WCAG 2
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Accessibility and the Law
bull Section 504bull Americans with Disabilities Act (ADA)
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Section 504
bull No otherwise qualified individual with a disability in the United Stateshellipshall solely by reason of her or his disability be excluded from the participation in be denied the benefits of or be subjected to discrimination under any program or activity receiving Federal financial assistancehellip
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Definition of ldquoaccessibilityrdquo in regards to communication
An individual can access and acquire the same information engage in the same interactions and enjoy the same services that the devicetechnology offers non-disabled individuals with substantially the equivalent ease of use
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Universities Must Providehellip
bull an environment for all participants that isndash Timelyndash Equally effectivendash Equally integrated
bull reasonable accommodations to qualified students with disabilities
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Americans with Disabilities Act
bull ADA builds off of Section 504bull Title I ndash Employmentbull Title II ndash Public Entitiesbull Title III ndash Public Accommodations (and
Commercial Facilities)bull Title IV ndash Telecommunicationsbull Title V ndash Miscellaneous Provisions
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
504 and ADA
bull Define what ldquoaccessiblerdquo means in broad terms
bull They do not define a technical standard for what is accessible
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Accessibility and Standards
bull Section 508bull Web Content Accessibility Guidelines 20
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Section 508
bull You donrsquot have to follow Section 508 unless you have to follow Section 508ndash Procurement and development requirement for Federal
agenciesbull Released in 1998bull 16 criteriabull 381 words longbull Does not tell you how to technically do any of it
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Web Content Accessibility Guidelines 20 (WCAG 2)
bull Standard published by the Web Accessibility Initiative (WAI) within the W3C
bull Released in 2008bull 14000 words in the standardbull 300000 words of support documentation
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Future of the Laws and Standards
bull Section 508 Refreshndash Most likely will mirror WCAG 20 Level AA Conformancendash Release imminent
bull ADAndash May define a technical standard either
bull The refreshed Section 508 orbull WCAG 20 Level AA Conformance
ndash Release at least 1-2 years away
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Recent OCR Settlements
bull South Carolina Technical College Systemndash ldquoShall followrdquo Section 508bull They had already opted to follow Section 508 but had
not adhered to it
ndash ldquoRecommendedrdquo to follow WCAG 2 for issues not addressed in Section 508
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
State of North Carolina
bull North Carolina State Technical Architecturendash httpwwwncstagov
bull Minimum accessibility hellip full compliance with WCAG 10 Priority 1 or WCAG 2 ldquoLevel 1rdquondash (They probably mean ldquoLevel A Conformancerdquo)
bull Not clear that these requirements apply to higher education
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Web Standards
bull The meeting point between your Web page and the assistive technology vendor
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
The Future Standard
bull (Looks like) WCAG 20 Level AA
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
WCAG 2 ndash Structure
bull Principlesbull Guidelinesbull Success Criteriabull Guide to Understanding the Success Criteriabull Techniques for Meeting Success Criteria
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
WCAG 2 ndash Principles (POUR)
Can I ldquoseerdquo it
Can I ldquotouchrdquo it
Can I understand it
Can I break it
Perceivable
Operable
Understandable
Robust
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Rank of Most Accessible Formats(The Easiest to Make Accessible)
1 HTML2 VideoAudio3 Office Documents4 PDF5 Rich Multimedia (ie Flash)
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
HTMLbull It is viewable on a multitude of devicesbull It provides an easy way to create rich semantics to describe Web
pagesbull It can be transformed into other formats to meet peoples individual
needsbull Content can readily be made accessiblebull Even though HTML offers the highest level of accessibility support
there are certain technologies that must be implemented with care to ensure accessibility
bull Some technologies such as JavaScript can be made quite accessible but additional planning is needed
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
VideoAudio
bull You needndash A synchronized transcript (captions) for videondash A transcript for audiondash A media player that people with disabilities can
interact with
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Office Documents
bull Microsoft Office has many accessibility features built-in
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
bull Making your first PDF document accessible is kind of fun because you learn all kinds of new skills and tools
bull The second PDF you have to make accessible is a real pain
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Rich Multimedia
bull Flash Silverlight and Javandash Can be made accessible but it takes extra
intentional workbull HTML Canvasndash New technology without great accessibility
options yet
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Accessible Coding Practices
bull Accessibility Handbookndash httpgoncsueduaccessibility-handbook
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Language
bull HTML5lthtml lang=en-USgt
bull XHTMLlthtml lang=en xmllang=en xmlns= httpwwww3org1999xhtmlgt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Multiple Languagesltdoctype htmlgtlthtml lang=en-USgthellipltbodygt lth1gtWelcomelth1gt ltpgtLots of text in Englishltpgt ltp lang=frgtUne petite quantiteacute de texte en franccedilaisltpgtltbodygtlthtmlgt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Language of the DOCTYPE
bull Does not set the language of the documentltDOCTYPE html PUBLIC -W3CDTD XHTML 10 TransitionalEN httpwwww3orgTRxhtml1DTDxhtml1-transitionaldtdgt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Language Demonstration
bull httpwwwyoutubecomwatchv=NP94u7y_KkQ
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Valid Code
bull Browsers are very forgivingbull Not all assistive technologies arebull httpvalidatorw3orgbull Some errors are false positives ndash ARIA
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Headings - Make an ldquoOutlinerdquolth1gtOur News Sitelth1gt lth2gtWorld Newslth2gt lth2gtNational Newslth2gt lth3gtHot Topicslth3gt lth3gtPoliticslth3gt lth2gtSciencelth2gt lth3gtHealthlth3gt lth3gtEnvironmentlth3gt lth3gtTechnologylth3gt lth2gtEntertainmentlth2gt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Heading Styles
ltstylegth1 font-size14em font-weightbold color000h2 font-size12em font-weightbold color222h3 font-size1em font-weightbold color444ltstylegt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
General Rules for Headingsbull Your lth1gt should be where the unique main content of your page begins which
usually means it will come after your navigation systembull It is fine if your first heading on the page is not an lth1gt such as a having an lth2gt
come before your first lth1gtbull You should have only 1 lth1gt per page If you feel you must you can use a second
lth1gt for the title of your pagebull Donrsquot obsess over making the first heading on your page an lth1gtbull Donrsquot pick a heading level simply for font sizing purposes Pick a level that
corresponds roughly to the outline of the pagebull It is not usually necessary to skip heading levels going from an lth1gt directly to
an lth3gtbull There are always exceptions to rules Just make sure you are breaking the rules
for a good reason
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Traditional Navigation
ltdiv id=navgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
ARIA
bull Collection of techniques which adds additional accessibility functionality to Web pages beyond what standard HTML elements can do
bull No single way to apply ARIA techniquesndash ARIA Landmarksndash ARIA States and Propertiesndash ARIA Live Regions
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
ARIA Landmark
ltdiv id=nav role=navigationgt ltulgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligt ltulgtltdivgt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
aria-labelltdiv id=nav role=navigation aria-label=main navigationgt ltulgt ltligtHomeltligthellipltulgtltdivgt ltdiv id=nav role=navigation aria-label=product navigationgt ltulgt ltligtProduct Descriptionltligthellip ltulgtltdivgt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
aria-labelledbyltdiv role=navigation aria-labelledby=nav-headinggt lth2 id=nav-headinggtLearn About This Productlth2gt ltulgt ltligtProduct Descriptionltligt ltligtTechnical Specificationsltligt ltligtCustomer Reviewsltligt ltulgtltdivgt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
ARIA Landmarks ndash DO NOT TRY THIS
ltul id=nav role=navigationgt ltligtHomeltligt ltligtProductsltligt ltligtSupportltligtltulgt
The ltulgt will no longer be recognized as a list by the assistive technology
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
ARIA Role
bull The ARIA attribute ldquorolerdquo fundamentally changes what an element is
bull ltdiv role=ldquoimagerdquogthellipltdivgtndash Assistive technologies now threat this as an ltimggt
bull lth1 role=ldquoimagerdquogthelliplth1gtndash Assistive technologies now also treat this as an
ltimggt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
ARIA Landmarksbull bannerbull complementarybull contentinfobull formbull mainbull navigationbull searchbull Application
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Alternative Text
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Example 1
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesC An empty alt attribute (alt=) will suffice D George Washington
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Example 2
Because of his role as the Commander in Chief of American forces in the Revolutionary War and later the first President of the United States George Washington is often called the Father of his Country
A Image of George WashingtonB George Washington the first president of the United StatesrdquoC An empty alt attribute (alt=) will suffice D George Washington
George Washington
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Example 3
A An empty alt attribute (alt=) will suffice B Wikipedia entry for George Washington C Read MoreD George Washington
George Washington
NOTE This image is a clickable link to the Wikipedia page for George Washington
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Example 4
In this painting the artist Emanuel Leutze used light color form perspective proportion and motion to create the composition
A George Washington B Painting of George WashingtonC Painting of George Washington crossing the Delaware River D A classic painting demonstrating the use of light and color to create composition E Painting of George Washington crossing the Delaware River Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Example 5
What would be the most appropriate alt attribute for the ldquoTV amp AUDIO navigation imageA ldquoTV and Video B Link to TV and VideoC The image doesnt convey content so (alt=) will suffice
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Example 6
A decorative line B Beginning of next sectionC separatorD alt= will suffice
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Lists ndash Donrsquot Do This
milkltbr gt breadltbr gt butterltbr gt flour
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Lists ndash Do This
ltulgt ltligtmilkltligt ltligtbreadltligt ltligtbutterltligt ltligtflourltligtltulgt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Tables
bull Data tablesbull Layout tables
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Caption and Summary
bull caption = identifies the table (title or a heading)
bull summary = describes the layout of the table andor describes the data in the table
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
lttable summary=Schedule for Route 7 going downtown Service begins at 400 AM and ends at midnight Intersections are listed in the top row Find the intersection closest to your starting point or destination then read down that column to find out what time the bus leaves that intersectiongt ltcaptiongtSchedule for the week of March 6ltcaptiongt lttrgt ltth scope=colgtState amp Firstltthgt ltth scope=colgtState amp Sixthltthgt ltth scope=colgtState amp Fifteenthltthgt ltth scope=colgtFifteenth amp Morrisonltthgt lttrgt lttrgt lttdgt400lttdgtlttdgt405lttdgtlttdgt411lttdgt lttdgt419lttdgt lttrgt helliplttablegt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Table Headers ndash Simple Table
Small Medum Large
Cheese $8 $10 $12
Veggie $10 $12 $14
Pepperoni $10 $12 $14
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
lttablegtlttrgt ltth scope=colgtampnbspltthgt ltth scope=colgtSmallltthgt ltth scope=colgtMedumltthgt ltth scope=colgtLargeltthgt lttrgt lttrgt ltth scope=rowgtCheeseltthgt lttdgt$8lttdgt lttdgt$10lttdgt lttdgt$12lttdgt lttrgt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Table Headers ndash Complex Table
Meat Toppings Vegetable Toppings
Pepperoni Sausage Bacon Onion Olives Tomato
Small $080 $080 $100 $060 $080 $060
Medium $100 $100 $120 $080 $100 $080
Large $120 $120 $140 $100 $120 $100
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
lttablegt lttrgt ltth scope=colgtampnbspltthgt ltth colspan=3 scope=col id=meatgtMeat Toppingsltthgt ltth colspan=3 scope=col id=veggtVegetable Toppingsltthgt lttrgt lttrgt ltth scope=colgtampnbspltthgt ltth scope=col id=pepgtPepperoniltthgt ltth scope=col id=sagtSausageltthgt ltth scope=col id=bacgtBaconltthgt lttrgt lttrgt ltth scope=row id=smgtSmallltthgt lttd headers=meat pep smgt$080lttdgt lttd headers=meat sa smgt$080lttdgt lttd headers=meat bac smgt$100lttdgt lttrgt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Mouse and Keyboard Equivalent Events
Mouse Event Keyboard Event
mousedown keydown
mouseup keyup
click keypress
mouseover focus
mouseout blur
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
tabindexCan Receive
Programmatic FocusUser Can Tab
To ItPosition in the Tab
Order
-1 Yes No na0 Yes Yes Follows DOM order
1+ Yes Yes Follows the explicit tab order
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Visual Focusbull Problemltstylegt focus outlinenoneltstylegtbull Solutionltstylegt focus outline2px solid f00ltstylegt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Visual Focus - Links
ltstylegt afocus outlinenoneltstylegt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Menus
bull Make sure the menus including submenus can be accessed using only the keyboard
bull Make sure the visual focus can always be seen when navigating the menu with a keyboard
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Types of Accessible Menus
bull Non-Managed Focusndash httpuserstpgcomauj_birchpluginssuperfishndash httpsimplyaccessiblecomexamplescss-menu
option-6
bull Managed Focusndash httphanshillengithubcomjqtest
tabid=dialoggoto_menubarndash httpoaa-accessibilityorgexamplepmenubar1
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Skip to Main Contentlta class=skip-main href=maingtSkip to main contentltagtlth1gtSample Pagelth1gtltulgt ltligtlta href=gtNav Item 1ltagtltligt ltligtlta href=gtNav Item 2ltagtltligt ltligtlta href=gtNav Item 3ltagtltligt ltligtlta href=gtNav Item 4ltagtltligtltulgtltp id=maingtThis is the main contentltpgt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Skip to Main Content - CSSaskip-main positionabsolute left-999px topauto width1px height1px overflowscrollaskip-mainfocus askip-mainactive color fff background-color000 left 0 top 0 width auto height auto overflowauto
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Skip to Main Content Example
bull httpwwwyoutubecomwatchv=Qjn0dymxuJk
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Forms
ltlabel for=first-namegtFirst Nameltlabelgtltinput id=first-name name=first-name type=text gt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Forms ndash Required Fields
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgtltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Forms ndash Required Fields ARIAltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgtltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Forms ndash Jump Menus
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Color Contrast
Button Button Button
Button Button Button
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Linksbull Opening in new windowsbull Alt text for linked imagesbull Descriptive link textbull Length of link textbull URL link textbull Underline styles for linksbull Link vs button
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Link Text
bull Donrsquot usendash ldquoClick hererdquondash Long URLs as the hypertext
bull Use cautiouslyndash ldquoRead morerdquo
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
ldquoClick HererdquoGood Find out more information at the lta href=httpaccessibilityoitncsuedugtNC State IT Accessibilityltagt home page
Bad lta href=httpaccessibilityoitncsuedugtClick hereltagt to find out more information at the NC State IT Accessibility home page
Bad lta href=httpaccessibilityoitncsuedugtClick here to find out more information at the NC State IT Accessibility home pageltagt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
ldquoRead morerdquo ndash Child Element (Good)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the least lta href=filehtmlgt[Read more]ltagtltpgt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
ldquoRead Morerdquo ndash Sibling Element (Bad)
ltpgtHow should you display the parts of a form that are read-only There are three main implementations that I have seen and unfortunately the accessible version is the one Irsquove seen used the leastltpgtltpgtlta href=filehtmlgt[Read more]ltagtltpgt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Non-Unique Link Text ndash Unique Heading (Good)
lth5gtAnnual Report 2007-2008lth5gt lta href=annrep0708htmlgt(HTML)ltagt lta href=annrep0708pdfgt(PDF)ltagt lta href=annrep0708rtfgt(RTF)ltagtlth5gtAnnual Report 2006-2007lth5gt lta href=annrep0607htmlgt(HTML)ltagt lta href=annrep0607pdfgt(PDF)ltagt lta href=annrep0607rtfgt(RTF)ltagt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Non-Unique Link Text ndash Unique List Item Parent(Good)
ltulgt ltligtAnnual Report 2005-2006 ltulgt ltligtlta href=annrep0506htmlgt(HTML)ltagtltligt ltligtlta href=annrep0506pdfgt(PDF)ltagtltligt ltligtlta href=annrep0506rtfgt(RTF)ltagtltligt ltulgt ltligtltligtAnnual Report 2006-2007 ltulgt ltligtlta href=annrep0607htmlgt(HTML)ltagtltligt ltligtlta href=annrep0607pdfgt(PDF)ltagtltligt ltligtlta href=annrep0607rtfgt(RTF)ltagtltligt ltulgt ltligtltulgt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Links in Opening New Windows
bull httpaccessibilityoitncsuedutrainingaccessibility-handbooklink-new-windowhtml
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
When should a link not be a link
bull When it should be a buttonbull A link represents a connection between two
resourcesbull Buttons have no default behavior and can
have client-side scripts associated with thembull http
accessibilityoitncsuedutrainingaccessibility-handbooklink-behaviorhtml
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
My Testing Toolsbull W3C Validatorbull WAVE Toolbarbull WAVE Web Accessibility Toolbull Keyboard only testbull Web Evaluation Tools Bookmarkletbull Accessible Color Palette Evaluatorbull Color Contrast Analyzer Chromebull SortSitebull Screen Reader
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Screen Readers
bull JAWS ndash market leader Windows works best with IE
bull NVDA ndash free and open source Windows works best with Firefox
bull VoiceOver ndash free OS Xbull ChromeVox ndash free Chrome
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Other Testing Tools
bull ACheckerbull Functional Accessibility Evaluatorbull Firefox Accessibility Extensionbull Color Contrast Analyserbull Web Accessibility Toolbar for IEbull Jim Thatcher Faveletsbull Juicy Studio Accessibility Toolbar
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
A Workflow for Testing Accessibility1 Run the WAVE Accessibility Toolbar to check for numerous errors (or
Wave Accessibility Evaluation Tool)2 Try to complete all of the functions on a page using only the keyboard
Make sure you can see the visual focus and also select all items you can with a mouse
3 Run the Web Evaluation Tools to check for heading structure and ARIA landmarks
4 Check for color contrast5 View a text-only version of the page with the WAVE Toolbar and confirm
the contents are still in the right order6 Run the W3C Validator7 (optional) Run a tool like SortSite
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Why do we need ARIA
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Accessibility on the Desktopbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application Operating System
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Accessibility on the Webbull push buttonbull name is Cancelbull focusablebull default actionbull unpressed
Application(Browser)
Operating SystemWeb Page
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Browser Translates Objects into Items the OS Understands
Lorem ipsum dolor sit amet consectetur adipiscing elit
Checkbox
Radio Button
Button
Image
Text
Text Input
Drop Down List
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
ARIA Fills in the Gaps for Items Lost in Translation
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
What is ARIAbull Roles States and Propertiesbull Roles = defining what an object isndash Widgetsndash Document Structurendash Landmark
bull Attributes = describing an objectndash Statesndash Properties
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
Putting our toes in the waterhellip
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
aria-required
ltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gtltspan class=requiredgt ltspangt
ARIA Gone Wild
What you can do but shouldnt doand dont let anyone catch you doing it
A Simple Checkbox
ltinput id=signup type=checkbox gtltlabel for=signupgtSign me upltlabelgt
The Starting Point
ltdivgtSign me upltdivgt
Introducing the role
ltdiv role=checkboxgtSign me upltdivgt
ltdog role=at-atgtltdoggt
AT-AT = All Terrain Armored Transportfirst introduced in The Empire Strikes Back
Adding the checkbox
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10pxgtSign me upltdivgt
Responding to clicks
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this)gtSign me upltdivgt
Make it so you can tab to it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0gtSign me upltdivgt
Make it so you can use the keyboard to activate it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent)gtSign me upltdivgt
Make it so screen readers can know its current state
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent) aria-checked=truegtSign me upltdivgt
and all of this codefunction trapSpaceKey(te)
if ( ewhich == 32 ) toggleCheckBox(t)
function toggleCheckBox(t)
if($(t)attr(aria-checked)==false) $(t)css(background-imageurl(checkbox-checkedgif))
$(t)attr(aria-checkedtrue) else
$(t)css(background-imageurl(checkbox-uncheckedgif))$(t)attr(aria-checkedfalse)
$(t)focus()
A Simple Checkbox
ltinput id=signup type=checkbox gtltlabel for=signupgtSign me upltlabelgt
The Starting Point
ltdivgtSign me upltdivgt
Introducing the role
ltdiv role=checkboxgtSign me upltdivgt
ltdog role=at-atgtltdoggt
AT-AT = All Terrain Armored Transportfirst introduced in The Empire Strikes Back
Adding the checkbox
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10pxgtSign me upltdivgt
Responding to clicks
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this)gtSign me upltdivgt
Make it so you can tab to it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0gtSign me upltdivgt
Make it so you can use the keyboard to activate it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent)gtSign me upltdivgt
Make it so screen readers can know its current state
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent) aria-checked=truegtSign me upltdivgt
and all of this codefunction trapSpaceKey(te)
if ( ewhich == 32 ) toggleCheckBox(t)
function toggleCheckBox(t)
if($(t)attr(aria-checked)==false) $(t)css(background-imageurl(checkbox-checkedgif))
$(t)attr(aria-checkedtrue) else
$(t)css(background-imageurl(checkbox-uncheckedgif))$(t)attr(aria-checkedfalse)
$(t)focus()
The Starting Point
ltdivgtSign me upltdivgt
Introducing the role
ltdiv role=checkboxgtSign me upltdivgt
ltdog role=at-atgtltdoggt
AT-AT = All Terrain Armored Transportfirst introduced in The Empire Strikes Back
Adding the checkbox
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10pxgtSign me upltdivgt
Responding to clicks
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this)gtSign me upltdivgt
Make it so you can tab to it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0gtSign me upltdivgt
Make it so you can use the keyboard to activate it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent)gtSign me upltdivgt
Make it so screen readers can know its current state
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent) aria-checked=truegtSign me upltdivgt
and all of this codefunction trapSpaceKey(te)
if ( ewhich == 32 ) toggleCheckBox(t)
function toggleCheckBox(t)
if($(t)attr(aria-checked)==false) $(t)css(background-imageurl(checkbox-checkedgif))
$(t)attr(aria-checkedtrue) else
$(t)css(background-imageurl(checkbox-uncheckedgif))$(t)attr(aria-checkedfalse)
$(t)focus()
Introducing the role
ltdiv role=checkboxgtSign me upltdivgt
ltdog role=at-atgtltdoggt
AT-AT = All Terrain Armored Transportfirst introduced in The Empire Strikes Back
Adding the checkbox
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10pxgtSign me upltdivgt
Responding to clicks
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this)gtSign me upltdivgt
Make it so you can tab to it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0gtSign me upltdivgt
Make it so you can use the keyboard to activate it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent)gtSign me upltdivgt
Make it so screen readers can know its current state
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent) aria-checked=truegtSign me upltdivgt
and all of this codefunction trapSpaceKey(te)
if ( ewhich == 32 ) toggleCheckBox(t)
function toggleCheckBox(t)
if($(t)attr(aria-checked)==false) $(t)css(background-imageurl(checkbox-checkedgif))
$(t)attr(aria-checkedtrue) else
$(t)css(background-imageurl(checkbox-uncheckedgif))$(t)attr(aria-checkedfalse)
$(t)focus()
ltdog role=at-atgtltdoggt
AT-AT = All Terrain Armored Transportfirst introduced in The Empire Strikes Back
Adding the checkbox
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10pxgtSign me upltdivgt
Responding to clicks
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this)gtSign me upltdivgt
Make it so you can tab to it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0gtSign me upltdivgt
Make it so you can use the keyboard to activate it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent)gtSign me upltdivgt
Make it so screen readers can know its current state
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent) aria-checked=truegtSign me upltdivgt
and all of this codefunction trapSpaceKey(te)
if ( ewhich == 32 ) toggleCheckBox(t)
function toggleCheckBox(t)
if($(t)attr(aria-checked)==false) $(t)css(background-imageurl(checkbox-checkedgif))
$(t)attr(aria-checkedtrue) else
$(t)css(background-imageurl(checkbox-uncheckedgif))$(t)attr(aria-checkedfalse)
$(t)focus()
Adding the checkbox
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10pxgtSign me upltdivgt
Responding to clicks
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this)gtSign me upltdivgt
Make it so you can tab to it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0gtSign me upltdivgt
Make it so you can use the keyboard to activate it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent)gtSign me upltdivgt
Make it so screen readers can know its current state
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent) aria-checked=truegtSign me upltdivgt
and all of this codefunction trapSpaceKey(te)
if ( ewhich == 32 ) toggleCheckBox(t)
function toggleCheckBox(t)
if($(t)attr(aria-checked)==false) $(t)css(background-imageurl(checkbox-checkedgif))
$(t)attr(aria-checkedtrue) else
$(t)css(background-imageurl(checkbox-uncheckedgif))$(t)attr(aria-checkedfalse)
$(t)focus()
Responding to clicks
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this)gtSign me upltdivgt
Make it so you can tab to it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0gtSign me upltdivgt
Make it so you can use the keyboard to activate it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent)gtSign me upltdivgt
Make it so screen readers can know its current state
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent) aria-checked=truegtSign me upltdivgt
and all of this codefunction trapSpaceKey(te)
if ( ewhich == 32 ) toggleCheckBox(t)
function toggleCheckBox(t)
if($(t)attr(aria-checked)==false) $(t)css(background-imageurl(checkbox-checkedgif))
$(t)attr(aria-checkedtrue) else
$(t)css(background-imageurl(checkbox-uncheckedgif))$(t)attr(aria-checkedfalse)
$(t)focus()
Make it so you can tab to it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0gtSign me upltdivgt
Make it so you can use the keyboard to activate it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent)gtSign me upltdivgt
Make it so screen readers can know its current state
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent) aria-checked=truegtSign me upltdivgt
and all of this codefunction trapSpaceKey(te)
if ( ewhich == 32 ) toggleCheckBox(t)
function toggleCheckBox(t)
if($(t)attr(aria-checked)==false) $(t)css(background-imageurl(checkbox-checkedgif))
$(t)attr(aria-checkedtrue) else
$(t)css(background-imageurl(checkbox-uncheckedgif))$(t)attr(aria-checkedfalse)
$(t)focus()
Make it so you can use the keyboard to activate it
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent)gtSign me upltdivgt
Make it so screen readers can know its current state
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent) aria-checked=truegtSign me upltdivgt
and all of this codefunction trapSpaceKey(te)
if ( ewhich == 32 ) toggleCheckBox(t)
function toggleCheckBox(t)
if($(t)attr(aria-checked)==false) $(t)css(background-imageurl(checkbox-checkedgif))
$(t)attr(aria-checkedtrue) else
$(t)css(background-imageurl(checkbox-uncheckedgif))$(t)attr(aria-checkedfalse)
$(t)focus()
Make it so screen readers can know its current state
ltdiv role=checkbox style=background-imageurl(checkbox-uncheckedgif) background-repeat no-repeat padding-left25pxpadding-top10px onclick=toggleCheckBox(this) tabindex=0 onKeyPress=trapSpaceKey(thisevent) aria-checked=truegtSign me upltdivgt
and all of this codefunction trapSpaceKey(te)
if ( ewhich == 32 ) toggleCheckBox(t)
function toggleCheckBox(t)
if($(t)attr(aria-checked)==false) $(t)css(background-imageurl(checkbox-checkedgif))
$(t)attr(aria-checkedtrue) else
$(t)css(background-imageurl(checkbox-uncheckedgif))$(t)attr(aria-checkedfalse)
$(t)focus()
and all of this codefunction trapSpaceKey(te)
if ( ewhich == 32 ) toggleCheckBox(t)
function toggleCheckBox(t)
if($(t)attr(aria-checked)==false) $(t)css(background-imageurl(checkbox-checkedgif))
$(t)attr(aria-checkedtrue) else
$(t)css(background-imageurl(checkbox-uncheckedgif))$(t)attr(aria-checkedfalse)
$(t)focus()
When all you needed was this
ltinput id=signup type=checkbox gtltlabel for=signupgtSign me upltlabelgt
Dont be tempted to do this
ltinput id=signup type=checkbox role=checkbox gt
ltlabel for=signupgtSign me upltlabelgt
Superfluous Labelling is Not Needed
ARIA Live Regionsbull aria-live
ndash polite = read when the user is idlendash assertive = read immediatelyndash off = not read
bull aria-atomicndash true = everything is readndash false = only the text that changes is read
bull aria-relevantndash additions = nodes are addedndash removals = nodes are removedndash text = text is addedndash all = everything
Types of Live Regionsbull alert = notification where the alert message is delivered
through a modal windowbull timer = such as a clock or a countdown timerbull status = indicator for a Web application indicating the
general status of an applicationbull marquee = scrolling information such as a scrolling news
tickerbull log = running log of information such as a chat roombull live region = generic live updating region
Generic Live Region
ltli aria-relevant=text aria-atomic=true aria-live=politegtAccess U ltspan id=our_scoregt0ltspangtltligtltli aria-relevant=text aria-atomic=true aria-live=politegtWestern State ltspan id=their_scoregt0ltspangtltligt
ARIA Modal Dialog
bull httpgoncsuedua11y-modal
Step 1 Basic Page Structure
ltbodygtltdiv id=mainContentgtltdivgtltdiv id=modalWindowgtltdivgtltbodygt
When all you needed was this
ltinput id=signup type=checkbox gtltlabel for=signupgtSign me upltlabelgt
Dont be tempted to do this
ltinput id=signup type=checkbox role=checkbox gt
ltlabel for=signupgtSign me upltlabelgt
Superfluous Labelling is Not Needed
ARIA Live Regionsbull aria-live
ndash polite = read when the user is idlendash assertive = read immediatelyndash off = not read
bull aria-atomicndash true = everything is readndash false = only the text that changes is read
bull aria-relevantndash additions = nodes are addedndash removals = nodes are removedndash text = text is addedndash all = everything
Types of Live Regionsbull alert = notification where the alert message is delivered
through a modal windowbull timer = such as a clock or a countdown timerbull status = indicator for a Web application indicating the
general status of an applicationbull marquee = scrolling information such as a scrolling news
tickerbull log = running log of information such as a chat roombull live region = generic live updating region
Generic Live Region
ltli aria-relevant=text aria-atomic=true aria-live=politegtAccess U ltspan id=our_scoregt0ltspangtltligtltli aria-relevant=text aria-atomic=true aria-live=politegtWestern State ltspan id=their_scoregt0ltspangtltligt
ARIA Modal Dialog
bull httpgoncsuedua11y-modal
Step 1 Basic Page Structure
ltbodygtltdiv id=mainContentgtltdivgtltdiv id=modalWindowgtltdivgtltbodygt
Dont be tempted to do this
ltinput id=signup type=checkbox role=checkbox gt
ltlabel for=signupgtSign me upltlabelgt
Superfluous Labelling is Not Needed
ARIA Live Regionsbull aria-live
ndash polite = read when the user is idlendash assertive = read immediatelyndash off = not read
bull aria-atomicndash true = everything is readndash false = only the text that changes is read
bull aria-relevantndash additions = nodes are addedndash removals = nodes are removedndash text = text is addedndash all = everything
Types of Live Regionsbull alert = notification where the alert message is delivered
through a modal windowbull timer = such as a clock or a countdown timerbull status = indicator for a Web application indicating the
general status of an applicationbull marquee = scrolling information such as a scrolling news
tickerbull log = running log of information such as a chat roombull live region = generic live updating region
Generic Live Region
ltli aria-relevant=text aria-atomic=true aria-live=politegtAccess U ltspan id=our_scoregt0ltspangtltligtltli aria-relevant=text aria-atomic=true aria-live=politegtWestern State ltspan id=their_scoregt0ltspangtltligt
ARIA Modal Dialog
bull httpgoncsuedua11y-modal
Step 1 Basic Page Structure
ltbodygtltdiv id=mainContentgtltdivgtltdiv id=modalWindowgtltdivgtltbodygt
Superfluous Labelling is Not Needed
ARIA Live Regionsbull aria-live
ndash polite = read when the user is idlendash assertive = read immediatelyndash off = not read
bull aria-atomicndash true = everything is readndash false = only the text that changes is read
bull aria-relevantndash additions = nodes are addedndash removals = nodes are removedndash text = text is addedndash all = everything
Types of Live Regionsbull alert = notification where the alert message is delivered
through a modal windowbull timer = such as a clock or a countdown timerbull status = indicator for a Web application indicating the
general status of an applicationbull marquee = scrolling information such as a scrolling news
tickerbull log = running log of information such as a chat roombull live region = generic live updating region
Generic Live Region
ltli aria-relevant=text aria-atomic=true aria-live=politegtAccess U ltspan id=our_scoregt0ltspangtltligtltli aria-relevant=text aria-atomic=true aria-live=politegtWestern State ltspan id=their_scoregt0ltspangtltligt
ARIA Modal Dialog
bull httpgoncsuedua11y-modal
Step 1 Basic Page Structure
ltbodygtltdiv id=mainContentgtltdivgtltdiv id=modalWindowgtltdivgtltbodygt
ARIA Live Regionsbull aria-live
ndash polite = read when the user is idlendash assertive = read immediatelyndash off = not read
bull aria-atomicndash true = everything is readndash false = only the text that changes is read
bull aria-relevantndash additions = nodes are addedndash removals = nodes are removedndash text = text is addedndash all = everything
Types of Live Regionsbull alert = notification where the alert message is delivered
through a modal windowbull timer = such as a clock or a countdown timerbull status = indicator for a Web application indicating the
general status of an applicationbull marquee = scrolling information such as a scrolling news
tickerbull log = running log of information such as a chat roombull live region = generic live updating region
Generic Live Region
ltli aria-relevant=text aria-atomic=true aria-live=politegtAccess U ltspan id=our_scoregt0ltspangtltligtltli aria-relevant=text aria-atomic=true aria-live=politegtWestern State ltspan id=their_scoregt0ltspangtltligt
ARIA Modal Dialog
bull httpgoncsuedua11y-modal
Step 1 Basic Page Structure
ltbodygtltdiv id=mainContentgtltdivgtltdiv id=modalWindowgtltdivgtltbodygt
Types of Live Regionsbull alert = notification where the alert message is delivered
through a modal windowbull timer = such as a clock or a countdown timerbull status = indicator for a Web application indicating the
general status of an applicationbull marquee = scrolling information such as a scrolling news
tickerbull log = running log of information such as a chat roombull live region = generic live updating region
Generic Live Region
ltli aria-relevant=text aria-atomic=true aria-live=politegtAccess U ltspan id=our_scoregt0ltspangtltligtltli aria-relevant=text aria-atomic=true aria-live=politegtWestern State ltspan id=their_scoregt0ltspangtltligt
ARIA Modal Dialog
bull httpgoncsuedua11y-modal
Step 1 Basic Page Structure
ltbodygtltdiv id=mainContentgtltdivgtltdiv id=modalWindowgtltdivgtltbodygt
Generic Live Region
ltli aria-relevant=text aria-atomic=true aria-live=politegtAccess U ltspan id=our_scoregt0ltspangtltligtltli aria-relevant=text aria-atomic=true aria-live=politegtWestern State ltspan id=their_scoregt0ltspangtltligt
ARIA Modal Dialog
bull httpgoncsuedua11y-modal
Step 1 Basic Page Structure
ltbodygtltdiv id=mainContentgtltdivgtltdiv id=modalWindowgtltdivgtltbodygt
ARIA Modal Dialog
bull httpgoncsuedua11y-modal
Step 1 Basic Page Structure
ltbodygtltdiv id=mainContentgtltdivgtltdiv id=modalWindowgtltdivgtltbodygt
Step 1 Basic Page Structure
ltbodygtltdiv id=mainContentgtltdivgtltdiv id=modalWindowgtltdivgtltbodygt
Step 2 Adding role=dialog
ltbodygtltdiv id=mainContentgtltdivgtltdiv id=modalWindow role=dialoggtltdivgtltbodygt
Step 2 Adding role=dialog
ltbodygtltdiv id=mainContentgtltdivgtltdiv id=modalWindow role=dialoggtltdivgtltbodygt
Step 3 Adding the Overlay
ltbodygtltdiv id=mainContentgtltdivgtltdiv id=modalWindow role=dialoggtltdivgtltdiv id=modalOverlay tabindex=-1gtltdivgtltbodygt
Step 3 Adding the Description and Heading
ltdiv id=modalWindow role=dialog aria-labelledby=modalTitle modalDescriptiongtltdiv id=modalDescription class=screen-reader-offscreengtBeginning of dialog window It begins with a heading 1 called ampquotRegistration Formampquotltdivgtlth1 id=modalTitlegtRegistration Formlth1gt
ltdivgtltdiv id=modalOverlay tabindex=-1gtltdivgt
Step 3 Adding the Overlay
ltbodygtltdiv id=mainContentgtltdivgtltdiv id=modalWindow role=dialoggtltdivgtltdiv id=modalOverlay tabindex=-1gtltdivgtltbodygt
Step 3 Adding the Description and Heading
ltdiv id=modalWindow role=dialog aria-labelledby=modalTitle modalDescriptiongtltdiv id=modalDescription class=screen-reader-offscreengtBeginning of dialog window It begins with a heading 1 called ampquotRegistration Formampquotltdivgtlth1 id=modalTitlegtRegistration Formlth1gt
ltdivgtltdiv id=modalOverlay tabindex=-1gtltdivgt
Step 3 Adding the Description and Heading
ltdiv id=modalWindow role=dialog aria-labelledby=modalTitle modalDescriptiongtltdiv id=modalDescription class=screen-reader-offscreengtBeginning of dialog window It begins with a heading 1 called ampquotRegistration Formampquotltdivgtlth1 id=modalTitlegtRegistration Formlth1gt
ltdivgtltdiv id=modalOverlay tabindex=-1gtltdivgt
Step 4 Trapping the focusjQuery(modalWindow)keydown(function(event) trapTabKey($
(this)event))
function trapTabKey(objevt) if tab pressed
cycle through the tabbable elements looping from first to last or last to first when needed
elsedo nothing
Step 4 Setting and restoring the focus
var focusedElementBeforeModal
function showModal() focusedElementBeforeModal = jQuery(focus)hellip
function hideModal() focusedElementBeforeModalfocus()hellip
Step 4 Trapping the focusjQuery(modalWindow)keydown(function(event) trapTabKey($
(this)event))
function trapTabKey(objevt) if tab pressed
cycle through the tabbable elements looping from first to last or last to first when needed
elsedo nothing
Step 4 Setting and restoring the focus
var focusedElementBeforeModal
function showModal() focusedElementBeforeModal = jQuery(focus)hellip
function hideModal() focusedElementBeforeModalfocus()hellip
Step 4 Setting and restoring the focus
var focusedElementBeforeModal
function showModal() focusedElementBeforeModal = jQuery(focus)hellip
function hideModal() focusedElementBeforeModalfocus()hellip
Step 5 Adding aria-hiddenltbodygtltdiv id=mainContent aria-hidden=falsegtltdivgt
ltdiv id=modalWindow role=dialog aria-labelledby=modalTitle modalDescription aria-hidden=truegtltdivgt
ltdiv id=modalOverlay tabindex=-1gtltdivgtltbodygt
Step 5 Adding aria-hiddenltbodygtltdiv id=mainContent aria-hidden=falsegtltdivgt
ltdiv id=modalWindow role=dialog aria-labelledby=modalTitle modalDescription aria-hidden=truegtltdivgt
ltdiv id=modalOverlay tabindex=-1gtltdivgtltbodygt
Step 6 Trapping the escape keyjQuery(modalWindow)keydown(function(event)trapEscapeKey($(this)event))
function trapEscapeKey(objevt)if escape key is pressed
$(cancelButton)click()else
do nothing
Step 6 Trapping the enter key jQuery(modalWindow)keydown(function(event)trapEnterKey($(this)event))
function trapEnterKey(objevt)if enter key is pressed
$(enter)click()else
do nothing
FAIL
Step 6 Trapping the enter key jQuery(modalInputForm)keydown(function(event)trapEnterKey($(this)event))
function trapEnterKey(objevt)if enter key is pressed
$(enter)click()else
do nothing
Step 6 Trapping the escape keyjQuery(modalWindow)keydown(function(event)trapEscapeKey($(this)event))
function trapEscapeKey(objevt)if escape key is pressed
$(cancelButton)click()else
do nothing
Step 6 Trapping the enter key jQuery(modalWindow)keydown(function(event)trapEnterKey($(this)event))
function trapEnterKey(objevt)if enter key is pressed
$(enter)click()else
do nothing
FAIL
Step 6 Trapping the enter key jQuery(modalInputForm)keydown(function(event)trapEnterKey($(this)event))
function trapEnterKey(objevt)if enter key is pressed
$(enter)click()else
do nothing
Step 6 Trapping the enter key jQuery(modalWindow)keydown(function(event)trapEnterKey($(this)event))
function trapEnterKey(objevt)if enter key is pressed
$(enter)click()else
do nothing
FAIL
Step 6 Trapping the enter key jQuery(modalInputForm)keydown(function(event)trapEnterKey($(this)event))
function trapEnterKey(objevt)if enter key is pressed
$(enter)click()else
do nothing
Step 6 Trapping the enter key jQuery(modalInputForm)keydown(function(event)trapEnterKey($(this)event))
function trapEnterKey(objevt)if enter key is pressed
$(enter)click()else
do nothing
Step 7 Adding the shimsltdiv id=modalWindow role=dialog aria-
labelledby=modalTitle modalDescription aria-hidden=true tabindex=-1gtltdivgt
if(usingWebKit())focus on the modal window itself
else focus on the first object
Step 7 Adding the shimsltdiv id=modalWindow role=dialog aria-
labelledby=modalTitle modalDescription aria-hidden=true tabindex=-1gtltdivgt
if(usingWebKit())focus on the modal window itself
else focus on the first object
aria-required +1
ltspan class=requiredrdquo aria-hidden=ldquotruerdquogt Required ltspangtltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gt
aria-required +1
ltspan class=requiredrdquo aria-hidden=ldquotruerdquogt Required ltspangtltlabel for=first-namegtFirst Nameltlabelgt ltinput id=first-name name=first-name type=text aria-required=true gt
