Making a Web Application Operable by Physically and Mentally Challenged Users

Transcription

1 White Paper Makig a Web Applicatio Operable by Physically ad Metally Challeged Users A Web site is usable whe it is simple, fast to avigate ad all iformatio is preseted i a easily readable format for all users. So what if all kids of users are ot able to use the cotet of the Web site? What if they are ot able to uderstad ad comprehed the cotet provided? Ca such Web sites be cosidered as usable? The aswer to this questio is simply No if looked at from a holistic view poit ad Yes of course if the group of users who actually caot use it is igored. Ay Web site eeds to be accessible to all before it becomes usable for them. I other words Accessibility comes before Usability. Accessibility meas access to a Web site/applicatio by everyoe, regardless of ability. Accessibility esures that people with disabilities ca perceive, uderstad, avigate, ad iteract with Web sites ad applicatios. A accessible Web site/applicatio is available to people with disabilities icludig those with visio impairmet or loss, physical impairmet, hearig impairmet or loss, cogitive impairmet, or literacy impairmet ad also to people who are challeged by techological/ifrastructure costraits such as low badwidth or limited iteret coectio. This paper tries to address how to make a Web site accessible i geeral ad how to address the Operability aspect of Web site Accessibility.

2 About the Authors Muktikata Sedha Mukti is a Solutio Architect with 12 years of experiece at Tata Cosultacy Services (TCS). He has bee ivolved i architectig solutios o a diverse set of techology platforms for customers i Fiacial Services, Isurace, Maufacturig ad Retail idustries. Curretly he is leadig the User Experiece Desig Ceter of Excellece ad is a Certified Usability Aalyst (CUA) from Huma Factors Iteratioal. Agelie George Agelie George, with a Bachelor's degree i Computer Sciece, has worked with TCS sice Her mai area of experiece has bee i desigig ad developig user-iteractive, rich iteret web applicatios. She is a Certified Usability Aalyst (CUA) from Huma Factors Iteratioal. She has worked o differet web applicatios ad helped make may websites browser compatible ad usable across Fiacial, Travel & Hospitality idustries. She has also completed Su certificatios i Java Programmig (SCJP) ad Web Compoet Developmet (SCWCD) ad is proficiet with HTML, CSS jquery ad PHP programmig laguages. 2

3 Table of Cotets 1. Itroductio 4 2. WCAG 2.0 Priciples 5 3. Makig a Website Operable 6 4. Coclusio Refereces 22 3

4 Itroductio 25% 20% 15% 10% 5% 0% Disabled Populatio (% of Total) Caada UK EU USA Australia New Zealad Figure 1: Disabled Populatio Wold wide More tha 14 percet of the total populatio i major coutries (for example, Uited States, Caada, Brazil, Idia, UK, Australia, New Zealad) has disability i some form or the other. Worldwide approximately 650 millio people have either complete or partial disability. However, a major share of Web applicatios is still ot accessible to this group of users either fully or partially. I other words these users are deprived of the beefit of the world wide web to some extet. O December 13, 2006, the Uited Natios formally agreed o the Covetio o the Rights of Persos with Disabilities, the first huma rights treaty of the 21st cetury, to protect ad ehace the rights ad opportuities of the world's estimated 650 millio disabled people. As of April 2011, 99 of the 147 sigatories had ratified the Covetio. Coutries that sig the covetio are required to adopt atioal laws, ad remove old oes, so that persos with disabilities will, for example, have equal rights to educatio, employmet, ad cultural life; to the right to ow ad iherit property; to ot be discrimiated agaist i marriage ad to ot be uwillig subjects i medical experimets. Whe sites are correctly desiged, developed ad edited, all users ca have equal access to iformatio ad fuctioality. For example, whe a site is coded with sematically meaigful HTML, with textual equivalets provided for images ad with liks amed meaigfully, this helps blid users usig text-tospeech software ad/or text-to-braille hardware. Whe text ad images are large ad/or elargeable, it is easier for users with poor sight to read ad uderstad the cotet. Whe liks are uderlied (or otherwise differetiated) as well as coloured, this esures that colour blid users will be able to otice them. Govermets across the world have also formulated legislatios ad regulatios i order to eforce providers to make their applicatios accessible to users of varyig disability. However, there are still a large share of applicatios which are ot compliat with accessibility guidelies defied by the World Wide Web Cosortium. I the year 1998, the World Wide Web Cosortium (W3C) lauched a project amed the Web Accessibility Iitiative (WAI). I May 1999 the WAI published the very first Web Cotet Accessibility Guidelies WCAG 1.0. Sice the these have bee widely accepted as the defiitive guidelies o how to create accessible Web sites. O 11 December 2008, the WAI released the WCAG 2.0 as a recommedatio. At preset W3C WAI recommeds usig WCAG 2.0, istead of WCAG 1.0. This paper addresses some key recommedatios of WCAG 2.0 ad how to write code which is compliat with these guidelies up to AA Level. 4

5 WCAG 2.0 Priciples WCAG 2.0 has 12 guidelies that are orgaised uder four priciples: Perceivable, Operable, Uderstadable, ad Robust. For each guidelie, there are testable success criteria, which are at three levels: A, AA, ad AAA. Perceivable Provide text alteratives for o-text cotet. Provide captios ad other alteratives for multimedia. Create cotet that ca be preseted i differet ways, icludig by assistive techologies, without losig meaig. Make it easier for users to see ad hear cotet. Operable Make all fuctioality available from a keyboard. Give users eough time to read ad use cotet. Do ot use cotet that causes seizures. Help users avigate ad fid cotet Uderstadable Make text readable ad uderstadable. Make cotet appear ad operate i predictable ways. Help users avoid ad correct mistakes. Robust Maximize compatibility with curret ad future user tools Figure 2: WCAG 2.0 Priciples I order for a Web page to coform to WCAG 2.0, oe of the followig levels of coformace should be met i full: Level A: For Level A coformace (the miimum level of coformace), the Web page should satisfy all the Level A Success Criteria, or a coformig alterate versio is provided. Level AA: For Level AA coformace, the Web page should satisfy all the Level A ad Level AA Success Criteria, or a Level AA coformig alterate versio is provided. Level AAA: For Level AAA coformace, the Web page should satisfy all the Level A, Level AA ad Level AAA Success Criteria, or a Level AAA coformig alterate versio is provided. 5

6 Makig a Website Operable WCAG 2.0 icludes priciples, guidelies, success criteria ad techiques. The 2d priciple outlied by WCAG 2.0 is Operable which could be achieved by addressig the followig four major success criteria: By makig the applicatio accessible ad operable by keyboard By providig sufficiet time to users so that they ca use the cotet By avoidig cotet which could cause seizures i users with metal disorder By providig tips to easily avigate ad fid cotet. Guidelie 2.1 Keyboard Accessible WCAG 2.0 guidelie metios that all fuctioality must be available from a keyboard. Apart from uiversal keyboard iput, other types of iput such as optimised speech iput, optimised mouse/poiter iput, ad others, should also be supported. I other words the users should be able to provide iputs as well as cotrol the avigatio ad iteractio usig keyboard. Success Criteria Keyboard: Whe cotet ca be operated through a keyboard or alterate keyboard, it is operable by people with o visio (who caot use devices such as mice that require eye-had coordiatio) as well as by people who must use alterate keyboards or iput devices that act as keyboard emulators. Keyboard emulators iclude speech iput software, sip-ad-puff software, o-scree keyboards, scaig software ad a variety of assistive techologies ad alterate keyboards. Idividuals with low visio also may have trouble trackig a poiter ad fid the use of software much easier if they ca cotrol it from the keyboard. (Level A) Techiques to Esure Keyboard Cotrol User agets provide the keyboard operatio of HTML form cotrols ad liks. I additio, the user aget maps the form cotrols ad liks to a accessibility API. Assistive techologies use the accessibility API to extract appropriate accessibility iformatio, such as role, ame, state, ad value, ad preset them to users. The role is provided by the HTML elemet, ad the ame is provided by the text associated with that elemet. Elemets for which values ad states are appropriate also expose the values ad states via multiple mechaisms. Example: Liks User agets provide mechaisms to avigate to ad select liks. I the followig example code, the role is "lik" from the <a href>. The value is the URI i the 'href' attribute. <a href=" Site</a> Esure correct tab ad readig order i PDF documets (PDF). For sighted users, the logical order of PDF cotet is also the visual order o the scree. For keyboard ad assistive techology users, the tab order through cotet, icludig iteractive elemets (form fields ad liks), determies the order i which these users ca avigate the cotet. The tab order must reflect the logical order of the documet. 6

7 Commo tab-order errors iclude: Form fields missig from the tagged cotet. Form fields i the wrog locatio i the PDF cotet; for example, at the ed of o-iteractive cotet. Provide liks ad lik text usig the /Lik structure elemet i PDF documets. That is, make the lik iformatio programmatically available to user agets so that liks are recogisable whe preseted i a differet format. Provide iteractive form cotrols for PDF documets. The types of PDF form cotrols are: text iput field, check box, radio butto, combo box, list box, ad butto. Techiques for Providig Keyboard-triggered Evet Hadlers Use both keyboard ad other device-specific fuctios: Usig both keyboard-specific ad mouse-specific evets together esures that cotet ca be operated by a wide rage of devices. For example, a script may perform the same actio whe a keypress is detected that is performed whe a mouse butto is clicked. Example: I this example of a image lik, the image is chaged whe the user positios the poiter over the image. To provide keyboard users with a similar experiece, the image is also chaged whe the user tabs to it. Example Code: $('#textbox').keyup(fuctio(evet){ $('#msg-keyup').html('keyup() is triggered!, keycode = ' + evet.keycode + ' which = ' + evet.which) }); Make actios keyboard accessible by usig the oclick evet of achors ad buttos:i order to esure that scripted actios ca be ivoked from the keyboard, they are associated with "atively actioable" HTML elemets (liks ad buttos). The oclick evet of these elemets is device idepedet. While "oclick" souds like it is tied to the mouse, the oclick evet is actually mapped to the default actio of a lik or butto. The default actio occurs whe the user clicks the elemet with a mouse, but it also occurs whe the user focuses the elemet ad presses Eter or Spacebar, ad whe the elemet is triggered via the accessibility API. Example: Lik that rus a script ad has o fallback for o-scripted browsers. This approach should oly be used whe script is relied upo as a Accessibility Supported Techology. Eve though you do ot wat to avigate away from this lik, you must use the href attribute o the a elemet i order to make this a true lik ad get the proper evetig. I the followig example " has bee used as the lik target ad the lik will ever be avigated. 7

8 Example Code: <script> fuctio actupoit() { //do somethig } retur false; </script> <a href=" oclick="retur actupoit ();">do somethig</a> The "retur false;" at the ed of the actupoit () evet hadlig fuctio tells the browser ot to avigate to the URI. Without it, the page would refresh after the script ra. Use redudat keyboard ad mouse evet hadlers: To chage a decorative image i respose to a mouse or focus evet, use the omouseover ad omouseout evets to chage a decorative image whe the mouse moves o top of or away from a elemet o the page. Also, use the ofocus ad oblur evets to chage the image whe the elemet receives ad loses focus. Example Code: <a href="meu.php" omouseover="swapimageo('meu')" ofocus="swapimageo('meu')" omouseout="swapimageoff('meu')" oblur="swapimageoff('meu')"> <img id="meu" src="meu_off.gif" alt="meu" /> </a> Success Criteria No Keyboard Trap: A 'keyboard trap' occurs whe a perso who uses a keyboard caot move focus away from a iteractive elemet or cotrol usig the keyboard aloe. Guidelie - If keyboard focus ca be moved to a compoet of the page usig a keyboard iterface, the focus ca be moved away from that compoet usig oly a keyboard iterface, ad, if it requires more tha umodified arrow or tab keys or other stadard exit methods, the user is advised of the method for movig focus away. (Level A) 8

9 Techiques for No Keyboard Trap Esure that keyboard users do ot become trapped i a subset of the cotet that ca oly be exited usig a mouse or poitig device. Example: Oce a user tabs ito a applet, further tabs are hadled by the applet prevetig the perso from tabbig out. However, the applet is desiged i such a way that it returs keyboard focus back to the paret widow whe the perso fiishes tabbig through the tab sequece i the applet. Allow keyboard focus to move to ad from Flash cotet embedded i a Web page. I browsers other tha Iteret Explorer, there is a problem related to keyboard accessibility of embedded Flash cotet. The problem is that, may browsers do ot support movig keyboard focus betwee the Flash cotet ad HTML cotet without usig a mouse. Oce focus is placed iside the Flash cotet, a keyboard user will be trapped there. Similarly, whe focus is placed somewhere else o the HTML cotet (outside the Flash cotet), it will be impossible to move focus to the cotet. Guidelie 2.2 Eough Time May users who have disabilities eed more time to complete tasks tha the majority of users: they may take loger to physically respod, they may take loger to read thigs, they may have low visio ad take loger to fid thigs or to read them, or they may be accessig cotet through a assistive techology that requires more time. These kids of users should be provided with eough time to read ad use cotet. Success Criteria Timig Adjustable: For each time limit that is set by the cotet, at least oe of the followig is true: (Level A) Tur off: The user is allowed to tur off the time limit before ecouterig it; or Adjust: The user is allowed to adjust the time limit before ecouterig it over a wide rage that is at least te times the legth of the default settig; or Exted: The user is wared before time expires ad give at least 20 secods to exted the time limit with a simple actio (for example, "press the space bar"), ad the user is allowed to exted the time limit at least te times; or Real-time Exceptio: The time limit is a required part of a real-time evet (for example, a auctio), ad o alterative to the time limit is possible; or Essetial Exceptio: The time limit is essetial ad extedig it would ivalidate the activity; or 20 Hour Exceptio: The time limit is loger tha 20 hours. 9

10 Techiques for Timig Adjustable Situatio A - If there is sessio time limit: 1. Provide a checkbox o the first page of a multipart form that allows users to ask for loger sessio time limit or o sessio time limit. The objective of this techique is to miimise the risk that users with disabilities will lose their work by providig a checkbox to request additioal time to complete multipart forms. Example: A checkbox for requestig a specific extesio A Web page cotais the first part of a three-part form. Immediately followig the geeral istructios for completig the form is a checkbox with the label, Allow a additioal 15 miutes to complete each part of this form." Part 2 Part 3 Part 1 Geeral Istructios: Allow additioal time 2. Provide a mechaism for the user to tur the time limit off. To do this - the mechaism should be available at or ear the top of the page so that it ca be foud ad activated quickly by people with a wide rage of disabilities. Example: A page has a listig of ews headlies that automatically update every miute. At the top of the page is a lik that turs off the updatig. Situatio B - If a time limit is cotrolled by a script o the page: 1.Provide a way for the user to tur the time limit off Figure 3: Checkbox Example 2.Provide the user with a meas to set the time limit to 10 times the default time limit Example: A airlie has a olie ticket purchasig applicatio. By default, the applicatio has a oe miute time limit for each step of the purchase process. At the begiig of the sessio, a Web page icludes iformatio that says, "We expect that each step i the purchasig process will take users oe miute to complete. Would you like to adjust the time limit?" followed by several radio buttos "1 miute, 2 miutes, 5 miutes, 10 miutes." Welcome to ABC Airways We expect that each step i the purchasig process will take users oe miute to complete. Would you like to adjust the time limit? 1 Miute 2 Miutes 5 Miutes 10 Miutes Figure 4: Time Limit Cotrol Example 10

11 3. Provide a script that wars the user a time limit is about to expire ad subsequetly allow the user to exted the default time limit. Example: A Web page cotais curret stock market statistics ad is set to refresh periodically. Whe the user is wared prior to refreshig the first time, the user is provided with a optio to exted the time period betwee refreshes Situatio C - If there are time limits o readig: 1. Allow the cotet to be paused ad restarted from where it was paused. If the user eeds to pause the movemet, to reduce distractio or to have time to read it, they should be able to do so, ad the restart it as eeded. Example: A site cotais a scrollig ews baer at the top of the page. Users who eed more time to read it ca press the Escape key to pause the scrollig. Pressig Escape agai restarts it. 2. Provide a way for the user to tur the time limit off. 3. Scrollig cotet is difficult to read by users with low visio or with cogitive disabilities. The movemet is also distractig sometimes makig it difficult for users to cocetrate o other parts of the Web page. Use script to scroll cotet, ad providig a mechaism to pause it i such scearios. 4. Provide a mechaism to allow users to display movig, scrollig, or auto-updatig text i a static widow or area. Some Web pages display scrollig text because there is limited space available. Scrollig the text i a small text widow makes the cotet available for users who ca read quickly eough, but causes problems for users who read more slowly or use assistive techology. This techique provides a mechaism to stop the movemet ad make the etire block of text available statically. The text may be made available i a separate widow or i a (larger) sectio of the page. Users ca the read the text at their ow speed. Example: Figure 5: Marquee Text that ca be Stopped o Hover Figure 6: Optios to Close Flash News ad View all Available News 11

12 { Success Criteria Pause, Stop, Hide: For movig, blikig, scrollig, or auto-updatig iformatio, all of the followig are true: (Level A) Movig, blikig, scrollig: For ay movig, blikig or scrollig iformatio that (1) starts automatically, (2) lasts more tha five secods, ad (3) is preseted i parallel with other cotet, there is a mechaism for the user to pause, stop, or hide it uless the movemet, blikig, or scrollig is part of a activity where it is essetial; ad Auto-updatig: For ay auto-updatig iformatio that (1) starts automatically ad (2) is preseted i parallel with other cotet, there is a mechaism for the user to pause, stop, or hide it or to cotrol the frequecy of the update uless the auto-updatig is part of a activity where it is essetial. Techiques for Pause, Stop, Hide 1. Allow the cotet to be paused ad restarted from where it was paused. Example: A Web page cotais a lik to a Flash aimatio. Text immediately precedig the lik should iform the user that pressig the spacebar will pause the aimatio ad restart it agai. 2. Limit the blikig of cotet to five secods which miimises the distractio caused by blikig cotet ad eable users to re-focus o the other cotet o the page. Example: A aimated image is used to highlight items o sale. Withi a list of items for purchase, a image of a red tag followed by the phrase "O sale" is used to idicate items beig offered at a reduced price. The image of the red tag bliks o loadig of the page ad stops withi five secods. 3. Use a techology to iclude blikig cotet that ca be tured off via the user aget. Example: A page cotais a blikig baer iteded to draw the user's attetio to it. The baer is a aimated gif image which repeats idefiitely. The user presses the "Esc" key, which causes the user aget to stop the aimatio of all aimated gif images o the page. 4. Set aimated gif images to stop blikig after cycles (withi five secods). The objective of this techique is to esure that aimated gif images stop blikig withi five secods. There are three aspects of the desig of aimated gif images that work together to determie how log the image bliks (or otherwise aimates): The umber of frames i the image, which are discrete images i the aimatio sequece The frame rate, which is how log each image is displayed The umber of repetitios, which is how may times the etire aimatio is performed. { Duratio of the aimatio (i sec) = umber of frames * frame rate * umber of repetitios. Example: A simple blikig image. A image has 2 frames, a frame rate of.5 secods, ad 3 repetitios. The aimatio has duratio of (2 * 0.5 * 3) secods, or exactly 3 secods, ad therefore meets the requiremets of the success criterio. 12

13 5.Use a cotrol i the Web page that stops movig, blikig, or auto-updatig cotet. Sice the cotrol should be placed i the Web page, the cotrol itself should meet the appropriate level of WCAG coformace for example, it should have appropriate cotrast, a ame that idetifies it ad it should also be keyboard accessible. The cotrol should be placed either at the top of the page or adjacet to the movig cotet. Example: Stock Market Ticker Figure 7: Stock Ticker Guidelie 2.3 Seizures Do ot desig cotet i a way that is kow to cause seizures. Some people with seizure disorders ca have a seizure triggered by flashig visual cotet. Success Criteria Three Flashes or Below Threshold: Web pages do ot cotai aythig that flashes more tha three times i ay oe secod period, or the flash is below the geeral flash ad red flash thresholds. (Level A) Techiques for Three Flashes or Below Threshold 1. Esure that o compoet of the cotet flashes more tha three times i ay 1-secod period. Sice some users may be usig scree elargers, this techique limits the flashig of ay size cotet to o more tha three flashes i ay 1-secod period. Example: If the cotet has lightig flashes the desig i such a way that lightig oly flashes two or three times without a pause i flashig. 2. Keep the flashig area small eough. If you have somethig that flashes more tha three times i a oe secod period, but the area that is flashig is less tha 25 percet of 10 degrees of visual field (which represets the cetral area of visio i the eye), the it would automatically pass. 3. Use a tool to esure that cotet does ot violate the geeral flash threshold or red flash threshold. 13

14 Guidelie 2.4 Navigable Provide ways to help users avigate, fid cotet, ad determie where they are. Success Criteria Bypass blocks: A mechaism is available to bypass blocks of cotet that are repeated o multiple Web pages. (Level A) The itet of this Success Criterio is to allow people who avigate sequetially through cotet more direct access to the primary cotet of the Web page. Web pages ad applicatios ofte have cotet that appears o other pages or screes. Examples of repeated blocks of cotet iclude but are ot limited to avigatio liks, headig graphics, ad advertisig frames. Small repeated sectios such as idividual words, phrases or sigle liks are ot cosidered blocks for the purposes of this provisio. Techiques for Bypass Blocks 1.Create liks to skip blocks of repeated material usig oe of the followig techiques: Add a lik at the top of each page that goes directly to the mai cotet area. Example: A olie ewspaper Figure 8: Redirect Lik Add a lik at the begiig of a block of repeated cotet to go to the ed of the block. Example: Skip avigatio liks Add liks at the top of the page to each area of the cotet. 2. Group blocks of repeated material i a way that ca be skipped: Provide headig elemets at the begiig of each sectio of cotet. Example Code: <h2>navigatio</h2> <ul> <li><a href="about.htm">about us</a></li> <li><a href="cotact.htm">cotact us</a></li>... </ul> <h2>all about headigs</h2> 14

15 Use map to group liks. Sighted users very ofte igore avigatio parts ad start readig the cotet of the page. Someoe usig a scree reader must first liste to the text of each lik i the avigatio bar before readig the cotet. This techique uses the map elemet to mark up cotet so that a user with a scree reader ca jump over the avigatio bar ad avoid readig all of the liks. Example: I this example, the map elemet groups a set of liks; the title attribute idetifies it as a avigatio bar. Example Code: <map title="navigatio Bar"> <p> [<a href="home.html">home</a>] [<a href="search.html">search</a>] [<a href="ew.html">new ad highlighted</a>] [<a href="sitemap.html">site map</a>] </p> </map> Use frame elemets to group blocks of repeated material ad use the title attribute of the frame ad iframe elemets. Example: The followig example shows the use of two frames to orgaise cotet. The source of the first frame is the Web page, avigatio.html, which cotais the HTML for the avigatio. This frame has a title attribute which idetifies it as a avigatio bar. The secod frame cotais the mai cotet of the site as idicated by the source parameter of mai.html ad the title attribute, "Mai News Cotet" which idetifies its fuctio. Example Code: <frameset cols="20%, *"> <frame src="avigatio.html" ame="avbar" title="navigatio Bar" /> <frame src="mai.html" ame="maicotet" title="mai News Cotet" /> <oframes> <p>view <a href="oframe.html">o frame versio</a>.</p> </oframes> </frameset> 15

16 Success Criteria Page Titled: Web pages have titles that describe topic or purpose. (Level A). Titles help users fid cotet ad oriet themselves withi it. Whe titles appear i site maps or lists of search results, users ca more quickly idetify the cotet they eed. User agets make the title of the page easily available to the user for idetifyig the page. For istace, a user aget may display the page title i the widow title bar or as the ame of the tab cotaiig the page. Techiques for Page Titled 1.Provide descriptive titles for Web pages: Provide a title usig the HTML TITLE elemet. Example Code: <html xmls=" <head> <title>the World Wide Web Cosortium</title> </head> <body>... </body> </html> Success Criteria Focus Order: If a Web page ca be avigated sequetially ad the avigatio sequeces affect meaig or operatio, focusable compoets receive focus i a order that preserves meaig ad operability. (Level A) Techiques for Focus Order 1.Place the iteractive elemets such as liks ad form cotrols i a order that follows sequeces ad relatioships withi the cotet. Each techology defies its default tab order, so the mechaism for placig the cotrols i the cotet will deped o the techology used. Example: A form cotais two text iput fields that are to be filled i sequetially. The first text iput field is placed first i the cotet; the secod iput field is placed secod. 16

17 Compliat Code <form actio=""> Do you have a vehicle: <iput type="radio" ame="vehicle" value="yes" /> Yes <iput type="radio" ame="vehicle" value="no" /> No <br><br> If yes,vehicle No: <iput type="text" ame="vehicleo"/> </form> No-Compliat Code <form actio=""> Vehicle No: <iput type="text" ame="vehicleo"/> <br><br> Do you have a vehicle: <iput type="radio" ame="vehicle" value="yes" /> Yes <iput type="radio" ame="vehicle" value="no" /> No </form> 2.Give focus to elemets i a order that follows sequeces ad relatioships withi the cotet usig oe of the followig techiques: Create a logical tab order through liks, form cotrols, ad objects. Example: A Web page cotais a search field i the upper right corer. The field is give tabidex="1" so that it will occur first i the tab order, eve though it is ot first i the cotet order Make the DOM order match the visual order (CSS). The order of cotet i the source code ca be chaged by the author to ay umber of visual presetatios with CSS. Each order may be meaigful i itself but may cause cofusio for assistive techology users. Example: A website has placed a avigatio bar visually i the top left corer of the page directly below its iitial logo. I the source code, the avigatio elemets appear after the elemets ecodig the logo. A user with low visio who uses a scree magifier i combiatio with a scree reader may be cofused whe the readig order appears to skip aroud o the scree. A keyboard user may have trouble predictig where focus will go ext whe the source order does ot match the visual order. Figure 9: Focus Order 17

18 Compliat Code <div class="site_logo"> <a href=" <img title="oeidia : Olie Portal" alt="oeidia : Olie Portal" src=" </a> <br> <iput type="text" style="backgroud: url(" oogle_custom_search.gif") o-repeat scroll left ceter;"> </div> <div class="meu"> <ul> <li> Home </li> <li>movies</li> <li> Travel </li> </ul> </div> No-Compliat Code <div class="site_logo"> <a href=" <img title="oeidia : Olie Portal" alt="oeidia : Olie Portal" src=" </a> <br> <div class="meu"> <ul> <li> Home </li> <li>movies</li> <li> Travel </li> </ul> </div> <iput type="text" style="backgroud: url(" oogle_custom_search.gif") o-repeat scroll left ceter;"> </div> 3. Isert dyamic cotet ito the Documet Object Model: Isert dyamic cotet ito the Documet Object Model immediately followig its trigger elemet (Scriptig). The objective of this techique is to place iserted user iterface elemets ito the Documet Object Model (DOM) i such a way that the tab order ad scree-reader readig order are set correctly by the default behaviour of the user aget. This techique ca be used for ay user iterface elemet that is hidde ad show, such as meus ad dialogs. Success Criteria Lik Purpose (I Cotext): The purpose of each lik ca be determied from the lik text aloe or from the lik text together with its programmatically determied lik cotext, except where the purpose of the lik would be ambiguous to users i geeral. (Level A) Techiques for Lik Purpose (I Cotext) 1.Provide lik text that describes the purpose of a lik for achor elemets. The descriptio lets a user distiguish this lik from liks i the Web page that lead to other destiatios ad helps the user determie whether to follow the lik. Example Code: <a href="routes.html">curret routes available to go from LA to SFO </a> 18

19 2.Provide text alteratives for the area elemets of image maps. Whe a image is the oly cotet of a lik, the text alterative for the image describes the uique fuctio of the lik. Whe the cotet of a lik cotais both text ad oe or more images, if the text is sufficiet to describe the purpose of the lik, the images should have a empty text alterative. Example: Usig the alt attribute for the img elemet to describe the purpose of a graphical lik. <a href="routes.html"> <img src="topo.gif" alt="curret routes at Boulders Climbig Gym" /> </a> 3.Allow the user to choose short or log lik text usig oe of the followig techiques: Provide a cotrol ear the begiig of the Web page that chages the lik text. Use scripts to chage the lik text 4. Idetify the purpose of a lik usig lik text combied with the text of the eclosig setece. Example: A Web page cotais the setece "To advertise o this page, click here." Although the lik phrase 'click here' is ot sufficiet to uderstad the lik, the iformatio eeded precedes the lik i the same setece. 5.Provide a supplemetal descriptio of the purpose of a lik: Supplemet lik text with the title attribute Example Code: <a href=" title="read more about failed elephat evacuatio"> Evacuatio Crumbles Uder Jumbo load </a> Success Criteria Multiple Ways: More tha oe way is available to locate a Web page withi a set of Web pages except where the Web Page is the result of, or a step i, a process. (Level AA) Eve small sites should provide users some meas of orietatio. For a three or four page site, with all pages liked from the home page, it may be sufficiet simply to provide liks from ad to the home page where the liks o the home page ca also serve as a site map. 19

20 Techiques for Multiple Ways 1.Provide liks to avigate to related Web pages. 2.Provide a Table of Cotets. 3.Provide a site map. A site map is a Web page that provides liks to differet sectios of the site. To make the site map available withi the site, at a miimum every page that is listed i the site map cotais a lik to the site map. Figure 10: Site Map 4.Provide a search fuctio to help users fid cotet. 5. For smaller Web sites provide lik to all of the pages from the home page. I this way, the home page serves as two mechaisms i oe. It provides the usual avigatio to pages. It also is a de facto site map to the site. Success Criteria Headigs ad Labels: Headigs ad labels describe topic or purpose. (Level AA) Whe headigs are clear ad descriptive, users ca fid the iformatio they seek more easily, ad they ca uderstad the relatioships betwee differet parts of the cotet more easily. Descriptive labels help users idetify specific compoets withi the cotet. Techiques for Headigs ad Labels 1.Provide descriptive headigs. Descriptive headigs ad titles work together to give users a overview of the cotet ad its orgaizatio. Example Code: <h1>disaster preparatio</h1> <h2>flood preparatio</h2> <h2>fire preparatio</h2> 20

21 2.Provide descriptive labels to esure that the label for ay iteractive compoet withi Web cotet makes the compoet's purpose clear. Example: A form askig the ame of the user with fields properly labelled. Success Criteria Focus Visible: Ay keyboard operable user iterface has a mode of operatio where the keyboard focus idicator is visible. (Level AA) Techiques for Focus Visible 1.Use user iterface compoets that are highlighted by the user aget whe they receive focus. Whe authors use stadard cotrols for which the user aget provides this support, users are iformed of the focus locatio i a stadard, predictable way. Example: Whe html text iput fields receive focus, browsers display a blikig vertical bar at the isertio poit i the text field. 2.Use CSS to chage the presetatio of a user iterface compoet whe it receives focus. 3.Use default or author-supplied, highly visible focus idicator. Whe a elemet receives focus, the backgroud colour or border is chaged to make it visually distict. Whe the elemet loses focus, it returs to its ormal stylig. This techique ca be used o ay HTML user aget that supports Script ad CSS, regardless of whether it supports the:focus pseudoclass. Example: I this example, whe the lik receives focus, its backgroud turs yellow. Whe it loses focus, the yellow is removed. Example Code: <script> fuctio togglefocus(el) { } el.style.backgroudcolor = el.style.backgroudcolor=="yellow"? "iherit" : "yellow"; </script>... <a href="example.html" ofocus="togglefocus(this)" oblur="togglefocus(this)"> focus me</a> 21

22 Coclusio The basic cocept behid Web site operability is everybody should be able to use the tools ad mechaisms required to operate the Web site. Although operability may seem easy, it ca be very challegig at times. Every cotrol, every lik, ad every butto o the site is a potetial poit of failure for operability. Without appropriate cosideratio for the disabled, you ca ru the risk that disabled users will be uable to access the site. Keyboard accessibility with sites developed usig AJAX tool kits is also a major issue. May of the AJAX techiques, such as drag ad drop iterfaces, click ad type editig areas ad quick edit screes, are drive by methods which are ot keyboard accessible. Cosideratio for the eeds of disabled users whe creatig AJAX-drive applicatios ca also solve may of these problems. With the advace of techology ad ew iovatios of Assistive Techologies every day, the operability of Web sites by disabled users is becomig easier day by day due to iheret features/techologies built ito these Assistive Techologies. However, a attempt should be made to make the applicatio code compliat with WCAG 2.0 AA stadard which is the most widely accepted accessibility compliace stadard i preset cotext ad will make the site operable by all kids of disabled users. Refereces [1] [2] 22

23 Cotact For more iformatio, cotact Subscribe to TCS White Papers TCS.com RSS: Feedburer: About Tata Cosultacy Services (TCS) Tata Cosultacy Services is a IT services, cosultig ad busiess solutios orgaizatio that delivers real results to global busiess, esurig a level of certaity o other firm ca match. TCS offers a cosultig-led, itegrated portfolio of IT ad IT-eabled ifrastructure, egieerig TM ad assurace services. This is delivered through its uique Global Network Delivery Model, recogized as the bechmark of excellece i software developmet. A part of the Tata Group, Idia s largest idustrial coglomerate, TCS has a global footprit ad is listed o the Natioal Stock Exchage ad Bombay Stock Exchage i Idia. For more iformatio, visit us at IT Services Busiess Solutios Outsourcig All cotet / iformatio preset here is the exclusive property of Tata Cosultacy Services Limited (TCS). The cotet / iformatio cotaied here is correct at the time of publishig. No material from here may be copied, modified, reproduced, republished, uploaded, trasmitted, posted or distributed i ay form without prior writte permissio from TCS. Uauthorized use of the cotet / iformatio appearig here may violate copyright, trademark ad other applicable laws, ad could result i crimial or civil pealties. Copyright 2012 Tata Cosultacy Services Limited TCS Desig Services I M I 11 I 12