Making Your Website More Accessible with Devon Persing

Making Your Website More Accessible with Devon Persing


MagsBC presents Getting Out The Word: 5 Ways To Make Your Magazine Website More Accessible By Devon Persing, accessibility specialist, Simply Accessible October 27, 2017 MagsWest 2017, Vancouver BC Funded in part by Creative BC & the government of Canada Sponsored by Simply Accessible I want to talk about some things that
are common to magazine websites and publishing
websites and some things you can do as an organization to make those
things better for people with disabilities. So, I’ve got my Twitter
handle up there if you’re a Twitter person. So, things I want to talk about
today are, I want to give you a general introduction to digital
accessibility: what that means, what I what I mean when I say the word
accessibility. I was asked to do a listicle–five things you
can do–so I’m gonna talk about five things that you can do, five topics to
think about and also some big picture things that you as an organization,
whatever the size that is, whether it’s you, your solo magazine, or if you
work for a larger org, things to think about to serve, contextualize how
accessibility will work in your organization and then we’ll do some Q&A
at the end. Also, feel free to ask questions during, you know, don’t raise your hand, just yell, please. I’m happy to answer questions as we go.
So, we like to talk about digital accessibility as making digital things for everyone on
whatever device that they want to use. So they might be using a desktop computer,
they might be using a tablet, they might be using a smartphone, they might be
using devices we haven’t conceived of yet, but trying to think really broadly
about what we need to do to make whatever it is we’re making available to
people on however works best for them. For some context: one in seven
Canadians have some sort of disability. I got that from Canada.ca, so
it’s very official. That number varies from different countries.
Different countries report different things. In the U.S. the estimate is closer to one in five but most countries it’s between one in seven, one in five people are estimated or report
having some sort of disability. There’s lots of different sort of
containers for different types of disabilities and different sorts of
categories. A couple you mentioned were vision and hearing. A big one is motor ability and dexterity, so basically: Can you use your hands?
Can you get around? Can you physically use an object the way it’s been designed? People that have
seizure disorders or vestibular disorders where they might become motion sick or have a seizure because of how things are
flashing or moving. Any sort of cognitive and neurological disorder or any sort of neuro divergence where people might just not perceive or process information
the same way as other people, and any combination of the above.
So, people frequently don’t have a single disability. They often have multiple related disabilities. There was some ragging on word clouds earlier today, but I have a word cloud for you, because I think it’s helpful to think about this sort
of thing. So, I mentioned those five big categories: cognitive, vision,
hearing, motor, there’s a few situational categories, as well as just
getting older in general. Older people, the older you get, the more likely it is you will develop some sort of disability. And also situational disabilities.
Maybe you’re in really bright light and you’re trying to look at your phone, and it’s
difficult to read. Maybe you broke your arm, and suddenly you’re having to try to use your computer, maybe your dominant hand, you can’t use the mouse any more, things like that. It looks something more like this though where there are lots of different reasons why a person might have a disability. It might be a side
effect of a medication they’re on. It might be because of an accident.
It might be temporary. If you have sleep deprivation, you start to have
some serious impacts on how you perceive things, even if it’s just
because you haven’t been sleeping. So, lots of different reasons why people
might have a disability. And again, one of those reasons why people usually just
have one. There’s usually context for why they’re experiencing what they’re
experiencing. So to address those, there’s lots of
different technologies that people use with lots of different types of devices. So, just a few examples. Screen readers are a big one. So, I’ve got the logo for Voiceover, which is the screener that comes built into a Mac and any sort of
iOS device. The other logo is for an open source screen reader called NVDA
which you can use on Windows.
So those are super commonly used. There’s also a big one called JAWS which is on Windows as well. I don’t like to endorse them; it’s kind of a huge huge gnarly product, but these are commonly used by lots of people.
This is a refreshable Braille output device, so someone that prefers to
use Braille, usually in conjunction with the screen reader, either because they also
can’t hear the screen reader read, or they might just prefer it that way.
We have a person that we do usability studies with sometimes who likes to use a refreshable
Braille device when she’s checking Twitter at work so her co-workers don’t know that she’s on social media. Lots and lots of low vision products.
There’s more people, I think seven times more people have some sort of low vision than are
blind, so people have all sorts of different types of vision issues.
There’s lots of magnifying products. This little screenshot is from the built-in high contrast theme that comes with Windows so it takes everything on your screen
and changes the background, changes the colors, makes it easier to see.
This is a switch device which you can use to control the mouse on the screen. It uses
some software that is like, if you were going to the fair, and use one
of those crane games we have to direct. There’s usually two knobs and you
have to tell it to go in one direction and the other, that’s basically how this
works with the mouse.
And just a couple other things. This is a one-handed keyboard. There’s lots of different types of keyboards, but this one’s designed to be used by the person who can’t use both hands or doesn’t prefer to use both hands, lets you color code which letter or number that you want at a time, and then you go through a sequence to type. There’s also products like Dragon Naturally Speaking which was originally conceived of as a productivity product. It’s used for
dictation. You can also use it to control your entire computer so if you
can’t use a mouse or keyboard or you prefer not to, you can actually do
everything just by talking. There’s lots of other types of things; these are just a few examples. I wanted to give you a sense of the variety that’s available to people and hope people are really able to customize their
experience. So how do we measure whether something’s accessible? You are probably already getting
an idea this is kind of squishy and not very black and white.
So there’s a couple of big things. One is that there is a set of technical guidelines called the web content accessibility guidelines (WCAG), which were put together by the W3C who are the same people that brought you how the Internet works. They make decisions about how
code is supposed to be written to work in browsers, they make decisions
about how you’re supposed to make content for the web, and so they’ve also come up with these guidelines about how things should be built to be compatible with all those
different tools I showed you. So this is a set of guidelines really for web designers and developers to make sure that the things that they’re making
are technically going to work with those other products if they’re being used correctly. The other piece, though, is actually testing with users, is this thing that we built. We follow all the rules, we think it’s okay, is this thing actually going
to work for actual humans who are trying to use our website, or trying to use our app, or whatever it is. So doing actual user testing, doing actual research into the needs of people with disabilities who are trying to use
your product. WCAG is very dry and complicated
and people argue about it all the time, like [?] with their guidelines
and rule sets. It’s divided though into four big buckets, which i think are helpful even if you don’t get down to the nitty-gritty of what the actual rules are. Are things perceivable? I’m
using their terminology here. Are things perceivable? Can a person find them at all?
Do they know that they’re there? Are they operable? Can they actually use
them once they find them? So I found that there’s this button on this page, now can I actually use it, say with the keyboard? I know that it’s there. Understandable? Do I know where I am? Do I know what page I’m on in a website? Do I know whether that thing I just tried worked? I just submitted a form. Did I get errors, did I do it correctly? What is this thing I’m going to
interact with going to do? Okay, I can’t understand where I am or what I’m doing. And then my favourite, robust, which in this context is, can I use it with those technologies I want to use? You know, I’m using a switch device and then sometimes I use a Bluetooth keyboard, say, with my iPad, does the software I want
to use support those things? Can I use the tools I want to actually access that content? And theoretically, if you’re following the guidelines, the thing that
you’re building should work for those people. There’s a whole bunch of success
criteria, which are basically the rules, quote-unquote, and they’re giving us
three levels of complexity as far as targeting different user groups.
As far as the things to talk about when you go back to your
organization to talk about this, the important thing to know is that most
people are focused on level A and level double A. You can build a completely
functional, completely modern website meeting those two sets of criteria.
Level triple A gets into really targeted types of design and development that makes
websites that are very stripped down and are really targeted at certain audiences.
So level A and level double A are totally cool. The user research piece? There are some cases where user research is actually an important and mandated thing. We spent a lot of time in the last
couple of years working with airline websites in the U.S. because the
Department of Transportation said that their websites had to be accessible. They
also said that in addition to meeting the web content accessibility guidelines,
they actually had to be usable by humans, so we had to do usability testing on
the work that they had been doing to make sure that those things fit.
Another way to get at that is the Anti-Discrimination Act in Norway which
talks about universal design principles. So when you conceived of this thing in
the first place, were you thinking about being able to make it accessible by
everyone? So here’s our listicle, here’s our five things that I want to talk to you about today There are things that are probably on your website somewhere. We talk a little bit about structure, of how the contents are organized
issues with colour, images and media. Chuck talked about video in the
earlier sessions we talked about video along the same lines. animation and
motion you know making you’re making your content feel feel you know modern
and and neat without overwhelming people and keyboard support which we talked a
lot about people be able to access things with a keyboard so for structure
folks that obviously everyone benefits from structured content that’s easy to
understand you have a gate but folks who really hurt one stuff is difficult to
understand as far as structure goes our users who are blind users were using
screen readers who can’t see the page users who have any sort of issue with
reading they might have attention issues they might have dyslexia or other
reading disorders there are people who use custom stylesheets in their browser
because there’s certain certain things they don’t like or certain things that
you likes they might create their own styles that overrides and the ones on
your website there’s also lots of different reading tools that people use
to sort of make reading easier for them the big things that you can think about
are using a heading which sounds really basic but let me
talk about a little bit why that’s really important and also just thinking
about your content order obviously this is gonna get complicated if you have
creative work where you’re not necessarily like structuring an article
but just being thoughtful about how content is placed on the page what order
things are on the page I’m thinking about how is a person who maybe can’t
can’t see this going to go through this content simmer back in school when you
were first taught how to write an essay you probably were taught how to write a
five paragraph essay you have an introduction that says what your
argument is and you have to give three examples and then you have to give your
conclusion so that structure seems really basic but that’s the same
structure that you want to use sort of under the hood for a person that
especially can’t see the screen so you always want have a primary heading I’m
using heading number one because in code this is what this actually is in HTML
and that’s what ice Creator is actually going to pick up so primary heading
super important you want that to be what the page is about or what the article is
about or what the essay is about if you can use secondary headings on sections
if you’ve got different perks the article it’s good nice to break them up
it’s also just really helpful for skimming if your first get you an
article especially in your maybe it’s an interview or something you’re sharing a
week about so it should be it’s long-form it’s really helpful to be able
to sort of get an idea of what what is this all about
especially grafite able of contents or something to talk but lots of ways to
structure this but thinking about secondary headings and if it’s also
bigger chunkier content maybe you have third level headings too and so on all
right we’re gonna play a game I went through a few different websites so all
my examples almost all my examples are not from groups represent you here today
for a couple of reasons I don’t want throw anyone under the bus
and also I want to show you that like people that are working for a large
corporate publishing companies aren’t doing this better either so just keep
that in mind if you’re feeling like someone else is doing this better you
know no one else is doing this better don’t worry about it
I mean do you worry about it but not for that reason okay so I’m gonna show you I
think three different websites just by their headings these are gonna be home
pages of websites and you’re gonna tell me what the website is based on the
headings okay here’s the first one what site is this it is they have very
helpfully provided a heading level one that says what their website is that’s
fantastic they have you know some secondary headings and some some smaller
sections and like you know if you were we’re browsing this page just by
headings alone you have a good idea very quickly what this website is excellent
example so yes it is the home page as I guess as it is today or at least
yesterday all right what about this one a restaurant website okay you think
they’ve got there our primary heading is there as the name of a Yiddish grocery
store okay get lots of lots of the long weird thing is like there’s this money
and career section but there’s a lot of food this is the Canada living homepage
because even though this is a canid living website they have this as the
primary heading on the page so the logo isn’t isn’t in a heading on the homepage
so you would never know what this website is about there’s other clues you
would use to pick this up but at a glance that’s not what this website
seems to be about what about this one it’s probably issue its yeah it’s
probably man explained magazine it’s issue number 134 of something that you
have apparently successfully subscribed to congratulations this is Adbusters which has this very
strong brand and this very sort of zeny looking website but they don’t have any
headings and their homepage that are about them or what the articles are so
hanging structure and because the order that your contents in are super
important for lots of different types of reading tools
so I’m actually readability tools I’ll show you an example sometimes people
will just use things like text-to-speech there’s usually shortcuts on your
computer they’ll let you just read content also really helpful for
proofreading it caches spelling errors because it mispronounces them
anyone that’s using a screen reader or refreshable Braille any sort of person
who’s consuming content this way is gonna be really benefited by having a
heading structure that makes sense on every page so for example here’s another
article from Canada livings this is a sock pattern I’m diggin pattern this is
what the page looks like like without a blocker and all that stuff there’s lots
of beds there’s a primary heading there’s a big picture there’s presumably
a pattern down there somewhere if you open this up if you open up an article
like this in Safari there’s this little tiny icon up in the left-hand corner of
the address bar it lets you switch to reader mode does anyone use this try
like striped stuff down now the circle looks like this and I can read it
you know distraction-free quote unquote again is bolding things that look like
headings in the code it’s not conveying that structure exactly the same ways it
would say to a screen reader but it goes taking out all that stuff but he
recognizes is not being primary content and leaving you just with the main thing
the article is about well I really quickly show you what this
would look like with one screen so I’m going to use voiceover which is built
into Mac products and just give you a really quick look into what this would
sound like so close your eyes boys over on Safari a basic soft pattern you’ll
meet again and again vertical line Canadian living window so the first
thing it’s gonna read is actually the page title so if that thing that
actually shows up in the browser cab when you open a web page and that’s the
default voice I have explode way down people that use these doing things all
the time we’re gonna crank up the speech I normally use it faster just for
testing because I’m used to it but people who use screen readers all the
time we’ll listen faster than most people can
read with their eyes so amazed a little shortcut just show me the headings which
is the thing we see people do a lot and we do usability studies especially if
someone’s on a page or they’ve never been on before they’re gonna use
headings to figure out well gives this page about what do I want so I’ve brought up the rotor which is
basically a series of shortcuts I’m jumping ahead here’s some images so this
is this is the list of how using the page which it looks like maybe the first
four are about knitting so I think knitting crochet is this is the sort of
category the primary heading is the name of the pattern then there’s something
that’s is recommended and that looks like there’s something that’s probably
another pattern it would be probably be helpful to have some more headings that
let me break up that long article but I can at least get to the actual article
which is pretty handy so I can actually jump now I’ve moved this little cursor
to that heading I know I can just start reading because presumably everything
that comes after that is gonna be related to that having so just to give
you a little ol peek into what reading in web page with screener is like always
over off by whoops so structure super rapport think about
your think about your reading essay having things in order that make sense
some but a big thing is color and branding and style and all those
different things color has a huge impact on people to have different types of low
vision who may have a hard time processing color people that are color
deficient aka colorblind who can’t see certain colors or to process certain
colors I mentioned earlier like look if you’re looking at your phone and you’re
in a hurry and there’s a glare and it’s hard to read where people are in bright
light there’s people to cuss have a hard time processing certain color
combinations there they find them really jarring uncomfortable so just some
groups that need support returned color there are specific guidelines and the
lokay guidelines about what contrast color should be with the exclusion of
things like brand logos and I think it’s truly decorative so if you’ve got you
know illustrations or you know little little patterns in your pages that
aren’t actual content those don’t give me those guidelines but if you’ve got
any sort of information in text or images those need to have that contrast
the big thing is don’t just use color to convey information and I have example of
that that you might not think of an example something you might usually
think of is like using red or green to show if something’s good or bad or
fixture broken you want to use some text as well basically but there’s some other
situations where color might be used from design that you might you might not
think of so there are some very specific guidelines like I said about color it’s
basically looking at the color of the information against its background and
there’s lots of different tools you can use there’s one called contrast ratio
which she gets put in the two values either the hex values from the CSS it
takes lots of different values and it tells you if they have enough contrast
or not technically the guidelines only include text
they don’t include icons they don’t include other information elements but
I’m going to show you a couple examples where that still might have an impact on
users so that’s the thing that we like to talk about too so I’m gonna pick on
the Meigs bc site a little bit so this is a little job listing from the
homepage I think so I picked the different colors I got the page with a
tool and I compared them to the serve image II background and some good news
so latest news heading is technically large checks it passes hooray same thing
for the text in the blurb the thing that was difficult to see and it actually is
kind of more accurate on the the projector than it is in real life but
the sort of very very lime-green I didn’t set great background
technically doesn’t pass so a person with low vision might have a hard time
seeing that that’s a super good question so they’re actually in points which
publishing people know what points are no one else knows what points are I
don’t know why they use them so the guidelines are large text is 14 points
and bold or 18 points not bold or larger anything smaller than that is considered
normal text so it’s usually gonna be like headings versus article normal
normal article type texts or captions and things like that that’s one of the
things in the baquette guidelines that’s actually very specific and measurable a
lot of the things are very sort of like it depends so that’s that little little
test this is a lip magazine not one of yours that I pulled because they have
this various sort of like subtle yellow background and a lot of white text which
doesn’t pass so a low vision person’s probably have really hard time seeing
this again it looks way more sacks for you in this projector then then it goes
in real life which is weird it’s usually the opposite a couple of those things
though that if I was doing a semi the site that I would pull out are those
little social icons looks are actually like a light green against a light gray
those don’t pass either so even though they’re not text a person probably
couldn’t see them at Granada there there another thing is this little search box
which again technically not a keg thing at least not right now but that also is
really low so again a person might cus have a hard time seeing this whole this
whole sort of header a trick that we recommend and which this is from cottage
living they do a good job with this it’s actually really hard to see but all of
those all those pieces of text have a little drop shadow and this one also has
the one the end also has like a semi transparent background so they actually
create enough contrast against those images that those actually are
technically okay someone might still have a little
trouble seeing them so again that’s a user testing thing but technically these
are all okay which is cool so it’s something you can view from a design
perspective that doesn’t have a huge impact on how it looks but makes a big
difference for someone that I have a hard time reading that text these are
all just like giant image links that they have on their home page okay so
here’s a color example you might not think about this is a screenshot from
McLean’s and it looks like maybe a heading and then like a list a bullet
list of facts maybe other articles thinking there might be links they are
links but when you’re looking at them on the page the only way you can tell is
that they’re a different color so someone that has a hard time seeing
color or I actually took this screenshot using a grayscale theme which some
people use cuz if they have a hard time seeing color so the only way you can
tell is that those are different is that their they have a different color so
this is the case we recommend having an underlying or some other style so that
you can use more easily tell those apart so images and media this is a big one so
I think pretty obvious example if you’ve got a person who’s blind and you have a
page full of photos we need to describe those photos and check something out
what those are and if there was focus provide you information same for low
vision users people might have a hard time seeing pictures they might prefer
having a text description of them in some fashion for video and audio you
just provide some sort of alternative for people that can’t hear that that
information also people who have information processing issues and we had
lots of people in that session this morning about video being like I don’t
like video and articles and I hate when I click on an article and all there is
is a video even beyond just you know like I have a hard time understanding
videos or poor looking at videos there are so much people because strongly
prefer not to have video so if you have an image that conveys information always
someone have a text equivalent so that would be things like a photo of
something that’s important to the content or an image that’s a link you
know it’ll probably look something like this so your your HTML is there’s this
image tag and you’re gonna have an attribute that tells it tells the
browser where the image lives which is your source attribute so that’s equal to
something and then you’re also gonna have an alt attribute which is gonna be
equal to whatever you want to be read out so and that’s gonna completely
depend on the context so if the if the content is the picture you’re probably
won’t be pretty specific if it’s say the content of a link like maybe your
subscribe link has a picture as the content you’re gonna watch you say
subscribe like whatever the text on the image is so that will say whatever that
is and then when a person who is using a screen reader or something similar
they’re gonna hear that read there’s a technique to if you if the thing is
decorative and you don’t want to get read you use the same technique but you
just have it be empty and that tells the screen your skip this
this is decorative if you don’t do this if you don’t have an all actually at all
which is something we see a lot it’ll read the source instead which is like
the URL of the image which is usually not very helpful actually when I brought
up that I’ll just about to it when I brought up the this the it came up with
images so this is the same thing as I good for headings but for images in the
page so some of them make sense Canadian living image that’s probably
the logo group TBI image that’s their little like consortium logo at the top
the rest of these most of these are are gonna be the the this whatever the URL
of the image is where that lives which isn’t helpful for a human it’s helpful
for computer and all of these dynamic resize images no idea what those are so the cases where there is a text
equivalent that’s been provided it are things like this a basic sock pattern
that’s probably the picture for that’s why the alt for that big hero image so yeah that’s something that when you
actually do code or if you’re using some sort of content management system
sometimes there’s a place to type that in and you’ll spare out for you okay
voiceover off sorry am I to turn you off so a few other examples this was a tweet
that when my co-workers wrote while we were at a conference in Austin and May
we found this really spectacular Mexican restaurant your Airbnb we went there two
nights in a row and they had these amazing avocado margaritas so she took a
picture of of one and post it on Twitter and then a friend of hers replied to her
post said that sounds so good wishing I was there with all of you
Lucy is blank screen your user and what she actually was hearing as she heard
the tweet was you know she heard Elle’s name
and her username the text the hashtags and everything but she also heard the
text equivalent to alt text that L wrote for thee for the image which was this it
was very descriptive she was trying of a very good picture of
what that drink looked like it’s a frosty ice-cold glass tumbler thick
creamy pale green liquid speckled with tiny bits of cilantro the dust a gram of
salt not easily so they did make this
possible you have to go into your user settings there’s like an accessibility
menu very way at the bottom of your of your user preferences and you can turn
on looks like a checkbox the ability to add text equivalents otherwise images do
come out with an empty alt so they get skipped but on posts when you have an
images like the main content there’s currently nothing read unless you set
that up yourself all the images will just be skipped for them so all the
jokes you see on Twitter or people post like like the joke is the picture same
thing for Facebook same thing for any social media if there’s no text
equivalent it just doesn’t exist so I just pulled van mag as an example of
another website where you might think about it can get squishy when you think
about what is content and what is not content so just this is the home page of
a mag right now there’s carousel with a whole bunch of things and then one of
them is this this review for a Mexican restaurant there’s this big beautiful
photo that makes you want to click on the slide and go read the article is
that content or is that decorative it’s probably should be content it might
depend if there was more text in the description describing the picture maybe
not it might be decorative then but in this case if you really want someone to
know what’s in that picture what that food is you probably want to provide a
text description same for this vogue over here I think this is a link that
goes the current issue if that’s a like if the link content is that image you
want to make sure that the purpose of the link is clear as the content of that
image so just a couple examples of sometimes this gets it’s very contextual
it might depend them on what else is happening in the page around it same sort of thing for videos captions
got mentioned this is a screen shot of a video from McLean’s about going back to
school and apparently having awkward text from
your parents and this video was interesting because they have captions
built into the actual video so you can’t turn them off they’re just on they look
nice like they’re they’re pretty easy to read so a person that needs them
can get them but there’s no like setting to turn them off or maybe change the
language or you know do anything else with them so they’re nice but they could
probably do a little bit better and make them more user controllable but it’s
good that they’re there serve a weird case is the video listicle which you’ve
probably seen as soon in Maclean’s video they had like three perfect examples of
different things all in a row house it’s different this is great for me so this
was a video that they had about Cassini going into space and this video has
music and that has some text overlay talking about you know the event for
someone that’s watching the videos who can’t hear it they may not know if
there’s audio that they’re missing again this video also didn’t have any controls
for caption this is someone might be like is someone reading this text is
someone talking about something else the background there is just music but also
someone goes note that without that context so this is a case where you
probably want to have an audio description that says music playing or
just to give some some context that like hey this is what’s going on that you
can’t hear someone mentioned this morning uh at least having an article
with with the video and I found an example vises is Eric about these women
spent five months lost at sea with their dogs and tons of pasta I was like tell
me more I didn’t actually even watch the video because I also don’t really like
to watch videos unless there’s there’s stuff there but there is actually a
entire article that describes the whole situation and there’s a video to support
it so this is maybe a case where the video isn’t necessarily the primary
content and you can see if all of the information that’s shown in the video is
also providing the article then it’s not as important to provide that other stuff
but it would still be useful another thing I’ve been seeing a lot of is those
DIY videos that have they’re usually really sped up they’re showing you how
to cook something or make something they usually don’t have text maybe the little
bit to actually tell you what temperature to put the oven at or
wherever but they don’t have a lot of content they’ll have a lot of text in
the video there’s usually no talking there’s also usually our transcript or
the same steps written out so the the one on the left is a video about
painting jars and then stuffing them full of fairy lights and then putting
like berries and things on them to make seasonal decorations
there’s no no text in the video at all there’s some music in the background
there’s no article there’s no way to get the information in the video except by
watching it and singing through the whole thing and seeing all the steps so
someone that can’t see the video is out of luck someone who just has a hard time
of the videos also out of luck there’s no way they can get that same
information one of the things too about video especially is like people are
ramping up their video production you always have someone as also as always
writing like a script right like you may not have that as the person who’s
posting the video on the website but at some point in the process someone’s
script to go out what’s in that video if there’s dialogue especially like there
was a whole video production that happened that everyone had to know what
was supposed to happen the video so someone had to break out those steps at
some point or break down that dialogue and you can just recycle that and
structure it in a way that is usable here’s a question this YouTube video I
also found today apparently John Cena is going to release an album and this is a
video of him performing a song and this video was posted on noisy which is vices
music site and the video is actually from a from
someone else it’s not from noisy’s YouTube channel it’s from another
YouTube channel this this video also doesn’t have captions whose
responsibility is it to provide that information
it depends right a person that comes to your website who can’t access a certain
part of it doesn’t necessarily know or care but that’s the party content it’s
on your site so yeah at that point you’re kinda responsible because you put
it into your whole experience so while we’re talking about video let’s also
talk about when is it too much this has kind of gone away a little bit there was
there was a while where there was lots of parallax effects you scroll for a
website and things would be moving and people got like nauseous and sick and
ill there was also the time the period of like flashing banner ads those have
also kind of gone away that was also something that could cause people
problems but there’s lots of different ways that you can do this in code now so
he’s working I could say like about animation again but it is something to
think about in general you want to make sure that people can pause or stop
something that’s moving we also recommend not Auto playing
videos whenever possible because that’s also something sometimes you bring up a
webpage and there’s a video playing and you don’t know where it is because you
haven’t gotten to it yet and you’re doing something else and you’re like
what is what is happening and some browsers have like a little icon up in
the tab to let you know the sounds coming from over here but sometimes it’s
still a pain to find so making sure people can pause and stop this imagine
if you’re hearing that and you’re also using a screen reader you also can’t see
what the videos on the page you can’t find the video you can’t find keyboard
accessible controls for the video it just becomes this whole production so
making sure people can pause or stop stuff
if there is an sort of animation while a person is going through your site make
it so that they can have some control over it maybe it’s something if there’s
either graphic the animates maybe they have to
activate it or maybe it only happens once or maybe it only happens you know
when you’re scrolling over a certain part just make it so that it’s not
happening all the time and they can avoid it I also just know flashing you
don’t want good people seizures there’s a specific rate and this is again
another okay criteria there’s a specific rate that can trigger seizures but in
general just don’t have things that flash it’s not it’s not cool it’s kind
of tacky and again these things all go from video as well so again guys pick on
the mag’s website a little bit again are the nines bc site a little bit there’s
this big beautiful carousel on the homepage which is really cool but you can’t stop it they may have
actually stopped because i think my probably disconnect the web from know I
have a million times but it starts and it moves and there’s three of them I
know that there’s gonna be three because I can see three dots
I got looks on the next one and that’s just gonna keep happening I don’t have a
way to stop it without scrolling further down the page you’re going to another
page which I can do that so that’s you know it’s something but having a pause
button would be cool or sometimes when you tab to it or hover over it it’ll
stop just giving people options for for having some control over what’s what’s
moving around a given time this one’s a little bit different this one moves
really slowly actually I could sit for a little while and see if it was actually
doing anything so this is much less sort of constant you might you might be on
this page and all you notice though is rotating but this is going through a few
different publications and I guess have controls over here so you can navigate
manually to the next one which is cool but there are a couple couple things
long is that the controls are really far away from the actual content someone
with low vision who is using magnification
only see a part they may not see that there’s controls there at all so they
may not even know that there is other publications featured the other thing I
double-checked and these controls can be used with the mouse but not the keyboard
so that’s something to be aware of too especially if you’re using a plug-in or
something in your site making sure that all the controls are actually usable
with a keyboard can I talk about in a second oh now it’s speeding up what’s
happening maybe he just didn’t loan everything Oh God let’s turn off we’re
going back to the slide deck another example in prairie fire just to pick up
map support is that they have this this is just a screenshot crash actually
seemed okay this highlights sort of a slide show sort of where these are
actually links that go to features and things in their page much like the one
on the mag’s bc website but again you can’t stop it you can’t pause it there’s
also no way to know how many there are there’s no indication of like what slide
you’re on so if I say I see something that’s interesting like oh I would like
to apply at this and I move my mouse over and then it’s gone
and it’s now looks something else I don’t know if that thing’s ever going to
come back or how long I have to wait for it to come back it’s also something for
slideshows and carousels letting having some sort of indicator that how many of
these are there and how long will it take for me to get through them when my
co-workers built a cool little widget which we’ve if we’ve time with the
ongoing demo that for some things doesn’t work for everything but it does
let you turn off animations Auto playing videos animated gifts things like that
on a webpage so something like this would be handy for someone that has a
hard time you know with all that stuff or just you don’t want things moving
around on you except right now we have a browser bookmarklet for it so you can go
get your bookmark bar but ideally someday it will become a browser plug-in
there’s actually something that browser makers have been discussing about making
something that is just built into a browser that someone can
stuff cuz it’s you know something that people are concern about so my last the
last of the five things is keyword support I’ve been talking about that a
little bit throughout but basically anyone who’s using a screen reader who
can’t see the screen also users that does have a hard time holding a mouse
might rely completely on the keyboard you can make sure that anything that’s
interactive links buttons insert controls can be used with a keyboard and
also really important to see that be able to tell where keyboard focus is
which I’ll give you an example of in a second so sort of three big things when
you’re testing with the keyboard this is a super easy thing if you’re not a
nickel person you can still test with the keyboard can you see where focuses
and you’ll see what I mean by that in a second as you go through the page just
focus going in order that make sense does it go to top to bottom do you can
you sort of anticipate where it’s going next and can you activate everything can
use links buttons form fields that’s sort of the next step but basically what
you need to do to test this is a tab key that’s it
you have one of these on your computer already so for example let’s pick on
let’s pick on can’t living smart so I guess clicked and so that the focus
indicator that sort of fuzzy blue ring went to the the logo which is great
actually so if I hit the tab key it’s going to
the next thing that’s interactive which is their trigger icon and then Facebook
and then X Kip’s whatever those dots are and goes to profile I guess search
probably and now I’m in the main navigation in general this is the order
of expect this stuff to get one left to right because it’s a page as it’s in
English and then I can just go through everything it’s interactive and
hopefully interact with it the little indicator looks different in different
browsers in Safari it’s like a fuzzy blue and same thing in Chrome
one thing that might be good Jacobus is so I tapped to that food drop-down and I
didn’t do anything which is maybe okay look if I hover over it I actually get
the menu and I don’t think there’s actually a way for me to do that with a
keyboard I think if I hit enter it’s gonna take me to the food landing page
which isn’t the worst thing in the world if I can get to all those are the pages
but it is an extra step so being able to do the same things with a keyboard in
the mouse are super important they also have a nice hover state over these links
which if you use the keyboard you don’t see so it’s been coding to look a
certain way with hover but not focus if you just start hitting the tab key
when you open a browser it should show up if it doesn’t show up then whoever
developed the website turned off the default focus indicator which is a
problem a lot of websites do it because they think it doesn’t look nice this is one of them I’m hitting the tab
key and you can’t see anything if you’re sticking see way down in the corner
Safari will show you or chrome will show you what URL that thing goes to so tab
focus is moving I’m going through links on the page but I have no idea what that
actually is and I do have pepper States for things some something so clever
States but if I’m just using the keyboard and I can see the page I’m not
gonna have any idea where I am so that’s more of a thing to double check with
your with whoever builds your website to make sure they haven’t turned that off
and ideally have also made it a little bit easier to see see there goes that
little like slow carousel so that’s keyword stuff so a couple
couple things before we give you a sort of to put those in context is sort of
big picture view of this because you’re not gonna go back on Monday and make
your website completely accessible it’s not gonna happen and that’s okay but
things you can think about servitor at a project or website or organizational
level to to sort of prepare for this work are things like a topic that’s come
up a lot today how does your organization do inclusivity of all kinds
because if you’re actively working to be more inclusive as an organization this
stuff is going to be way easier companies that we work with that are
having a really hard time doing accessibility from design and product
and you know development and everything perspective are still having trouble
with you know having a diverse organization
they’re having a hard time adapting to new ways of working and learning and
thinking in general so if your argue on the path of thinking about this and like
trying to get better as an organization this is gonna be way easier the thing
you can do serve at the organizational level and even at the community level
and when I say community I mean you’re maybe your staff your contributors your
readers your your audience think about things you can do to make it possible
for people in your org to learn about accessibility identify what it means to
them and their role and sort of what they want to do as they as they do this
in your organization we talked about creating a community practice what that
looks like depends entirely on how your organization already does things when
you have a new initiative what does that look like do you have a task force do
you served you ad hoc experiments do you get grant than doing a project sort of
however you already do stuff is gonna impact how this happens two thing that
is hard is when organizations try to do new stuff like well we need to get in we
need to get an automated testing tool and that will help us and it’ll be an
organization where there’s five different teams and they already all use
different tools they haven’t be able to use one tool normally so why would the
Google use one tool to solve this problem so think about how your
organization already does this sort of stuff because how you do how you do this
it’s going to be completely different than another organization other thing to
think about is mobile so you probably have mobile users like tablet users if
your website is responsive we’re gonna have a mobile website then your early
thinking about what sort content should we present to a person that’s not a
smaller device that helps you think a lot about the content order and also
looks you think about prioritizing usually and get stripping out a lot of
extra stuff you’re thinking about a mobile user so thinking about the the
mobile experience helps you really think about structure and organization and
prioritization of your content the other thing you can do is be really
progressive about how you test so I mentioned I make testing there’s lots of
browser plugins and lots of tools of the person that’s building your website and
designing your website can use to sort of see how things are currently it’ll do
things like catch actually empty all attributes things like that they can do
things like test with the keyboard things you could do manually things like
seeing if the text descriptions and images actually make sense in context
things like that things like a human should do it sort of quality control and
another thing you is actually enroll your users user / member / this can be really scary but it’s really
cool and rewarding so if you don’t already have a way to get feedback from
the people that interact with your stuff make one and actually support it I don’t
recommend creating like a separate email address like accessibility at
such-and-such and then don’t check it don’t do that but make it easy for
people to get in touch with you if they have questions or concerns don’t make
assumptions about how people use your website just broadly don’t assume that
people accessing the mobile breakpoint are on a mobile device they might be on
a desktop with the their browser really small because they use a magnifier and
they only want to see a little bit of their screen at once just as an example
which is one we’ve seen if you have the capacity to do it do some user research
find out who your users are and if you can test your website with actual humans
with disabilities a super important thing and this is something’s come up
this week too is pay them don’t expect free labor from people it’s
not very nice so yeah make sure you pay people if
you’re if you arguing user testing with anyone but especially with people with
disabilities you’re really paying them for their expertise with the tools that
they use the assist technologies they use as well as their you know you their
their expertise in their lived experience so pay them as you would you
know any other freelancers or employees if you do testing and if you do you know
any search testing you make some updates to your website prioritize stuff that
people actually use sometimes we see people will do well well update the
contact page because it’s just like a paragraph with a link to an email
address and it’ll be really easy but people don’t use that page a lot like
they probably not use that as much as say an article page or the home page you
can look at analytics and see what people are actually using and make
decisions about what you should fix first and the last thing is just that I
think this is very parent context matters this is all very squishy there
is no rubber stamp – this is accessible now the guidelines you can follow might
depend on where you are and what your what your goals are
it depends as you’re creating content and design and development from the
start and also it’s everything that your users bring so all their experiences how
good or bad they’re gay has been all of those things are going to impact their
experience on your on your website so those are things to think about that’s
what I got you

Leave a Reply

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