All right.
I think we can go ahead and get started.
So welcome everyone today for our first webinar
that we're doing with our partner, AccessibilityOz.
I'm David Herr from CommonLook.
I'm the Director of Marketing here.
Today, our webinar is a series of four webinars
that we're going to be doing over July, and most of August.
We're going to be covering some various topics that
are hopefully of interest.
The all around accessibility, not just beyond your website,
but looking at social media, and mobile, and documents,
and some of the other areas of web accessibility.
So today we're going to have Gian Wild, who will be
doing the major presentation.
I'm just going to introduce who CommonLook is,
and then I'm going to be turning it over to Gian.
Just let me explain who CommonLook is.
So CommonLook is really focused on the documents
side of accessibility, and in the coming weeks,
there will be a couple webinars that we'll be doing.
We'll go a little bit deeper into how you test documents
for accessibility, but just who we are,
we've been around over 20 years.
We do millions of documents on a remediation basis,
we have software suite, and we do a lot of training.
So if you're looking at document accessibility,
we're the leaders in this space and we
have the tools, and the training,
and the knowledge that to assist our clients with being
successful with documents.
Really, what makes us different from probably everybody else,
is our focus is on standards compliance.
And if you focus on standards compliance,
then it removes some of the vagueness around,
how do I ensure the document's accessible?
And that it will work well with a screen reader.
So when we do documents to PDF/UA or WCAG 2.1
AA, checkpoint by checkpoint, you
can be assured that your documents are going
to work well with a screen reader,
and then, thus be accessible to everyone.
So with that, I'm going to turn us back over to Gian Wild,
and she will lead us through today's presentation.
Thanks, Dave, and thank you very much for coming.
I'm just going to talk briefly about AccessibilityOz.
We focus on auditing, but we also train
and we really work on transforming an organization.
So we have a number of automated access--
sorry, a number of products.
One is an automated accessibility testing
tool called OzART.
We have our accessible video player called OzPlayer,
and our database of accessibility errors,
screenshots, code, and solutions called OzWiki.
And as an attendee of one of my sessions,
we'd love to give you three months free access to OzWiki,
so we'll send out some information
about that with the details of this presentation.
So thank you for attending today.
I want to start off.
I'm going to talk about social media and accessibility.
I'm going to talk about making--
testing social media, but I'm going
to focus a lot more on the accessibility features that
are inherent in social media, and how
you can use them to ensure your social media is accessible.
But first, I want to talk about why social media is important.
So I want to start off by asking, who
knows who these two guys are?
If you can get to chat or Q&A and let me know,
that would be great, if you know who these people are.
Nope.
Supernatural, exactly.
Sam and Dean, Prison Break.
No, they're so much cooler than Prison Break.
OK, so these guys are Sam and Dean.
They are the-- yeah, or is he just not watching enough TV?
I think that's probably a good thing in this day and age,
with COVID as it is, I think that we could probably all
do with a whole lot less of Netflix & Chill.
Anyway, these two guys are the main characters in a TV show
that's been running for 15 years,
and they're in their last season this year.
And they're two brothers on the show,
and they go around hunting monsters like vampires,
and werewolves, and things like that.
And I have a guilty little obsession with Supernatural,
and so, when I do my social media testing,
I do actually follow a whole lot of Supernatural stuff
too, as part of the testing that I do.
But I wanted to talk about-- as far as,
how social media has kind of changed my perception of myself
through kind of interacting with these guys.
I dislocated my toes from a car accident
about a year and a half ago, and what
Hollywood would have you believe is that, with the dislocation,
and it actually happens in the show,
you know, some-- you go one, two, three,
and you're very strong willed and go, "oh, it hurts,"
for a second, and then you just look a bit sad
and then it's over.
When in fact, a dislocation can actually
be much more painful and long lasting than a break.
And so, one of the actors of Supernatural
actually dislocated his shoulder,
and he had his shoulder in a ca-- in a sling for months.
And, even thought it happened at the end of one season,
he still had it in a sling in the first couple
of episodes of the next season.
But in the TV show, they don't talk about how
he dislocated his shoulder.
They talk about how he broke his collarbone.
So there's this, kind of like, belief that dislocation isn't
a big deal, even to the point of,
they couldn't even reference it in the show.
Now how did I find out that it was actually a dislocation?
You're right, social media.
That's where social media can--
[INAUDIBLE] for months I thought, what is wrong with me?
Why can't I run presentations?
And I'd have to sit down because my toes would
hurt all the time, they even hurt now,
but I found out from social media that I was not alone.
Let's talk about what social media is.
According to a donut store, this is what social media is.
Twitter, I'm eating a hash donut.
Facebook, I like donuts.
Foursquare, this is where I ate donuts.
Instagram, here is a photo of my donut.
YouTube, here I am eating a donut.
LinkedIn, my skills include donut eating.
Pinterest, here's a donut recipe.
Spotify, now listening to "donuts."
And G+, I'm a Google employee from several years back who
eats donuts.
So there's a whole lot of different social media networks
out there, and of course, Tumblr is missing.
And there's a running joke that basically Tumblr
is a Supernatural gif associated with donuts.
Basically, it's one of the characters eating a donut
because Tumblr is just basically run by Supernatural fans.
Let's talk about why social media
is so important for people with disabilities.
We find that there's 3.81 billion active social media
users, which is almost 50% of the population.
99% of these people access social media via mobile,
and 80% of the time that people spend on social media
is via mobile.
The average user has 8.3 different social media
accounts, and the average time spent on social media
is three hours per day.
So it's a lot of time spent with social media.
And it's not just young people.
Of course, 90% of people aged 18 to 29 use social media,
about 82% of people aged 30 to 49 use social media,
but we also find 68.5% of people aged 50 to 64 use social media,
and 40% of people who are 65 and older
use social media, as well.
So it's not just a young person's game
In terms of who's using what, the largest we find
is YouTube with about 73%, Facebook at about 69%,
Instagram at about 36%, Pinterest at about 26%,
LinkedIn at about 26%, Snapchat at about 24%,
Twitter at about 22%, Whatsapp at 20%,
and Reddit at about 12%.
Tumblr is not even on that list.
So even though YouTube and Facebook kind of
have the-- a large number of the others definitely
have large numbers as well.
The other thing to realize is that unemployment
for people with disabilities of working age
is 14%, which is about three times the unemployment
of people without disabilities of working age.
48% of people with disabilities of working age
are employed versus 79% of people without a disability,
and the percentage of recruiters who use LinkedIn is 95%.
And so, if LinkedIn is not accessible,
then that could really affect your prospects for a job
if you are relying on accessibility features
to actually use the system.
I want to talk about how social media has
changed I asked for stories that change people's lives.
So in the last few years I've been
asking for stories about how social media has changed
people's lives, and one of the stories I heard
was from one of my own staff members who resides in Poland,
and he's a screenwriter expert.
And we were looking for an accessibility tester,
and because we're a global company
we didn't mind where the person is located.
All our staff worked from home long before COVID 19--
made that a requirement.
We tweeted out that we were looking for an existing reality
tester, and he found out about it through Twitter,
and reached out, and he's been with us for several years now.
Another example is LinkedIn.
I was in a hotel on Thanksgiving day
and my flight was the next day.
And I didn't have a whole lot to do, so I thought,
you know what, we need a salesperson.
And I actually sent personalized emails
to all my LinkedIn contacts that had sales in their title,
or previous roles, and I actually
had someone respond on Thanksgiving day
and say, oh my gosh, I'd love to work
with you I met you such and such, et cetera, et cetera.
And we had a phone call, and talked for a couple of hours,
and then we ended up hiring him as a salesperson.
And of course, you know, we would have hired him anyway
if he didn't call on Thanksgiving day,
but this is just one way of how you can really
connect with people anywhere at any time.
Another example is a friend of mine who has a lot of unique
and rare medical condition, and she found that she had some
very strange side effects that the doctors told her were all
in her head, that absolutely could not have to do--
it could not do--
could not be because of the illness or the medications
that she was taking.
And so, one day, she came across a Facebook
group of people who had this illness, and she joined.
And she learned that the things that she was experiencing
was standard side effects to the medication that she was on.
So after talking to those people,
she managed to get onto a better doctor
and different medication.
Twitter, so this is a picture of Graeme Innes, who
was a disability discrimination commissioner in Australia,
a few years back.
He's vision impaired and has a guide dog,
and he called an Uber once and basically,
the Uber said I'm not taking your dog
and he ended up suing them.
He's also said he's had Ubers that have said, oh, you
need to put your dog in the trunk
or in the boot, which is not a good idea.
But I think that's a really interesting response.
I mean, Uber apologized and released a statement saying,
hey, we need to address this better.
But what happened in San Francisco was,
someone who was vision impaired was having trouble
with the Lyft app, and they tweeted at Lyft and said, hey,
you know, I can't use your app because I use a screen reader.
And they said, why don't you come in
and talk to us about it?
So he went in and met with them and explained certain things,
and they were like, oh wow, this is really interesting,
and they ended up hiring him as their accessibility person.
So once again, another way of social media changing people's
lives.
And just because, if you are a Supernatural fan,
you'll know the tag line is hunting people saving--
hunting people-- hunting things, saving people.
And there is a story about a person who
was eating a steak watching YouTube videos when he started
choking, and he had the presence of mind
to search "how to stop choking you by yourself,"
and apparently you lean over a chair
and you kind of push your diaphragm against a chair,
and he credits YouTube with saving his life.
So that's some examples of where social media has
changed people's lives.
There are five main reasons why people use social media.
The first is personal, so things like
creating an online commentary of personal thoughts,
sharing photos, and discussing social events.
I have started taking photos of birds,
and so I probably have about 75,000 photos of birds now.
But I go through them and I put them on Instagram,
and people who are interested in birds, but also my friends,
can follow along and see what I've been up to.
Also, while I was traveling, that
was a good way of keeping in touch with people.
And sort of-- yes, it was a bit of an Instagram kind of life
where it looks like I had such an exotic life because I was
jetsetting around the world, but that's kind
of what it describes about.
Then as work, examples include creating resumes, creating
professional connections, discussing job opportunities,
and this isn't just about LinkedIn.
It's a lot of jobs and things that
are often through Twitter as well,
or advertised through Twitter.
Then as entertainment, such as sharing videos,
following discussion from celebrities, discussing
strategies in online games.
And then we have provision of goods [INAUDIBLE]
services, such as sharing information about a product,
responding to user feedback about a product,
and accessing government services.
And then education, such as participation
in online classes, and sharing learning resources.
And, of course, this is even more important
now with the advent of COVID, and the whole working
from home, because often online is the only way
that you're actually going to access content or access
information.
So why isn't social media accessible?
There's one main reason that social media is not accessible,
and that is because it changes all the time.
Facebook changes up to five times a day,
and I spoke at a conference in Chile a few years back
and another person speaking there
was a product owner or something at Facebook,
and he told me that they didn't actually have a testing tape.
What they did when it comes to releasing new features
in Facebook, is that they would release those features
to the staff, and the staff would log bugs
as they found it.
And after a week or two of fixing all the bugs,
that releases to the general population.
Now of course, the problem with that is that, if the staff--
there are no staff who are reliant say, on a keyboard,
or use a screen radar or anything like that,
then you're not going to want to pick up any kind of issues
along those lines.
Even if we wake up in a magical universe tomorrow where
social media was fully accessible,
it wouldn't necessarily mean that it
would be accessible by the end of the day,
and so that's what's really important.
And this is an example of that.
This is a screenshot of a Facebook
post from crikey.com.au, which is
kind of like an alternative newspaper,
and the post head thing says span class equals quote,
quotation mark, end span why sacrifice yourself,
whistle blowers, et cetera, and so
the code was showing up in the heading, just a one-off.
For most people, they fix that quickly, they
got rid of the card, et cetera.
Crikey didn't because they, perhaps,
weren't looking at their Facebook posts or anything
like that, and they actually had this issue for several days.
So Facebook does change all the time.
And so do the other social media networks,
and that's something to be aware of.
In fact, I ran a very similar presentation to this for CCC
about a month ago, and I actually
checked the instructions on how to add accessibility features
and things like that this morning
because I knew that there would have been changes
from a month ago.
And yes, there were changes from a month ago.
This is another example.
This is on YouTube.
There's a vertical axis after the video,
and it drops down four options.
Not Interested, Add To Watch Later, Add To Playlist,
and Report.
Now in 2018, if you tap to that dropdown,
the next tab takes the user to the Not Interested,
the top option, and then the tab after that
takes the user to the address bar in the browser.
So that was basically a keyboard--
well, not quite a trap, but it was definitely
a keyboard issue.
And that was fixed about three months later.
For LinkedIn, we have this little settings button.
In 2017, the button was unlabeled.
In 2018, the button was labeled as button I p 20 4 d p button.
And in 2019, the button was replaced entirely.
So once again, things change a lot and that's
why you can't guarantee the stability of social media.
Not to mention, with all the testing that we've done,
we've never actually found it to be accessible.
So we're on our fourth or fifth year of testing social media.
What we did is we tested a standard user journey, which
included registering, logging in, rating an item,
and then submitting an item with accessibility features.
We also tested user functionality,
such as keyboard-only increasing text size,
and using the screen reader.
In 2016, '17, and 18, we tested Facebook, LinkedIn, YouTube,
and Twitter.
And 2019, we tested all those, as well as
Instagram and Pinterest.
I just want to say, this is not a complete audit.
There may be many other accessibility problems,
but we just wanted to capture the big things.
So what did we find?
We found that when it came to keyboard,
the only thing that was fully accessible was Facebook.
We found that all these social media networks
had problems with autoplay.
We found that Instagram, and Pinterest, and YouTube did not
have the ability to turn off autoplay in settings.
We found that Instagram, Pinterest, and Twitter,
you couldn't pause the video using touch keyboard and/or
mouse.
We found that Facebook, LinkedIn, and Pinterest had
inaccessible page titles, and all social media networks
had inaccessible headings, inaccessible
forms, and inaccessible R and HTML.
So let's have a look at some common accessibility issues.
Keyboard accessibility.
We found-- we tested whether there was a keyboard trap,
and we found there was a keyboard track in Pinterest.
We tested whether everything was accessible to the keyboard,
and Pinterest and Twitter failed that.
We tested whether-- when there were
three columns, whether the right hand column on the page
was actually accessible to the keyboard,
and the only network that passed that was Facebook.
We tested for a table a highly visible cable focus order--
I'm sorry, a highly visible focused indicator,
and Pinterest and Twitter failed that.
And then we tested for an accurate cable focus order,
and we found that Instagram and YouTube failed that.
In terms of autoplaying video, in terms
of autoplay on default viewing, we
found that the only social media network that passed
was Instagram on desktop.
It did not autoplay video on default viewing.
Now, on most of them, you can turn off autoplay in settings
with the exception of Instagram and YouTube,
and that didn't matter what--
whether you are on desktop, iOS, or Android.
If you were looking at Instagram or YouTube,
you could not turn off automatically playing videos,
and I'll talk a little bit about YouTube in a minute.
In terms with the video can be paused,
we found that everything could be paused across the mouse.
Without it, you couldn't pause the video with Instagram
or Pinterest with the keyboard, you couldn't pause the video
with touch on iOS, and you couldn't pause the video
with touch on Android for Instagram either.
Page titles and headings accessibility, we
found that LinkedIn and Pinterest didn't
have unique or descriptive page titles,
and Facebook didn't include a reference
to the site in the page title.
In terms of headings, we found that none of the social media
networks met the properly nested headings requirements.
The only social media networks that
had content that was not coded as a heading
was Facebook and Instagram.
We found that only LinkedIn and YouTube had all headings
coded properly with H1, H2, H3, et cetera.
We found only Facebook had all pages started with an H1,
and we found that every social media network
site had at least one appropriate heading
with the exception of Pinterest.
Forms accessibility, so we found that every single social media
network had fields that were not coded with LABEL FOR and ID.
We found that FIELDSET was missing
a LEGEND on Facebook, Pinterest, Twitter, and YouTube.
We found orphaned or multiple field labels
on LinkedIn, Pinterest, and YouTube,
and we found that radio buttons and checkboxes don't
have the same NAME which can cause problems
with mobile accessibility on Twitter and YouTube.
ARIA and HTML, we found invalid ARIA on Facebook, LinkedIn,
Twitter, and YouTube.
We found inaccessible iFrames on all the social media networks.
We found JavaScript links on Facebook and YouTube,
and we found empty links on everything, except LinkedIn.
And we found missing mandatory action weeks on everything,
except Instagram.
From having a look at that, You can
see that there's really not one social media
network that does really well across everything.
One of the things to remember is that there
will be some people who prefer one social media
network over another because of its accessibility,
and one of the requirements is that you
share your social media to a bunch of social media networks
so that you can reach as many people as possible.
And the last thing is consistency
that we found a lot of, which is inconsistency
in visuals, or default operation in functionality
and in settings.
And this can make things very difficult for people
with disabilities to understand or use a particular site.
We also did some screen reader accessibility compliance,
and we scored these a little bit differently.
Raf, our expert screen reader user tested with JAWS and NVDA
on desktop, and voiceover on iOS, and top back on Android,
we basically gave each of the user journey.
So register, log in, create posts
with accessibility features, rate posts
with accessibility features.
One of three scores we had could not be done, then
we had, represented here by an exclamation
mark, very difficult. This meant that Raf
had to go into forms mode, or going
to keyboard navigation, or something like that,
or review the code in order to actually understand
how to do something.
And so a novice screen user probably
wouldn't be able to make these--
you know, figure these things out.
The only things that were done and could be completed easily
was the log in process on LinkedIn and Pinterest,
and reading a post with accessibility features
on LinkedIn.
It was impossible to register on Facebook, Instagram,
or Pinterest, and it was impossible to create
a post with accessibility features,
or read a post with accessibility features
on Pinterest, and everything else was very difficult to do.
So hopefully I convinced you that social media is not
accessible.
Let's talk about the five steps to making
social media accessible.
The first one is make sure your contact
information is available on your social media account pages.
You should list your primary phone number and email address
where a user can reach your agency with questions,
and provide a link to your agency website,
and that of course should have contact details as well.
You should also repeat content.
Make sure your social media content is
available through your website, and that doesn't necessarily
mean if you're following a whole bunch of people
that you need to replicate what they're saying,
but what you are putting out needs to be on your website
on a page.
And we've done that at AccessibilityOz,
if you go to the home page, with just a list of tweets
that have been posted recently.
Other things that you can do is provide options
to daily or weekly email digests where you can just email out
all the tweets, or all the Facebook posts or something,
as a kind of newsletter.
Provide easy points of entry for more information,
so, for example, if you've got a competition
where you can win an iPad if you apply for a certain course
by a certain date, then that competition
should be linked off near the courses page.
It shouldn't just be buried somewhere where
it's not going to be found.
And then also, post your social media to multiple outlets,
because some people will find Twitter more accessible,
some will find Facebook more accessible,
some will find Instagram more accessible.
So repeat your content on multiple outlets.
Step three, provide alternative apps.
Provide contact details to social media support,
and accessibility teams within your organization,
and also provide links to the social media accessibility tips
and support.
Now I actually do have a list of them from this presentation,
which I'll be sharing when we send out the final version.
And also, provide links to alternative apps and websites
that create an accessible interface social media.
So we're looking at, say, OzPlayer
to play YouTube videos, or Easy Chirp by Dennis [? Lebre ?]
to display tweets, or the Twitterific iOS
mobile app to display tweets.
There's a whole lot of things out there
that you will find more accessible than the default
interface, and I've got a list of them in this presentation,
as well.
Use accessibility features.
Use camel case, for example, if you've
got a hashtag where you're running three words together,
capitalize the first letter of each of those those words.
So the three words, Code Motion Rome,
you would capitalize the C, M, and R. Avoid abbreviations,
limit hashtags and add them only to the end if you can,
avoid misspellings, add alternative text where you can,
and where you linked to others content or videos on which
you--
sorry, other con-- other content on YouTube.
One uses an autoplay [INAUDIBLE] transcript, captions,
and audio descriptions.
And then lastly, consider testing your social media
with users with disabilities, and actually reaching out
to the social media networks and telling them what you
found and the same with WCAG2.
If you find an issue, reach out, because you
might be from an organization that might actually
hold some sway with these social media networks.
So I'll now go into the actual social media
networks themselves now in a little bit more detail.
So let's talk about Facebook.
One of the things about Facebook,
is that in the center, here at the center column
you have infinite scrolling.
If you tab down the center column,
you just keep getting more and more content, and more
and more content, and more and more content.
You can never tab to the right hand column,
however Facebook has made this accessible by providing
skip links at the beginning, so you can jump to the right hand
column when you want to.
This is my Facebook page, and it's just-- the title
for this is just open bracket, one,
close bracket, Beyond Wild, so there
is no reference to the site.
And here we've got a create new account screen, First Name,
Surname, Mobile Number, et cetera,
and none of these fields are coded with LABEL FOR and ID.
And this is an example of something
that was working previously, that is not working anymore.
In terms of turning off autoplay on the desktop,
there is an arrow in the top right hand corner.
Select Settings & Privacy, then Settings,
then Videos in the left hand side,
and then you can select Autoplay Videos, and the options
the default on and off.
In terms of iOS, there's a hamburger menu
in the bottom right.
Select Settings & Privacy, and then select Settings,
select Videos & Photos under Media and Contacts,
select On Mobile Data and Wi-Fi Connections,
On Wi-Fi Connections Only, or Never Autoplay Videos.
In Android, the instructions are very similar,
except the hamburger menu is in the top right.
When you want to add alternative text to desktop,
you add the image, and then select Edit,
and this needs to be at full screen,
and then add alternative text in the alternative text field.
And I'll show you what that looks like.
So here we have a Facebook thing,
and we're going to add a picture,
and this is a lovely picture, if I say so myself, of my dog.
And if you hover over it, you see
the Edit, and your alternative text field.
That's where you fill out the alternative text
On iOS it's a little bit different.
On iOS, you actually have to post the photo,
and once it's posted, you tap on the posted photo,
and select the horizontal ellipses in the top right.
Then you can hit select Edit alt text,
and tap the override generated alt text,
and add alt text that way.
It's the same with Android, except you
add the Alt text to the right photo alternative text field.
So what you should do for Facebook is you should always
add alternative text images, you should
link to transcripts of videos, and you
should load videos to YouTube, and add captions there,
and then link them in Facebook.
There are two recommended alternative methods
to the desktop interface, m.facebook.com,
which is basically the mobile version of Facebook,
and Metal For Android.
Those two are worth looking at.
So let's talk about Instagram.
The keyboard focus order here is a problem.
You find the keyboard focus order starts at the very
top post, and so the content above it
is not keyboard accessible, which
contains your profile information, your likes,
your search, et cetera.
So that's a problem with Instagram.
And we also find inconsistency in visuals,
so here on the desktop you've got a little heart, that's also
on mobile so that you like a photo, then you got a comment,
so you can comment on the photo that's also on iOS,
and then you've got a kind of Sent,
but on iOS you've got an arrow.
And so one of them allows you to send it
to say, Whatsapp, or email, or something like that.
And the other only allows you to send it
to other people who have Instagram,
so there's two different functionalities depending
on whether you're accessing it via desktop or via an Android.
The other thing is default operation.
So this is Instagram, and on desktop
the videos don't automatically play and on iOS they do.
And this is what I meant about the difference.
If you look at it in desktop, you can share to Facebook,
or share to Messenger, or share to Twitter.
If you look at it on iOS, you can only
share to the other people with Instagram.
You can't turn off autoplay on desktop, iOS, and Android,
so there is--
so that's a bit of a problem now.
You used to be able to turn off autoplay on iOS and Android,
but that's just another example of how things were accessible
but then became not accessible.
With alternative text, you can't actually
add images to Instagram on desktop, therefore,
you can't add alt text to the nonexistent images.
In terms of adding alternative text to iOS,
you select the image to post.
On the New Post page, select Advanced Settings,
which is under all the other fields
in small writing and gray text, so it's very easy to miss.
Select Write alt text, and then write Alt text,
and it's the same for Android.
Now the one thing to remember is,
if you select the option to share that automatically
with Facebook, you will actually find
that the Alt text that you've written
will not be transferred across.
So it will actually generate its own Alt text,
which is often very unhelpful.
You really can't use that feature
where you upload it to Instagram and it automatically
sends it to Facebook, you'll have to load it
to Facebook, as well.
In terms of Instagram accessibility,
add alternative text to all your images,
burn captions into your videos because the videos in Instagram
don't have the capability for you to add captions
as open caption--
sorry, as closed captions, and be careful
of color contrasting your images if you're
conveying information.
Let's talk about LinkedIn.
So once again LinkedIn, a little bit
like Facebook, where the title for [? myPage ?]
is open bracket, two, close bracket, LinkedIn,
which is not helpful at all.
That's the page title on Home, and the page title
on the messaging is just LinkedIn, so not descriptive
page titles.
To turn off autoplay on desktop, you select the profile icon,
select Settings & Privacy under Account,
open the Account tab at the top, select the Site preferences
option on the left hand side, and then
select the autoplay videos and choose the option you want.
For iOS, you select the profile icon, select the Settings link,
and under account there is the option
to autoplay videos or turn that off.
And that's the same in Android, as well.
In terms of adding alternative text,
you add a picture to your post, and then you
can select the Add alt text button, and write alt text.
I'll show you what that looks like now.
I'm going to start a post, and I'm just
going to select photo--
it's been long day-- and select that.
Let's go for a picture of a pink galah.
And then you can see here, add Alt text,
and then you can write pink galah, and then that's done.
You can't add alternative text on iOS and Android,
so if you're going to be posting to LinkedIn,
you need to do so on desktop if you're
going for posting images.
With the LinkedIn accessibility, add alternative text
on the desktop only, ensure your profile has a clear image,
you should search for contacts using Google, not
the LinkedIn search, and please avoid
using the LinkedIn mail system, it's notoriously inaccessible.
There is a LinkedIn Lite app for Android
that is a recommended alternative interface,
but there's nothing else unfortunately.
Let's talk about making Pinterest
as accessible as possible.
So one of the things with Pinterest
when you first log in, or you first register and create
an account, you have a little section here
that says More ideas for your board photography
with an explore button, and that explore button
is actually a keyboard trap, which is really not good.
So here, this is a page which has a whole bunch of images
that it thinks that you might want to add to your boards,
and it has a heading of more like this,
but it's just a div class.
It's not coded with H1, or H2, or anything like that.
And on this page here, there are no headings on this page
at all, except under the plus sign, which
is where you add a post, or the question
mark, which just kind of pulls up a help [INAUDIBLE] box.
To turn off autoplay, select the dropdown arrow
to the right of your profile icon,
select Settings, then select Privacy & data on the left,
and then unselect autoplay videos on desktop.
So turn off autoplay with iOS, you go to the profile page,
select the hexagonal icon in the top right,
select Privacy & data, and then you
can unselect the autoplay options
that you want to unselect.
That's the same for Android, as well.
To add alternative text, the instructions
are the same on desktop, iOS, and Android.
You add the pin and the description is the Alt text,
and the description has kind of [INAUDIBLE] holding characters,
which in desktop is called "Tell everyone what your pin is
about," and on iOS is "Say more about this pin. "
So we'll have a look at that.
So I'm going to add a pin, and let's pick a different picture.
And this is just all the bats in the sky near where I live,
and this "Tell everyone what your pin is the about
is the alt attribute.
So orange night sky filled with fruit bats, and then hit save.
In Pinterest, consider identifying your content
as PIC, VIDEO, or AUDIO.
What's-- sorry, I should change this.
Previously, at the last time around this presentation
a month ago, you could only add Alt text
after you save the pin, but you should always
add Alt text to your images, and you should also
burn captions into your videos like you do with Instagram.
Making Twitter as accessible as possible.
The right hand column in Twitter is not accessible to the cable
because the center column is where all your posts are,
and as you tap down it has infinite scrolling,
so it keeps adding more and more content,
so you can never get to the right hand column, which
has sections on who to follow and live video,
and then the help center and things like that,
which might be useful if you're having trouble.
There's also a lack of keyboard accessibility.
So the videos autoplay and then not--
they [INAUDIBLE] be caused by the keyboard.
And there's Inconsistency in settings.
On desktop, your accessibility section
has composed image descriptions and video autoplay, but on iOS
you've got pronounced hash--
hashtags, including usernames, and timelines, range shortened
urls, increased color contrast, et cetera, et cetera,
so there's a whole lot of different options there.
To turn off autoplay on desktop, select more
in left hand navigation, then [INAUDIBLE] Settings & Privacy,
select Accessibility under the General heading,
select Autoplay, and then select On Cellular or Wi-Fi, or Never.
On iOS, you select the profile icon in the top left hand
corner.
Select Settings & Privacy, select Accessibility,
select Autoplay, and then you can also
select On Cellular or Wi-Fi, Only on Wi-Fi, or Never.
And then in Android, you select the profile icon
in the top left hand corner, select Settings & Privacy,
then Accessibility, then Video Autoplay,
and the options are Mobile Data & Wi-Fi, Wi-Fi only, or Never.
In terms of adding alternative text, they've kind of done--
there's two ways that you can add alternative text,
you can go to more in the left hand navigation,
select Settings & Privacy, then Accessibility
under the general heading, and select Compose image
descriptions, then when you add the photo,
you can select Add Description, and add text
to the description fields.
However, that meant that you would only
see the add description if you had added the Compose image
descriptions in the settings, which
of course, a lot of people wouldn't know to do,
so it actually does show up even if you
don't select that option.
What you can do is add the photo,
and then select the Edit button on the top right of the photo,
and then select the Alt tab at the top of the popup,
and add alt text to the description field,
and I'll show you what that's like.
So here is an image, and so because you can say edit--
Add Description here, and you can add description.
You can go, sure, and then put in your description here.
iOS, add the image, select the plus ALT button
in the bottom-right of the photo,
and then select Sure just like you saw,
and add the alt text in the Describe this photo field.
The same in Android, instead of the plus ALT button
though, it's Add Description like you saw in desktop.
So to make Twitter accessible, use the alternative text
description, use camel case, and link to the accessibility tips
on Twitter.
There are a number of different alternative methods
to the desktop interface.
EasyChirp, which is a website, Twitterific
on iOS, Metal for Android, and TwInbox box,
which is an add-in for Microsoft Outlook.
And last but not least, YouTube.
So this is what I want to talk about earlier, which
was the autoplay problems with YouTube.
Now when you go to a video page the video automatically
starts playing, so there's no way to stop that.
There is this option in the right hand
corner, which says autoplay, and you can toggle it on and off.
However, what this does is it just
stops the automatic playing of the next video, not
the first video, but the next video and it doesn't do it
very well because if you have that off then what will happen,
if you watch a video, is--
well, let me start with what happens
if you have autoplay on.
If you have autoplay on you watch an ad,
you save the video, you go to the next video.
If you have autoplay off, you watch an ad,
you watch the video, and then you
watch two more ads before it just stops completely.
So that's not equivalent information.
They're forcing people to watch ads that they
wouldn't have to otherwise.
That autoplay button toggle is not
accessible for quite a while, but the biggest problem
is that, if you're looking at a very popular video, what you
find is you have to tap through all the comments on the video
before you get to the right hand side.
If you access it through the keyboard,
and because of the use of the internet scrolling,
you might never actually get that amount of 10,000 comments,
and that's just a whole lot.
Too many tabs.
And then in YouTube we also found
there was some content coded as a heading,
so this little pop up.
All of this is coded as a heading.
Choose a thumbnail that best represents your video,
to be able to add custom thumbnails,
your account needs to be verified and in good standing.
Learn more.
So obviously that's not a heading.
So we talked about autoplay, you can only turn off
autoplay, another video after finishing the first video,
and you choose the video, and then to the right of the video,
there's a toggle to turn off the autoplay.
On mobile, you select the profile icon in the top right
then select settings, and under autoplay you
can unselect autoplay next heading--
the next video.
The captions details, I'm not going to take you through this.
It's a bit of a job, but you certainly can do it.
What you can do is, if you have existing captions,
upload your video, select Edit video button under the video,
select the Advanced tab, and then select the video language,
upload your subtitles, and choose either with timing
or without timing depending on what you have,
select your captions file, and save, and at the processing
may take [INAUDIBLE] hours.
If you don't have existing captions,
then you should select the button
so you need to upload the video, and then select Edit video
button under the video, select the Advanced tab,
select the video language, then select the button
English by YouTube automatic, select download,
and open in a suitable app such as Notepad,
and edit the captions as required.
So you'll probably find there's some misspellings,
or some timing issues and things like that.
Once you've made those changes, you
can upload that subtitles file, select with timing,
select the captions file for upload,
and then select the button with English by YouTube automatic,
and delete that.
So you can go ahead and do that.
You can't add captions on iOS and Android.
You can't add audio descriptions on desktop, iOS, and Android.
For YouTube accessibility, one uses the autoplay.
Make sure there is a transcript, captions,
and audio descriptions.
And there's a page called to Use YouTube with a screen reader.
The recommended alternative methods
are the accessibility-- accessible interface YouTube,
accessible YouTube, and access YouTube,
and they all arranged different types of people disabilities.
But the best thing that you can do
is actually host the videos on YouTube or Vimeo,
and then play them on your website using an accessible
player, and the only two accessible players in the world
are OzPlayer, which is by us.
It's free for not for profits with an annual revenue
under a $1 million.
All four sites have less than 10 videos,
and it's half price if you are not for profit,
or education, or government institution.
Or you can use AblePlayer, which is free.
There is also the accessibility for YouTube Android mobile app,
and for YouDescribe for desktop or iOS,
which allows you to access audio disk drive YouTube videos where
people are basically dirtying the audio
for the audio descriptions.
Resources.
We write a series of articles on the overview of social media
accessibility, so you can see that in more detail.
The social media screen reader accessibility compliance,
social media and alternative text
features by a blind person, then the social media accessibility
features which goes through what you need to do to make--
you know, add alt text and things
like that, and social media accessibility,
turning off autoplay.
There's a Facebook Accessibility Page, Facebook Accessibility
Tips, Facebook Cable Shortcuts, LinkedIn Accessibility,
Accessibility Tips On Twitter.
Which screen reader should I use for Facebook?
How do I use a screen reader for Instagram?
Use YouTube with a screen reader.
And this presentation, as I said, we'll send it out.
It will also be on the AccessibilityOz site
under About, and then Conferences.
This PowerPoint will be on that, so you can access all the links
from that.
So I'm going to hand over now to Dave, because we've
got a few minutes of questions.
Absolutely.
So we will be sending out a captioned version
of the video once this is ready to go,
so we'll send out everybody that signed up for the webinar
today.
So just a couple of questions.
First question is, is it better to have Alt text for pictures
in a platform built-in options, or as text in the pictures
caption, or both?
Sorry, just having a drink of water.
Absolutely.
It's better to have it as the alt description.
If the social media network support alt description,
that's what you should be using.
And then the next question from Jessie was about--
it says-- I may have missed this, but there were tests.
Were the tests done on social media apps,
or on the actual websites, or both?
So on desktops they were done on--
a good question-- desktop were done on the sites,
and on iOS and Android, they were done on the apps.
OK.
I think I addressed all of that question.
Another question.
Great presentation, YouTube has the ability
to turn on or off autoplay, but I
don't think it's in the settings on the video page itself.
Oh yeah.
That's-- I talked about that at the end.
Yes.
Next question is, I've seen people insert their alt
text in the actual body of the social media post.
Is that an acceptable alternative
to using the alt text field?
It's much better to use the Alt text field.
The question is, or statement, Facebook, to my knowledge,
does not allow posting of PDFs.
Any way to make PNG files readable by screen readers?
No.
A PNG is a graphics format, so no.
There wouldn't be, other than an image of, say,
my dog, which could be a PNG file
when you put it in Alt text.
The PDF question is probably better for you, Dave.
I wasn't aware you couldn't post PDFs to Facebook, but yeah.
If you can't do that, I'm not particularly surprised.
No.
Absolutely.
And as you said, each social media platform
has areas where they have their accessibility issues,
so it doesn't surprise me [INAUDIBLE] doesn't allow this,
and this one does allow it.
Next question was, it seems to be a lot of focus
on getting autoplay turned off.
That is my preference for my own social media settings,
but I would think that those who are blind or have low vision
would prefer to have autoplay on and be
able to scroll past, rather than navigate the screen
to get the videos to play.
Obviously, I'm missing something.
Can you explain?
Yes.
Yes, you are missing something, but happy to explain.
People, the biggest problem with autoplay
is that the videos automatically start playing,
and the audio of the video starts,
and the audio will overlap the audio of a screen reader.
So the only, I suppose, legal way to have autoplay
under WCAG2 or 2.1, is to have the first focusable
link on the page be completely accessible,
and that it paused the video.
Otherwise, it would be impossible for someone
who uses the screen reader to actually find
how to pause the video, so they navigate through the page.
And so that's even worse with the autoplay next video feature
on YouTube, because they can't find the autoplay next feature
to turn it off, because the video is playing all the time.
Excellent.
So in general, if you had to choose the number one
area we should focus on accessibility,
what would you suggest it would be?
Should it be Alt text or PDF tags, as examples.
I think that--
I think that really depends on the context of what
you're doing.
So if you're talking about social media accessibility,
tags for a PDF that you can't upload to social media
is basically no use, so therefore
all tech [? tributes ?] would be a good idea.
I-- it depends how much content or information
you're including in the images and/or the PDFs.
So I would suggest--
I don't-- I can't really say it's an either or.
It would be, they're both important in different ways.
Sure.
So I was going to shorten this last one because we're
running out of time here.
If I can only focus intently on two social media platforms,
what would you recommend since I can't choose based
on a particular age group?
Twitter and Facebook.
There you go.
Any tips on how to perform screen reader testing for web
sites I'm working on?
I was doing some screen reader testing
for a site I'm helping to develop,
and it could be tricky with different browsers
and different screen combinations.
So I-- I think that with screen reader testing,
the best thing to do is test--
actually, I'm not sure if Raf is on this call.
He'd be the best person to answer that.
Let me just see if he is.
And he just raised his hand.
And while you're doing that, somebody--
Tim posted that you now can post PDFs to Facebook,
so they've changed that.
Oh, can you?
Excellent.
I can't see, Raf.
Oh, there is.
Yup.
OK, hold on.
Let me-- Raf, do you want to put it
in the chat what you recommend for the screen reader testing?
I'll definitely say voiceover on iOS, Talk Back on Android.
I would say, and then, the NVDA and JAWS.
I know that there's kind of preferences for that.
I'm pretty sure it's JAWS with the edge and NVDA with Firefox,
but I'll let Raf respond to that.
Very good.
And then the last question that we have here is,
can you turn on autoplay on a company page
for those that come to your page or on any networks,
or is it only for personal accounts?
Can you-- sorry, can you repeat the question?
Sure.
It says can you turn off autoplay on a company page
for those that come to your page on any network,
or is it only for personal accounts.
I think it's only for the user.
I must say, I find it really difficult
to try and determine what the accessibility features are
within a social media network.
They're often hidden.
I ran this presentation probably 2-3 years ago,
and I said, you know, Facebook has no way
to add alternative text.
And someone came up to me from Facebook and said, yes, we do.
And I said, well, why I couldn't find it anywhere?
He's like, aw yeah, it's really difficult to find.
It's like well, no one's going to use it if you can't find it.
So if anyone knows a way to do that, let me know, but as far
as I'm aware, then absolutely no.
There's no way to do it.
So the people visiting your company page
have autoplay turned off.
It really should be.
And Raf has responded, and I really--
I'm surprised this wasn't my first response as well,
actually, which is the best way is to hire a blind tester.
And absolutely, that is the case.
When you are not vision impaired,
you will use a screen reader very differently
to someone who is vision impaired.
So if you really want to get a representation of what
it's like, then--
and if you're in a large organization,
you can put a call out.
Maybe there are some people who use screen readers.
Basically, the other thing is--
if you absolutely have to do it yourself,
basically test it on the most popular browser
with NVDA and JAWS.
But yeah, if you do it with-- if you do it
as someone who is not vision impaired,
you're not going to get the same experience.
The Andy tool.
That's something I think that's probably a PDF tool.
Isn't it?
I think that might be a question for Dave.
Yeah, I'm actually not familiar with the Andy tool,
so I can definitely get an answer on that
and give people some information later on.
Excellent.
Well, very good, everybody.
I want to thank everybody in the interest in your time,
for your time today, and in attending,
and we will be getting this-- it is recorded.
We will get this captioned and get
it sent out to the audience.
Thank you everybody again.
Have a great day, be safe, and we'll talk next week.
See you later and thank you for everything.
Thank you for coming.
Thank you.