Website Accessibility 101


– Okay so, welcome to this webinar
about website accessibility. Now website accessibility is, people with disabilities or
people with special needs having the ability to use your website. And why this is important, is that disabilities is not something people broadcast about themselves, and you see on people’s titles, they tend to over-hyperbole,
excuse me for the titles, but nobody’s gonna put
like they’re disabled or their vision is impaired. So you don’t know who’s browsing your website when you have a product. Even if you’re a freelancer, and you guys have personal
websites, so you understand. So this is very important to
have a website accessible. Most websites aren’t is
because of budget constraints and people are just not educated about it and it’s really easy
once you get used to it. It’s difficult at first,
but once you get used to it, it becomes like a second nature to you. Also recently Google has put accessibility as one of the meters
they rank websites on. So if your website is accessible, it’s going to get ranked higher on Google. Also accessibility helps with
the semantics of the website. Basically if your website
is accessible that means it’s done really really good
because you need to be fast, you need to have high
contrast, semantic mark-up. So it needs to be clean
and understandable. Buttons need to have sufficient distance between them and stuff like that. So this is something I
am very passionate about and I hope to spread it to more people. Now I don’t know if you guys have worked with the area attributes or
have used area attributes. Okay, well area attributes, they are basically used
to enhance the mark-up. For example, if you have a
link that says click here, not very descriptive, which
Google actually penalizes. Click here, read more. Which is what I was
thinking about yesterday. Okay, read more, Google penalized. Like if you have one … On one side have a bunch of
links that says read more and it’s because the clients wanted them to say read more, Google penalizes it if you go on the Lighthouse and it says the link is badly made. But for example if my client says, “No I wanted to read more and
I don’t want any of text”, what you can do is you can go to the link and can put in the
attribute called area label and the screen reader is
going to read the label, not the link text, which is pretty cool. So you can enhance it
and still have the layout that the client wants. And the screen readers, if
you’re not familiar with them, are programs used to read the screen. So visually impaired or
blind people use them a lot. That’s why it’s important to have a well structured markup
because a screen reader is going to read everything on screen. And if you put a bunch of text that is not related or badly placed, or if you try to mess
up with the tap index, then screen readers will get confused and your visitors will get confused. They will just get upset
which is not something want. So area attributes are good, however I did read that the
best use of area attributes is not to use area at all. Basically try to structure your content the best you can with
HTML and you only use area when it is absolutely necessary. But if you use semantic markup, like use buttons for
buttons and links for links, which is something a
lot of people mess up. Which I use to mess up a lot. I was trying to make
links look like buttons and use icons or links
for hamburgers which, apparently you’re not supposed to do that, you’re supposed to use a button. Then, you don’t need area, that much. So, because also area is not
supported in all browsers, it has some attributes are supported, some are not so, but if you have it in a way that you avoid using it, then you’ll be good to go. I have the quote by Debra Ruh, “Accessibility allows us to tap into everyone’s potential.” Which is true. And the more users you have, the more clients you have,
the more business you have, you guys, it will be easier
for you to get clients. For me too, I am a freelancer. It also has so many benefits, which is… And I like this image
because accessibility for disabled people is as vital as water because they have to be
able to browse the web. And not only that, but there are also legal repercussions if you don’t do that. It’s probably not gonna affect my website but more and more lawsuits have been filed against inaccessible websites. They’re less strict in America
than they are in Europe, but if you have a big website, like if you have over
80,000 users a month, then it’s very important
to start thinking about accessibility because they will see you. Target was, off the top
of my head Target, I know, had to pay a lot of money because they’re websites were inaccessible and so the Americans with
Disabilities Act Foundation, or I don’t know what it’s called, sued them for a lot of money from them. This is also something
that will protect you. Also, a lot of lawsuits
about inaccessible websites are filed in California and Florida. California because Facebook, Google, all the huge companies are there and Florida because a lot
of old people live there, and older people have, this is something I learned recently, that the older you get, the less contrast, the less you can differentiate contrast. So if you have a website with
really uncontrasting text, it may look really cool but then older people won’t be able to read it which I thought was really interesting. So, contrast is also something really big that a lot of people get wrong. And colorblindness. One in 200 women are colorblind so are one in 12 men, which is interesting. I didn’t know men get affected that much, but it doesn’t matter if man or woman. Colorblindness, I like to test
my websites with gray scale. I use a Google Chrome plug-in. So basically when I make a website, or during development,
rather, that’s even better, as you see the bug then
becomes gray scale. This is especially true for errors or if there is something you want the user to do right now, for example, if you add to a cart, you know
how some websites have, when you add to a cart, the cart appears in the right corner. So, if you rely on your colors, then that’s really bad for users because colorblind people won’t be able to distinguish them and this is just for
completely colorblind. Not too mention the most
common colorblindness if you can call it like that, is red and green so this is even more often than complete colorblindness. And some people are
colorblind for only one color. They can’t distinguish one specific color. They can distinguish the rest. It just depends how you were born. But it is our responsibility
to try to make it, to try to make the websites
and the applications as usable as possible so, on errors, for example, I have seen a lot of forms, they rely on painting their arrows red. Which is fine and it looks okay, but then the arrow text is the same as the rest of the text. So, if you can distinguish colors, okay, you see red text
best, red text good. So, there’s nothing wrong. But, if you are colorblind you won’t be able to distinguish it at all. So this is something yes, I’m gonna show on my slide show. And, e-commerce sites, they
also get it wrong a lot. You know how, for example,
if you are looking to buy a jacket which I needed recently, and they have a couple of different colors and they, instead of putting the name of the color, they only have the color and this is really bad
for colorblind people because they can’t distinguish them. And some good websites like Dealitz, they have the name of the color below the color swatches. This makes a huge difference. A lot of e-commerce websites don’t have the names of the colors so, basically, progressive enhancement is mostly referred to java script and have
your website usable without java script but, I think, you have to make a website
as progressively enhanced as possible in any way like
if for colorblind people, for accessibility, java script. If you set your mind to
be progressively enhansive when you start to build your website, by the way I use the term website here because it’s what I do, but the principles apply for webifications, programs, just you name it for everything. If you have a mind set to
be progressively enhanced, it gets so much easier to achieve the tasks you need and to achieve accessibility and everything else. This is now called a real life because, like I said, the more accessible the website is, the
better structured it is. And also I was really
interested to find out that a lot of innovations were started with accessibility in mind. For example, self driving
cars were initially designed for blind people because
blind people can’t drive, but now they became mainstream, or they’re kind of becoming mainstream. But, voice to chat, it was
also made for disabled people but a lot of people use it and, Google, I actually read
that Apple is the leader in accessibility and they made the first accessible smartphone
which is something great. You see, companies like Apple
who has billions of dollars, they focus on accessibility
and that helps them actually develop new stuff and get ahead of their competitors in the market. Which is another thing I like. People think that
salesmen and business men are evil which they’re not. Some of them are but not every one. And you see companies like Apple, who innovate with accessibility in mind. That’s something really nice. Google is also big on accessibility and I read a report that companies who focus on accessibility are also, they tend to do better
than those who don’t because they show their
users that they care. That’s especially true for,
if you are a non profit or if you’re a hospital, hospice, if you’re in the medical care, then it’s also very important
to have an accessible website because you have to show what you do. Like if they say we care about people, we are unique, we care
about our customers, and then actually, only
part of the population can use your services
and your applications, then you’re not really honest and people can see that. So, that’s also important. And it’s better for responsiveness and it’s just really good. Okay this an example I wanted to show. See, this is the, I don’t
know if you can see my mouse. This is the login form that
uses color to highlight errors. For this fill in form I just click without populating any values, and it made the borders of the input red, had an error here, red
borders, and an error here. However, this is how a
colorblind person will see it, on the right over here
and it’s not the best. They can distinguish
that something is wrong but you see how much more difficult it is. So if they make a mistake, they have to look at it
for a couple of seconds until they see that
something is actually wrong. So this is a good
example of badly designed or progressively not
enhanced, if you like. Now not to mention that
their text is also bad. See how the V is capitalized? Consistency is also very important with the user experience
and accessibility. Always try to be consistent. Choose early on if you,
all to the title case, capital case with text, you know, have a consistent buttons,
alignment, everything. Everything it just comes
together in the end and makes it so much easier rather than go back in the bug and change cases, so. I think they’re using
Parse.ly to execute library. I don’t know if you
guys have use Parse.ly. I haven’t. See they could have done better. Now let’s see how we can
enhance this form on the right to be better for colorblind people. And this is what I came up with. See how the errors, they’re like 50% or I think 60, 70% larger
than the rest of the text. So you immediately see something is wrong because it’s right in your face and it’s in bigger letters. And I also added an icon,
the exclamation mark, which shows that something is wrong. And you can immediately see that you made a mistake
and you get it corrected. See how much better it is
than just nothing at all other than just some more text. And also, I think that
the color they choose for there errors is wrong because the website’s main color
is red and the errors, they just put a different shade of red. I think it would be better if they had gone with orange but
that’s beside the point. They still should have
progressively enhanced it. Just make it larger text with an icon here and they would’ve been good to go. But see how much different this is than let’s say, this over here. So this is a good example that I like. And yes, you get more clients, if you have an accessible website. I don’t know about you but, whenever I’m looking
for a photographer or, I’m looking for a
service in my local town, if I get no recommendations what I do is I type the name of the search
for example photographer, and then one big giant
list of vendors show up so I open the websites
and take a look at them. And then I kinda decide
which people I like, which I don’t, and then I narrow it down to like three or four, and then I send emails asking for a quote. But the start of the
relationship is on their website. However, for disabled
people, they will remove a lot of sites based on that
they can’t navigate them or if the users are older, you know all these flashy and
non-contrast websites, they just won’t be able to see or worse, if for example, there is a quick animation or something that, this is
also one of the problems is animations and videos
contain a lot of flash. This is really bad for
people with epilepsy. You can actually induce
a seizure with this and Apple came up with
a java script library that you can instruct, you
can insert on a website if you have a video that all plays, and that’s another thing
but, not all play videos. All lot of people will do it. Just don’t do it. And I know there are hero videos but they just, with hero
videos, the problem is, they put a ton of text in top of the video and you can’t see anything. The better way is, I’m gonna share a link, is one documentary I read, excuse me, one documentary that had one button and the rest is a five second trailer of the documentary. This is a good way. But they just put giant text, some people put images on top of the videos. So you’d basically see a bunch of legs or arms waving around
if you can’t see anything. But those are also bad, for example, as I said for people with epilepsy. And then Apple had the java script library which we can instruct it
to go in slower motion and, this is really cool. I’m gonna show you the library later on. Showing on the site is disposable income for those people is a lot, so, you should really take advantage of that. Not just because of the money and because of humanity but, you know,
all those reasons as well. Let’s do some life examples. Okay. So some pages, some websites
have accessibility pages. See what I said? This is actually a good
example of the bright website. You have a giant commercial all play and I don’t think they
can choose what commercial goes on because they’re kind of random but did you see the
flash that just came out? This is bad for people with epilepsy because it can induce seizure
and that’s really bad. Not only are you gonna lose the client, but they can call the ADA or the ADA will see that and then you will be in a lot of trouble. But, anyhow. I like that some, (inaudible), on all of their websites they
have accessibility help. And they don’t have it done really good. There is on the W3C, you can, there is an accessibility page generator. Basically, you try to say
what parts of the pages are accessible and what parts are not. For example, you can say,
yes we have a lot of videos but not all of those have captions. Talking about videos, when you have videos on your website, you have
to add the transcript for them which is basically the text and no movements, or for example, door creeks, you have
captions on horror movies. Because in horror movies, the captions are usually like door creeks,
or killer enters the room. So have this as your guide,
provide the transcript and then, while the video
is playing, add captions. Not only is this gonna help for people who can’t hear because if
you don’t have captions, you have people who can’t
hear, you know, can’t hear you, but it’s also gonna
have, people who are not native English speakers or not native to the language you were speaking. As I was learning English and I still do, I would always watch English movies with subtitles because
I couldn’t understand what they were saying. And even sometimes if the
movie has heavy accents, heavy English accents
or accents in English, I still put subtitles because
I just can’t understand. It’s easier for me. And also, people will be
able to watch the videos if they’re in an
environment where they can’t turn on their speakers, or if they’ve forgotten their headphones, they’ll still be able to
watch the video and read. And this can make the difference between getting a client and losing a client because you only have that much time to make a first impression. And not only that, not
only it’s gonna help people with, if you got transcript and captions, but for the transcript, Google will be able to
rank your site higher because search engines, robots, they can’t understand videos, but they can read text
so it is good for now. But yes, for accessibility, I have to add something about website. You basically tell them how compliant you are with the W3CA,
I can’t remember that, and you have to add your phone number for assistance, email,
and PO box or mailing. Something for them to mail with. I think that’s really nice. The only other one is in Brides Magazine called next to that. But, it’s good. Now let’s see. This is the web portal
accessibility initiative website. They have a ton of information here. I really recommend you read it. And I was going to show, another thing about the accessibility is tab navigation. So let’s click tab. Okay, now, we click tab and you see how the logo is highlighted and then the text was highlighted. This is what great tab
navigation is about. You’ll be able to use tab navigated site but the current link or button you read must get highlighted so that the user can see where they are at the moment. Of course the website, the
web accessibility initiative has done a great job,
and you can not do it, you can never have all these
highlighted way too much. It’s really… See how they have changed
the background of the button, they outline it with a white border and they underline it with yellow so you can be at a distance and still see what you have highlighted
and that’s really good. Yeah, and some of them
has it’s main content here in the left corner. This is also very useful. And see they got it really good but, I rarely see it done so well, with the tab navigation. Basically when you’re running
a website or application, you have to make it 100%
usable with the keyboard, you cannot rely just on the mouse. And it’s easy for us to forget because we are so used to using a mouse but not everybody can use a mouse, but if you make it 100%
usable by our keyboard, you are good to go. Now let’s see. This is Google Slides. Okay see now, Google
Slides not have the best tab navigation. See, I have highlighted the docs button and if you can, let me zoom in. See how it’s highlighted
and you can see some dots around the button and you
can only see on the left, and, oh on the bottom as well. But you have to really look into it so this is way less usable, than it is for example here, see. You have it, you see
what’s going on for free. Google Slides, you kinda see
but it’s really difficult. So imagine if, for example,
you accidentally broke, you broke your right hand
so you can only do it with your left hand, cause I can’t use the mouse with my left hand. I’m used to the right one. And you also have low contrast and that would be nearly impossible to see so this is better. Google you can do better. Now, let’s see our website. Now, my website, I rely on the, and that’s another thing, web designers like to
argue whether you should use a default outline or you should have your own outline. And some say you should use the, problems of using the default outline is that users are already used to, for example, if they’ve been using Chrome for years, they know, okay, the outline is light blue. So it’s easier learning curve, which, I don’t suppose there’s
much of a learning curve but I guess people would
be more comfortable with the default. However, the default
outline is very dependent on the content. If you have, for example, a blue button or a light blue button, then
you won’t be able to see. Let me show you. This is my plug in page. Okay. Now, I have it where it’s the blue outline but I also could change
the background color. Which, you realize the program
is you probably write CSS. Always do on hover, when
you want to add an effect on hover, on hover comma
on active comma on focus. So always add these three and that will go a long way to accessibility, because I’m not hovering, right now on my navigation, but I am tapping and that is focusing the tap. That’s why it’s working. Now the input fields are going great. Okay, but now we are on the button and the default Chrome outline is blue and the button is blue, so, you can’t see that it’s selected and this is bad so I gotta fix that. I don’t know where I am. Okay, see. Now at this moment, I
don’t know where I am. I clicked up a couple of times, the window wasn’t scrolled. So I have no idea what’s going on. I guess I can click enter and find out. Whoops. Wow I’m nowhere. Okay. Oh this is bad. See, if I wanna play the video, it’s outlined again, but it’s blue on transparent,
and my shirt is blue. So it’s really difficult to see. That’s bad. Don’t do that. Talking about contrast,
let me show you another site with bad contrast. And also, that’s the
thing, is people think they can hire a programmer or freelancer, hand them over the application and then just let them go. You can’t do that because you’re constantly changing your content so the site needs to be maintained. For example, this model’s website. She has white text on
top of her white shirt and the subtitle is also white on top of her white shirt. Yes, it is difficult to see. Even I have trouble seeing it because the contrast is so low. And I’m pretty sure it wasn’t
like that at the beginning. She probably had a different picture. But she changed the picture and then she didn’t pay attention to the title and subtitle because she’s a supermodel, she is very busy with stuff. But see, one small change
makes a hug difference. This is also another site of mine and FireFox I think has
the dotted outlines. What I usually do is I
leave the default outline unless, after testing I see that it needs to be changed and it’s not very obvious. This is what I do. Because I don’t like putting
more work than I have to, unless is absolutely
necessary, don’t get me wrong. Because, also, not all browsers are removing the outline so it’s better to leave it on. However, if you have a blue website like I had with my plug
in website, it is blue, or any color of the
outline, then change it. This is also a good idea. Now let me show you. So this is also a bad contrast. See, usually I see white
background with gray text. And gray is used a lot because it is easy to show okay, this less
important than the title so they use more gray. But, it’s better to see. Let me show you the Yelp Styleguide. This is a really good page by the way. Yelp Styleguide. I learned a lot from it. See how they have the small over here. And the surnote is gray
on the white background. And over here too. Built with, it’s also gray. And this is really bad for
usability so don’t do that. And people are very
tempted to do it because it’s, they’re used to it. However, there’s a tool
called Y-contrast checker that checks the contrast so, you should definitely use that. And of course with, where you wanna check the accessibility
website, I use Lighthouse. Oh I have 100% accessibility
on this website, that’s nice. So, I use Lighthouse. But Lighthouse is only
part of the battery. If you want to test for accessibility, using Lighthouse is a good start but then, see how they have not applicable. Okay, excuse me, additional
items to manually check. This is, I love this. The program basically says, I did what I could, you
have to check this manually, do it, and it gives you a
list. This is really good. So, the page has a logical tab order, so don’t do minus one if you can avoid it. Interactive controls. Interactive controls
are keyboard focusable. Okay, so this is, like I said on focusing the buttons and the stuff
that are interactive. Okay, this user focus is directed to new content added to the page. Okay this is like, if
you have a model window, a popup, then you gotta focus the user rather than them having to find it. User is now accidentally
trapped in the region. Yeah that happens a lot. You see they give you a list that you can test manually. And also, if you really want to test great is install a screen
reader on your computer, and then navigate the site
with the screen reader. It’s gonna make a huge
difference because then you’ll be able to see it through the eyes of the people you are designing it for and then you can fix it, test stuff. It’s really good. And then, if I am doubting, did I choose the correct contrast, there is the, yeah, I use this website. And you basically add
foreground and background colors and then you click somewhere here and it gives you whether you failed, the AA, they have two scores, AA and AAA. So if it’s triple A, you’re great. If it’s double A, you’re good. So always test, but you
guys are programmers so you know, always
test when that happens. Okay. I think that’s it for today. This is the base stuff
I wanted to go through. If anyone has questions,
please feel free to do a chat. I’m really happy you were able to join. And I am hosting a user
experience webinar next week. And if you want to
attend, just let me know and I will register you in the webinar so you don’t have to do that. User experience and accessibility, they go hand in hand, but the user experience one is gonna be more about the general user experience and what kind of components you need for users to be happy at the end. Okay. Well I see that there are no questions so I guess I did right. Thank you so much for joining me guys and I hope to see you in two weeks. Bye.

, , , , , ,

Post navigation

2 thoughts on “Website Accessibility 101

Leave a Reply

Your email address will not be published. Required fields are marked *