Designing & Creating Accessible Web Pages
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Alternative Title |
| |
| Title of Series | ||
| Number of Parts | 163 | |
| Author | ||
| License | CC Attribution - NonCommercial - ShareAlike 3.0 Unported: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal and non-commercial purpose as long as the work is attributed to the author in the manner specified by the author or licensor and the work or content is shared also in adapted form only under the conditions of this | |
| Identifiers | 10.5446/50467 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
|
00:00
Web pageWebsiteSoftware developerComputerMachine visionSpectrum (functional analysis)Sound effectBit rateOnline helpPoint (geometry)NumberStatisticsSoftwareInternetworkingReal numberWebsiteBitMultiplication signElectric generatorVisualization (computer graphics)Type theoryCategory of beingAttribute grammarGoogolEmailGoodness of fitSpectrum (functional analysis)Coma BerenicesHypermediaComputer-assisted translationData managementMathematicsDifferent (Kate Ryan album)ArmContent (media)MassMobile appMachine visionQuicksortVideoconferencingLink (knot theory)Web pageSound effectSystem callWeb applicationCodeCognitionSoftware developerCAN busYouTubeAutomatic differentiationExistenceComputer animation
09:24
Spectrum (functional analysis)Sound effectVisual systemCognitionWebsiteMobile appAnalogyMIDIMachine visionSensitivity analysisContrast (vision)Insertion lossCondition numberTouchscreenDisk read-and-write headKeyboard shortcutPattern recognitionSoftwareDisk read-and-write headDifferent (Kate Ryan album)1 (number)Speech synthesisWeb pageContrast (vision)CognitionBitGraph coloringElectronic mailing listSoftwareSocial classSoftware developerOnline helpNoise (electronics)TrailTouchscreenPoint (geometry)Visualization (computer graphics)Computer fontComputer hardwareSpectrum (functional analysis)MathematicsType theoryClient (computing)OracleWritingWebsitePattern recognitionKeyboard shortcutoutputPersonal digital assistantSingle-precision floating-point formatSession Initiation ProtocolPrice indexTorusEducational softwareMedical imagingProgrammschleifeComplete metric spaceSystem callCore dumpShape (magazine)Mobile appBlock (periodic table)Right angleSampling (statistics)Slide ruleCodeGoogolComputer animation
18:48
TouchscreenDisk read-and-write headKeyboard shortcutPattern recognitionSoftwareWeb browserLatent heatGraphical user interfaceContrast (vision)Sign (mathematics)Visual systemFreewareNewsletterPointer (computer programming)FingerprintContent (media)Field (computer science)Element (mathematics)Hill differential equationLink (knot theory)Web pageEntire functionMultiplication signForm (programming)Field (computer science)WebsiteCodeTouchscreenBitWeb 2.0Computer fontKeyboard shortcutSheaf (mathematics)SoftwareNumberGraphical user interfaceCausalityWeb browserContrast (vision)NavigationDefault (computer science)Semantics (computer science)Disk read-and-write headDemo (music)Process (computing)Sinc functionMedical imagingRoboticsMereologyDivision (mathematics)ConsistencyBelegleserRevision controlFigurate numberGame theoryOffice suiteMessage passingComa BerenicesGoogolCoefficient of determinationGraph coloringContent (media)Structural loadTask (computing)Pay televisionWindowHTTP cookieSoftware crackingWeightArithmetic meanSocial classOctahedronOffice <Programm>Metropolitan area networkComputer animation
28:12
Content (media)Contrast (vision)Field (computer science)Element (mathematics)Web pageSensitivity analysisNominal numberOracleNumbering schemeConsistencyData structureWebsiteContrast (vision)Multiplication signGraph coloringWebsiteException handlingUltraviolet photoelectron spectroscopy1 (number)Web pageLevel (video gaming)Sheaf (mathematics)Semantics (computer science)Content (media)Projective planeZuckerberg, MarkGreatest elementTouchscreenLink (knot theory)Right angleGoodness of fitBitSpeech synthesisStructural loadYouTubeJava appletWeb 2.0Uniform resource locatorCausalityMobile appFacebookWindowGreen's functionType theoryMaxima and minimaComputer programmingWordOracleError messageHand fanAreaMathematicsTheoryMereologyReading (process)Process (computing)Regular graphVisualization (computer graphics)Coma BerenicesXMLComputer animation
37:37
ChecklistSheaf (mathematics)Web pageBuildingReal numberUsabilitySoftwareConnectivity (graph theory)Data typeScripting languageMobile appObject-oriented programmingWritingPoint cloudVisual systemWebsiteComputer programmingCodeBroadcast programmingData miningWaveLink (knot theory)Keyboard shortcutoutputSound effectComputer-generated imageryJava appletContent (media)Execution unitService (economics)Menu (computing)Keyboard shortcutAutomatic differentiationMobile WeboutputCodeMedical imagingWeb pageOrder (biology)Sheaf (mathematics)Web 2.0WebsiteWaveBitMereologySlide ruleEmailTouchscreenInternetworkingExterior algebraPopup-FensterLink (knot theory)Online helpForm (programming)Error messageContrast (vision)Revision controlChecklistPlug-in (computing)Self-organizationMultiplication signSet (mathematics)1 (number)Uniform resource locatorAttribute grammarGraphical user interfaceDisk read-and-write headDifferent (Kate Ryan album)Goodness of fitComputer-assisted translationGame theoryGoogolData miningNear-ringHTTP cookieStructural loadReading (process)File formatScripting languageSoftware developerCartesian coordinate systemAreaWeightProcess (computing)Computer animation
47:01
PiHill differential equationService (economics)Menu (computing)Wechselseitige InformationIcosahedronClique-widthLink (knot theory)Computer-generated imageryContent (media)EmailGroup actionHyperlinkNavigationScripting languageBuffer overflowPosition operatorForm (programming)Web pageInternetworkingCommunications protocolSemantics (computer science)AerodynamicsMobile appAddress spaceState of matterFunction (mathematics)Element (mathematics)Characteristic polynomialInformationAtomic numberGUI widgetInterrupt <Informatik>Mechanism designError messageWeb browserSet (mathematics)Form (programming)State of matterLink (knot theory)TouchscreenWeb pageoutputElement (mathematics)Category of beingSemantics (computer science)Cartesian coordinate systemPersonal digital assistantContent (media)NavigationWebsiteCuboidStandard deviationWeb 2.0Attribute grammarPoint (geometry)Automatic differentiation1 (number)MereologyCondition numberFlagValidity (statistics)Server (computing)Sheaf (mathematics)Ultraviolet photoelectron spectroscopyDivision (mathematics)Goodness of fitBitPhase transitionOpen setMultiplication signInternetworkingExistenceCompilation albumFigurate numberSource codeMachine codeCommunications protocolSoftware testingElectronic visual displaySign (mathematics)AreaProcess (computing)Scripting languageReading (process)Game theoryHacker (term)MultilaterationJava appletStudent's t-testComputer animation
56:25
Interrupt <Informatik>Function (mathematics)Mechanism designError messageWeb browserForm (programming)Order (biology)Focus (optics)Link (knot theory)Field (computer science)Local GroupHypertextoutputSoftware developerWaveContent (media)Sheaf (mathematics)ChecklistContrast (vision)Standard deviationFormal languageMarkup languageVolumeComputer-generated imageryWeb pageFunctional programmingElement (mathematics)Frame problemAttribute grammarThermal expansionBlogUsabilityInformation securityValidity (statistics)Right angleField (computer science)MultiplicationComputer fontSemantics (computer science)Contrast (vision)Message passingOrder (biology)Application service providerComputer fileProjective planeGraph coloringWebsiteProgramming paradigmoutputFocus (optics)CuboidSlide ruleTouchscreenElectronic mailing listCASE <Informatik>Sampling (statistics)Dynamical systemWindowFreewareReal numberFlow separationForm (programming)Scripting languageLink (knot theory)Keyboard shortcutMachine codeWordMultiplication signUsabilityType theoryBlogSoftware developerAttribute grammarWeb 2.0Utility softwareElement (mathematics)Mobile appGroup actionChecklistBitDifferent (Kate Ryan album)1 (number)Order of magnitudeNewsletterChemical equationWeb pageContent (media)Goodness of fitNavigationMarkup languageDiscrete element methodPlanningGame theoryLine (geometry)AreaComputer animation
01:05:49
JSONXML
Transcript: English(auto-generated)
00:02
Afternoon. How we doing? Are there people way up there? It's like lights and things. I am Rachel Appel. Welcome. This is designing and creating accessible web pages. It applies to apps too. Basically any software with a UI, this stuff applies to, that you can do.
00:25
So for the next hour we'll just take a look at things you can do. And there are actually surprisingly easy things you can do to make your site more accessible and actually make it way better than what a lot of websites have out there.
00:41
Pretty much anything you need to know about me is at rachelappel.com So you can go there and it has links to like the decks to download and all that kind of good stuff. And there's my email as well so you have that too. This talk is, they always ask if you want it to be an introduction or advanced or intermediate.
01:04
And this is really none of the above. This is just things that you should be doing anyway in your web apps and native apps. Just practices that you should do. There's not really any Visual Studio code in here.
01:21
You'll see some code on the slides, but that's about it. And a lot of this is just things to do, not necessarily a whole lot of writing code. There's a little bit of code to do, but a lot of it's other things, other techniques we could use to work with accessibility. So we'll take a look at all that in the next hour.
01:42
So we'll look at content first, then accessible site layouts, accessible pages. Even though it's coding, we'll see a bit of HTML, but nothing terribly deep or probably not much new in HTML itself. There are a few attributes we'll see with ARIA, but not anything like terribly like way,
02:05
unless you've never done HTML before, it should not be way out of your ballpark. And a few tools at the end that we have to help us out. So here's the first reason why you want to have accessible software. So there's 7 billion people on this earth.
02:23
Of course, they're not all using the internet, but 1.4 billion of them can't, if they could access a website, can't necessarily access it in the same way that other people can or that the stereotypical user can.
02:41
That's a significant number. It comes out to about 20%. In the U.S. alone is 268 million out of 314 have some sort of accessible need. I see many people in this room that do as well, just by looking at you.
03:01
I could tell. I do too. I'll show you how in a minute. So there's a real business value to this. We tend to do things like think, hey, I'll develop for the masses. But this 20% is a small mass. That's a big number in business. Managers, like they see a number like 20% and a manager is all over that stuff.
03:24
So it's kind of a big number. It's not like you're missing out on 1% of people. And even if you were, you might still want to pick up that 1%. Considering how easy it is to integrate and implement accessible techniques,
03:41
I would go after it even for 1%. It is still a payoff to you to have that quality software. So that's one reason why. So 20% of the world, a lot of people. There are many popular websites. Even in the U.S., we have a lot of like Forbes, Business Insider.
04:02
Some of these popular viral type of sites. Or there's, you know, cats. Everybody loves cats. Cats are the internet. I think that's the whole reason why the internet exists. Is so we can see cat pictures, right? So people can't look at their cat pictures because the whole rest of,
04:20
because that's very important, cats. The whole rest of the website is blocking them from even being able to do things like that. Or Forbes sometimes will pop up. Annoying ads and make it in such a way they want to push an ad in front of your face, marketers. So when they do that, they literally stop you from actually being able to use the site.
04:44
So that those people involved and organizing the site are kind of shooting themselves in the foot by doing that. And to not making it accessible. And that's 20% that they're missing out on. So it's a lot of people. It's worth it.
05:01
And the payoff is like way out of proportion, like way great for what you do. You really want to reach all of your customers. As many as possible. Probably can't get every one when you're using something like a website. But we want to go for the broadest reach possible.
05:22
So here in the USA. And what accessibility is all about is making sure that you're non-stereotypical. Which would be considered someone not necessarily able-bodied, possibly. But something like auditory, vision, dexterity, any kind of difficulty.
05:43
And of course aging populations. We have a big, at least in the US, a big baby boomer population. So the slightly older folks in the generation ahead of me. I'm not that old yet. So those folks are starting to, you know, the aging process. I myself, right, text gets smaller.
06:03
Things are harder to see. My glasses get thicker all the time. So it's the same with everyone else. Things fall apart as you get a little bit older. An interesting stat. 35% of entrepreneurs, ironically the same people making some of these popular websites,
06:22
are actually dyslexic. And if you are dyslexic, it can be difficult to navigate and consume content from a non-accessible website. It's 20 in the UK. Forrester Research Group gave even more numbers. So I think we're getting the point here.
06:41
Lots of people need various pieces of help with being able to consume and deal with and work with your website. So sometimes it impairs them so badly they can't even work with the software at all, which is the opposite of what we want.
07:03
So I'm a little bit more of why. If we think about human traits, it runs across a spectrum. Some people have 20-20 vision and some people are blind. Those are those opposite spectrums. And then in between, we have folks like me with glasses getting progressively worse. Other people have other issues, maybe from low hearing to no hearing to very good.
07:27
So it's always about the spectrum. And if we at least capture the edges, we should be able to capture the spectrum within it. And all of this, it affects how people interact with your site, with everything else.
07:42
You get in a car, certain disabilities make it difficult to drive a car. Being blind kind of makes that impossible to drive a car. Google will solve that soon, I think. So we have for these four types. So this is our main categories of accessibility practices. Visual, so that's pretty clear, our eyes.
08:03
Auditory, so there's hearing issues. Text-based websites are not so bad with that, but we have YouTube and lots of video, more and more media and animations that people have to be able to deal with for hearing. And motor and dexterity, I even noticed myself.
08:23
I used to be a lot better at actually using a mouse. It's not like I haven't been using a mouse for, say, 30 years now. But just as I get older and I have carpal tunnel, so that thing that wrecks your hands, right, and my hand gets a little jerky and it gets a little harder to actually click on the right thing.
08:42
I will probably click on the wrong thing at least once in this talk. I used to not do that. My arm is just getting worse. So that would be a motor accessible problem or dexterity. And there's also cognitive. So we have various autisms, all kind of different things that can affect how people consume or interact with your software.
09:07
And it's more than just websites, even though I'm mostly focusing on websites here, but we have apps and devices. Everyone has a phone. And I don't know how many times I see people doing this with their phone because they can't see it.
09:21
And everyone's doing this because you can't hear anything. So the way we interact with things changes if we don't have that stereotypical able-bodiedness about us. So we want to make this better. We want to make it better for everybody. So if we want to make better websites and apps, we need to make better assistive technology.
09:46
Well, that's what a lot of people think. But when you actually ask people that have accessible practices, they said, we don't want better technology. And I'll show you the technology that they do have in a minute. We don't really want that.
10:00
We want you to make better websites. Imagine that. Isn't that what every user actually says? We want better websites. Hey, we're developers. We want to make better websites. So it's a win-win at that point. So the vast majority, 81.3%, said, you keep making these technologies to help us,
10:24
but if people just coded the websites a little better, we wouldn't necessarily need extra software to help us with software. So those kind of things. So that's the impact. A lot of people, some would like better technologies.
10:43
Some have to have certain devices to help them with technologies, but most would prefer just a better website. As far as visual differences, well, first off, somewhere in here is a slide. So who is actually using assistive technology yourself right now?
11:02
Because I see several of you who are. Not a hand? Anyone have glasses? There you go. You're using assistive technology. It's low technology, but it is an assistive technology. We have all these physical things that we do to ourselves, and if I didn't have them, stuff's blurry.
11:23
Not blurry, not. So I need this, no matter how good the software is, unless they're really going to blow the font up that big, I need a little bit of assistive technology. But what I would prefer is people to up the fonts on most things, and then I can see it much better.
11:42
So that's our first thing, and one of these accessible points are visual differences. So we have just poor sight, like me. Blindness, so you have to listen to everything. You can't see anything. So typing is not the worst problem there. We do have braille input. However, it is listening to things on websites,
12:02
text-to-speech for auditory disabilities. Oh, sorry. Then we have colorblindness, color contrast, which are two different things, as well as those auditory things that I just mentioned. So we have colorblindness, how you perceive a web page.
12:22
The shades and colors that you use may blend so closely together that many folks can't tell if you have a cancel and a submit button, and one is, say, green or blue or different shades, it may look almost the same, or it may look like it should be red when it's not.
12:43
So those kind of things we have to at least take into consideration. And then contrast, I think even if you don't have a visual accessibility issue, color contrast. If you have really light text on really light background, you just can't see it.
13:01
It's just too light. So that happens quite a bit, and you don't even need accessibility for that. That's just not good contrast. So we'll take a look at that color oracle in a minute. The next ones would be auditory differences. So you have low hearing. As you age, too, get a little bit of low hearing.
13:23
Complete deafness, right? That happens as well. So then they can only interact visually if they can do it that way. And then background noise. So I have this problem. If I'm at a party and people are talking, all that background noise makes it difficult to hear what's going on
13:41
when I'm talking sometimes. So I think I'm falling apart with all these classes and hearing and all that. Other ones, there's a whole list here. All these things. You have an injury that can create, like carpal tunnel, that can create a problem. Any kind of spinal cord, any traumatic injuries,
14:03
congenital injuries, or not really an injury, but you're born that way. Things like Lou Gehrig's. Even arthritis. Arthritis can be very crippling. There are so many things, and these are not, you know, they're common. Common enough that there's quite a few people out there
14:21
with at least one or two of these different things that we need to consider when we create software. Cognitive differences. A couple other ones here. So dyslexia I mentioned before. ADHD and ADD. That's a very popular cognitive impairment.
14:42
People are able to live successfully with both of these. However, it does make it a little more difficult. Even though you may be successful, there's still some difficulties. And if I can take that roadblock away from someone so that they can smoothly progress and use my software, that's what I want to do.
15:01
So I want to make it easier for that. So we have autism spectrum injuries, visual stuff, learning seizures, all kind of things. Some of the things you'll see. I know people like to pass around optical illusions and cool things like that, which is fine. However, sometimes a website will sneak in
15:22
something that just startles your eyes or something that flashes or flickers. And if you are someone who's prone to seizures, that can cause a seizure. Yeah, the Simpsons made a cartoon about it, but it still actually happens to people. There's also various learning disabilities.
15:41
So if you're writing software, especially if you're writing educational software, so there's people with learning disabilities, and I've had clients where they did not have accessible software, even though they were creating software for schools. Oops, probably want to work on that. So we got in there and cleaned that up
16:01
and made it more accessible, and even for learning disabilities as well. So with all of these different, we saw those four types. We have our auditory, visual, motor, cognitive. We have assistive technologies that we can work with to help ease the pain a little bit for these folks.
16:25
So one, I mentioned before, some you're already using. Some of it will actually be physical hardware. Here's another one. Things like the trackpad. It's actually supposed to be an assistive technology at one point because the mouse is not very conducive for all people.
16:44
There's some other good ones. Good old magnifying glasses, the same as glasses. It's still an assistive technology. But there's more, more exciting ones, if you will, like the screen narrator. So I'll show you a screen narrator coming up. So that's pretty popular. We also have this Braille reader.
17:02
It's just a sample of one. If you are like impaired as much as say Stephen Hawking, he used to use a mouth stick and now they actually have super high technology for him and he just blinks. It's like a blink indicator and that's all he needs to do. Head wands, sip and puff, all of these.
17:22
There's the mouth stick. There's a, that's kind of like over in the U.S. we have this staples and they have this red thing called the easy button and you press it and that's what that's a lot like. So we have just a nice easy single switch access and just tap it.
17:41
Adaptive keyboards, even non-accessible people will use some adaptive keyboards as well. Just makes it a little easier. There's also eye tracking glasses that help and of course voice recognition software is not just for what we would think of just hey, dictation.
18:00
Now it actually helps a lot of people to be able to give input. They do not have good use of their limbs. You need an alternative way to input so that wouldn't be a mouse and it would not be the keyboard so we need something else. So voice recognition when we don't have those other items but we do have our voices to deal with.
18:25
And this is just a few of the assistive technologies that are out there. There are some others but these are probably the most popular and the most important ones. You can go and look on Google through the images. They're copyrighted so I didn't want to put them in here.
18:42
Just put these in there. Put some of them about the head wand and the eye tracking glasses. You can see pictures of those if you look online. So it would be nice to see what you might be dealing with. It's good to know that if you're going to write software that this is going to aid with.
19:00
So there's another keyboard, like an adaptive keyboard. Now if we have a visual issue we may need a screen narrator. So with this we have the one that I like the best I think is the good one and it's free. Some of them cost some money.
19:21
One of them is called NVDA. Web Anywhere is good as well and that is an online only NVDA is something that you download. And of course there are some specific narrators. If you only have like IE or Chrome there's also Apple Voiceover.
19:41
So you have these different narrators available. So if we take a look at say a narrator. So I have NVDA and if I crank it up. So it'll pop up. Oh let me turn on my audio here.
20:02
So it sounds like that. It's very robotic. The welcome screen comes on and I can tell it I'll just go with the defaults. Click OK. And then what we'll do is maybe bring up one of these websites and turn this back on.
20:29
Now if you heard a bit of what that was saying. Robot voice. It takes a bit to get used to that sometimes. It was going through and it said hey we're at WebAIM.
20:41
And this is by the way since we're at WebAIM. If you go to WebAIM.org this should be really the first place you go to if you're going to do anything accessibility. And these folks work with Mozilla and whatnot to help get this content out. This is one of their tools and what it does is that screen reader
21:00
will narrate what's on the screen. So when it does that it goes through the logo. It may need to go through the menus and then tell you that there's an image here. And you know if you can imagine just closing your eyes and then listening to what would be happening on a web page and considering some of the stuff that is on web pages.
21:21
A lot of stuff is going on. It's a difficult job for a screen reader. It has to go through and figure out is something visible or not because it doesn't want to read things that are not visible. It has to go through and see what's important. Sometimes it can't and it just reads everything. And things like links and menus
21:42
sometimes actually get in the way of that. But if we want to listen to it we can do that for another minute or two here. And let me go to another page. Let's do good old MSDN.
22:00
Let's see what it says about MSDN. There we go, MSDN. Someone needs performance something on that team. There we go. So we'll just turn this on. Are you going to do more?
22:34
So if you listen closely to what it was saying it also goes a bit fast.
22:41
But it does have a bit of a British accent for a robot voice. Interesting. What it will do is it has to go through it's the first time I have visited this page it has to tell me that there are links here and what's down here and what's in the slider and it doesn't always
23:00
doesn't always pick up things exactly because it has to interact with all this code and everything but it does a pretty good job. It'll go through the entire page too if I let it. So that's a lot of stuff even stuff down here if it needs to. And if we think about it if I maybe refresh this
23:20
or just go to Microsoft.com when I learn how to type and we'll crank it up and then just close your eyes and listen to it. Oh and it's in... Oh, being that this came up in Norwegian.
23:50
I like how it can't I like how it can't pronounce A-S-P-X That's kind of fun.
24:08
Being that this comes up in Norwegian it doesn't know what to do on anything in Norwegian in there so that's another problem is we would need a localized version for Norway but as you see
24:21
the crux with scanners or screen narrators is that it has to go through it goes through every time and if you think about web pages they usually have a banner and some links or breadcrumbs and it has to do this like every single time which is kind of annoying
24:40
I can see the first time a page comes up and go through and read the links because you need to know but it keeps doing that so we'll take a look at a way to make it stop doing that and just skip over those links but other than that this is how people who are blind have to use the web they need to use one of those screen narrators
25:01
and really the only way to really, truly get a good page going with a screen narrator is just to load up your page and sit there blindfolded and listen to everything it's saying it'll take a while to get through an entire page we only have an hour here but I think you can get the gist of it
25:22
just from these little clips of NVDA going on so we do want to make sure that we're kind of screen reader accessible and we'll see a little bit more of that in just a minute with that screen readers need to get through content
25:40
actually the number one thing you could do to reach many many more people and make it easier on them is making fonts bigger there's almost not a single website anymore that actually has a decent font size they're all tiny and then I end up, I think most all of my browsers are at like 150%
26:02
this one's only 110 cause I knocked it down for the other demo I go into them, they're usually much, and I don't even need 110 because WebAIM makes large fonts but I go to other websites and I'm always zooming in, even with glasses and stuff, it's just too small, too tiny
26:21
too much little stuff other things too, and not just for visual folks, but the cognitive folks, we need things clear, clear sections clear headings clear sections and headings and you can use your H tags in HTML for that, to block them
26:41
off and you can also use the HTML semantic tags like the footer header, section article, nav those tags that came out with HTML5, you can use those, if you use those screen readers will pick them up and it will know exactly which section it's
27:01
working in and it will allow the user to more focus in on that section when you have screen readers like NVDA, you can often hover over a part of the page and it'll try to read that but sometimes, if folks are just using divs or spans it doesn't really know
27:20
if that div is for an actual section of the page or if it's advertisements or something else so those semantic tags help us organize good code like that high contrast for colors, that's kind of important too, so I'll show you a contrast thing in a second
27:40
labeling, here's another one, even if you don't have accessible needs sometimes you'll see a label and then another field and you don't know what the labels for or they might call it a save button on one page and a submit button on the next which is inconsistent
28:02
I'm not a fan of inconsistent I like consistent things so clear and consistent labels and clear and consistent forms I have a nice entire section on forms for us, but here nice labels, make sure they are labeled, and you can actually use like the HTML labels and things like movies and animations
28:22
this is probably going to be one of the more it's not difficult it's just time consuming, get an intern get one of them and get closed captions, a lot of YouTube has closed captions and usually if it's
28:40
something recorded like a lecture like this you can just take that recording and run it through a speech to text and then capture it that way so it makes it a little bit easier and then have an intern go in and change it and make any modifications for the little boo-boos
29:02
I have a nice article, and actually I have one in MSDN magazine, and one at my website about programming accessible websites and apps that go into details of things you can do but this is really not difficult to just organize your pages nicely and make it easy and clear for people to read
29:22
so here's contrast that I said we'll have, this is crappy contrast who can't see it? Like I can barely see it and I'm standing in front of it you don't see it, but it's not the greatest that's better now the colors may be ugly but you can see it that's good contrast
29:43
eh eh, right it's better than the first one not as good as the second one that's okay that's alright, so as you're starting to see mostly if you get, if it's a light background, dark text, if it's a dark
30:02
background, light text, and things like certain colors like purple and gray don't contrast well or certain blues and greens you can usually see it just is just a little bit more difficult on the eyes to recognize what's going on, of course
30:21
black and white is good contact good contrast things like this, actually just staring at this for a few minutes and then your eyes start to get a little they hurt a little bit from looking at some text so things like the bottom ones of course the red one is better this is okay
30:42
there's a lot of people who will not be able to see this at all because it is a gray text on white and a lot of websites do instead of black on white a lighter gray on white and that makes it difficult for many people many people have contrast issues
31:00
where the first one second one, or this third one this pretty much this column except for the bottom one and that little one on the end, they're just not the best, so just try to keep, and this is kind of easy, you can tell your project stakeholders contrast, just
31:21
make it a darker and lighter so it's easier to see and they usually say, oh yeah good idea, and then off you go and just simply doing that does a lot better so here's another one with visual problems, so color blindness here's for my website
31:41
done four different times not reprogrammed all I did was I took the accessibility color wheel tool and I put my URL in there and it told me what my website would look like if I were color blind with one of these
32:01
type of, there's three different types of being color blind I can't really pronounce them that well but they're kind of big words deuteranopia protanopia and titanopia, that one's a little easier but as you see, now my page is just dark blue and white, and we're
32:21
done, but some people see it as purplish others see it as purplish and my face is kind of green here, I'm not a fan of that I don't look good with a green face, here I'm looking a little pink very pink and this is green so depending on exactly their level of color blindness
32:41
depends on how that page looks, so if I had a blue submit button, someone may see that as green, and depending on what shade of blue, it may even go off into what looks like another color for somebody, so the cool thing is you can go to this color wheel tool and there we go, and you
33:02
can go through here and put in some URLs and poke around and load up one day yeah, we'll come back when that loads up so you can put it through and you can see things like this, there's also a little tool called Color Oracle you can download, it also makes you download Java JVM
33:22
which is kind of annoying, but it's a cool little thing you could just have it do the same thing as well it will tell you whatever you're looking at on screen, doesn't have to be a web page, it could be a Windows app or something it'll tell you about that also a great reference is there's this whole
33:42
site on MSDN that does designing with color, and it's artist, very artist type of stuff, so it's more than just accessibility, which that's a good part of it, but just you know, the theory, oh of course they do that, oh wait a minute
34:00
at least they gave a link there we go, but here it tells you things like if you use this color this other color goes very well, those kind of things and those colors that go well tend to be better for accessible folks so just kind of artsy stuff often helps with accessibility here's the color wheel too, we can
34:21
come in here and choose different foregrounds and backgrounds, so if I choose look at that I see stuff like that all the time, you probably do too that yellow is so hard to read, that's right here then you end up highlighting it to see, changing it to a different
34:40
color just to see what it is we can invert that and it would be just as bad, so you could just come here and check with your color wheel see, hey that's not bad, and it'll even give you a little check mark to see what the, what it's like, that's kind of crappy, red text tends to fight
35:01
with other colors a lot red and yellow, red and green, all that so those things are good, oh and there's the little you just go to color oracle.com shows up in your tray but it is a, it's a tiny download but it comes with Java, so that makes it a big download anyone know why Facebook
35:20
is the color it is? you probably guess cause Mark Zuckerberg is color blind right, he's red, green I think so that's why it's blue, cause he can see that, it's the whole reason if we move from content to design, things that we
35:41
want to do for design again, clear and consistent, not just sections, but navigation this also, if you notice a theme here most of these things that make it difficult or even impossible for an accessible user are at a minimum just annoying for
36:01
a regular user, a non-accessible user, things like navigation, when people change up the navigation it's hard to follow, doesn't matter if it's accessible or not, it's just bad navigation the clear page layout as well and you can use HTML semantic tags to do that
36:20
and there's maybe six of them, there's not a lot they do the job, they do it well of course again clear content, distinct sections and the pop ups you'll probably, if you're doing a public website, have to fight with some marketing person over this, because they like pop ups, but it does
36:41
there's so many people that simply cannot use these popular fun viral sites that they like, because of stuff like that, and it's so simple just, you know, pop ups are nobody likes them to start with screen readers as well screen reader will start reading the page and a pop up pops up
37:01
and some of the screen readers don't even know what to do because you have all this dynamic stuff going on, and they just they're done, they just they just die, or they'd start trying to read the pop up and then you see the little link counting down up in the corner that is so tiny that you can barely click it, especially
37:21
if you have a hard time with the mouse and then it goes away after a while and then the screen reader gets upset again and it doesn't know what to do so yeah, and they're annoying a lot of users, I will see people just dumping the website not even going to it I even knew that myself, just because it's annoying
37:41
if we're going to code accessible pages, it's part of our design and coding, at least over in the US, we have the practices here would apply anywhere, and I think there's a European version of this but I don't, somebody here could tell me I'm sure, what we call section 508, and
38:01
there's a checklist at AIM that would help adhere to that so it's just this cool little checklist of basically what I'm telling you in this talk these kind of things to do you can go down and make sure that you have it checked and then run this cool little WebAIM tool to see if that's happened so if I come over here
38:21
I actually have WebAIM up somewhere here it is, so if I go to wave.webaim.org just come in here and I could pop in any URL so if I do microsoft.com it's going to go through and it's scanning that page
38:41
and it's going to tell us I love doing this with Microsoft because then I could find little nit picky things and complain about it because it's Microsoft and I used to work there, so then I know people to complain to oh it's taking a while to there we go, so here's the first thing we would get these three little
39:02
bars here of styles, no styles, and contrast and you'll see a little summary of 55 errors that we have alerts, all these different things that you have and you can come here and you see it marks up the page and you can look at what's happening there
39:21
I could even, oh there we go took it a minute and some of the yellow ones are ok, it's just that you might do something to make them better, green is usually good, red stuff though not so good, so I could come here and kind of see what's going on and this is a huge page let me try to load in a smaller one
39:42
oh chrome, did you lock up yes it did yeah thanks, thanks chrome that was nice so I suppose there's nothing you can do, yeah I know, thanks let's try that again, there's really nothing you could do with accessibility when chrome just
40:01
dies, right, then it all just goes to hell so it'll come through this is telling me something, if web aim has a hard time scanning it, it's probably not very accessible if it's having such a hard time so if we do I'll do a wave again I'll put my own site in here, and
40:25
if you don't want to just run things online no problem you can actually download this tool and then just run your pages through it locally and there's a, I believe a plugin for firefox in which you can do it there as well so there comes mine
40:42
mine's not bad there's one red error a couple of alerts mostly because I forgot a few headings but things like alt attributes on an image is actually very important screen readers don't know what to tell people, they can't just see an image and tell people
41:00
hey that's a cat but it can tell what's in the alt, so if you put something clear and descriptive, this is a cat, the cat is purple whatever color the cat is then the screen reader can read that tag, so once in a while if you don't have an alt or something that one I guess I forgot
41:20
there's no image there, that's why here's the good stuff, bad stuff, in between, as you see you hover over things and it'll be like hey there's some stuff, look, there's a header here's this, so it gives you all these cool little things, over here on the side you get it with styles, you don't have to see
41:41
the styles, and contrast so there's another way to check your contrast, so I actually ran this through contrast and I actually left it go on purpose, this is mostly contrasted, the only thing on my site that is not is this little tiny date and how many comments are in there
42:01
which if somebody goes into that site they're gonna see it in good contrast I should probably make that darker anyway so that's my slacking I guess right there so we have our tools where's our somewhere in here
42:21
so that's what I like to do I like to go and run them through the wave tool and come out and check the contrast check the styles, all that good stuff really easy to do that, and again you can download it if you don't a little bit more for coding
42:41
this should be good for people, like this mobile first everybody's kind of doing that anyway, usually if you practice mobile first development, you're doing things like considering a tiny screen in which you need to make things different in a formatted way, so that
43:01
people can consume that pretty good, so if you design with mobile first you're gonna tend to have less junk in the page, the ads are not gonna get in the way as much as a big page and it tends to be a little more trim, and a little bit less bling, a little bit
43:21
less eyesores, which makes it easier basically for everybody what we wanna do though, is well mobile or not, use ARIA I'll show you on I think the next slide or so and these things called skip links which are part of ARIA and those help screen readers go through and read properly
43:41
of course we have to be keyboard and alternative input friendly, keyboard is really not too bad for most people, however, if you are, we have like just keyboarders here like I hate the mouse kind of people a lot of coders are like that if you do almost 100% of
44:01
your work just with the keyboard and you try to do a tab and tab through a webpage it's all over the place it'd be tabbing up and down and no particular order very often, so and then I will see people putting tab orders in that are not correct or out of order, so
44:21
you want to make sure it's keyboard friendly and all those other devices like the braille readers and things like that make sure that that's friendly as well so in a slide coming up I will show a few of those alternative ways to make things keyboard friendly and it's really simple just doing a few things with these what's called aria
44:40
adding them to your form it's a tiny bit of code works great if you are going to code good thing the marquee and the blink tag are gone now those little things first thing that came into HTML to go so any strobing, flickering, flashing those kind of things make it difficult and crazy JavaScript
45:01
makes it, it's fun to write crazy JavaScript not so fun to be on a page with crazy JavaScript popping up things and I've seen now they are taking to popping up an ad and then popping up an ad on top of an ad how far are they going to take this it's going to be ad after ad after ad
45:20
I hate ads on the web, pop up ads I stopped watching TV because of ads and now they are all over the web so one of these things to do to make it easy to navigate and then friendly forms are these things called skip links and they are part of ARIA and if we look at this, this web aim
45:40
organization has created what is called ARIA or it's Accessible Rich Internet Applications, ARIA and it's just a set of small things you can do to make your applications rich on the internet one of them is what's called the skip link so as I mentioned before
46:01
when I go through with NVDA or any screen reader it will read the logo and then it has to read the links and then I go to the say maybe this next page and I click on that and when I get to this page it needs to do the same thing it goes, reads this, reads the links
46:22
if you are a sighted person hey, that's no problem you just don't look there if you are not sighted and you have to have a screen narrator then you have to painfully sit through listening to that over and over it's kind of a pain so what we could do is say
46:41
hey screen reader, how about you skip over these we'll tell you where to go to get to the good stuff first and this is a kind of a small navigation, you see a lot of sites with tons of links across the top, oh, MSDN perhaps oh, look it and then these things
47:01
that's not good for accessibility in Microsoft by the way, that stuff and then stuff down here, oh, and not just that but maybe even some of the stuff that gets, there we go some of this is possible I do not want to sit through all that, that was painful the irony of non accessible
47:21
accessibility page at Microsoft just saying so these skip links so this is one way to do this and so if I come here web aim does these perfect just go and see what they do and you do it it's very easy, so to make the screen reader skip them, what I do is I just use an HTML
47:40
a named reference, so you do the little pound sign and name and that will help us so if I come in here, I'll look at the source for this, I had the source open if I just look for anything called skip in here, it's easy what they do is create a little div
48:00
I zoomed a little far there I like the big text so we create a little div skip to content and this is what it is it's this link before the rest of your links that just says, hey screen readers, you go here and skip to that
48:20
screen reader will look for this and if it sees something that does that, it can go to there now there's a few more things in here if I take a look here's some of the other links as well oops, I have a skip but that's basically all you have to do is somewhere in the top of your page come in here and tell it where
48:40
to skip to now, this doesn't necessarily show up on the top here alright, I zoomed a little far again, there we go so these skip links, you could do it one of two ways you can actually just have these as regular links and then say to the screen reader take that and skip over those links or some people don't like
49:01
to display the links and they have other navigation you can just make it so that it's invisible and you could do that by doing this, just setting a little bit of CSS and that's actually what they do at WebAIM so they have the regular links and then like a little hidden skip link so the reader sees this hidden skip link
49:20
and it says skip over all that stuff go right to the content and it doesn't visually display it for the people who are visual so we just set it like way off to the left and just make it tiny and then the reader will pick it up but the user never has to see it's a bit of a hack
49:41
it's a bit of a known hack they'll fix that one day I think make it a little less reliant on CSS if you want them invisible another here's a good coding technique again the semantic tags now we have these ARIA tags that I just mentioned and if I look here on WebAIM there's a whole set of
50:02
ARIA links and you'll see things like if I had a form I could tell something I want to make this an ARIA or application of rich internet so I could make it that and I could just take any HTML element and say you're now going to be an ARIA element it's nothing special
50:21
other than the fact that ARIA elements work better with assistive technology than nothing which is what we would have otherwise so we have these ARIA tags sometimes though you'll see one where you can use a semantic tag like with check boxes and things like that
50:40
so we want to start with semantic tags before we get to the ARIA tags but we kind of have to know about ARIA tags as well so semantics which is your HTML, your article header, footer, nav there's one or two others a section is another one and it's basically just your tag that says this is an article
51:01
on my blog or on my website this is a section on my website a section for ads a section for this or that so that's all that it is it's just plain old tags once we've run out of those we should actually be doing this anyway we should actually just be using HTML semantic tags
51:21
that is the HTML standard now so we should just be using them anyway but they happen to partly be there because of accessibility so with the ARIA so that's the whole actual acronym web accessibility initiative accessible rich internet applications
51:42
it's like somebody on the dot net team got to name this somehow giant name the irony that of getting through that with maybe an accessible problem it is actually a W3C protocol so there is an RFC for it you can go to W3C and see the specs on ARIA and all they
52:02
are are attributes that go into HTML so it addresses those missing semantics now this was around before semantic tags so that's why there's some ARIA stuff that semantic tags ended up kind of taking over if you will so that's why that has
52:22
that but it addressed those missing semantics at one point perhaps at a later date I'm hoping that they'll start to incorporate the rest of ARIA I've heard that they're supposed to incorporate the rest of it in as just part of the HTML spec like they did with the semantic tags that would be pretty cool if they did that
52:43
so with ARIA they're all attributes and they're basically attributes that tell us what this element does and there's these three categories of them, properties like what an element does is it a button is it a input what is this and remember
53:02
this is for a screen reader not a person states which is the condition so you might see ARIA checked to tell the screen reader that a checkbox is checked or you might see ARIA disabled to show that an element is disabled properties like required
53:21
you'll see kind of like your validation ARIA required so these are just there to make assistive technology better as far as those roles go for ARIA we have we'd tell it it's a whole ARIA application you could set banners so if it sees ARIA banner
53:41
knows that it's maybe part of a navigation and logo and that a screen reader is going to say hey I could just skip over that after the first time I read it forms of course we want forms that'll be an important one navigation is another one we want to tell it ARIA nav to say when to
54:01
navigate and also searching as well so we have these different roles and the states the ones in red are those ones where you can usually use a semantic tag instead so if I wanted to label something just use a label or described I could just use a label
54:21
same thing disabled just disable something but there's other ones if I need pop ups I can say this particular div or span is going to have a pop up so I can say ARIA has pop up equal true and we're good
54:40
or just ARIA has pop up you don't even need the equal true it's just a bit flag these ARIA elements help us create accessible forms so this way so here's a problem people fill out the form and then they click and things happen and those things that happen
55:00
is often JavaScript first before it goes over to the server and JavaScript is a bit of the bane of the existence of an accessible user JavaScript first of all readers don't know what it's going to do and readers can't they're not compilers they don't go in there, they can't read the JavaScript
55:22
and just figure out what it's going to do it has to wait until the JavaScript is doing it and then the reader tries to adjust so when a pop up happens the reader had no idea the narrator says oh, something happened oh, there's more HTML here now let's read that
55:41
or sometimes it just can't even do that it doesn't know what to do so if we want to work with this we need to watch a little bit of JavaScript, so things like alerts and warnings I think we're kind of over that phase where you'd click a button and you'd get a JavaScript pop up telling you about validation now it's usually not so modal, not in your face
56:03
as much as possible it's getting harder to do this trying to do things where anyone tests by turning off scripting and then testing your site it scares me a little to even try it on most sites scripting is just everywhere
56:22
probably won't be able to get 100% on this but try to see if you can run some of your sites with the least amount of scripting possible the problem with not having scripting is then it's not the greatest experience most of the time so we want to weigh that fact of not having the best
56:41
experience with some nice rich JavaScript versus the not so great experience of an accessible user and we do have a majority minority thing here so we kind of have to weigh that and balance that and of course security and stuff like that so if a validation happens sometimes
57:01
JavaScript will pop up something and the reader the screen narrator just doesn't know what to do again because it's dynamic and you can't necessarily even go anywhere like once a pop up message comes up you have to do something with it and if it's not a sighted user they don't necessarily know
57:21
to click and the screen reader is supposed to tell them but it can't always because something dynamic happened and it didn't know what was going on so for forms along with trying to not kill people with JavaScript trying to balance that things that we want make sure your tab order is good which usually means
57:42
not putting in tab orders another one that screen readers often choke on is if they JavaScript focus on the first field and screen readers then some of them will just automatically start reading that field which sometimes is okay but sometimes not
58:01
blinky stuff, buttons and links they need to be big so we have those multiple input devices and I will often see tiny tiny links tiny tiny fonts tiny tiny buttons that is hard to click on or hard to tap on. A lot of accessible users don't use the mouse
58:21
possibly not even a keyboard they're using the other devices and they need to tap or puff or something like that and tiny links and tiny buttons are their enemy it's just impossible to work with them so we could use ARIA again for all of that so what we could do if we want to use ARIA to do that we first
58:41
want to use good old HTML and set up our field sets so we could use that more semantic type of paradigm then we could have our fields and we want to put in legends for check boxes and things that we want to group radios, those kind of things we could put them in a field set
59:01
if you're an MVC person ASP.NET MVC and you do a file new project it actually puts some of this stuff in for you the field set and all that good stuff if you do Windows app development like WinJS it actually puts in ARIA tags for you which is kind of cool so here's all the coding accessible forms, things we
59:21
want to do, my label so I don't need to use anything special but make sure it's labeled, use a label tag instead of just a span or something like that for what element and then we have the input for that element and then here if I have some validation I might have a span to put it in
59:41
here's something else to you, so you'll see this but instead of saying the word required you'll just see a little star tiny little star and it's hard for a lot of folks to see that and a screen reader doesn't know what that is necessarily just a little star it goes asterisk and that's all it says
01:00:01
which tells us nothing but it will see the word required and it will say required this is required. So the first thing we want is to make sure we have labels and inputs and aria every aria element is aria dash whatever from that slide a few slides ago with that list of them there's only a handful of them
01:00:23
but in this case if this is required so if I want to make this sample from the previous slide required actually required I come here and I tell it aria required equal true and then if there's a few there are several screen readers out there and if one of them hasn't quite
01:00:41
caught up yet or it doesn't work the best that happens at least the aria tag it will definitely pick that up even if it kind of says required or doesn't pronounce it well or does some other kind of boo boo. So we just do the aria required. If I had say a checkbox and I wanted it to be
01:01:03
checked by default because we're sending a newsletter that's why you do that then we would just say aria dash checked or aria dash checked equal true and I would make sure that that's checked and that the screen reader tells the user that it's checked if they're blind they don't necessarily magically know it's checked
01:01:22
so we just add aria attributes to what we want to tell the screen readers how to behave with that I don't have the forms three minutes so some of the tools I showed the scanner and the 508 color contrast this is a good one this
01:01:41
WCAG checklist there's the same thing at web aim web content accessibility guidelines that and a checklist are really good so I come here pretty much anytime I'm going to deploy anything I come and we check the checklist that was not what
01:02:03
sometimes you copy and paste and it just doesn't seem to copy and paste or it's me. There we go yeah how about without that stuff. So here this checklist this is good
01:02:24
so it gives you all these different things and you just go through and it gives you all these recommendations and you may not be able to do every single thing but it's just a list of these things that I've been talking about. Hey use semantic markup make sure you know things are zoomed
01:02:43
make sure things are meaningful and organized well use color correctly so literally just a list you print it out check it off write a little script or utility so that you can check this off at a time that you're going to deploy so just I like checklists
01:03:02
just that's how airplanes run they go through checklists and checklists and checklists I think they automate that now even so I'm nice I like that you get to do all that and then you could go to the scanner run things through your scanner and if you just do these few things like using semantic tags
01:03:22
aria tags watch your color contrast and consider colorblindness add some of those aria elements into your forms make things big and clear and those are not hard things they're very simple things it's not a lot of things either but it helps quite a bit it helps an order of magnitude
01:03:44
for other folks that may have problems accessing your website so I kinda like this it's a big bang for the buck you can now reach 20 percent more of your user base just by implementing these few things and even if you don't get to them all implementing some of them
01:04:04
is better than implementing none of them it will certainly make a difference to the users you implement it for whether they're an accessible user or not it benefits the non accessible users as well I said I'd like that that's where the real benefit of accessibility is it
01:04:20
actually helps everybody not just those who are accessible there's also 10 more free screen readers there are pay lots of pay for ones you know find one that you like a usability geek is a really good site anything with usability making it easier to use also there's a nice blog on NVDA
01:04:43
in particular I kinda like that one as well so usability it's like lots of nice screen readers there you can test and that's the thing I would suggest you do actually like blindfold yourself get the screen reader and try to navigate
01:05:00
few web pages as if you were blind it's a bit of a challenge especially the first few times you do it even after that it's a very different thing so if you can imagine that's difficult for them as well even though they may have been living blind for quite a while so these things help everybody regardless of
01:05:21
who were technically targeting accessible users I like things that are good for everybody it helps us all and that's all I have so thanks for coming I think actually it was five minutes over right yeah okay well thanks for coming if you have questions you can come up