Don’t be afraid of… a video series for beginners
Short videos explaining some of the main web accessibility concepts, including assistive technology and terminology.
-
Video Transcript
Wuh-cag, W-cag, W-C-A-G… The way you say it varies, but the rules are universal. Did I say rules? They’re actually guidelines. Insert a witty pirate joke here.
The Web Content Accessibility Guidelines are a list of rules- just go with it… -for making the web available to everyone. This may seem daunting at first, but I’m going to walk you through it.
You often hear or see things like “You must be compliant with WCAG 2.1” What does that even mean? Let’s break it down a little.
WCAG has a standard like 1.0 or 2.1, and a level that’s A, AA, or AAA. At Silktide, we like to say that A is must do, AA should do, and AAA is… reaching for the stars.
So when the legal requirement is WCAG 2.1 AA, it means it’s using the latest standard (2.1) and level AA (the middle one). AA is tougher to master, but still well within the reality of the web today.
All the guidelines are numbered, like 1.4.1 Use of Color. This is a single A requirement and it covers a fair bit of ground. Inside that guideline are success criteria. One such criterion is “Links must be distinguished by more than just color”. We have a video on that topic in this series! But it also covers things like not using color for instructions, like “Red fields are required” or making visuals like pie charts with no labels or patterns to discern the segments.
See, that wasn’t so bad, was it? Now go tell your friends!
Everyone deserves access to the internet if you need help getting your website up to scratch, visit silktide.com
Don’t be afraid of… WCAG -
Video Transcript
Picture yourself surfing the web. You’re looking at the things you like…
But what if it looked like this?
[The screen goes black]
Okay, that’s only a small percentage of people. It’s more likely it would look like this:
[The screen appears again, but it’s blurry]
So how do you surf the web if you can’t see?
Screen readers are software that take this…
[an average website]
…and make it more like this.
[the website is broken down into a list of elements that the user can interact with]
Then it can read out the page for you, like this: [screenreader drones on, reading out the entire list of elements]
…You get the idea.
There are a number of options for assistive technology like Screenreaders. The main ones are: JAWS, which comes in at around $1000. And there’s NVDA, which is free. And there’s VoiceOver, which is also free.
You can try it yourself on your iPhone. Or download our Chrome plugin.
Everyone deserves access to the internet. If you need help getting your site up to scratch, visit Silktide.com.
Don’t be afraid of… Screenreaders -
Video Transcript
You’ve probably filled out a form on a website before.
Was it like this: [tedious typing]
Or was it like this: [one mouse click and the form completes itself]
Doesn’t that feel like… magic?
Well it isn’t.
Someone took the time to make sure this form had autocomplete set up for each of the fields. That tells the browser to use information it has stored to fill it in for you.
Autocomplete makes it easier to fill out forms quickly, and that is good for marketing as well as accessibility.
Everyone deserves access to the internet. If you need help getting your website up to scratch, visit silktide.com
Don’t be afraid of… Autocomplete -
Video Transcript
Imagine you’re browsing a website on your computer.
[the website is all about cats]
I bet you’re pretty reliant on your mouse for clicking on things. I know I am!
But what if you couldn’t use a mouse… How would that work?
Like this!
[the website now has a red highlight box, over the first interactive element on the page]
This is keyboard navigation, sometimes called “tabbed browsing”.
The Tab key steps through every part of the page that can be clicked on, and the Enter key acts as a left mouse click.
Sounds simple, right? It can be, if the site is designed with this type of user in mind.
Here’s a common problem:
[the Tab key is pressed repeatedly, but the cat website has no visible highlight box]
Can you tell where we are on the page?
[The Enter key is pressed, and we see a webpage full of dogs. Nothing but dogs.]
Well I wasn’t expecting that!
The box around the clickable item should be obvious, so that users who are navigating your site using their keyboard can see where they are.
[we now see a very bright red highlight box on the page]
Now, you may be thinking: that box is UGLEH! It does NOT go with my site design!
Do not worry. It will never be seen by anyone who doesn’t need it.
… It’s true!
When you move your mouse over an element, you get the hover state. You’ve probably seen this a lot.
But that highlighting box isn’t hover, it’s FOCUS. You can only see the focus state and that highlight box if you Tab to it using your keyboard.
Hover and focus are separate, and can be set to be completely different in your website’s code. So make sure your focus state is really obvious with a bright contrasting colour. It won’t change what you mouse-using visitors will see, but it will make your site a lot more friendly to those who are using their keyboard.
Everyone deserves access to the internet. If you need help getting your site up to scratch, visit silktide.com
Don’t be afraid of… Keyboard navigation -
Video Transcript
How do you *know* what is a link you can click on and what is just text?
[webpage, with text and standard blue text links]
Did you answer, “BECAUSE THEY’RE BLUE”?
WCAG rules say that color isn’t enough to make it clear the text is a link. So what can we do?
[mouse over one of the blue text links to show the hover state]
Ever notice how when you move your mouse over that blue text, it often underlines so you know it’s a link?
[the blue text now has an underline, even without the cursor hover]
Underlining the links makes it much easier for everyone to identify what bits of text are clickable links. It is often a relatively simple change in your website’s code, but it can make a real difference to your website visitors.
Everyone deserves access to the internet. If you need help getting your site up to scratch, visit silktide.com
Don’t be afraid of… Identifiable links -
Video Transcript
Sigh. Has this ever happened to you?
When you visit a website on a mobile phone, it should only move on one axis, like up and down or left to right. But not both at the same time.
[whiny cat noises]
When it does both, it’s called two dimensional scrolling. This behavior is frustrating for all users, but it’s also a problem for accessibility. Guidelines covering mobile were added in WCAG 2.1.
Even when the page doesn’t move in two dimensions, the text needs to be readable. If the text is too small to read and requires zooming in, it may cause the same problems of the screen having to move in both directions to see the content.
I have given a name to my pain and it is…
BATMAN! Uh, I mean 2D scrolling.
Everyone deserves access to the internet. If you need help getting your website up to scratch, visit silktide.com
Don’t be afraid of… 2D scrolling -
Video Transcript
You’ve probably filled out a form on a website before. Was it like this-
No, wait. We covered the magic of autocomplete in another video.
Here’s something you’ve probably encountered, but even I didn’t know how to describe. When you’re on your phone, if you click into this form field for name, your keyboard probably looks like this.
[regular mobile screen keyboard appears]
But sometimes when you click into a field, the keyboard changes. There’s one for emails which brings in that “@” button and the “.” so you don’t have to go hunting for them.
There’s one for search boxes. See that “Go” button right there?
And my favorite: phone numbers.
[numeric keypad appears]
That one that has that neat button on the bottom left with the “+” sign for INTERNATIONAL numbers!
[a certain British international man of mystery winks at the screen]
This isn’t necessarily hard. It’s just something that needed to be included when designing the form.
Input mode, just like autocomplete, makes it easier to fill out forms quickly, and that’s good for marketing as well as accessibility.
Everyone deserves access to the internet. If you need help getting your website up to scratch, visit silktide.com
Don’t be afraid of… Input mode