Accessibility and Websites - Svetlana Kouznetsova

Accessibility and Websites - Svetlana Kouznetsova at WordPress NYC Meetup at NYU Poly NYC on Oct 16 2012

Tim Berners-Lee, the inventor of the world wide web, said: "The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect." The internet is definitely one of the best things that happened to people with disabilities. However, there are still many websites that are not accessible to those visitors because they are not designed or coded properly to be used effectively even with assistive technologies. This presentation covers the basics of accessibility and explains why it benefits everyone, regardless of disabilities, and even website owners.

Svetlana Kouznetsova (Sveta) is a NYC-based web professional with a BFA in Graphic Design, an MS in Internet Technology, and over a decade of project experience with national/international organizations and non-profit/educational institutions. Her main interests are user experience, accessibility, front-end design/coding based on the latest web standards.
http://s-v-k.com/

http://www.meetup.com/WordpressNYC/events/86067492/

PUNKCAST 2103-01
Webcast support: NYI http://nyi.net

More videos: http://wpnyc.org/video/

(Steve Bruner)
Alright, welcome to the WordPress

New York City meetup!

Okay, so tonight we are going to have

Sveta present about accessibility with websites.

(Sveta voiced by an interpreter)
Hi, everyone!

My name is Sveta.

Actually it's short for

a longer version of my name.

I'm originally from Russia,
that's why I have such a long name.

And i'm presenting about web
accessibility - something i'm very

interested in as a deaf person.

As someone who is disabled,
naturally I'm very interested in

web accessibility.

And this is a logo created by some university

that represent accessibility.

Because not everyone uses a wheelchair,
there are people who are blind or deaf,

who have cognitive disabilities

as well who aren't necessarily
represented by the wheelchair logo

that's usually used for accessibility.

So you have the eye, the hand, and the ear,
and the brain to represent cognitive abilities as well.

So I am sure you all know who Tim Berners-Lee is.
Is there anyone who doesn't know?

Who knows who he is?

OK many of you know who he is -
and this is a quote from him:

"The power of the web is in its
universality. Access by everyone

regardless of disability is
an essential aspect."

In the early days of the web

it was actually more accessible than now

because most of the websites were text and links,

and not very many images and videos.

So there wasn't a lot of audio, but today

97% of websites are not accessible.

Many people who are blind.
They think: "Oh they can just

use screen readers. That's good enough
for them." But actually the web,

the sites must be coded

in order to be compatible with screen
readers, or people

who can't use a mouse,

or who can't use a keyboard,
need other devices.

Automatic captions are not very
accessible for deaf people.

So 97% of websites as a
result are not accessible.

Maybe people think that people with
disabilities are a small group of people,

but actually disabled people can
constitute the largest minority group -

more than foreigners

and the market here for people
in the United States

is $1 trillion.

That's double the spending power
of teenagers.

Worldwide, people with
disabilities constitute

a $ 4 trillion market place.

That's almost the size of China.

So it's a really important group of
people that should not be ignored.

It's not just people with disabilities

who benefit from web accessibility
as you see from these pictures.

You have a mother with a stroller and
also a businessperson carrying

a roller suitcase.

Ramps are actually very helpful
for people in all these situations.

It also benefits people who use carts
or any sort of wheeled devices.

Ramps and elevators help

these people as well.

So it's not just for people
who are using wheelchairs.

Also captions not only benefit people
who are deaf.

Speakers of foreign languages also

benefit from captions.

People who are developing
their literacy skills or

if someone's in some sort
of noisy environment and

they want to watch something
quietly on the web,

that's another reason why captions
for videos are so important.

In talking about the spending power
of people who have disabilities

doesn't only affect people with
disabilities, but their friends and

family members as well.

If products and services are
not accessible

then you lose those extra clientele
as well because

you have 2 billion people worldwide

are connected to people with disabilities.

That constitutes a disposable income
of $8 trillion.

So it's another benefit.

The devices that can help

people with independence in terms of
computers or mobile phones -

you have a large audience.
This participation,

this increased market opportunity,

also having a positive image,
not just waiting for someone to sue you

because your website is inaccessible.

If u show that you're making
an investment for accessibility,

it's a much better better investment than
spending money on a lawsuit later.

Improved visibility is another benefit,
and also higher search engines results.

Speaking of search engines -

this is the largest accessibility needs
user on the Internet,

because Google, Yahoo!, and Bing -

those sites can't see images and
they really rely on captioning

for the images.

If a video doesn't have captions it
does not appear in search results,

because Google can't hear a video.

Thus captioning and the tags

are very important for
search engines.

And with javascript...

sometimes the code in javascript is not
compatible with some keyboards as well.

How many of you are familiar with Web
Accessibility Guidelines?

It seems that there are a number of you.

Perhaps it might be very
overwhelming because the list

of guidelines is quite long

and even for myself I can be quite
overwhelmed with that, so people tend

to make these categorizations

and create basic guidelines

which are described as
the acronym P.O.U.R.

Perceivable.

Meaning blind people who
can perceive the image,

they might need an audio to supplement,

or for people who can't hear,
they rely on captions.

Operable.

Means people who use a keyboard

to make sure that everything -
all the functions can be used

by a keyboard not just by a mouse.

You don't have to hover over something
to be able to see the option.

People can't rely on a mouse would then

not be able to use that function.

Understandability.

Understandable means if text is there
to make sure that text is easily

understood by any user.

Even though maybe you might think:

"Well, there's a YouTube video -
YouTube has automatic captions -

that might be good enough."

But automatic actions are
usually unintelligible. They really

do need to be cleaned up

otherwise most deaf people will not
be able to understand them.

Robust.

Means something that's compatible with
current and possibly future technologies.

So now talking a little bit about how to
make a website accessible in terms of

the technical aspects.

The semantic web.

In terms of the semantic web,
content is king.

Perhaps someone has

a fabulously beautiful looking website

but the functionality in the content
is weak.

We have these three elements:
html, css, and javascript.

The html provides a very strong
foundation first,

and then you can use style sheets
with css,

and then javascript - it's probably

best to use javascript only
when necessary.

I know it might seem fun to add some more
fun functions, but

the less javascript, the more accessible
a website could be.

How many of you are familiar with

that WordPress has this word 'role' - R-O-L-E

- how many of you have noticed that in WordPress?

A few of you?

I've noticed that role

equals main role banner

and I thought that perhaps some people think
you can just delete that but that's very

important part of the web accessibility.

Here's some examples of role -

like body,

the role document,

header

has a role, banner,

and if main will have a role, main,

footer has its content info.

So on the WordPress

template keep the role,
don't get rid of that.

There are more examples
of this role as well.

In terms of the html structure,
it's important to have a good structure

to the website.

Many of you might

skip links, but it's important

that it's in the top of the html page,

because many people who use screenreaders

don't want to hear link over and over.
again for every page.

So they prefer to have the option
of 'skip link'

to the main content or other parts
of the webpage.

You can also hide that

with the css style sheets,

but don't use 'display none'

or 'visible none'

because that will cause the screenreader
not to show the content.

If you indent over -

over position -

then you can hide

those commands that only the screenreader
will be able to distinguish.

Talking about images -

navigation - all the navigation buttons
must have bullets

and

for the screenreader.

You can style with css,

but it's important to have those
bullet points.

Drop-down menus - it's best if you use
html and css not javascript for those.

You can have the drop downs in css,

but it's also important to keep the drop
downs limited to maybe two levels,

because the screenreader is going to repeat

that over and over again.

Header , , -

it's best to use that

for the content organization, not for
decoration.

The keep that just for
the page title,

and for subcategories -

not using that for the menu

or for anything other than

just the content.

It's really annoying to see
'click here'.

To download you don't need that. Just
click here to download is very annoying.

Or click here to download with check list.

You can just have download checklist and
the kind of file that it is because the

screenreader reads click here, click here,
and the screenreader isn't sure what

you're clicking for.

So the message, if it's just very clear -
download to a pdf -

then the person who is using the website
will know to expect the certain

kind of document.

For the content text,

make sure it can be resized in terms
of a percentage, or

in the terms of em.

This way people who have low vision,

who have some vision but can't see very
well, can resize the text.

Similarly on mobile devices,

don't have frames,

image maps,

or layout tables.

Those are very hard for screenreaders
to be able to detect.

Make sure that all functions can be
accessible all through the keyboard,

and that javascript - if you have to use it -

it's better if it's downgradable,

because then it there is a problem with
javascript the website is still functional.

Write in simple language using
bullet points. Most people -

anyone could have a disability,
or the general public doesn't

necessarily have as

much time to spend reading

a lot of text on a web page.

You'll also want to have the web
layout consistent for each page.

If you need to, it's best to use
html 5 canvas instead of flash.

You can make flash accessible,

but html 5 is a better way to go.

Flash is also not accessible
to users of iPhones and iPads anyway.

I'm talking about the images and logos.

There's a lot of confusion between
'alt' and 'title'.

alt means what you can't see.

the title tag is an optional thing -
you don't need to have that.

If it's an image that leads to
another page,

like a logo on the top left of the
the navigation,

you could have a description of what
the image is.

Accessibility logo, for example, alt.

And then the title will say "go to home page"
or going to a different website.

If the image is just decorative

then you can keep the alt empty,

but don't remove it.
Just had it there, but it doesn't need

to have anything in there.

Also no text in the graphics -
it's best to use

html for the text

as screenreaders will not be able to
read the text inside of an image.

Avoid image maps if possible,
that would be the best.

Providing text or shapes for a color button,

and i'll talk about color in a moment.

Don't use strobing, flickering, or
any sort of optical illusion because

people who have seizures

will be sensitive to that, and they might not
even be able to see that or detect that.

If it's something that's a slower

pulsating type of image that could be ok,

but not something that's an optical illusion.

I mean, I know maybe it's apropos
for some websites but usually

it's not very accessible.

Talking about color -

one in ten men are color blind.

I've met a lot of men

who are color blind,
but actually I haven't met a woman

who is color blind, and statistically
it's only one in two hundred.

If you notice a subway map,

typically I'll say to my friend, oh I will take
the green line, or take the red line,

or the orange line.

I rarely will reference the number but if
someone's color blind it might be harder.

Red and green are typically colors
that people who are color blind are

sensitive to,

yellow and blue not so much,

and rare that you would see black
and white color blindness

but this is sort of an image
of what that might be like.

So you don't want to rely on color only.

For example these buttons -

stop and go here -

you can read it. It's a little hard, but
for someone who is color blind,

that's what it will look like. It just
looks like brown on brown,

and then the text gets lost
in the color.

Contrast is a better way to make
something more accessible.

Whether or not you want to add an image

make sure that someone is not
reliant on the color of the

information for the information.

I'm sure you're familiar
that facebook is blue. Do you know why?

Because Mark Zuckerberg is actually
color blind, that's why facebook is blue.

I just read about about that.
I thought that was cool.

In terms of tables I'm not going to go

into great depth in terms of the code

but here's a summary about it because

some tables are more simple, some are more complex.

Here is a summary just so you have
a heads up about this.

In terms of captions

to explain what's in the table

must be there for the header,

and scope should be included.

and also CSS has specific rules for
the table.

Tables should only be used for
tabular data -

like a spreadsheet or something that's
in a matrix format.

They shouldn't be be used for layout.

You should just use css for the layout.

In the past tables were used much more
commonly but now not so much.

In terms of these tags for the heads,
body, footer,

you can find more of these
in google or online in other places.

Forms.

It's important to have labels
for the input.

It is also good because the screenreader
user is reliant on the keyboard.

Most of us are relying on the keyboard
as well.

The 'label for' tag

might only be for

these small radio buttons.

If you use

that means that you can also include

the entire text. So if you click on the
word -

that also gives you the selection as well.
It's great for the keyboard users

and people using screenreaders.

If you use groups like radio buttons

checkbox

or setting up a field - .

and ,

those are basic rules for tables.

Now we're talking about video and audio
and as a deaf person this is something

I've experienced a lot of frustration with -
most videos online are not captioned.

Many video broadcasts are not
accessible to deaf people.

Some people think, well YouTube has

automatic captions - and I encorage people

to use YouTube not Vimeo.
Vimeo does not support captions at all,

YouTube has some captioning support.

I also recommend YouTube because
it's very easy to use and it's an easy way

to add captions, but

do not reply on the auto-captions

because they are

really hard to understand,

and I'll show you in a moment an example.

It's important to have good quality
captions and transcript -

not just relying on speech recognition.
You could use that perhaps but make sure

that it's cleaned up.

Or perhaps hire someone

who can produce a good quality transcript

beyond just what an automatic speech to
text recognition can do.

Also if you use radio podcasts

you can have a good enough transcript for that,

but make sure that you have
the proper style -

identifying speakers for example;
make sure punctuation is correct;

and if there are any sound effects like
laughter or playing music, that that

information is included as well.
Because a deaf person is not going

to hear those audio cues.

For videos you should have

both captions and transcript
available.

The reasoning is because if someone
is both deaf and blind

they're not going to be able to follow
the transcripts -

I mean the captions.

They might be reliant on a braille
display that pops up

for them to be able to read the
transcript as away to access the video.

Transcripts benefit not only deaf

people and deaf-blind people,
perhaps for an hour long video somebody

would be able to skim through the
transcript a lot faster than watching

the entire video.

So it really in general is best to have
both the transcript and the captions.

Sometimes you want to be able to watch
and hear the video, and then be able

to read the captions,

without first watching the video

or just read the transcript.

Just as it's important to have
the audio and video in sync,

it's important the captions
be synced as well.

In terms of webinars

it's important to hire someone who's
a professional transcriptionist,

somebody who is professionally trained
for that,

so that they have 98% accuracy

with 220 words per minute.

That's the required speed and
not everyone can do that.

So if you want to have a video pick
a player that supports captions,

and if you want a transcript that may be
too much for you to do yourself -

this is a popular service CastingWords -

and you can use that for podcasts and

also YouTube videos.

If there's a time stamp,

you can then upload it to YouTube,

and they have a way that you can sync
ticket options with the video.

I have more information on my own website.

Usually I'll give a one hour
presentation on this kind of information

so I'm only touching on points here.

I want to show you why automatic captions
are not reliable.

There's no sound on purpose,
just for you to watch it.

So I've actually listened with a person

who could hear whether the captions matched,

and they said that it didn't.

The speech recognition is just
relying on a machine.

It's good that it does something,

but it's hard to rely on the auto-captions.

Most people think that it's no big deal,

we can just use that, but they do really

need to be cleaned up by a person.

So here's some general information.

WebAIM is a great resource

for making your websites accessible,

and very clearly presented,
the information there.

If you'd like to have an evaluation tool

this is a very popular site - WAVE -

developed by the WerbAIM team.

I do have that on my computer and
it's very helpful.

It's not 100% reliable or accurate.

Sometimes it might miss
certain elements of the site.

Firefox also has accessibility
extensions,

and the WAI has a lot of
different tools here.

Captioning, if you're more curious
about that,

I do have a website here with

a lot of information and my contact
information is there as well.

If anyone has any questions?

(Audience Member)
Are there any WordPress templates

and/or plugins that you recommend
as being very accessible?

(Sveta voiced by an interpreter)
I'd have to google it in terms of
accessibility and WordPress..

(Audience Member)
Anything that you've used or come across

that you're really comfortable with?

(Sveta voiced by an interpreter)
I've just started using WordPress

earlier this year so i'm not as familiar.

(Audience Member)
What websites are potentially liable to being sued

for not being accessible, and for what period?

(Sveta voiced by an interpreter)
There are so many.

Well, ninety seven percent of web sites
are not accesible,

for example, Netflix.

The deaf community's actually suing,
in process with a lawsuit right now with Netflix

because they refused to caption

their streaming videos. Their dvds have captions,
but they don't have streaming captions.

CNN is also involved in a lawsuit right now,

they have captions on television but they
don't have captions on their web content.

I know that blind people, they sued
Target. There was a blind community

involved in a lawsuit against
the Target website.

(Audience Member)
So there's some examples, and like I say
it's a better investment

to make their website accessible than
be liable and possibly be spending money

on a lawsuit later. Are there any ways of tracking,

using Google analytics, to see how many access-challenged
users are coming to your site

so you can say to a client,
you need to address this?

(Sveta voiced by an interpreter)
I don't think there's any way

to track using Google analytics.
I think user testing is the only way

to really track accessibility,

and these accessibility valuation tools.

(Audience Member)
Aren't there separate browsers

that can be used by accessibility...

(Sveta voiced by an interpreter)
What do you mean?

(Audience Member)
Uh... for the speech,

it can read through..

There are certain browsers that can..

that, if you need it read to you,

0:28:18.430,0:28:25.430
you can..use that browser,but I'm not sure
if it's capturable in analytics.

(Sveta voiced by an interpreter)
No, not that I'm aware.

It's the same concept as if you
design a regular website,

and your user experience is not just
about the people who are disabled but

you might try to have some user testing
to see whether or not

the website conforms to the expectations

of a certain user group that's very similar

to people who are disabled.

The only really way to find out is
the survey people with

disabilities and get their feedback.

(Audience Member)
That's one of the questions I am asking about
developers asking the disabled community

how to do certain things.
I mean, I am beginning to lose my vision,

and I've found it's very difficult
to get somebody to say,

well, it's very easy

to do this because I see other technology

being used broadly and maybe
the inference about ramps,

well everybody uses ramps and
it's part of the culture

not just about accessibility and those
who need it and it's really for everybody.

(Sveta voiced by an interpreter)
I'm sorry. Is that a comment or a question?

(Audience Member)
The question is ...

How do you get people's minds

wrapped around that you should be
developing for everybody all the time,

rather than to step back and say
I'm going to do this site for blind people,

I'm going to do this site for deaf people.
It's just that why shouldn't you just

include all these accessibility tools
as part of your regular development?

(Sveta voiced by an interpreter)
Well, because people aren't aware

unless they have had that
explicitly explained to them

as it a deaf person I might say well I need
captions, but I might be perceived

as being just one deaf person asking for that.

People don't realize that captions
benefit speakers of other languages.

My parents have perfect hearing

but their first language is Russian,
not English,

and they watch television with the
captions on,

because it helps them understand and
learn English better,

The disability market is huge

and so they shouldn't be overlooked.

People who are becoming older,
you'll notice the baby boomers

are now a very large segment of the
population and and more and more of them

are developing disabilities as they age.

So I mean it's not easy,

I can overload people with statistics.
People who care tend to really

make the investment, and others

don't, they won't.

Do you want to do responsive,

type of reactive design, or
be like people who want to

develop based on user experience?
Those are two different

approaches that people can take.

(Audience Member)
No. I am just making, I guess, the comment
that the very fact that you are here

raises the fact that a lot of people in
this room probably never even thought about -

I mean that may be just an assumption on my part, but -
I think this is just a way of raising

the awareness for the rest of the community.

(Sveta voiced by an interpreter)
Yes, right. And, for me, I'm a sighted person

but sometimes, if a page is slow to load,

I still like to have the description
of the image

because I might shut off images

and still want to to be able
to see what it is to make it

load the page faster.

0:32:33.270,0:32:36.429
Just having "something dot jpg"

isn't necessarily going to be very helpful.

It helps the searchability

as well if those tags are there in the
descriptions. Even though I am not

blind I benefit

from accessibility for blind users.

And even with captions, people think well
they don't need that,

and then later on when they use them,
they'll realize how they

appreciate it and they wish
they had used them earlier.

I think there was some in the back
with a question?

(Audience Member)
I was just wanting to respond to something that
the gentleman up there said earlier

about why include it in everything that you do
as kind of a default thing.

Well why do we include mobile versions
and responsive versions of sites

0:33:25.770,0:33:28.210
by default? I think it should be treated
the same way. I'm not arguing with you. (laughter)

(Sveta voiced by an interpreter)
That's a good point. Yes.

(Audience Member)
Could you speak more about

0:33:40.419,0:33:43.200
responsive design?

Are you saying that responsive has

a better capability for the disabled?

(Sveta voiced by an interpreter)
Well, not exactly. It can overlap,

but not exactly.

Because if you use mobile phones

but the code is not compatible

for a mobile phone, I'm not sure how
exactly people with limited vision

even use the mobile phone. That's still new
for me but that's another example

in terms of having the code be compatible for

what shows up on a mobile phone.

I know how people with disabilities use
an actual standard computer. I'm not as

familiar with people with disabilities
using mobile devices.

(Audience Member)
This is more in reference to
how do we make accessibility

more standard. I think we are
at a good time now with html 5,

css 3, and all these new additions.
They are still in the works of

being the global rule of the land,
compared to how html was very much

do it until it looks right kind of thing,
so right now, if we do push for it

in as many places as we can
I think it will potentially be more..

(Sveta voiced by an interpreter)
Correct, but that isn't enough.

We need to remember also about color -

it's not just about coding,

it's also about the design,
and the visual aspects

of the website as well.

(Audience Member)
That's a good point, thanks.

(Audience Member)
Are there tools?
As a designer and front end developer,

I'm always using tools like browser stats and
from other devices because you can't

possibly have all the devices..
and this is something I need

to consider that there's even more
devices that I'm designing for

that we're not even looking at.
So I'm wondering if there are tools

that as developers we can access to
get an experience of what

a disabled person may be seeing.

(Sveta voiced by an interpreter)
Yes. You can download the free tools.

I think if you have a Mac,

Mac has screen reader software already
built in. I just found this out.

There is captioning support too
which i was really amazed at. I'm curious

as to what the screenreader with captioning is
going to look like.

The Mac screenreader also has captions,

that's telling me what it says.
It's really cool. So if you have a Mac

you use the VoiceOver

that's the Mac feature

you can select as an option.

I think in windows, I'm not sure what
it's called because i don't use windows

there might be something that's

parallel that does

the same thing for windows.

(Audience Member)
Can I just comment, add to that?

Because I do use windows, can I just
follow up, is that ok?

(Sveta voiced by an interpreter)
Sure, go ahead.

(Audience Member)
OK. On windows there are a couple of speech

detects software. One is called Natural
Reader, that will read the text on a page,

detects software. One is called Natural
Reader, that will read the text on a page,

and also turn it into a wav file, so that
you can automatically...

So, it will read through the copy you've
written, turn it into a wav file, and

you can repost it on the site. So you've
automatically turned it into something for

people who can't see but would like to
hear what you've just written.

(Sveta voiced by an interpreter)
Thank you for saying, that.

OK, I think that's it (Applause)