Web Accessibility Tips (ADA for Websites)

Cover why it is important to make sure that you website meets ADA requirements, especially if you are doing business in the United States. Some companies have been sued by their customers because their customers could not access their website with a screen reader or other assistive technology.

Video Transcript

WHAT'S GOING ON GOOD PEOPLE THIS VIDEO WE'RE GOING TO DISCUSS WEB ACCESSIBILITY GUIDELINES AND TOOLS THAT YOU CAN CHECK YOUR WEBSITE WITH TO MAKE SURE THAT IT IS ACCESSIBLE BY THOSE WHO WANT TO ACCESS IT MY NAME IS KENNY ROBINSON AND I'M THE OWNER OF ROBINSON HANDY AND TECHNOLOGY SERVICES AND TODAY WE'RE TALKING TECHNOLOGY AS I MENTIONED IN THE OPENING SEGMENT SO WHAT IS WEB ACCESSIBILITY WEB ACCESSIBILITY IS SIMILAR TO OR IS CONSIDERED TO BE SIMILAR TO ADA OR THE AMERICANS WITH DISABILITY ACT SO FOR THOSE OF YOU THAT ARE NOT IN AMERICA THE WAY THINGS WORK THE ADA HAS CERTAIN REQUIREMENTS IN THERE THAT MAKE IT WHERE THAT PEOPLE WHO HAVE DISABILITIES SUCH AS THOSE WHO ARE IN WHEELCHAIRS OR YOU KNOW BLIND PEOPLE THERE ARE CERTAIN THINGS THAT ARE THERE ARE CERTAIN STANDARDS THAT HAVE TO BE MET WHEN DOING NEW PROJECTS LIKE CONSTRUCTION PROJECTS BUILDING SIDEWALKS LIKE A BRAND NEW BUILDING MUST HAVE AN ELEVATOR THAT WAY SOMEBODY IN A WHEELCHAIR CAN GO UP AND DOWN TO ACT AND ACCESS EACH FLOOR IN THE BUILDING ALSO FOR INSTANCE SIDEWALKS SO WHEN A NEW NEIGHBORHOOD IS BEING CONSTRUCTED THE SIDEWALKS HAVE TO BE A CERTAIN WIDTH I BELIEVE IS 36 INCHES I COULD BE WRONG ON THAT BUT IN ADDITION TO THAT LIKE WHEN YOU COME TO A STREET THERE'S USUALLY A RBLE STRIP OR SOMETHING OF THAT NATURE RIGHT BEFORE THE STREET AND THAT WAY PEOPLE WHO ARE BLIND KNOW THAT THEY'RE ABOUT TO APPROACH A STREET AND THAT BECAUSE THAT'S THERE THEY NOW KNOW OKAY LISTEN FOR TRAFFIC THOSE TYPE OF THINGS PROCEED WITH CAUTION BEFORE STEPPING OUT INTO THE STREET WEB ACCESSIBILITY STANDARDS ARE SIMILAR TO THAT IN NATURE MEANING THAT YOUR WEBSITE MUST BE COMPATIBLE TO WORK WITH LIKE A SCREEN READER SO THAT PEOPLE THAT ARE BLIND ARE ABLE TO STILL BE ABLE TO ACCESS YOUR WEBSITE AND BE ABLE TO DO ALL THE FUNCTIONS ON YOUR WEBSITE THAT A SIGHTED PERSON CAN BE ABLE TO DO AS WELL IF YOUR WEBSITE IS NOT COMPATIBLE WITH WEB ACCESSIBILITY GUIDELINES YOU DO PUT YOURSELF AND YOUR BUSINESS AT RISK FOR BEING SUED ONCE CASE IN PARTICULAR THAT I CAN RECALL AND I'LL LET YOU LOOK THAT UP LATER ON YOUR OWN TIME TO DO YOUR RESEARCH BUT THERE WAS A CASE WHERE A GENTLEMAN SUED FOOT LOCKER BECAUSE AND HE DIDN'T WANT ANY COMPENSATION OUT OF IT HE JUST WANTED THEM TO FIX THEIR WEBSITE BECAUSE HE WANTED TO BUY SOME SHOES THE PROBLEM WAS HE WAS BLIND AND HE HAD TO USE A SCREEN READER AND OTHER ASSISTIVE TOOLS TO BE ABLE TO NAVIGATE THE INTERNET PROBLEM WAS THE FOOT LOCKER WEBSITE WHILE IT WAS DESIGNED VISUALLY YOU KNOW WELL IT WAS NOT DESIGNED FOR PEOPLE WHO USE SCREEN READERS SO HE FILED THIS LAWSUIT MORE SO AND WITH THE INTENT AND HE EVEN SAID THIS YOU KNOW IN HIS TESTIMONY IF YOU WILL THAT HE FILED THE LAWSUIT IN ORDER FOR THEM TO FIX THEIR WEBSITE NOT BECAUSE OF THE FACT HE WAS TRYING TO GET MONEY OUT OF THEM AND ULTIMATELY DOES THAT LAWSUIT DID GET THEM TO FIX THEIR WEBSITE AND THERE HAVE BEEN SEVERAL OTHER WEBSITES THAT HAVE OR WHAT EXCUSE ME THERE HAVE BEEN SEVERAL OTHER COMPANIES THAT HAVE ALSO BEEN SUED BECAUSE THEIR WEBSITES ARE NOT COMPLIANT ALL RIGHT SO WE'RE GOING TO GO AHEAD AND SWITCH INTO THE COMPUTER SCREEN HERE AND WE'RE GOING TO COVER WELL HOW DO YOU FIND OUT WHETHER YOUR SITE IS ACCESSIBLE OR NOT SO ONE TOOL IS THE WEB ACCESSIBILITY EVALUATION TOOL YOU CAN DO JUST DO A SEARCH FOR IT OR I'LL PUT A LINK DOWN IN THE DESCRIPTION AS WELL SO YOU CAN CLICK THAT AND GET TO IT AND SO WHAT YOU HAVE TO DO IS YOU COME HERE YOU PUT YOUR WEB ADDRESS IN HERE SO I'M GOING TO PUT MY BUSINESS WEB ADDRESS RST SERVICES.NET IN THE URL BAR AND WHAT THE THING IS IF YOU HAVE MULTIPLE PAGES ON YOUR WEBSITE YOU'LL HAVE TO DO THIS FOR EACH PAGE SO MY PRIMARILY MY WEBSITE HAS ONE MAIN PAGE AND THEN THERE'S A BUNCH OF OTHER BLOG POSTS SO I'LL GO BACK AND GO THROUGH THOSE OTHER PAGES BUT FOR DEMONSTRATION PURPOSES I'M ONLY GOING TO DO THE HOME PAGE AND SO WHAT YOU WILL GET HERE IS YOU'LL GET A VIEW OF THE WEBSITE THAT YOU ENTERED AS WELL AS A REPORT AND SO THIS REPORT BASICALLY TELLS YOU WHAT NEEDS TO BE FIXED WHAT IS OKAY AND THE OTHER THINGS IN HERE THAT IS CONSIDERED TO BE ACCEPTABLE AND SO FORTH AND SO AS YOU SEE I HAVE ONE ERROR I HAVE ONE I HAVE THREE CONTRAST ERRORS FIVE ALERTS 15 FEATURES 34 STRUCTURAL ELEMENTS AND EIGHT ARIA ELEMENTS ALL RIGHT SO IF WE GO OVER TO THE DETAILS SO WE HAVE ONE THE FIRST ONE WILL BE THE ERRORS AND THE ERRORS ARE THE THINGS THAT YOU REALLY REALLY WANT TO FIX WHAT REGARDLESS IF THEY'RE JUST A REGULAR GENERAL ERROR LIKE YOU SEE HERE OR A CONTRAST ERROR LIKE IS MENTIONED HERE AND SO IF YOU CLICK ON EACH OF THESE ITEMS IT WILL EXPLAIN WHAT IT IS SO THIS ICON OR ELEMENT IT APPLIES VISUALS IT APPLIES TO IS VISUALLY HIDDEN IN YOUR PAGE DISABLE STYLES TO VIEW IT AND USUALLY IT WILL POINT IT OUT BUT IS NOT SHOWING IT AND SO I HAVE A FORM IN HERE I THINK IT MAY BE THIS FORM DOWN HERE AT THE BOTTOM THAT IT MIGHT BE COMPLAINING ABOUT NOT 100 SURE THE NEXT ONE IS THE THREE CONTRAST ERRORS SO IF YOU CLICK ON THIS IF IT IF IT SHOWS YOU SOMETIMES IF YOU CLICK ON IT IT'LL SHOW YOU WHERE IT'S TALKING ABOUT OTHER TIMES IT DOESN'T BUT AS YOU SEE HERE SO IT'S JPING AND IT'S HIGHLIGHTING THIS TEXT HERE SAYING THAT THERE'S LOW CONTRAST AND THEN IF YOU CLICK THE INFORMATION ICON IT EXPLAINS WHY THIS IS WHAT IT IS AND SUGGESTIONS ON HOW TO FIX IT AND SO BASICALLY WHEN YOU'RE DOING TEXT OVER AN IMAGE IT NEEDS TO HAVE SOME KIND OF CONTRAST SO THAT IS EASY TO READ ALL RIGHT THE NEXT ONE IS I HAVE FIVE ALERTS SO ONE OF THEM IS A SKIPPED HEADING LEVEL NOW THIS IS NOT AN ERROR THIS IS AN ALERT DEPENDING ON HOW YOU STRUCTURE YOUR PAGE YOU WILL GET THESE ALERTS LIKE I HAVE H4 TAGS DOWN HERE AT THE FOOTER AND I'M OKAY WITH H4 IN THE FOOTER BUT IT SAYS HEY YOU'RE SKIPPING TAGS YOU PROBABLY SHOULDN'T DO THAT SO YOU CAN FIX IT BUT AGAIN IT'S AN ALERT NOT AN ERROR SO IT'S NOT AS BIG OF A DEAL NOW WHEN IT COMES TO A SCREEN READER A SCREEN READER MIGHT MISINTERPRET THAT AND YOU KNOW YOU MIGHT HAVE SOME ISSUES WITH THAT ALL RIGHT SO THE NEXT ONE IS REDUNDANT LINKS

NOT BIG OF A DEAL I HAVE A YOUTUBE VIDEO HERE IS NOT HIGHLIGHTING IT BUT IT DOES POINT IT OUT SO AGAIN BECAUSE IT'S AN ALERT IT'S NOT A BIG OF A DEAL THE NEXT THE 15 FEATURES SO I HAVE ALT TEXT SO ON YOUR IMAGES YOU NEED TO MAKE SURE THAT YOU USE THE ALT TEXT IN THE PAST THE ALT TEXT WOULD ACTUALLY SHOW UP WHEN YOU MOUSE OVER IT IT DOESN'T DO THAT IN THE BROWSERS TODAY HOWEVER THAT ALT TEXT IS STILL IMPORTANT BECAUSE PEOPLE WHO HAVE SCREEN READERS NEED TO BE ABLE TO KNOW WHAT THAT IMAGE IS AND THAT SCREEN READER DOESN'T KNOW WHAT THAT IMAGE IS UNLESS YOU PUT THE ALT TEXT THERE SO EVERY IMAGE SHOULD HAVE ALT TEXT ALL RIGHT NEXT SO WE HAVE A LINKED IMAGE WITH ALT TEXT SO SIMILAR TO JUST A PLAIN IMAGE WITH ALT TEXT BUT THIS IS WITH A LINK SO THAT IS GOOD WE HAVE A FOR WITH A LABEL AND THAT'S WHAT THIS EMAIL ADDRESS FIELD IS HERE AND SO YOU DON'T WANT THE LABEL INSIDE THE FIELD THE REASON BEING IS IF YOU TYPE IN THE FIELD THE LABEL GOES AWAY OR THE PLACEHOLDER ACTUALLY GOES AWAY AND THAT IS A BIG NO-NO BECAUSE THEN YOU HAVE TO DELETE THE CONTENTS OF THAT FIELD IN ORDER TO SEE WHAT GOES IN THAT FIELD BECAUSE THAT'S THE ONLY WAY THE PLACEHOLDER SHOWS UP SO ALWAYS USE A LABEL AND I ALSO HAVE THE LANGUAGE SPECIFIED IN THE HTML OF THE PAGE AND AS DEFINED IN THE TOP IF I GO TO MY SOURCE CODE HERE I BELIEVE I HAVE IT IN BASE HERE WE GO AND SO HERE WE AT THE TOP OF THE PAGE IN THE OPENING HTML TAGS IT HAS HTML LANGUAGE ENGLISH AND THIS PROBABLY SHOULD BE EN UNDERSCORE US SINCE I AM IN THE UNITED STATES THERE'S ALSO ENGB WHICH IS GREAT BRITAIN OR BRITISH ENGLISH SO YOU PROBABLY WANT TO SPECIFY THE COUNTRY AS WELL AS THAT LANGUAGE THERE SO I'M GONNA CORRECT THAT AND THEN MAKE THIS UPDATE ALL RIGHT NEXT WE HAVE THE STRUCTURAL ELEMENTS SO WE HAVE THE HEADINGS SO I HAVE A H1 HEADING EACH PAGE SHOULD HAVE AN H1 HEADING IN YOUR WEBSITES AND THE H1 HEADING IS BASICALLY THE TOP LEVEL HEADING IDEALLY YOU ONLY HAVE ONE H1 HEADING AND THEN EVERYTHING ELSE IS EITHER H2 OR 8 H2 THROUGH H6 AND THAT'S WHAT YOU SEE HERE AND SO AS YOU SEE I HAVE SEVERAL H2S THAT DENOTE VARIOUS SECTIONS OF THE PAGE BECAUSE THIS IS A SINGLE PAGE WEBSITE AND SO THE H2S DIVIDE THAT THOSE SMALLER SECTIONS OR THOSE SUBSECTIONS UP FROM THE ENTIRE PAGE THIS ALSO HELPS IN SEO I'M NOT GOING TO GET INTO SEO IN THIS VIDEO BUT THAT PLAYS A FACTOR INTO THAT WE ALSO HAVE HEADINGS ORDER LISTS ON ORDER LISTS AND VARIOUS OTHER ELEMENTS HERE THAT ARE CLEARLY DEFINED AND THAT IT PICKED UP ON AND THEN WE HAVE THE ARIA TAGS AND SO WHAT IS R IS A ROLE STATE OR PROPERTY IS PRESENT IT HELPS PROVIDE SOME ENHANCED INFORMATION WITH IT AND WHAT TO DO I'M NOT GOING TO READ ALL THAT IF YOU NEED TO KNOW THIS INFORMATION PUT YOUR WEBSITE IN OR YOU CAN PUT MY WEBSITE IN AGAIN AND LOOK AT THIS AND READ IT OVER THERE'S ADDITIONAL INFORMATION SO IF YOU WANT YOU REALLY WANT TO PAY ATTENTION TO THE STRUCTURE OF YOUR WEB PAGE BECAUSE OF THE FACT ESSIE IT DOES PLAY A PART INTO SEO BUT IT ALSO PLAYS A PART INTO THOSE SCREEN READERS AS I MENTIONED BEFORE SCREEN READERS ARE HEAVY IN SEO EXCUSE ME SCREEN READERS ARE HEAVILY USED AND IF THAT STRUCTURE OF THAT PAGE IS NOT WHAT YOU THINK IT SHOULD BE OR WHAT IT IS THEN IT CAN BE VERY CONFUSING TO THOSE THAT USE SCREEN READERS AS THEY'RE NAVIGATING THE PAGE THEY'RE LIKE WELL WE'VE GOT AN H3 AND THEN ALL OF A SUDDEN IT JPS TO AN H1 IS CONFUSING BECAUSE THEN YOU THINK OKAY H3 IS PROBABLY AT THE BOTTOM OF THE PAGE H1 IS NORMALLY AT THE TOP OR VERY CLOSE TO THE TOP OF THE PAGE SO MAKE SURE YOU'RE TAKING NOTE TO THAT STRUCTURE OF YOUR PAGE WHEN YOU'RE DESIGNING THINGS ALL RIGHT SO THAT COVERS THIS OH ONE OTHER PART SO YOU HAVE THE CONTRAST RATIO IDEALLY YOU WANT THIS RATIO TO BE AS BIG AS POSSIBLE HOWEVER IF YOU DON'T HAVE IT AS BIG AS POSSIBLE YOU KNOW YOU CAN TWEAK IT HERE AS YOU SEE THE THE GREATER THE RATIO THE EASIER IT IS TO SEE MINE IS SOMEWHERE IN HERE LET'S SEE LET ME RUN IT BACK AGAIN ALL RIGHT SO IF WE COME BACK TO CONTRAST AH IT DIDN'T I THINK MINE WAS SOMEWHERE IN LIKE THE 1.3 WHICH IT SAYS THAT ALL OF THESE ARE FAILING BUT I THINK IT DEPENDS ON WHERE ON THE PAGE THAT IS LOOKING AT THAT LET'S SEE IF I CAN RUN THIS AGAIN AND GET IT BACK TO YOUR PREVIOUS VALUES ALL RIGHT SO IT'S LOOKING AT CERTAIN ELEMENTS ON THE PAGE I THINK THAT MAY BE WITH IT ALL RIGHT SO IF I CLICK THIS ONE THERE WE GO ALL RIGHT SO THE TEXT HERE HAS A 1.37 TO 1 RATIO AND THAT CONTRAST IS A FAILING RATIO GRANTED IT IS ON BLACK TEXT SO IF WE ACTUALLY MOVE THIS HERE WELL IT'S NOT A BLACK TEXT IT'S VERY DARK IN NATURE IT'S PROBABLY MORE OF A SIX OR WHATNOT

SO THAT'S ANOTHER THING YOU WANT TO KEEP IN MIND IS THE CONTRAST OF YOUR COLORS A LOT OF TIMES SOME PEOPLE WILL HAVE IN THAT I'VE ACTUALLY SEEN THIS WHERE THEY PUT TWO BRIGHT OF COLORS ON TOP OF EACH OTHER SO LIKE THE BACKGROUND IS LIKE A LIME GREEN AND THEN THE TEXT IS LIKE A PEACH COLOR AND SO YOU CAN'T SEE IT UNLESS YOU SELECT ALL ON THE PAGE AND TO BE HONEST WITH YOU NOBODY'S GOING TO WANT TO READ A WEBSITE THAT'S SET UP IN THAT MANNER ALL RIGHT SO THAT COVERS WEB ACCESSIBILITY AT A HIGH LEVEL IF YOU HAVE QUESTIONS ABOUT WEB ACCESSIBILITY OR YOU NEED SOME HELP WITH WEB ACCESSIBILITY ON YOUR WEBSITE FEEL FREE TO DROP A COMMENT DOWN BELOW ALSO HIT UP HIT ME UP ON MY WEBSITE RHTSERVICES.NET ROBINSON HANDY AND TECHNOLOGY SERVICES UNTIL NEXT TIME PEACE OUT