OSU Minimum Web Accessibility Standards Video Text Transcript For more information, visit: http://www.wac.ohio-state.edu/standards >> MY NAME IS LORI BAILEY. I WORK AT THE WEB ACCESSIBILITY CENTER, AND IF YOU HAVE ANY QUESTIONS ABOUT MAKING YOUR SITE ACCESSIBLE AND YOU WANT SOME HELP, YOU WANT US TO LOOK AT SOME PAGES, YOU WANT US TO REVIEW SOME PAGES WITH THE SCREEN READER OR OTHER ASSISTIVE TECHNOLOGY AND SEE HOW THINGS ARE WORKING, THAT'S WHAT WE'RE HERE FOR. SO WE WANT YOU TO USE THE WEB ACCESSIBILITY CENTER AS A SOUNDING BOARD, IF NECESSARY, TO SORT OF SAY, YOU KNOW, "IS THIS A GOOD SOLUTION? WHAT OTHER SOLUTIONS MIGHT YOU THINK OF TO COME UP WITH THAT WE CAN MEET THESE STANDARDS?" SO, LET'S GET STARTED. I HAVE THIS PRESENTATION ON YOUR DISK, AND IF YOU PUT THAT DISK IN THERE, YOU CAN USE THIS NICE LITTLE CLICKABLE MAP TO GET TO THE STANDARDS THAT YOU WANT. I'M JUST GONNA WALK RIGHT THROUGH THEM, ONE THROUGH 19. YOU'LL NOTICE THAT THE SLIDES ARE SET UP SO THAT THE ACTUAL TEXT OF THE STANDARDS IS IN BLACK RIGHT UNDERNEATH THE TITLE. THAT'S THE TEXT AS IT APPEARS ON THE OFFICIAL WEB PAGE OF THE ADA COORDINATOR'S OFFICE. AND THEN, WE'RE JUST GOING TO EXPLICATE THAT A LITTLE BIT. SO, NUMBER ONE IS, YOU MUST PROVIDE A TEXT EQUIVALENT FOR EVERY NON-TEXT ELEMENT. FOR IMAGES, THAT ESSENTIALLY MEANS FOR EVERY IMAGE ON THE PAGE, YOU HAVE TO HAVE AN ALT TAG, OKAY? THAT DOESN'T MEAN THAT YOU HAVE TO HAVE A DESCRIPTION FOR EVERY IMAGE ON THE PAGE. IN FACT, I WOULD ENCOURAGE YOU NOT TO HAVE A DESCRIPTION FOR EVERY IMAGE ON THE PAGE. SPACER IMAGES, DECORATIVE IMAGES, THINGS THAT JUST MAKE THE PAGE LOOK PRETTIER, THAT YOU REALLY LIKE, YOU WANT TO PUT AN EMPTY ALT TAG IN THOSE DESCRIPTIONS, OKAY? SO YOU WANT TO SAY, THOUGH THERE STILL SHOULD BE AN ALT TAG IN THERE, BUT YOU JUST DON'T WANT TO HAVE ANY TEXT IN THAT ALT TAG. WHAT'LL HAPPEN IS THE SCREENREADER WILL JUMP RIGHT OVER THAT IMAGE, WON'T EVEN ANNOUNCE THAT IT'S THERE, OKAY? SO IT'S A NICE WAY TO KEEP THINGS FROM BEING REALLY CLUTTERED WHEN YOU HAVE A LOT OF SPACER AND DECORATIVE IMAGES ON YOUR PAGE. FOR CHARTS, GRAPHS, AND MORE DETAILED IMAGES, YOU'RE PROBABLY GONNA WANT TO USE THE LONG DESCRIPTION ATTRIBUTE, THE LONGDESC. AND THE WAY THE LONGDESC IS-- WORKS, IS THAT YOU PUT A COMPLETE DESCRIPTION OF THAT IMAGE ON A SEPARATE HTML PAGE, AND THEN, YOU LINK TO THAT HTML PAGE IN THE ATTRIBUTE LONG DESCRIPTION WITHIN THE HTML. WHEN THE SCREENREADER HITS THAT IMAGE, IT WILL SAY, "DESCRIPTION AVAILABLE, PRESS" WHATEVER TO ACCESS THAT DESCRIPTION, "SPACE BAR" OR "ENTER." IN THE CURRENT STANDARDS FROM THE WCAG IN SECTION 508, IT ALSO RECOMMENDS THAT YOU USE THE D-LINK. THAT WOULD MEAN THAT YOU WOULD PUT A LINK THAT DETECTS THIS D RIGHT NEXT TO AN IMAGE THAT REQUIRES A LONG DESCRIPTION, AND THAT LINK WOULD LEAD TO THAT SAME DESCRIPTION PAGE. THE REASON IS, IS THAT SOME SCREENREADERS AND ASSISTIVE TECHNOLOGY, ESPECIALLY OLDER ONES, ABOUT ONE OR TWO VERSIONS BACK, DON'T SUPPORT THE LONGDESC OR DON'T FULLY SUPPORT IT. SO YOU MAY STILL HAVE SOME PEOPLE WHO CAN'T ACCESS THAT INFORMATION IF YOU ONLY USE THE LONGDESC. BUT IT'S KIND OF UP TO YOU, QUITE HONESTLY. IF YOU HAVE THE LONGDESC, YOU'VE MET THE STANDARD. IF YOU WANT TO GO THAT ONE STEP FURTHER AND ADD THE D-LINK, THAT'S GREAT, BUT YOU CAN ALSO ANTICIPATE THAT MOST PEOPLE WILL BE UPGRADING THEIR ASSISTIVE TECHNOLOGY AND USING A LATER VERSION, OKAY? FOR MULTIMEDIA, MULTIMEDIA, VIDEO, AUDIO DESCRIPTIONS; YOU NEED TO PROVIDE A TRANSCRIPT FOR THAT MULTIMEDIA. YOU ALSO NEED TO PROVIDE A CAPTION, AND HERE'S HOW THIS WORKS OUT. THE TRANSCRIPT REPRESENTS THE ALTERNATIVE TO THAT MULTIMEDIA. SO THAT'S LIKE SAYING, YOU MAY NOT BE ABLE TO ACCESS THIS VIDEO WE PUT UP ON OUR WEBSITE AT ALL. AND WITH VIDEO ESPECIALLY, VIDEO'S VERY TEMPERAMENTAL; YOU HAVE TO HAVE THAT VERSION OF REAL MEDIA PLAYER AND YOU HAVE TO HAVE, YOU KNOW, ONLY WINDOWS MEDIA PLAYER WILL WORK, AND IF YOU HAVE A MAC, THEN IT DOESN'T SHOW UP. I MEAN, WE'RE NOT TALKING JUST ABOUT ASSISTIVE TECHNOLOGY USERS, BUT WE'RE TALKING ABOUT ALL USERS MAY NOT BE ABLE TO ACCESS THAT VIDEO AT ALL ON YOUR WEBSITE. SO THE TRANSCRIPT REPRESENTS A TRUE ALTERNATE TO THAT MEDIA. THE CAPTION IS AN AID TO USING THAT MEDIA, OKAY? IT'S AN AID TO USING THAT MEDIA. SO THAT'S WHY WE REQUIRE BOTH, AND THAT'S THE TRUE ALTERNATIVE, AND THE AID. SO, IF YOU DO HAVE VIDEO, AND YOU DO USE CAPTIONING, WHICH, IF YOU HAVE VIDEO, YOU HAVE TO USE CAPTIONING, THEN YOU ALSO HAVE TO GO ONE STEP FURTHER AND ENSURE THAT THOSE CAPTIONS ARE SYNCHED WITH THE AUDIO. SO THAT IS, IF YOU GO TO PBS.ORG, FOR INSTANCE, THEY OFFER A LOT OF THEIR VIDEO, A LOT OF VIDEO OF THEIR VARIOUS PROGRAMS. AND THE WAY THAT THEY DO IT IS THEY SHOW THE VIDEO IN A LITTLE BOX, AND THEN BELOW THAT IS A LONG SCROLLING BOX THAT ESSENTIALLY HAS A TRANSCRIPT OF THE VIDEO. THAT DOESN'T MEET OUR STANDARDS. THAT IS JUST THE VIDEO AND A TRANSCRIPT. WE WANT A VIDEO THAT'S CAPTIONED, AND WHEN WE SAY CAPTIONED, WE WANT THOSE CAPTIONS TO APPEAR IN SYNCH ALONG WITH THE VIDEO. SO, I HAVE A SHORT EXAMPLE. I DON'T KNOW IF YOU CAN SEE IT FROM HERE. AND I DON'T KNOW WHERE MY MOUSE IS. ALL RIGHT, WE'LL SKIP IT. ANYWAY, YOU WANT THOSE-- THAT INFORMATION TO APPEAR AS THAT VIDEO IS RUNNING. TYPICALLY, CAPTIONING APPEARS AT THREE LINES AT A TIME, SO IT TAKES A LITTLE BIT OF ARTWORK TO SYNCH THOSE TWO THINGS UP, TO MAKE SURE THAT WHEN A PERSON IS SPEAKING, WHAT THEY'RE SAYING APPEARS UNDERNEATH THEIR HEAD, AND ALSO INCLUDING ANY AUDIO DESCRIPTION. SO IF YOU ADD ADDITIONAL INFORMATION THAT SAYS "X APPEARS ON THE SCREEN, OR PROFESSOR SHOWS SLIDE OF Y," THEN YOU WANT TO MAKE SURE THAT THAT DOESN'T INTERFERE WITH THE SPEAKING GOING ON, OKAY? EXCEPTIONS--ALREADY-- *SCOTT LISNER TALKED ABOUT SOME OF THE EXCEPTIONS THAT IT'S TRUE HERE-- THAT IS, THE PASSWORD PROTECTED COURSE MATERIALS. AGAIN, COURSES HAVE SOME SPECIAL CONSIDERATIONS. YOU'RE GONNA WORK WITH THE OFFICE OF DISABILITY SERVICES WHEN YOU HAVE A STUDENT WHO'S REGISTERED WITH THEM, AND YOU'RE GOING TO SAY, "THIS IS HOW WE'RE GOING TO PROVIDE YOU THAT ALTERNATIVE," BUT IN THOSE CASES, WE DO WANT YOU TO STATE HOW THAT ACCESS SHOULD BE HANDLED. SO YOU'RE GONNA SAY, "YES, WE HAVE THESE X, Y, Z "NUMBER OF COURSE VIDEOS ON THIS SITE. "IF YOU NEED TO ACCESS THEM IN ALTERNATE FORMAT, HERE'S HOW YOU'RE GONNA GO ABOUT DOING THAT." OKAY? WE WANT YOU TO MAKE THAT CLEAR. AND AS ALWAYS, YOU MUST HAVE EQUAL ACCESS WITH EQUAL EFFORT. THAT MEANS, IF YOU'RE GOING TO ASK STUDENTS TO WATCH A VIDEO OF A PARTICULAR MOVIE ONE EVENING, AND THEN COME TO CLASS THE NEXT DAY AND DISCUSS IT, YOU CAN'T EXPECT THOSE WHO ARE UNABLE TO ACCESS THE VIDEO AT HOME IN THE COMFORT OF THEIR DORMS, TO THEN DRIVE TWO HOURS TO A PLACE WHERE YOU'RE GONNA SHOW THE VIDEO ONE TIME, OKAY? YOU WANT TO MAKE SURE THAT THEY HAVE A RELATIVELY EQUAL ACCESS TO THAT MATERIAL IN THE ALTERNATE FORMAT. COLOR. YOU CAN'T USE COLOR TO IDENTIFY INFORMATION. AND THE EASIEST EXAMPLE I CAN GIVE YOU IS, ALL OF THE RED NUMBERED ITEMS ARE REQUIRED, OKAY? SAYING ALL OF THE-- WHATEVER COLOR IS WHAT YOU WANT TO USE IS NOT GOING TO WORK BECAUSE, ESPECIALLY, LIKE SCOTT JUST TALKED ABOUT DOWNLOADING THIS PRESENTATION ON HIS PDA, THERE'S LOTS OF PDAs AND CELL PHONES OUT THERE, AND PEOPLE ARE USING TABLET PCs AND ALL SORTS OF NEW TECHNOLOGIES THAT MAY NOT DISPLAY COLOR, AND, LIKE OUR OWN PRESENTATION HERE, MAY NOT DISPLAY COLOR WELL. AND YOUR CHOICE OF COLORS MAY NOT BE AS CLEAR AS THEY ARE WHEN YOU'RE SITTING IN FRONT OF YOUR MONITOR ON CAMPUS. SO, IF YOU ARE USING COLOR, YOU WANT TO ALSO INDICATE IT IN SOMETHING ELSE. AND THE MOST COMMON ERROR THAT THE WEB ACCESSIBILITY CENTER SEES IS LINKS IN A PARTICULAR COLOR. ALL THE LINKS ARE RED ON OUR PAGE. AND THAT'S THE ONLY WAY THAT YOU KNOW THAT IT'S A LINK. YOU CAN USE THAT RED COLOR, BUT YOU ALSO WANT TO ADD SOMETHING ELSE. MY PARTICULAR RECOMMENDATION IS TO NOT TURN OFF THE UNDERLINING, IF AT ALL POSSIBLE. MOST USERS EXPECT UNDERLINED TEXT TO BE A LINK. SO, YOU'RE ALREADY AHEAD THERE. IF YOU ABSOLUTELY HATE UNDERLINING 'CAUSE IT JUST MAKES YOUR PAGES LOOK UGLY, YOU CAN USE BOLD, YOU CAN USE AN ASTERISK NEXT TO IT, YOU CAN COME UP WITH SOME OTHER SYSTEM BESIDES JUST TURNING THE COLOR THAT SAYS, "YES, THIS TEXT IS A LINK." WHAT WE WANNA AVOID IS THAT SORT OF HUNT-AND-PECK PHENOMENON WHERE YOU HAVE TO BE LUCKY ENOUGH TO GET YOUR MOUSE TO THAT PARTICULAR LOCATION TO DISCOVER THAT IT'S A LINK, OKAY. AND ALSO, I WANT YOU TO AVOID THESE KIND OF SCENARIOS WHERE YOU HAVE TO CHOOSE A COLOR TO NAVIGATE. THESE ARE VERY PROBLEMATIC IF YOU CAN'T SEE COLOR, RIGHT? CONTRAST; AND THIS IS AN EXCELLENT EXAMPLE. THIS IS FROM A BRITISH GOVERNMENT SITE. THE MOST COMMON ERROR WITH CON-- YES? YEAH, I'M SORRY. YEAH, ABOUT NAVIGATION MENUS AND COLOR, WHEN YOU COLOR YOUR --WHEN YOU HAVE A NAVIGATION MENU WHERE EVERY TEXT IN THAT BLOCK, AND IT'S ALWAYS IN A SPECIFIC AREA ON YOUR SITE, EITHER ON THE--I'M POINTING TO THE LEFT SIDE 'CAUSE THAT'S WHERE IT MOST COMMONLY IS BUT A NAVIGATION BAR AT THE BOTTOM, AT THE TOP, ON THE RIGHT, WHERE IT'S CLEAR THAT ALL OF THAT TEXT IS NAVIGATION, THEN IT IS ACCEPTABLE TO ONLY HAVE THAT AS COLOR ONLY TO INDICATE THAT THOSE ARE LINKS. MOST OF THE TIME, THE FACT THAT THEY ARE A DIFFERENT COLOR FROM EVERY OTHER THING ON THE PAGE INDICATES THAT THEY'RE LINKS, AND THEY'RE ALSO IN A CENTRALIZED LOCATION AND IF POSSIBLE, WE EVEN LIKE YOU TO PUT A DIV AROUND THOSE AND TITLE THAT NAVIGATION BAR, SO DIV TITLE EQUALS NAVIGATION BAR. WHEN THE SCREEN READER HITS THAT, IT'LL ANNOUNCE THIS IS A NAVIGATION BAR SECTION AND THEN IT'LL READ OFF ALL YOUR LINKS, OKAY, AND ANOTHER NICE WAY OF SORT OF INDICATING THAT THIS IS A LINK SECTION. OKAY, SO THEN CONTRAST. ONE THING WE WANT YOU TO AVOID IS THE LIGHT COLOR ON DARK BACKGROUND. IN THIS CASE, THEY'RE USING A LIGHT ORANGE ON A DARK ORANGE, OKAY, AND YOU CAN TELL IT ALMOST DISAPPEARS IN THIS RESOLUTION SO WE WANT YOU TO USE AS FAR ACROSS THE COLOR SPECTRUM AS POSSIBLE, COLOR CHOICES THAT REALLY CONTRAST WITH EACH OTHER. IF YOU'RE NOT CLEAR WHAT THAT SPECTRUM IS AND HOW TO CHOOSE THOSE, THERE ARE SEVERAL COLOR GUIDES ONLINE FOR GOOD CONTRAST AND, IN FACT, WHEN THE WAC CHECKS YOUR PAGES, WE USE THE ONE FROM LIGHTHOUSE.ORG. SO IF YOU GO TO LIGHTHOUSE.ORG, THEY HAVE A VERY NICE COLOR WHEEL AND YOU JUST CHOOSE COLORS THAT ARE ACROSS FROM EACH OTHER ANYWHERE ON THE WHEEL AND YOU'LL HAVE GOOD CONTRAST, OKAY. IT'S PRETTY MUCH THAT SIMPLE. BUT IF YOU'RE EVER UNCLEAR OR UNCERTAIN, YOU CAN ALWAYS SEND US A PAGE, SEND US YOUR COLORS, SAY, YOU KNOW, "WHAT DO YOU GUYS THINK?" TEST IT OUT ON A FEW DIFFERENT RESOLUTIONS, A FEW DIFFERENT BROWSERS, AND WE'RE HAPPY TO DO THAT. MM-HMM. STYLE SHEETS. FIRST OF ALL, YES, I WANT YOU TO USE STYLE SHEETS. IF I HAD MY WAY, I WOULD MAKE YOU ALL USE STYLE SHEETS. WHY? BECAUSE STYLE SHEETS ARE ONE OF THE BEST WAYS THAT YOU CAN, AS A DESIGNER, CLEARLY DEFINE THE FORMATTING OF THE TEXT THAT YOU WANT, BUT AT THE SAME TIME, AS THE USER, I CAN TURN ALL THAT OFF AND STILL USE THE PAGE HOW I WANT IT TO BE USED, OKAY. SO IT'S SORT OF THE BEST OF BOTH WORLDS IN TERMS OF ACCESSIBILITY. ON THE OTHER HAND, ALL THAT WE SAY IS THAT IF YOU DO USE STYLE SHEETS, WHEN THAT STYLE IS LIFTED OFF OF YOUR PAGE, WHEN THAT STYLE DISAPPEARS, WE STILL WANT THE CONTENT OF THE PAGE TO BE AVAILABLE TO ASSISTIVE TECHNOLOGY, OKAY. THE CONTENT CANNOT BE DEPENDENT UPON THAT STYLE SHEET WORKING, SO YOU CAN DO THAT IN A LOT OF DIFFERENT WAYS. YOU JUST--THE BEST WAY TO TEST YOUR SITE IS TO TAKE OUT YOUR STYLE SHEET FROM YOUR SITE AND LOAD THE PAGES. IF YOU CAN STILL USE THE FUNCTIONALITY OF THOSE PAGES AND STILL SEE THE CONTENT, YOU'RE GOOD TO GO, OKAY. THINGS TO BE WARY OF AND WHAT I'VE USED IS HERE IS A BACKGROUND IMAGE. BACKGROUND IMAGES THAT YOU PUT INTO PLACE THAT CONTAIN CONTENT, NOT THAT ARE JUST DECORATIVE BACKGROUND IMAGES THAT CREATE PRETTY BORDERS AND THINGS LIKE THAT, BUT THAT CONTAIN CONTENT LIKE THIS WOULD CONTAIN SOME TEXT. THOSE ARE PROBABLY GONNA BE A POINT WHERE THE STYLE-- IF THE STYLE SHEET DOESN'T WORK, THAT CONTENT DISAPPEARS, OKAY, SO YOU WANNA WATCH OUT FOR THOSE. LIST STYLES AND CONTENT PROPERTIES, SUCH AS DISPLAY, NONE; THOSE KIND OF THINGS CAN ALSO INTERFERE, SO WHEN THE STYLE SHEET'S NOT THERE, THE CONTENT MAY OR MAY NOT APPEAR, OR IN MANY CASES, IT APPEARS ON TOP OF OTHER CONTENT, MAKING IT UNUSABLE, MM-HMM. AND AS A GENERAL TIP, NOT PART OF THE STANDARDS BUT SOMETHING TO CONSIDER, CSS DOES REPRESENT ONE OF THE BEST WAYS THAT YOU CAN AVOID USING THE DEPRECATED HTML CODE OF THINGS LIKE CENTER, FONT, OR USING BLOCK QUOTE INCORRECTLY TO INDENT TEXT, OKAY. ALL OF THOSE "INLINE STYLES," IS WHAT THEY'RE CALLED, OVERRIDE USER CHOICES AS WELL SO IF I USE THE FONT TAG IN HTML AND DEFINE THE SIZE OF THE TEXT AND THE COLOR OF THE TEXT, IF THEN AS A USER, I SAY, "TURN OFF ALL THE COLORS AND USE MY COLORS INSTEAD," IT WON'T TURN OFF THOSE COLORS, OKAY. IF I SAY, "RESIZE THE TEXT OF THE PAGE," IT WON'T RESIZE THAT TEXT, SO THAT'S WHY THOSE INLINE STYLES ARE SORT OF MORE AGGRESSIVE TOWARDS THE USER AND THAT'S WHY WE WANT YOU TO AVOID THEM AND STYLE SHEETS IS ONE OPTION TO DO THAT. ANY OTHER QUESTIONS SO FAR? I KNOW I'M GOING PRETTY FAST. FEEL FREE TO JUMP IN IF THEY COME TO YOU. ALL RIGHT, IMAGE MAPS. I HAVE THE LITTLE PEOPLE HOLD-- HUGGING THE GLOBE. IT'S A LITTLE HEART ABOVE THEIR HEAD BECAUSE ESSENTIALLY, THE STANDARDS SAY, "WE LIKE CLIENT-SIDE IMAGE MAPS." IF YOU'RE GONNA DO AN IMAGE MAP, THIS IS THE ONE THAT WE WANT YOU TO USE. WHY? BECAUSE THE CLIENT-SIDE IMAGE MAP DEFINES AN AREA ON YOUR IMAGE AND IT PUTS THAT DEFINITION OF WHERE THAT AREA IS SUPPOSED TO LINK TO, WHAT'S SUPPOSED TO HAPPEN ON THE MOUSE-CLICK EVENT INTO THE HTML DOCUMENT THAT THE USER SEES, OKAY. SO IT'S IN--IT'S ON THEIR SIDE OF THE MACHINE. IT'S ON THE CLIENT'S SIDE, SO IF THAT FUNCTIONALITY DOESN'T WORK, THERE ARE STILL OTHER WAYS TO ACCESS THAT INFORMATION IF THAT CLICK DOESN'T WORK. AND THE WAY YOU'RE GONNA MAKE SURE THAT HAPPENS IS YOU'RE GOING TO PUT AN ALT TAG IN EACH OF THOSE AREAS THAT SAYS, "THIS LINK LEADS TO OUR HOME PAGE. THIS LINK LEADS TO INFORMATION," WHATEVER, BUT YOU'RE GONNA HAVE AN ALT TAG IN THOSE AREA MAPS THAT EXPLAINS WHAT'S SUPPOSED TO HAPPEN WHEN YOU CLICK ON THAT PARTICULAR AREA OF THE MAP, OKAY. ALT TAG FOR EACH LOCATION. NOW, YOU CAN USE SERVER-SIDE MAPS AND THE DIFFERENCE IN A SERVER-SIDE MAP IS FIRST OF ALL, YOU CAN ONLY USE THE SERVER-SIDE MAP IF THE CLIENT-SIDE MAP DOESN'T WORK FOR YOU, AND THE ONLY REASON IN MOST CASES THAT THE CLIENT-SIDE MAP ISN'T GOING TO WORK IS BECAUSE YOU'RE--THE AREAS THAT YOU'RE DEFINING ARE NOT GEOMETRIC SHAPES. SO ON A MAP, ON A CLIENT-SIDE MAP, YOU HAVE MAYBE A PICTURE OF THE OVAL AND YOU DIVIDE THAT PICTURE INTO FIVE DIFFERENT SECTIONS, AND WHEN YOU CLICK ON ONE OF THE SQUARES OR ONE OF THE SECTIONS, IT TAKES YOU TO A DIFFERENT PART OF THIS WEBSITE, OKAY. NOW I'LL JUST TELL YOU, THAT'S A BAD USABILITY PRACTICE BECAUSE IT'S CALLED "MYSTERY MEAT NAVIGATION," WHICH IS NOT HELPFUL, BECAUSE AS A USER I HAVE TO GUESS WHICH ONE LEADS TO WHICH AREA, RIGHT? BUT IF YOU USE IT, IT DOESN'T VIOLATE THE STANDARDS AS LONG AS YOU HAVE AN ALT TAG IN EACH ONE OF THOSE LITTLE SQUARES, OKAY. BUT LET'S SAY YOU WANNA MAKE SOMETHING THAT HAS A VERY ODD SHAPE; A FIGURE EIGHT, A SQUIGGLE, WHEN YOU GET INTO REALLY DECORATIVE SITES AND ARTISTIC SITES, IT COULD BE QUITE A DIFFERENT THING, OKAY. IF YOU CANNOT MAKE A DEFINITE GEOMETRIC SHAPE AND ASSIGN THAT LINK TO THAT AREA, THEN YOU PROBABLY ARE GONNA HAVE TO USE A SERVER-SIDE MAP AND THAT'S THE ONLY INSTANCE IN--WHEN IT'S PERMISSIBLE TO USE A SERVER-SIDE MAP, OKAY. SO WHAT HAPPENS WITH THE SERVER-SIDE MAP IS WHEN I CLICK ON THAT AREA THAT YOU'VE DEFINED, HOWEVER YOU'VE DEFINED IT, THAT RECOGNITION OF THAT EVENT, THAT MOUSE EVENT, GETS SENT TO MY SERVER WHERE THE WEBSITE IS AND THEN THAT GETS PROCESSED ON THAT SIDE AND WITH THAT PROCESSING, THE COMPUTER DECIDES WHERE YOU'RE SUPPOSED TO GO AS A RESULT OF THAT EVENT, OKAY. WHAT'S SUPPOSED TO HAPPEN AS A RESULT OF THAT CLICK. ALL THAT INFORMATION HAPPENS ON THE REMOTE END, NOT ON THE USER END, SO ON THE USER END, THERE'S NOTHING THAT SAYS WHAT'S SUPPOSED TO HAPPEN AS A RESULT OF EACH PARTICULAR CLICK. THAT ALL GETS PROCESSED ON THE OTHER SIDE SO AS A RESULT OF THAT, I CAN'T INTERPRET THAT INFORMATION UNLESS THAT SERVER IS PROCESSING, OKAY. SO WHAT WE WANT YOU TO DO IN THOSE CASES IS OFFER AN ALTERNATE WAY OF HAVING THOSE EVENTS HAPPEN, NOT JUST THE SERVER-SIDE MAP BUT THAT USUALLY MEANS A REPLICA OF TEXT LINKS AT THE BOTTOM OF THE SCREEN. IT CAN MEAN ADDING ADDITIONAL BUTTONS TO THE PAGE SO THE PEOPLE CAN ACTIVATE THE BUTTON RATHER THAN CLICKING ON A PARTICULAR AREA OF THE SCREEN. YOU CAN FIND ALL DIFFERENT SOLUTIONS, BUT WE WANT YOU TO HAVE AT LEAST TWO METHODS OF MAKING THAT PROCESS HAPPEN IF YOU'RE USING A SERVER-SIDE MAP, OKAY. ONE THAT USES THE MOUSE AND IS MOUSE DEPENDENT AND ONE THAT'S AN ALTERNATE. TABLES. EIGHT AND NINE ARE BOTH DEALING WITH TABLES. FIRST OF ALL, WHENEVER YOU HAVE A DATA TABLE-- WELL, LET'S TALK ABOUT LAYOUT TABLES FIRST-- THAT'S WHAT I HAVE UP HERE. LAYOUT TABLES. WHEN YOU'RE USING LAYOUT TABLES AND AS SOME OF YOU MAY KNOW, STYLE SHEETS IS FAST MOVING TOWARDS REPLACING THE NEED FOR LAYOUT TABLES. NOT THERE YET, NOT FULLY SUPPORTED YET, BUT IT'S COMING SOON; BUT WHEN AND IF YOU ARE USING LAYOUT TABLES, YOU DON'T WANNA PUT ANY HEADER INFORMATION IN THAT TABLE THAT MIGHT IDENTIFY THAT TABLE TO THE SCREEN READER. IN MOST CASES, WE WANT IT TO SKIP RIGHT OVER THE FACT THAT THAT'S A TABLE AND GO RIGHT INTO THE CONTENT. WE DON'T WANT IT TO ANNOUNCE THAT THERE'S A LAYOUT TABLE ON THERE BECAUSE IT'S NOT REALLY IMPORTANT THAT THE USER UNDERSTAND THAT THIS IS ALL LAID OUT IN A TABLE. IT DOESN'T MATTER, OKAY. SO WE DON'T WANT YOU TO PUT SUMMARIES OR CAPTIONS OR HEADERS INTO A LAYOUT TABLE BUT IF YOU HAVE A DATA TABLE, AND THIS MEANS ANY KIND OF DATA TABLE FROM TWO ROWS OF DATA TO 150 ROWS OF DATA TO 1000 ROWS OF DATA, WHEN IT'S A DATA TABLE, YOU HAVE TO DEFINE HEADERS AND THAT MEANS THAT YOU HAVE TO PUT HEADERS AT THE TOP OF EACH COLUMN THAT SAYS WHAT THE INFORMATION IN THAT COLUMN IS SUPPOSED TO BE AND YOU HAVE TO PUT A HEADER ON THE ROW THAT SAYS HOW THIS INFORMATION IS RELATED TO EACH OTHER, OKAY. SO, FOR INSTANCE, AT THE TOP, I MIGHT SAY, "E-MAIL, TITLE, DEPARTMENT, PHONE," AND ON THE SIDE I MIGHT HAVE THE NAME OF THE INDIVIDUAL AS THE ROW HEADER. SO THEN AS I MOVE ALONG IN THE SCREEN READER, WHEN I MOVE THIS WAY ACROSS THE TABLE, THE SCREEN READER WILL ANNOUNCE WHICH COLUMN I'M IN. IT'LL SAY, "E-MAIL, TITLE, PHONE," AND THEN READ THE DATA. WHEN I MOVE DOWN, IT'LL ANNOUNCE WHICH PERSON I'M LOOKING AT THAT DATA FOR, SO IF I'M IN THE E-MAIL COLUMN AND I MOVE DOWN, IT'LL SAY, "LORI BAILEY" AND THEN READ MY E-MAIL ADDRESS. IF I MOVE DOWN ANOTHER ONE, IT'LL SAY, "*SCOTT *LISNER" AND READ HIS E-MAIL ADDRESS AND SO ON AND SO FORTH, OKAY. SO WHEN YOU HAVE A TABLE THAT IS DATA, YOU NEED TO DEFINE HEADERS. NOW, IF YOU HAVE A MORE COMPLEX TABLE THAN THAT AND THAT MEANS YOU HAVE A SUBSET WITHIN THAT TABLE, AND IF YOU WANT, YOU CAN LOOK AT THE WAC'S WEBSITE. WE HAVE AN EXAMPLE OF THIS FROM A SCIENCE EXPERIMENT WHERE THEY WERE TAKING HEART RATES FOR A NUMBER OF DIFFERENT INDIVIDUALS, AND THEN WITHIN THAT INDIVIDUAL, THEY HAVE A SUBSET OF HEART RATES BASED ON ACTIVITY, OKAY. AND SO THE ONE TABLE IS EMBEDDED WITH INSIDE THE OTHER TABLE. SO WHEN THAT HAPPENS, IT'S NOT GOOD ENOUGH JUST TO DEFINE A HEADER ROW AND ANOTHER HEADER ROW BECAUSE THE SCREEN READER WON'T KNOW WHAT --WHICH HEADER THAT PARTICULAR CELL SHOULD USE, OKAY, 'CAUSE YOU HAVE TWO SETS OF HEADERS. SO IN THAT CASE YOU'RE GONNA USE THE ID TAG WITHIN EACH DATA CELL TO EXPLICITLY ASSOCIATE IT WITH THE APPROPRIATE HEADER, OKAY. SO YOU'RE GONNA SAY, "ID EQUALS HEADER ONE. "ID EQUALS HEADER FOUR. ID EQUALS HEADER SIX," AND SO ON AND THEN THE SCREEN READER WILL KNOW THAT THIS TABLE CELL BELONGS TO THIS PARTICULAR HEADER, OKAY. BUT IF YOU DON'T HAVE THAT COMPLEX OF A TABLE, YOU CAN JUST USE THE TH TAG TO DEFINE HEADERS AND THEN USE THE SCOPE TO SAY-- YOU WOULD SAY, "TH SCOPE EQUALS COLUMN," SO THIS--FOR THIS COMPLETE COLUMN, THE HEADER IS E-MAIL. TH SCOPE EQUALS COLUMN. FOR THIS COMPLETE COLUMN, THE SCOPE IS TITLE, OKAY. SO ALL THE WAY DOWN THE WHOLE COLUMN, IT'S THAT HEADER, SO IT'S FAIRLY EASY WHEN YOU HAVE A SIMPLE TABLE. IT TAKES A LITTLE BIT MORE LEGWORK WHEN YOU HAVE A MORE COMPLEX TABLE, OKAY. ANY QUESTIONS ABOUT THE--? >> YOU SAY THERE'S AN EXAMPLE OF THIS ON THE WEBSITE? >> YEAH, THERE'S AN EXAMPLE OF THIS AND ALL OF THESE STANDARDS ON OUR WEBSITE. WE HAVE A COUPLE OF GOOD TUTORIALS AND ON THE CD THAT I GAVE YOU, WE HAVE A COPY OF OUR TWO MOST-USED TUTORIALS, WHICH HAS DO'S AND DON'TS AND EXAMPLES ON IT, SO TAKE A LOOK AT THE CD FIRST AND IF YOU DON'T FIND WHAT YOU'RE WORKING FOR, GO AHEAD TO OUR WEBSITE. FRAMES. IF YOU USE FRAMES, IF YOU USE FRAMES, AND I'LL SAY A BIG IF, IF YOU DECIDE THAT FRAMES ARE THE WAY TO GO FOR YOU, THEN THE STANDARD SAYS, "YOU HAVE TO GIVE A TITLE TO EACH OF YOUR FRAMES." IT'S VERY SIMPLE TO DO. THERE'S A TITLE ATTRIBUTE. YOU SAY, "TITLE EQUALS" AND GIVE A NAME TO THAT FRAME THAT IDENTIFIES WHAT THE CONTENT IS OF THAT FRAME BECAUSE THAT'S HOW USERS OF ASSISTIVE TECHNOLOGY ARE GONNA MOVE THROUGH THE FRAMES. THEY'RE GONNA MOVE TO THE NAVIGATION FRAME, TO THE HEADER FRAME, TO THE CONTENT FRAME, TO THE FOOTER FRAME, AND SO ON. WHATEVER YOU NAME IT, THAT'S HOW IT'S GONNA BE IDENTIFIED, OKAY. SO YOU WANNA GIVE HELPFUL INFORMATION, NOT SC1-3, SC1-4, SC1-5, OKAY, AND IF YOU DON'T HAVE THAT INFORMATION ON YOUR FRAMES, THEN IT ACTUALLY MAKES YOUR FRAMES INACCESSIBLE TO USERS OF ASSISTIVE TECHNOLOGY. I CAN'T GET ANYWHERE, SO THE TITLE IS VITALLY IMPORTANT TO FRAME USERS. THAT BEING SAID, THE WEB ACCESSIBILITY CENTER ADVISES YOU TO AVOID USING FRAMES, OKAY. WHY DO WE ADVISE YOU TO AVOID USING FRAMES? WELL, FOR NUMBER ONE, WHEN YOU USE FRAMES, IT BREAKS THE NAVIGATION SYSTEM. IT BREAKS THE BACK BUTTON AND IT BREAKS THE HISTORY LIST. IF SOMEBODY FINDS SOME REALLY GOOD INFORMATION THROUGH YOUR SITE THAT IS BASED ON FRAMES, THEY LOVE THIS PAGE. THEY WANNA SEND THIS PAGE TO THEIR FRIENDS AND FAMILY. THEY WANT EVERYBODY TO COME TO THIS PAGE AND SEE THE VALUABLE INFORMATION THAT YOU HAVE. THERE IS NO WAY FOR THEM TO BOOKMARK THAT PAGE, NO WAY FOR THEM TO JUMP BACK TO THAT PAGE QUICKLY. AND OFTEN TIMES THE NAVIGATION IS SET UP IN SUCH A WAY THAT THEY CAN'T FIGURE OUT HOW THEY GOT THERE IN THE FIRST PLACE BECAUSE AS THEY MOVE THROUGH THE PAGE, THAT SORT OF NICE HISTORY DOESN'T GET SET UP FOR THEM. IF YOU'RE GONNA USE FRAMES, PROVIDE A BREADCRUMB NAVIGATION THAT SHOWS PEOPLE HOW THEY GOT TO THE PAGE THAT THEY'RE AT, OKAY, SO THAT THEY CAN GET BACK THERE IF THEY NEED TO. AND IT'S ALSO OFTEN UNEXPECTED WHEN USERS CLICK ON A BUTTON AND ONLY ONE PORTION OF THE PAGE CHANGES. IT'S A LITTLE SURPRISING AND DISCONCERTING TO SOME USERS AND BEYOND THAT, IT'S NOT SUPPORTED BY OLDER BROWSERS SO IF YOU HAVEN'T UPDATED YOUR BROWSER, YOU DON'T GET TO SEE THE FRAMES. SO THAT BEING SAID, IF YOU ARE GONNA USE FRAMES IN ADDITION TO DOING THE TITLES, WE RECOMMEND THAT YOU ALSO OFFER A NOFRAMES CONTENT AND IT'S VERY SIMPLE TO DO. ALL YOU HAVE TO DO IS IN YOUR FRAME SET, YOU HAVE A SECTION CALLED NOFRAMES WITH AN END OF NOFRAMES AND WHAT HAPPENS IS IF YOU TURN FRAMES OFF OR FRAMES AREN'T WORKING, THIS SECTION OF THE CONTENT WILL STILL WORK, OKAY, SO THIS WILL GET DISPLAYED EVEN THOUGH YOUR NAVIGATION AND MENU INFORMATION WON'T GET DISPLAYED. SO IF YOU'RE GONNA USE FRAMES, OFFER A NOFRAME SECTION AND THAT'LL ALLOW PEOPLE TO SORT OF OPT OUT OF YOUR FRAMES IF IT'S NOT WORKING FOR THEM, HMM. FLICKER. IT'S A LITTLE CONFUSING, I THINK, HOW WE DEFINE WHAT TO AVOID WITH FLICKER, SO SAYING IT A LITTLE CLEAR-- MORE CLEARLY IS ANYTHING BETWEEN 2 AND 55 HERTZ IS WHAT YOU DON'T WANNA USE, OKAY. THOSE ARE THE AREAS THAT ARE GONNA BE MOST LIKELY TO INDUCE SEIZURES IN SENSITIVE PEOPLE AND ON THE LEFT-HAND SIDE IS TWO AND ON THE RIGHT-HAND SIDE IS 55 HERTZ, OKAY. IT'LL GIVE YOU A SENSE OF HOW FAST THINGS MOVE. NOW THAT IS A GUIDELINE FOR THE STANDARDS. THERE HAS BEEN SOME EVIDENCE THAT SHOWS IF YOU USE HIGH-CONTRASTING IMAGES, FOR INSTANCE, SOMETHING THAT'S FLASHING BETWEEN BLACK AND WHITE, ON AND OFF BLACK AND WHITE, THAT EVEN 55 HERTZ IS GOING TO BE DIFFICULT FOR SOME PEOPLE, SO THE HIGHER THE CONTRAST OF THAT FLASH ON AND OFF, THE MORE LIKELIHOOD THAT YOU'LL WANNA MAKE IT A SLOW CHANGE RATHER THAN A FAST CHANGE, OKAY. SUGGESTED TECHNIQUES FOR HOW YOU MIGHT DEAL WITH THIS PARTICULAR STANDARD IS NUMBER ONE, AVOID FLICKER ENTIRELY. DON'T MAKE THINGS MOVE ON YOUR SITE. I KNOW I WILL APPRECIATE IT AS A USER. NUMBER TWO, IF YOU MUST MAKE THINGS MOVE AROUND ON YOUR SITE, ALLOW ME TO STOP IT. GIVE THE USER AN OPTION TO SAY, "MAKE THIS STOP HAPPENING," OKAY, "IT'S REALLY ANNOYING ME. I DON'T WANT IT TO DO THIS ANYMORE." AND THEN THIRDLY, AVOID THINGS THAT YOU, AS A PROGRAMMER, CAN'T CONTROL THE SPEED OF HOW FAST IT'S GONNA FLICKER. SO, FOR INSTANCE, IF YOU USE THE SCROLLING TEXTBOX IN MICROSOFT, YOU DON'T REALLY HAVE AN OPTION TO SAY HOW FAST IT'S GONNA SCROLL, AND IT ALL SORT OF DEPENDS ON THE PROCESSING SPEED AND, YOU KNOW, WHAT THE USER'S USING AT ANY GIVEN TIME AND THEIR BROWSER AND ALL THAT STUFF. SO 'CAUSE YOU CAN'T REALLY CONTROL IT, YOU DON'T WANNA USE IT BECAUSE YOU ONLY WANNA USE THINGS THAT YOU KNOW YOU CAN AVOID THAT TWO TO 55 HERTZ, THE DANGEROUS AREA, OKAY. SCRIPTING. SCRIPTING'S A TOUGH ONE BECAUSE THERE'S SO MANY DIFFERENT DEFINITIONS OF WHAT SCRIPTING IS AND HOW SCRIPTING CAN BE USED AND ESSENTIALLY WHAT WE'RE SAYING IS YOU CAN USE SCRIPTS AS LONG AS THE RESULTS OF THE SCRIPTS ARE ACCESSIBLE TO ASSISTIVE TECHNOLOGY. NOW THAT'S NOT REALLY EASY TO DEFINE, RIGHT. HOW ARE YOU GONNA KNOW THAT? I THINK IN MOST CASES YOU'RE GONNA HAVE TO ACCESS SOME ASSISTIVE TECHNOLOGY. YOU'RE GONNA HAVE TO ASK THE WEB ACCESSABILITY CENTER TO USE A SCREEN READER TO ACCESS YOUR PAGE OR TO FILL OUT YOUR FORM OR YOU'RE GONNA HAVE TO USE YOUR OWN COPIES OF THOSE ASSISTIVE TECHNOLOGIES TO TEST IT OUT, BUT WHERE I CAN RECOMMEND TO YOU IS IF YOUR SCRIPT ESSENTIALLY CREATES OR RESULTS IN THE CREATION OF HTML THAT GETS ENCODED INTO THE PAGE, THEN YOU'RE PROBABLY GONNA BE OKAY. SO, FOR INSTANCE, PHP SCRIPTING RESULTS IN WRITING HTML CODE THAT THEN GETS INTERPRETED BY THE BROWSER, OKAY, SO IN ESSENCE WHAT THE USER SEES IS NOT PHP. THAT HAPPENS ON THE SERVER SIDE. WHAT THEY SEE IS HTML RESULTS OF THAT PHP AND IF THAT'S HAPPENING, THEN YOU'RE PROBABLY GONNA BE OKAY, OKAY. BUT WHAT YOU WANNA AVOID IS IF THAT SCRIPT CREATES THE CONTENT AND IF THE SCRIPT ISN'T TURNED ON, THAT CONTENT COMPLETELY DISAPPEARS AND ISN'T AVAILABLE AT ALL, LIKE IN JAVASCRIPT. SO SOME COMMON PROBLEMS THAT WE SEE A LOT OF ARE WHEN SCRIPTS OR JAVASCRIPT IS USED TO FILL OUT A FORM--EXCUSE ME, IF I MAKE A CHOICE-- FOR INSTANCE, YOU HAVE AN ADDRESS OPTION AND IN THAT YOU HAVE A BIG LIST OF ALL THE STATES, AND WHEN I CHOOSE ONE THING ON THE LIST, IT AUTOMATICALLY DROPS THAT INTO THE FORM AND RELOADS THE FORM PAGE, OKAY. THERE'S ACTUALLY TWO PROBLEMS WITH THAT. IT USES A JUMP MENU AND IT RELOADS THE PAGE. WHAT HAPPENS IS IF I TRY AND ACCESS THAT DROPDOWN MENU USING A KEYBOARD, I CAN ONLY GET, CORRECT ME IF I'M WRONG, ALASKA. I CAN ONLY GET THE FIRST OPTION ON YOUR LIST BECAUSE AS SOON AS I SCROLL DOWN WITH MY ARROW KEY, IT SELECTS THAT OPTION, DROPS IT IN THE BOX, AND RELOADS THE PAGE, OKAY. SO NOW I'M STUCK. I CAN ONLY GET THAT FIRST CHOICE. THAT'S A JUMP MENU AND PEOPLE-- THERE'S OFTEN USE JUMP MENUS AS NAVIGATION TECHNIQUES. THEY PUT IT AT THE TOP OF THEIR PAGE AND THEY SAY, "QUICK LINKS, JUMP TO SOMETHING," AND YOU SELECT, YOU KNOW, THE LIBRARY PAGE AND THAT'S-- IF YOU'RE A KEYBOARD USER, THAT'S THE ONLY PAGE YOU CAN EVER QUICKLY GET TO, OKAY. THE OTHER THING THAT HAPPENS WHEN YOU RELOAD THAT PAGE IS EVERY TIME YOU RELOAD A PAGE, THE SCREEN READER STARTS READING THE PAGE FROM THE VERY TOP OF THE PAGE, SO IF I'M USING A SCREEN READER TO FILL OUT YOUR FORM AND YOU HAVE, LET'S SAY, FIVE OF THOSE NICE LITTLE DROPDOWN MENUS, EVERY TIME I SELECT ONE OF THOSE DROPDOWN MENUS, IT JUMPS TO THE TOP OF THE PAGE AND STARTS READING ME THE WHOLE FORM AGAIN AND THEN I GOTTA WAIT TO GET IT DOWN TO WHERE I WAS AGAIN, GO TO YOUR NEXT LITTLE DROPDOWN BOX, CHOOSE A CHOICE THERE, RELOAD, STARTS FROM THE TOP OF THE PAGE. MORE FUN FOR ME, RIGHT, SO YOU WANNA AVOID THINGS THAT ARE GONNA RESET THE PAGE OR RELOAD THE PAGE, OKAY. AND FINALLY, MOUSE EVENTS. PEOPLE LIKE TO USE A LOT OF ONMOUSECLICK, ONMOUSEOVER, THOSE KIND OF THINGS. THE BEST I CAN TELL YOU IS WHEN THAT IS THE ONLY WAY THAT YOU'VE DEFINED AN EVENT ON YOUR PAGE, ONMOUSEOVER, FOR INSTANCE, IT WORKS ABOUT 50 PERCENT OF THE TIME WITH ASSISTIVE TECHNOLOGY, SO IF YOU HAVE AN A MOUSEOVER LINK, ONMOUSEOVER THE LINK IS GONNA POP UP AND DO THIS NEAT, COOL THING. WHEN I ACTUALLY TRY TO ENGAGE THAT LINK USING THE KEYBOARD AND MY SCREEN READER, THE FIRST TIME I DO IT, NOTHING'LL HAPPEN. THE SECOND TIME I GET THERE, IT MIGHT ACTUALLY GO TO THE LINK, OKAY, BUT THE PROBLEM IS WHEN THAT NOTHING HAPPENS, I ASSUME THAT LINK IS BROKEN, IT DOESN'T WORK. SO TO AVOID THOSE KIND OF THINGS, I ALWAYS RECOMMEND THAT IF YOU ARE GONNA USE MOUSEOVER EVENTS THAT YOU USE THE ON KEY COMMAND AS WELL. SO YOU SAY, "ON KEY PRESS, ALSO DO THIS THING" OR YOU ADD AN ACCESS KEY TO THAT PARTICULAR EVENT, SO I CAN HIT ALT AND ONE AND HAVE THAT SAME THING HAPPEN AND IF YOU WANT AN EXAMPLE OF THE ACCESS KEYS, IF YOU GO TO THE WAC WEBSITE, WE HAVE STANDARDIZED ACROSS OUR SITE SO THAT IF YOU HIT ALT ONE, IT GETS YOU TO THE HOME PAGE, ALT TWO GETS YOU TO THE SEARCH, ALT THREE GETS YOU TO THE MENU, ALT FOUR, I THINK, DROPS YOU TO THE CONTENT, THAT SORT OF THING. SO WE HAVE IT SET UP SO THAT EVERY PAGE YOU HIT ONCE YOU LEARN THAT LITTLE KEY STRATEGY, YOU CAN QUICKLY GET AROUND OUR PAGES VERY EASILY. SO ANY PLACE YOU ARE ON OUR PAGE, YOU CAN HIT ALT ONE AND GET BACK TO OUR HOME PAGE, OKAY, SO THAT'S THE ADVANTAGE OF ACCESS KEYS. IT'S JUST ANOTHER WAY OF SORT OF DOUBLY ENSURING FOR PEOPLE THAT THEY CAN USE THEIR ASSISTIVE TECHNOLOGY TO GET TO WHERE THEY WANT TO. OKAY, APPLICATIONS AND PLUG-INS. THE REALITY OF IT IS THIS BRINGS TOGETHER THE IMPLEMENTATION OF USING ALTERNATE PROGRAMS FOR FUNCTIONALITY ON YOUR SITE, PLUG-INS, IS THAT YOU HAVE TO THINK ABOUT MULTIPLE DIFFERENT STANDARDS AT ONE TIME, OKAY, BUT LET'S JUST GO WITH THIS STANDARD FIRST AND THEN I'LL SHOW YOU AN EXAMPLE. EVERY PAGE THAT REQUIRES A PLUG- IN TO VIEW CONTENT OR ACCESS THE FUNCTIONALITY OF YOUR PAGE NEEDS TO HAVE A LINK TO THE PLUG-IN THAT'S REQUIRED, OKAY. THAT SIMPLE. SO IF YOU HAVE A FLASH SITE AND EVERY PAGE IN YOUR SITE USES FLASH, THEN EVERY PAGE IN YOUR SITE SHOULD HAVE A TEXT NON-FLASH LINK TO THE FLASH PLAYER WEBSITE, OKAY. SO THAT I CAN KNOW THAT I NEED FLASH IN ORDER TO SEE YOUR PAGE AND THAT WOULD BE VERY HELPFUL. I JUST REVIEWED A SITE RECENTLY WITH--THAT USED ALL FLASH AND I HAVE A POP-UP BLOCKER ON MY MACHINE AND THE POP-UP BLOCKER ALSO TURNED OFF FLASH SO WHEN I WENT TO THEIR SITE, I SAW A BIG EMPTY PAGE. THAT WAS IT, BIG BLANK. IF I'D HAD THAT AT LEAST TEXT LINK THAT SAYS, "THIS PAGE REQUIRES FLASH PLAYER," THEN I WOULD AT LEAST KNOW, HEY, MAYBE IT'S MY POP-UP BLOCKER THAT'S STOPPING THIS AND NOT THAT, IT'S-- THEY HAVE A PROBLEM WITH THEIR PAGE, OKAY. SO THAT'S TRUE WHENEVER YOU'RE USING WHATEVER KIND OF PLUG-IN. IF YOU HAVE A QUICKTIME MOVIE ON A PAGE, YOU NEED A LINK-- TO THE QUICKTIME PLAYER. IF YOU'RE USING ADOBE PDF, YOU NEED A LINK TO ADOBE READER OR ANOTHER PDF VIEWER, OKAY. THE ONLY SPECIFICATION OF WHICH ONE YOU-- WHICH ONE TO CHOOSE, FOR INSTANCE, WITH PDF USERS, IS THAT THE STANDARD ALSO SAYS THAT YOU CAN'T REQUIRE AN INACCESSIBLE PLUG-IN SO IF YOU'RE USING SOME THIRD-PARTY PROGRAM THAT IF I DOWNLOAD THAT-- FOR INSTANCE, THERE'S A MAP VERSION THAT OSU USES AND YOU HAVE TO HAVE THEIR LITTLE PLUG-IN IN ORDER TO VIEW THE MAP AND MAKE THE MAP INTERACTIVE, THAT PLUG-IN IN AND OF ITSELF IS NOT ACCESSIBLE, OKAY. IF I DOWNLOAD IT, I STILL CAN'T USE THAT PLUG-IN WITH ASSISTIVE TECHNOLOGY, SO YOU EITHER WANNA CHOOSE PLUG-INS THAT ARE ACCESSIBLE; THAT'S NUMBER ONE, AND YOU CAN CHECK THEM OUT, AGAIN, USING ASSISTIVE TECHNOLOGY, HAVE THE WAC TEST IT FOR YOU OR IF YOU GO TO WEBAIM'S SITE, WEBAIM.ORG, THEY DO HAVE A RUNNING LIST OF APPROVED OR KNOWN TO BE ACCESSIBLE PLUG-INS SO IF YOU WORK FROM THAT LIST, YOU'RE IN GOOD SHAPE, TOO. ALTERNATELY, FOR INSTANCE, WITH THE MAP, AT SOME LEVEL YOU CAN'T MAKE A CLICKABLE MAP ACCESSIBLE TO A KEYBOARD USER OR TO A BLIND USER BECAUSE WHERE THEY GONNA CLICK? YOU KNOW, IF YOU'RE SUPPOSED TO CLICK ON THIS AREA OF THE MAP AND ENLARGE IT, THAT'S JUST NOT GONNA BE POSSIBLE SO FOR THEM THEY HAVE TO FIND A COMPLETELY ALTERNATE WAY OF OFFERING THAT SAME INFORMATION. FOR INSTANCE, THEY OFFER TEXT DESCRIPTIONS OF THE DIFFERENT AREAS THAT YOU MIGHT HAVE SELECTED, OKAY. SO IN THAT CASE, IT DOESN'T MATTER IF THE PLUG-IN IS INACCESSIBLE. THEY'RE GONNA OFFER THAT IN ALTERNATE FORMAT. SO LET'S TAKE A LOOK AT AN EXAMPLE THAT I FREQUENTLY GET QUESTIONS ABOUT, WHICH IS THE PDF. WHAT NEEDS TO HAPPEN IF YOU HAVE PDFs IN YOUR WEBSITE? WELL, NUMBER ONE, WHEREVER YOU LINK TO A PDF, YOU NEED TO HAVE A LINK TO A PDF VIEWER, MOST POPULAR, ADOBE ACROBAT READER. THERE'S LOTS OF VIEWERS OUT THERE. JUST MAKE SURE THAT WHICHEVER ONE YOU CHOOSE IS ACCESSIBLE TO ASSISTIVE TECHNOLOGY. ADOBE ACROBAT READER IS FAIRLY ACCESSIBLE, FAIRLY ACCESSIBLE, AS LONG AS YOU CREATE THE PDF TO BE ACCESSIBLE. THAT'S THE KEY, ALL RIGHT. THE VIEWER'S NOT THE PROBLEM. THE PDF IS THE PROBLEM, OKAY. NUMBER TWO, YOU'RE GONNA INFORM USERS WHENEVER A LINK REQUIRES THAT PDF PLUG-IN, OKAY, SO YOU'RE GONNA HAVE A SYSTEM IN PLACE THAT EITHER HAS THE WORD PDF NEXT TO EACH LINK OR AN ASTERISK NEXT TO EACH LINK OR A CHECKMARK OR A BIG ADOBE SYMBOL NEXT TO IT, WHATEVER. YOU'RE GONNA TELL USERS THIS LINK GOES TO A PDF DOCUMENT. WELL, NOT ONLY FOR ASSISTIVE TECHNOLOGY USERS WHO MIGHT NEED TO THEN DOWNLOAD THAT PLUG-IN OR WANT TO AVOID THAT PLUG-IN, BUT ALSO FOR USERS WITH SLOW MODEMS, OLDER MACHINES, AND THEY KNOW THAT IT'S GONNA TAKE THEM A HALF-AN-HOUR TO GET THAT PLUG-IN TO LOAD AND THEY WANNA GO GET COFFEE BEFORE THAT HAPPENS, SO THEY WANNA KNOW THAT THAT LINK IS GONNA GO TO THAT PDF, OKAY. SO YOU'RE GONNA TELL THEM. NUMBER THREE, THE PDF CREATION ITSELF IS WHAT'S MOST IMPORTANT, SO YOU'RE GONNA MAKE EVERY EFFORT TO ENSURE THAT THE PDF THAT YOU'RE OFFERING IS ACCESSIBLE, WAS CREATED IN A WAY THAT MAKES IT ACCESSIBLE. THERE IS LOTS OF WAYS TO DO THIS AND THE WAC WILL HOPEFULLY BE OFFERING REALLY SOON A WORKSHOP THAT DETAILS HOW TO DO THIS, BUT IN GENERAL, YOU CAN CREATE IT IN WORD IN SUCH A WAY THAT YOU CAN MAKE IT ACCESSIBLE OR YOU CAN USE THE MAKE ACCESSIBLE PLUG-IN IN ADOBE ACROBAT FIVE. THERE'S SEVERAL DIFFERENT METHODS, BUT LET'S SAY YOU KNOW THAT THIS DOCUMENT IS NOT ACCESSIBLE AND YOU KNOW THAT YOU DON'T HAVE THE TIME OR ENERGY RIGHT NOW TO MAKE IT ACCESSIBLE. YOU HAVE ESSENTIALLY TWO ALTERNATIVES. ONE IS YOU CAN OFFER THE DOCUMENT IN ALTERNATE FORMAT. WE OFFER OUR PDFs IN HTML AND PDF. WE DISPLAY AUTOMATICALLY THE HTML TO YOU. IF YOU SO CHOOSE, YOU CAN SELECT TO VIEW THE PDF, OKAY. SO THAT'S THE EASIEST WAY, IS TO ALSO OFFER A TEXT VERSION OF IT OR AN HTML VERSION OF IT, ALL RIGHT. ALTERNATELY, IF IT DOESN'T FALL INTO THOSE PRIORITIES FOR ACCESSIBILITY THAT *SCOTT *LISNER JUST TALKED TO YOU ABOUT, THAT IS, IT'S NOT ONE OF THE PAGES THAT IS USED FOR FUNCTIONALITY TO YOUR SITE. IT DOESN'T HAVE THAT HIGH PRIORITY LEVEL. IT'S AN ARCHIVE, FOR INSTANCE, OF AN ARTICLE THAT A PROFESSOR PUBLISHED FIVE YEARS AGO AND IT'S NOT NECESSARY FOR DAILY USE, THEN YOU CAN JUST INCLUDE A STATEMENT THAT SAYS, "YOU KNOW WHAT? "THIS MAY NOT BE ACCESSIBLE. IF YOU WANT AN ACCESSIBLE VERSION, HERE'S HOW TO GET ONE," OKAY. BUT THAT'S ONLY APPROPRIATE, AGAIN, IF IT'S NOT A PAGE THAT IS REQUIRED FOR FUNCTIONALITY OF YOUR WEBSITE. SO IF IT'S A FORM THAT YOU ASK EVERY STUDENT TO SUBMIT AT A CERTAIN DAY EVERY YEAR, THEN YOU NEED TO MAKE SURE THAT THAT FORM IS EITHER OFFERED IN ALTERNATE FORMAT OR THE PDF IS CREATED IN SUCH A WAY THAT IT'S ACCESSIBLE, OKAY. ALL RIGHT, IN MOST CASES, I THINK MOST WEBSITES ARE GONNA USE A MIX OF THESE STRATEGIES WHEN THEY HAVE PDF. THEY'RE GONNA HAVE SOME PDFs THAT WERE DESIGNED AND ARE KNOWN TO BE ACCESSIBLE TO ASSISTIVE TECHNOLOGY. THEY'RE ALSO GONNA HAVE SOME PDFs THAT THEY CAN'T MAKE ACCESSIBLE, DON'T WANT TO, DON'T HAVE THE TIME OR MONEY TO, SO THEY JUST OFFER AN ALTERNATE VERSION, ALSO AVAILABLE IN HTML, OKAY. AND THEN FINALLY THEY'RE GONNA HAVE SOME PDFs THEY KNOW ARE ABSOLUTELY INACCESSIBLE BUT THEY DON'T THINK MANY PEOPLE ARE GONNA USE AND SO THEN THEY'VE OPTED TO SAY, "WE'RE GONNA MAKE AN ALTERNATE FORMAT ONLY BY REQUEST." OKAY, SO IN THOSE CASES YOU'RE GONNA HAVE A MIX OF MWAS 13, 18, AND 19, AND WE'RE GONNA GET TO 18 AND 19 BUT ALL OF THOSE COME TOGETHER WHEN YOU'RE USING A PLUG-IN. ALL RIGHT. I DON'T KNOW WHERE I SEEM TO HAVE LOST MY--THERE WE GO. FORMS. FORMS SIMPLY SAY IN THE WAY THAT WE'VE STATED IT AND I BELIEVE THIS IS THE SAME WAY SECTION 508 STATES IT, IT SAYS "IF YOU'RE GONNA USE FORMS, THEN YOU HAVE "TO MAKE SURE THAT FORMS ARE ACCESSIBLE TO USERS OF ASSISTIVE TECHNOLOGY." THAT'S IT. HOWEVER YOU DO THEM, THEY HAVE TO BE CREATED ACCESSIBLY, SO AGAIN, IT'S KIND OF UP TO YOU BECAUSE WE KNOW THAT THERE ARE A HUNDRED DIFFERENT WAYS TO MAKE FORMS, MAYBE A THOUSAND DIFFERENT WAYS, OKAY, SO WE CAN'T SPECIFY HOW YOU SHOULD CREATE YOUR FORM. WE'RE ONLY SPECIFYING THE END RESULT. THE END RESULT SAYS IT'S GOTTA BE ACCESSIBLE TO ASSISTIVE TECHNOLOGY. AS A GUIDELINE, AS A GUIDELINE, THESE ARE SOME WAYS THAT WE KNOW THAT HELPS MAKE HTML FORMS AVAILABLE TO ASSISTIVE TECHNOLOGY AND NUMBER ONE IS TO EXPLICITLY ASSOCIATE A LABEL FOR EACH FORM ELEMENT. AND THAT MEANS IN THE FORM IN FRONT OF THE FORM ELEMENT OR SOMEWHERE NEAR IT, YOU'RE GONNA SAY, "LABEL FOR THIS FORM ELEMENT," AND YOU'RE GONNA GIVE IT A LABEL; FIRST NAME, PHONE NUMBER, SOCIAL SECURITY NUMBER, CITY, STATE, WHATEVER THE LABEL IS THAT SAYS WHAT CONTENT SHOULD GO INTO THAT FORM BOX, OKAY. AND THEN IN THAT FORM BOX, IN THAT TEXTBOX, FOR INSTANCE, THAT HAS THE PERSON'S FIRST NAME, YOU'RE GONNA SAY, "ID IS EQUAL TO THE FOUR THAT'S IN THE LABEL," OKAY. SO YOU'RE GONNA SAY, "THIS LABEL GOES WITH THIS BOX. THIS LABEL GOES WITH THIS BOX," SO ON AND SO FORTH. AND WHAT THAT ENSURES IS AS I'M READING THOSE BOXES WITH ASSISTIVE TECHNOLOGY, WHEN I ENTER THAT BOX AND I ENTER FORMS MODE IN A SCREEN READER, THE SCREEN READERS STOPS READING ALL THE EXTERNAL TEXT AND ONLY READS THE STUFF THAT'S ACTUALLY IDENTIFIED AS PART OF THE FORM, SO IT ONLY READS THE BOXES AND THE LABELS. IT DOESN'T READ ALL YOUR NICE INSTRUCTIONS THAT ARE CIRCLED AROUND ALL THAT INFORMATION, OKAY. SO AS YOU TAB THROUGH THOSE BOXES, IT'S GONNA SAY, "EDIT FIRST NAME, EDIT LAST NAME, EDIT ADDRESS," SO ON. IF YOU DON'T HAVE THOSE LABELS EXPLICITLY ASSOCIATED, IT'LL DO ITS BEST TO GUESS, BUT OFTEN TIMES, HOW FORMS ARE SET UP, IT'S NOT A GOOD GUESS, AND IF IT CAN'T DO THAT, IT'LL JUST SAY, "EDIT BLANK, EDIT BLANK, EDIT BLANK, EDIT BLANK," OKAY. SO THEN AS A USER OF ASSISTIVE TECHNOLOGY, I HAVE TO GUESS WHICH INFORMATION GOES IN WHICH BOX AND CONSIDER, TOO, THAT MOST ASSISTIVE TECHNOLOGY USERS AREN'T GONNA FILL OUT A FORM IN THE SAME LINEAR FASHION THAT OTHER USERS WOULD BECAUSE YOU END UP JUMPING AROUND THE PAGE TO FIGURE OUT WHAT THE FORM IS GONNA ASK ME-- OF ME FIRST. DO I HAVE ALL THAT INFORMATION AND THEN GOING BACK THROUGH THE FORM AND FILLING IT OUT, OKAY, SO EXPLICITLY ASSOCIATING LABELS. >> EXCUSE ME. >> YES? >> IS THERE A WAY TO ADD-- SINCE THEY'RE NOT SEEING ANY ADDITIONAL INSTRUCTIONS THAT MAY BE INCLUDED WITH THAT FORM, IS THERE A WAY TO ADD THAT WITHIN THE LABEL AS WELL? LIKE, YOU KNOW, YOU COULD SAY, "EDIT SOMETHING SOMETHING NUMBER" AND THEN NORMALLY IN THE TEXT, YOU KNOW, RIGHT NEXT TO THE FORM YOU WOULD SAY, "WELL, YOU'RE SOMETHING SOMETHING NUMBER IS THIS," BUT IF THEY'RE NOT SEEING THAT IN ADDITIONAL INSTRUCTION, IS THERE A WAY TO INCLUDE THAT THERE? >> YEAH, THE QUESTION WAS ASKED, IS THERE A WAY TO INCLUDE THOSE ADDITIONAL INSTRUCTIONS THAT USUALLY CIRCLE AROUND OR ARE NEARBY THOSE FORM ELEMENTS BUT AREN'T ACTUALLY ASSOCIATED WITH THOSE FORM ELEMENTS? THERE ARE SEVERAL WAYS TO DO THAT. ONE IS TO CREATE A LABEL FOR THAT INSTRUCTION INFORMATION SO THAT IT READS THE LABEL OFF ALONG WITH THE LABEL FOR THE BOX. ONE WAY THAT WE DO IT OFTEN TIMES IS WE ENCOMPASS THE LABEL IN A MUCH LARGER SENSE SO IF IT'S A LABEL FOR FIRST NAME AND THAT CAN ONLY START WITH A CAPITAL LETTER, THEN WE WOULD SAY, "LABEL FIRST NAME," PUT THE EDIT BOX NEXT TO IT, THEN SAY, "MUST BEGIN WITH A CAPITAL LETTER," AND THEN PUT THE END OF THE LABEL MARK RIGHT THERE SO THAT IT'S ALL INCORPORATED INTO THAT LABEL FOR THAT BOX. SOME PEOPLE HAVE PUT INSTRUCTIONS AT THE VERY TOP OF THE FORM AND MADE THEM INVISIBLE TO OTHERS OTHER THAN THE SCREEN READERS. YOU CAN PUT CONTENT OFF TO THE LEFT OF THE SCREEN OR OFF TO THE TOP OF THE SCREEN USING STYLE SHEETS AND POSITIONING, AND THAT'S AN EXCELLENT WAY OF INCLUDING ADDITIONAL TEXT. >> YEAH, WELL, I CAN UNDERSTAND, I MEAN, INCLUDING IT OFF TO THE SIDE, BUT IF THE SCREEN READER STARTS IGNORING ALL THE OTHER INFORMATION-- >> YEAH. >> --BUT THE FORM-- >> WELL, THE REASON WHY THE OFF LEFT AND THE OFF TOP WORKS WELL IS YOU CAN PUT IT OFF LEFT BEFORE THE BEGINNING OF THE FORM AND THEN HAVE THE PERSON START THE FORM AND THEY'VE HAD ALL THE INSTRUCTIONS FIRST AND OFF TOP WORKS THE SAME WAY, BUT ALSO THAT'S WHY YOU SHOULD ALWAYS CONSIDER THAT ASSISTIVE TECHNOLOGY USERS AREN'T GONNA FILL IT OUT ON LINEAR FORMAT. BECAUSE IT GOES INTO FORMS MODE, TYPICALLY WHEN I'M USING ASSISTIVE TECHNOLOGY TO FILL OUT A FORM, I LET IT READ ME THE WHOLE FORM FIRST. THAT INCLUDES ALL THE INSTRUCTIONS OUTSIDE. I DON'T GO INTO FORMS MODE UNTIL I'M ACTUALLY READY TO FILL OUT BOXES, AND THEN GENERALLY, I GO UP A FORM BECAUSE I LET IT READ ME ALL THE WAY DOWN TO THE BOTTOM. THEN I START IN FORMS MODE AT THE BOTTOM OF THE PAGE AND GO UP THE SCREEN LIKE THAT, OKAY. I ALREADY TALKED ABOUT NOT CAUSING THE FORM TO RELOAD AND THE ISSUES WITH THAT AND THEN I HAVE SOME TIPS. IN ADDITION TO ADDING LABELS, I WOULD ALSO SUGGEST ADDING ACCESS KEYS IN THE SAME WAY THAT WE HAVE ACCESS KEYS TO VARIOUS LINKS, ESPECIALLY BUTTONS AND RADIO BUTTONS. RADIO BUTTONS ARE THE ONE PART OF AN HTML FORM THAT ARE THE LEAST LIKELY TO BE USABLE ACROSS PLATFORMS. I KNOW THAT I HAVE TRIED MY DARNEDEST TO MAKE ACCESSIBLE RADIO BUTTONS AND STILL THOSE USING MOZILLA AND OPERA CANNOT ACCESS THEM, AND I DON'T KNOW WHY. I'VE DONE ALL THE THINGS I KNOW TO DO BUT THEY ARE VERY PROBLEMATIC, SO IF YOU ADD ALT KEYS TO THOSE TO ALLOW THE USER TO JUMP RIGHT INTO THAT RADIO BUTTON, THAT'S ONE HELP BECAUSE IT PUTS THE FOCUS OF THE CURSOR ON THAT BUTTON AND ONE OF THE PROBLEMS WITH RADIO BUTTONS IS GETTING THAT FOCUS, OKAY. ALTERNATELY, IS CREATING A TAB ORDER THAT ADDS A TAB INDEX ATTRIBUTE TO EVERY ELEMENT OF YOUR FORM, WHICH THEN ENSURES THAT IF I'M USING THE TAB TO GET THROUGH MY FORM ELEMENTS, IT WILL HIT EVERY SINGLE ELEMENT AGAIN ON MY FORM, OKAY. SO IT SORT OF RE-ENSURES THAT I CAN GET THERE USING THE KEYBOARD. THOSE ARE JUST SOME TIPS THAT I KNOW TO HELP MAKE THOSE FORMS ACCESSIBLE. NUMBER 15; THIS IS THE ONE THAT MOST PROBABLY YOUR SITES DON'T HAVE. IT'S NOT USED VERY FREQUENTLY ON CAMPUS, AND THAT IS THE SKIP NAVIGATION LINK. IT'S ALSO THE SIMPLEST THING THAT YOU CAN ADD TO YOUR SITE IN TERMS OF ACCESSIBILITY. IT'S VERY EASY TO DO, AND WHAT IT ESSENTIALLY MEANS IS IF YOU'RE LOOKING AT THIS DEPARTMENT OF MICROBIOLOGY PAGE THAT HAS A LOT OF LINKS AT THE VERY TOP OF THE PAGE. IT HAS, I BELIEVE THERE ARE OVER 10 LINKS AT THE TOP OF THE PAGE BEFORE IT GETS TO THE FIRST CONTENT LINE WHICH SAYS, "WHAT'S NEW." IF I'M USING A SCREEN READER TO READ THIS PAGE, THE SCREEN READER'S GONNA READ TOP DOWN, LEFT TO RIGHT, SO WHAT'S GONNA HAPPEN IS EVERY TIME I COME TO THIS WHAT'S NEW PAGE-- I WAS THERE YESTERDAY, I WANT TO SEE WHAT'S NEW TODAY, I WANNA COME BACK AGAIN TOMORROW TO SEE WHAT'S NEW, IT'S GONNA READ ME OFF ALL THAT HEADER INFORMATION AND, IN FACT, IT'S GONNA START BY READING ME THE GRAPHIC OF THE OSU SYMBOL THAT APPEARS ON THE TOP LEFT. THEN IT'S GONNA READ ME THE GRAPHIC ICON OF THE DEPARTMENT OF MICROBIOLOGY, THEIR LOGO. THEN IT'S GONNA READ ME ABOUT US; LINK WHAT'S NEW; LINK FACULTY BOX; LINK UNDERGRADUATE PROGRAMS; LINK GRADUATE PROGRAMS; LINK DIRECTORY; LINK APPLICATION AND ADMISSIONS; LINK HOME PAGE; LINK CONTACT US; LINK RESEARCH OPPORTUNITIES; LINK FACILITIES AND RESOURCES; LINK COURSES, SEMINARS, AND SCHEDULES; LINKS AN INFORMATION LINK; LINK COLUMBUS AREA INFORMATION; AND FINALLY, WHAT'S NEW, OKAY. SO WHAT I WANNA DO INSTEAD IS I WANNA OFFER THEM AN IN-PAGE LINK, A BOOKMARK, OR AN ANCHOR AT THE TOP OF THAT PAGE AS CLOSE TO THE BODY AS POSSIBLE. IT CAN BE VISIBLE OR INVISIBLE AND YOU CAN STYLE IT WITH STYLE SHEETS SO THAT NO ONE ELSE CAN SEE IT. AND IT ESSENTIALLY SAYS, "SKIP ALL THIS NAVIGATION AT THE TOP AND GO RIGHT TO THE CONTENT," AND THEN THE ANCHOR IS PLACED RIGHT AT THE FIRST LETTER OF CONTENT THAT APPEARS ON THE PAGE. SO I GET TO THAT PAGE, I HIT ENTER TO ENGAGE THAT SKIP NAVIGATION LINK. IT DROPS ME RIGHT DOWN AND STARTS READING OFF WHAT'S NEW. OKAY, I DON'T HAVE TO HEAR ALL THOSE LINKS BEING READ EVERY TIME I RETURN TO THAT PAGE OR ESPECIALLY AS I'M MOVING THROUGH YOUR SITE AND EVERY PAGE IN YOUR SITE HAS THAT SAME REPEATED INFORMATION AT THE TOP AND IT READS IT OVER AND OVER AND OVER AGAIN EVERY TIME I WALK INTO A PAGE THAT YOU HAVE, OKAY. SO YOU WANNA PUT IT AS CLOSE TO THE BODY TAG AS POSSIBLE. THE TYPICAL OR THE STANDARD TEXT FOR THAT IS THE LINK TEXT SAYS, "SKIP NAVIGATION" OR "SKIP NAV," OKAY. YOU DON'T HAVE TO. SOME PEOPLE SAY, "JUMP TO CONTENT, JUMP OVER NAVIGATION," WHATEVER, BUT JUST KNOW THAT USERS OF ASSISTIVE TECHNOLOGY ARE USED TO WHAT IT MEANS TO HEAR SKIP NAVIGATION OR SKIP NAV. YES? >> THE MINUTE THAT THEY HIT THAT THEY BASICALLY SKIP THOSE 10 LINKS AND DROP DIRECTLY TO THE BOOKMARK-- >> THAT'S-- >> --WHICH IS THE LAST THING THAT WAS UP. >> THAT'S CORRECT. SO THAT WHEN THEY HIT ENTER AND ENGAGE THAT LINK, IT DROPS THEM TO THE FIRST LETTER OF CONTENT AND THE SCREENER STARTS READING FROM THAT POINT ON. >> DOES THAT ALSO FUNCTION WITH IF YOU HAVE EITHER CSS OR LAYOUT TABLE WITH LEFT-HAND NAVIGATION? WILL IT IGNORE ALL THAT ALSO? >> YEAH, THE IDEA OF THE SKIP NAVIGATION IS TO SKIP ANY REPEATED NAVIGATION THAT APPEARS BEFORE THE CONTENT, SO IF IT'S ON THE LEFT-HAND SIDE, IF IT'S ON THE TOP OF A PAGE, THEN, YES, YOU WANNA USE A SKIP NAVIGATION TO GET YOU TO THE CONTENT. IN FACT, ON MY PERSONAL SITE, MY NAVIGATION IS ON THE RIGHT-HAND SIDE SO I HAVE A SKIP TO NAVIGATION SO THAT YOU DON'T HAVE TO READ THE WHOLE CONTENT OF THE PAGE IN ORDER TO GET TO MY NAVIGATION IF YOU WANNA MOVE AROUND IN THE SITE. SO IT CAN WORK A NUMBER OF DIFFERENT WAYS BUT MOST IMPORTANT IS WE WANT PEOPLE TO BE ABLE TO READ THE MOST CHANGING AND NEW STUFF AS QUICKLY AS POSSIBLE. ALL RIGHT, NUMBER 16, TIMED RESPONSE. IF YOU HAVE SOMETHING THAT REQUIRES A TIMED RESPONSE, YOU NEED TO GIVE THE OPTION OF MORE TIME AND THE MOST COMMON ERROR OF THIS IS THE AUTOMATIC REFRESH. PEOPLE PUT THE AUTOMATIC REFRESH THAT FORWARDS YOU. OUR LINK HAS CHANGED. OUR NEW HOME PAGE IS HERE. YOU WILL GO THERE AUTOMATICALLY IN ONE-HALF OF A MILLISECOND AND YOU'RE LUCKY IF YOU EVER GET TO READ THAT PAGE, RIGHT. OR IT'S GONNA TAKE YOU THERE IN, YOU KNOW, 20 SECONDS. YOU ARE VIOLATING THE STANDARD IF YOU HAVE THAT AUTOMATIC REFRESH, UNLESS ON THAT PAGE, YOU SAY, "GIVE ME MORE TIME," AND THEY CAN SAY, YOU KNOW, WAIT ANOTHER 20 SECONDS, WAIT ANOTHER 10 SECONDS. I HAVEN'T READ ALL THIS INFORMATION YET, OKAY, SO YOU JUST WANNA GIVE THE OFFER OF MORE TIME AVAILABLE OR ALTERNATELY JUST USE A STATIC PAGE THAT SAYS, "OUR PAGE IS LINKED OR OUR PAGE HAS MOVED. CLICK ON THIS NEW LINK TO GET TO OUR NEW LOCATION," OKAY. I APPRECIATE THOSE MYSELF BECAUSE I LIKE TO KNOW WHEN THINGS ARE GONNA CHANGE ON ME. ONE CAUTION FOR THOSE WHO HAVE FORMS OR PROCESSES GOING ON, I NOTICED THIS WHEN I WENT TO TICKETMASTER THE OTHER DAY; AS I GOT TO THE END OF MY TRANSACTION, IT SAYS, "YOU NOW HAVE THREE MINUTES TO COMPLETE THIS TRANSACTION OR YOUR SEATS WILL BE GIVEN UP," AND I HAVE TO TELL YOU I'M A VERY FAST TYPER, BUT SUDDENLY, I WAS MAKING SO MANY MISTAKES JUST BECAUSE I KNEW THAT I HAD THIS LIMITED AMOUNT OF TIME. IT PUT A LOT OF PRESSURE ON ME AND I THOUGHT, "HOW LONG IS THREE MINUTES? HOW LONG DOES IT TAKE ME TO FILL OUT AN ORDER FORM?" SO IN REALITY, IF YOU HAVE ANYTHING LIKE THAT, MOST OF THE TIME IT'S, YOU KNOW, IF YOU HAVEN'T-- YOUR SERVER WILL TIME OUT AFTER 30 MINUTES. IF YOU HAVEN'T MADE ANY CHANGES OR YOU HAVEN'T SUBMITTED THIS PAGE, THE SERVER TIMES OUT AND ESSENTIALLY THEY GET A BLANK PAGE. IF THAT'S HAPPENING, YOU WANNA GIVE THEM A WAY TO ASK FOR MORE TIME. YOU WANNA INDICATE, "YOU KNOW WHAT? OUR SERVER TIMES OUT IN 30 MINUTES." IF YOU HAVEN'T COMPLETED THIS FORM BY THEN, YOU NEED TO ASK FOR MORE TIME, OKAY. ALL RIGHT, 17, POP-UP WINDOWS. IF YOU USE POP-UP WINDOWS, IF YOU USE POP-UP WINDOWS, YOU JUST NEED TO TELL PEOPLE WHEN IT'S GONNA HAPPEN. AND THE REASON IS THAT WITH ASSISTIVE TECHNOLOGY WITH THE SCREEN READER, OFTEN TIMES IT WON'T TELL YOU THAT A NEW WINDOW HAS OPENED. YOU HAVE TO MAKE THE SETTINGS CLEARER IN YOUR SET-UP OF YOUR SCREEN READER SO, FOR INSTANCE, THE ADA COORDINATOR'S SITE USED TO ALWAYS OPEN OUR RESOURCES PAGE IN NEW WINDOWS, AND WHAT WOULD HAPPEN-- WHAT HAPPENED IS WE HAD A PROFESSOR WHO WAS USING A SCREEN READER TELL US THAT ALL OF OUR LINKS WERE BROKEN. NONE OF OUR LINKS WORKED. WELL THE REASON IS THAT WHEN HE CLICKED ON IT, THE NEW WINDOW WOULD OPEN BEHIND HIS CURRENT WINDOW. THE FOCUS WOULD REMAIN ON THE CURRENT WINDOW, AND HE HAD NO IDEA THAT THAT LINK WAS OPENING BEHIND THERE, OKAY, SCREEN READER NEVER INFORMED HIM OF THAT. SO WE NEEDED TO FIND A BETTER WAY TO TELL HIM, YOU KNOW WHAT? THIS IS GONNA OPEN IN A NEW WINDOW. YOU'RE GONNA HAVE TO CHANGE THE FOCUS OF YOUR CURSOR IN SOME WAY. SO YOU CAN DO IT IN ANY NUMBER OF WAYS. YOU CAN SAY, "NEW WINDOW" AFTER EACH LINK, NW, STAR, WHATEVER YOU WANNA DO, BUT MAKE SURE THAT YOU'RE CONSISTENT ACROSS YOUR SITE. OUR TIP IS, AVOID NEW WINDOWS. THEY'RE BASED PRIMARILY ON A BUSINESS MODEL WHICH SAYS, "WE DON'T WANT YOU TO LEAVE OUR SITE UNTIL YOU BOUGHT SOMETHING," RIGHT. SO WE'RE GONNA OFFER YOU OTHER LINKS TO OTHER INFORMATION BUT WE WANT YOU TO COME BACK HERE AND THE WAY TO DO THAT IS TO MAKE SURE OUR SITE STAYS OPEN BEHIND THERE ALL THE TIME. WELL, AT THE OSU, IT'S NOT REALLY THAT CRITICAL THAT YOU DON'T COME BACK TO THE WEB ACCESSIBILITY CENTER. IF YOU GOT OTHER THINGS TO DO, YOU GOT OTHER THINGS TO DO AND WE HOPE THAT YOU'LL KNOW HOW TO USE YOUR BACK BUTTON IF YOU REALLY NEED TO. BUT I HAVE BEEN APPROACHED BY SOME PEOPLE WHO TOLD THAT LEGAL, OR FOR ISSUES OF COPYRIGHT, THEY'RE OPENING NEW WINDOWS BECAUSE THEY WANNA MAKE CLEAR THAT THE INFORMATION THAT THEY'RE LINKING TO IS NOT CREATED BY OR OWNED BY OR ASSOCIATED WITH THE OHIO STATE UNIVERSITY IN ANY WAY. CERTAINLY, SOME SCIENCE SITES THAT SAY, "OH, LOOK AT THIS INCREDIBLE, INTERESTING RESEARCH BUT WE DIDN'T DO IT." THEY WANNA MAKE CLEAR THAT THAT'S NOT ASSOCIATED WITH US SO THEY OPEN THAT IN A NEW WINDOW. THERE ARE SEVERAL WAYS TO DO THAT. ONE IS TO INDICATE THAT IT'S A NEW WINDOW. I'VE ALSO SEEN FROM THE GOVERNMENT SITES IF YOU GO TO SECTION 508 AND THEN TRY AND LEAVE THAT SITE, IT'LL POP UP WITH A LITTLE BOX, A LITTLE INFORMATION BOX THAT SAYS, "YOU'RE LEAVING, BYE. GO HAVE FUN, BUT THAT'S NOT OUR STUFF," OKAY. SO THAT'S A WAY TO DO IT AS WELL IS TO SORT OF TAKE PEOPLE THROUGH A THROUGH PAGE THAT THEN TAKES THEM TO THE EXTERNAL SITE, OKAY. EIGHTEEN, WE'RE ALMOST THERE. LINK TEXT. YOU WANNA IDENTIFY WHERE A LINK GOES TO, OKAY, WANNA IDENTIFY WHERE A LINK GOES TO. THIS IS NOT A SUCCESSFUL LINK TEXT. CLICK HERE, CLICK HERE, CLICK HERE, CLICK HERE AND THAT COULD BE A CLICK HERE OF THE FIRST PARAGRAPH, A CLICK HERE IN THE THIRD PARAGRAPH, A CLICK HERE IN THE FIFTH PARAGRAPH. WHAT HAPPENS IS AS A USER OF ASSISTIVE TECHNOLOGY, I POP UP A LITTLE POP-UP BOX THAT GIVES ME A LIST OF ALL THE LINKS ON THAT PAGE AND I SCROLL THROUGH THAT LIST. IF YOUR LINK TEXT SAYS, "HERE" OR "CLICK HERE," THAT'S ALL I GET, AND I DON'T KNOW HOW, WHAT LINK GOES WHERE SO I WANT MORE DESCRIPTIVE LINK TEXT. I WANT IT TO SAY, "THIS LINK GOES TO THE OSU HOME PAGE. THIS LINK GOES TO COURSE DESCRIPTIONS," AND IF I HAVE MULTIPLE ITEMS THAT ARE REPEATED, YOU CAN NUMBER THEM, ITEM ONE, ITEM TWO, ITEM THREE. JUST GIVE THEM SOME INDICATION THAT THIS ONE IS DIFFERENT FROM THE OTHER ONE. AND FINALLY, IF ANY OF THE LINKS LEAD TO SOMETHING THAT REQUIRES A PLUG-IN, I ALSO WANNA TELL PEOPLE THAT. REMEMBER THE PDF. WE WANNA TELL THEM THAT WE'RE OPENING A PDF DOCUMENT WITH THAT LINK, SO IN THIS CASE IF YOU CLICK ON VIEW MY ARTICLE, YOU'RE OPENING MY PDF FILE. IF YOU CLICK ON LISTEN TO MY RANT, YOU'RE OPENING MY MP3 FILE AND I WANNA LET YOU KNOW THAT, OKAY. ALL RIGHT, FINAL ONE, ALTERNATE VERSIONS. SOME PEOPLE HAVE THE IDEA THAT, BOY, WE'RE JUST NOT GONNA DEAL WITH ALL THIS ACCESSIBILITY ISSUES. THIS IS TOO HARD. IT'S GONNA COST TOO MUCH. WE DON'T HAVE THE TIME. WE'LL JUST MAKE A COMPLETELY TEXT-ONLY SITE AND THAT'LL BE THE ANSWER TO ALL OF OUR PROBLEMS. UNFORTUNATELY, THE STANDARDS SAY, "NO, CAN'T DO THAT." THE ALTERNATE SITE SHOULD BE A LAST RESORT, OKAY. THE STANDARD SAYS, "YOU CAN ONLY DO THIS IF YOU CANNOT MAKE YOUR PAGES OTHERWISE ACCESSIBLE," AND THERE'S SEVERAL REASONS WHY THAT'S TRUE. ONE OF THE ONES IS THAT TEXT-ONLY SITES TEND TO FALL OUT OF DATE MUCH QUICKER THAN ANYTHING ELSE SO OFTEN TIMES YOU HAVE A VERY NICE ACCESSIBLE TEXT-ONLY SITE BUT IT DOESN'T HAVE ANY GOOD INFORMATION IN IT. BUT ALTERNATELY, IT'S JUST PROBLEMATIC TO TELL SOME PEOPLE THAT YOU HAVE TO GO OVER TO THIS SITE AND THE REST OF YOU CAN USE OUR NICE, PRETTY SITE, AND THERE ARE, IN MOST CASES, WAYS TO MAKE THAT NICE, PRETTY SITE ACCESSIBLE TO EVERYBODY, OKAY. SO IF YOU'RE GONNA USE AN ALTERNATE SITE, IT IS VIABLE TO SAY, "WELL, OUR PDF ARCHIVE IS GONNA HAVE AN ALTERNATE SITE," OKAY. NOT OUR WHOLE SITE, NOT OUR HOME PAGE, NOT ALL OUR MAIN SECTIONS, BUT THAT ARCHIVE SECTION THAT'S SO FULL OF PDFs, THOSE WE'RE GONNA OFFER IN TEXT-ONLY AS WELL. THAT'S ACCEPTABLE, SO THINK OF IT AS SMALL SOLUTIONS TO SMALL PROBLEMS. YOU HAVE CERTAIN TEXTS, CERTAIN PAGES THAT CAN'T BE MADE ACCESSIBLE. THOSE PAGES CAN BE OFFERED AS TEXT-ONLY, BUT YOUR ENTIRE SITE DOESN'T HAVE TO BE, OKAY. IF YOU ARE GONNA USE A TEXT-ONLY SITE, THEN ONE OF THE REQUIREMENTS IS YOU HAVE TO HAVE A SYSTEM IN PLACE THAT SAYS, "IF YOU UPDATE THE PRIMARY SITE, THAT TEXT-ONLY SITE HAS TO BE UPDATED AS WELL." IN MOST CASES, THIS IS INTERPRETED AS A LINKED DATABASE, OKAY, SO I UPDATE THE CONTENT IN ONE PLACE. IT APPEARS IN BOTH PLACES UPDATED. I UPDATE IT ONE TIME. IT UPDATES BOTH SITES SIMULTANEOUSLY, BUT YOU CAN SPECIFY A SYSTEM THAT SAYS, "HERE'S HOW WE'RE GONNA MAKE SURE THAT THIS HAPPENS," BUT YOU JUST CAN'T SAY, "WELL, WE'LL UPDATE IT WHEN WE HAVE TIME, WHEN OUR WEB DESIGNERS CAN. THEY GET TO THAT AT THE END OF THE WEEK," WHATEVER, OKAY. YOU NEED TO HAVE IT HAPPENING AS CLOSE TO THE EXACT SAME MOMENT AS POSSIBLE. OKAY, SO WE HAVE THE WAC ONLINE GUIDE. IF YOU HAVE ANY MORE QUESTIONS THAT I CAN'T ANSWER TODAY OR YOU WANT SOME REMINDERS ABOUT THIS, IT'S OUR WEBSITE/STANDARDS AND IT GOES THROUGH ALL THESE STANDARDS IN DETAIL, OKAY. MORE RESOURCES FOR YOU, THOSE ARE ALSO IN YOUR HANDOUTS TODAY. CAN I ANSWER ANY QUESTIONS ABOUT THE STANDARDS? FAST AND FURIOUS WE WERE THROUGH THERE. YEAH? CAPTIONING PERFORMED BY RAPIDTEXT, INC. BURBANK, CA WWW.RAPIDTEXT.COM