Transcription

ADRIAN:  Can you hear me through the speakers?  This is God talking to you.  Okay.  So I am going to dive right in.  Thank you for come doing my talk I know you have wonderful selection of accessibility talks in this time slot, so clearly this is the one that still had seats available.  If you follow me on Twitter I am sorry I noted I had 108 slides in 40 minutes and after a lot of work I have got it down to 120 slides.  We are going to see how many of those I get through. All of my slides will be available online later at that URL which I will show again at the end of my talk.  That is Roselli/TI WCLDN.  I am saying that now as I manage my own time I have a whole chunk of slides I am going to fly through they are mostly technical stuff.  It is so boring you guys can read it on your own time and I will not be personally hurt when you fall asleep.  I really thought he was coming to pull me off the stage.

How many people use WordPress for CMS or a blog platform?

That is good okay, most of you.

How many of you use in addition to WordPress some other platform beside WordPress as a blog or CMS platform?

Usually I see a much higher ratio, I ask that question I am going to talk about things that apply regardless of the platform, there’s a chunk about WordPress but I am going to be talking broader than that.

This slide is dedicated to my ego.  I have a web site I write on accessibility, and you can avoid me on Twitter @aardian.  I recommend you mute me immediately.  I am here because the Paciello group paid for me to come here.  So right off the bat a some of you have seen the A 11 Y # or seen it use on Twitter or elsewhere.  It is not uncommon for people to say who is A11Y.

So real quick accessibility it means accessibility it is a numeronym and you remove all the middle letters.  So localisation is L 10 when you see A 11 Y or ally it means accessibility in almost all those cases.

The thing about accessibility it gets no respect.

It is an after thought a thing people aren’t really too interested in.  When I had my own company we were going through colours to paint everything.  That nice blue is called online blue.  Lime Rickey the seeing was cyber pace grey.  We moved out.  But accessibility beige.  (Laughter) So the colour of computers.  All IBM computers that was the colour that my partners wanted to paint my office.  I did accessibility stuff and they thought accessible beige.  A bunch of jerks.  So I am going to give a bit of grounding and run through those.  The technical bits I am going to skip the most just so that you know.

So statistics.  These are US.  This particular site is US focused if you have not figured out by my accent yes I am from the United States, so in the US any disability when we look at the numbers who has any type of disability which includes visual hearing mobility and cognitive, in the range of 21 to 64.  10% of the population.  75 and up age it is 50%.  Sort of a theme that happens.

World-wide 285 million people have some sort of vision impairment.  And 82% of those people with blindness are 50 and above.  A bit of an age factor.  And hearing impairments effect 306 million people world-wide, they need to get by in an event like this socialising, all of whom have more interesting things to say.  So 36 million American adults report some degree of hearing loss.  Mobility impairment.  Relatively low.  As you are younger, and then they tend to increase.  So 5.5% in 16 to 24.  Goes up too third of the population 75 and older.

Cognitive impairment are tricky to get their arms around.  Dyslexia.  Dyscalculia, which is the numbers version of dyslexia.  Memory issues.  Distractions.  The list goes on and on.  In the US that number is about 4. 3% of the population in my age range and continues to climb.

One thing I have learned is showing the statistics does not really make the case.  I want people to understand this is a real population of people if you are more like me you don’t care.  Screw them I really don’t care my whole treat is about being selfish.  If you are in Heather Burns talk earlier today you might have seen this pyramid and if you weren’t cool you get to see it for the first time.

So WebAIM is web accessibility in mind.  They have the hierarchy motivating accessibility change so motivate people.  Punishment means they have already done something and that creates a bad relationship.  If you make it a requirement they are not necessarily so interested.  If you start to reward people they start to pick it up a little bit more.  You want to work to get them enlightened and be inspired, just know it is the right thing to do and feel it is something that sets them apart and the project.

I am wired very selfishly.  I modified it I put a star on this tree.  It is all about making it about me.  So you may have been in some talks already talking about the users, not this Guy.  So to run through some of these things, getting older effects nearly everybody, accept those who are fortunate enough to not have to get hold.  I really should have to rethink that.  It does carry risks and side effects, and it is not for the young as evidenced by how few young people are old.

The only thing separating thing two couples besides four feet is properly about 30 or 40 years.  Really they are doing the same thing.  Living the same life.  Arguing about where they are going to get some food next.  I don’t know for sure, the only thing separating these two women besides one is using a solar power piece of technology is about 40 years again.  They are doing the same thing.  They are hanging out and reading, she might be tweeting, I don’t know.  But they are doing the same thing.  The only difference for them is age.

Really not that different.

Accidents happen to people a lot I am evidence of that I can show you the row of scars across my head and all other things I have broken over the years, I might be in violation of the code of conduct.  So accidents, broken limbs, eye injuries, head trauma etcetera.  If you have ever broken a wrist and tried to use a computer you realise how quickly how difficult it is to do thing like operate the mouse and use the key board and close the lid.  And click save instead of reply at the wrong time.

Sometimes just having a temporary vision problem means that you lose your depth perception and instead of grabbing the mouse you push it off the table and then you have to go hunting for it you can’t just reel it in.  Some people do it as a fashion choice.  Some people arguably might start an activity with the a cognitive issue.  They definitely end with the more issues.

This that wheel of cheese they are chasing is a tradition somewhere in this country.  You all should know better than I.  Anyway what is interesting about this at the bottom of the hill they have a team of ambulances waiting.  It is not a function of if somebody gets hurt, after every one of these somebody walks away temporarily disabled, maybe permanently depending whether they got the cheese.

If like me you believe you are invincible and allergic to nothing there are other things to bear in mind.  Sunlight.  Eating at your desk.  Not having head phones handy and not working in your native language.  I felt my native language was English until I came here. Awkward.

This is how I spend a lot of my days I try not to get a Taco into my keyboard it is a laptop and you can’t just shake it.  I like to sit on my patio, if you have used a phone in the sun or tried to work in the sun it is really difficult you are turning the brightness all the way up and then how long does the battery last it already ran out.  These guys are professionals.  I would like to point out neither of them has a free hand to actually use the computer.  But they brought the tarp.  This is a function.  They are not just in the sun they are distracted, they are doing other things and if my chance they had to use email or fill out online application or sign up four bank account you know nine times out of ten they are doing it wrong.  This by is my favourite I would like to point out part of the reason he is my favourite, his laptop is a typewriter.  Yes.  Still in power.

So sometimes you find you are working in a public space because it is the only option I  have.  The airBnB flat is a little too small I will probably work in cafes for the next few days.  The head phones become really important it is very hard to do video work where there is background noise.  You can’t hear everything and you don’t want everybody to hear anyway.  And also the consideration of having a significant other in bed with you.  I work in bed, I don’t know I want to wake up the dog that big.  Because I am shouting at the computer because the error messages.

This photo is analogous to how I live.  I don’t live in apartments but I do have lots of motor cycles go by.  And these guys want to show whose motor cycle is louder.  And if I am trying to do work it is very much a problem and explains why I have closed captions on my television permanently.

I never know when they are going to statistic it up and it usually in the scene of mighty morphin power rangers.  I have been this person in a foreign country trying to look at information in a key board that has characters I don’t recognise and a website that is localised for the region I am in as opposed to the language I speak and I feel like I have a cognitive disability I don’t know what I am looking at, this happens more often than I think people are willing to admit.

If you from my experience bouncing around Europe and south-east Asia there are a lot of really confused people sitting at them.  Not locals, just confused.  Another thing to consider is if you are in this room you properly have some comfort level with technology.  Which means when you come to family events or holidays you might be tech support.  That sucks.

I don’t like going to my parents’ house and changing printer cartridges and updating and windows checks and reboots.  I just want to eat the turkey.  So if you are in a situation you are always helping other people you might start to recognise if the interfaces were a little bit easier maybe you would not have to spend so much of that time and you could eat turkey if turkey is a thing here, not so much.  That is why we left.

Anyway.  So I am still going to social media high level and talk about user experience models.  I have given the context for selfish I am going to pool it into user stories, not spend too much time on this, but has anybody here not familiar with user stories?  This is awesome.  I don’t have to spend 14 minutes on this slide.  So I have really simple user stories based on this selfish model and let me give you context, I have found when I put together personas and user stories for clients they often don’t understand who that accessible persona is they are not invested in it or interested in it, all it does is represent extra work.  And when they are looking at how many personas they have they are saying we need to get down to three or four on the high end.

Who do you think is the first persona to get cut?  Jerry the Guy in the wheelchair or Lucy the one that can’t see.  Gone.  I have started to fold these selfish concepts into personas and showing it as user stories.  So as a user on a sun lit patio I want to be able to read the content and see the controls of a web page.  This effects a lot of people.

As a user in bed with a sleeping spouse I want to watch a training video in silence so I can get caught up at work.  This is a real thing that happens.  In order to click links in a coach with a tiny track pad, so you are all on my flight too.  I want click areas to be large enough and adequately spaced.

As a user distracted by the TV I want clear headings and labels so I don’t lose my place.  This really speaks to me.  I just sit on the couch.  So for what it is  worth there are some personas from the book A web for everyone.  And they are free to grab.  Sarah Horton and Whitney  and the personas are great and I encourage you to go steal them and use them wherever you can.

I also encourage you to look at creating a persona.  Yeah that is me.  Maybe this is not as good as example I was hoping to it be.

Am I doing that….?  Is that better.  Okay.  I will stand here.

So it is not uncommon to be in a situation where the personas once they are disguarded you are not going to get them back.  What you can do is take the persona that might speak to a particular stakeholder the President the client relations person and fold in a trait and maybe the trait is the person travels and is always on the train and fold in the fact there is a mobility impairment and this one always works in a cafe in the sun and can’t always hear because of the noise.  And should in hearing and mobility and maybe visual impairment.  So don’t necessary try to build these separate discreet personas and user stories instead appeal to the inherent selfishness of your clients and build them in to the personas and the things they do into those personas.

I have had some reasonable good luck with that.  Mostly because they see themselves and say yeah I under that, boy that is a pain in the arse using a track pad on a train.  This is the part I look at my watch and I told the time keeper not to bother, I am not going to pay attention anyway.  Right.  She knows me already.  So I am going to go through some technical bits.  Much of the rest of this is about code stuff.  I may dwell on a few bits, all of these samples will be out there for you to look at.  Use @ alt text on images.  This Buffalo soccer club a youth soccer club in Buffalo and we think it is pretty awesome, this is the page showing here is a happy kid playing soccer.  But if I turn it off it is no text at all.  The logo does have text behind it that is important the name of the organisation.  All the other places where they were images there is no @ alt text behind them.  So the notion is to use alt text, be smart where you use it, so you are not creating too verbose a page can you still make sense of the page.  Is any of the content it missing?  A sign you have text set in a graphic.  Can you still use the site and is the alt text useful.  There is wonderful chart, don’t worry you don’t have to, that later on you can look at, it is just a way to get you familiar with those steps and how to decide what alt text to use and what is appropriate.  Hyperlinks.  This is an example of a page I can never tell what is a link on here.  I never know which element on this page is a link.  Some simple tips for hyperlinks, and this is really basic stuff incredibly useful.  Avoid the click heres the more, keep reading.  Avoid all caps maybe don’t make a URL a link, the screen is going to announce it.  Emoticons are worth avoiding, not just because they have cultural queues but screen readers can’t announce them.  And maybe worn people before you open a new window or before they download something.  I don’t know why people do that put they do.  Make sure the links are underlined and obvious, that if the images are linked that there is alt text behind it.  If you are going to keep linking to the same resource the 200 mega bite PDF, mention this is the 200 mega bite PDF you should stop clicking.  Use link underlines.  Colour alone is inadequate.  I have it showing through different types of colour blindness.  Orange is the colour for links and the call out colour, the look at this thing.  I never know what is you link on the verge site because the same colour is used to highlight stuff.  You are not Google I don’t care how awesome your site is or who you think you are, you are not Google.  Google can get away with it everybody understand the layout of the search results and we all know what we are getting.  They know the layout and they are used to it.  There is all this lovely stuff in the web content accessibility guidelines that coaches you and just make sure you leave the link underlines in place for everybody’s benefit.  Use focus styles I am tabbing through the virgin America page right now I have no idea where it am.  This for anybody who uses a key board instead of a mouse.  I must have hit something I still don’t know where it am.  Use focus styles wherever possible.  Any time you see focus outline none in the CSS just delete it, just deleting that alone makes your website a lot more accessible.  And then if you have a hover style have a focus style.  Colour contrast is important, same as the page before this looking at is through three different types of colour blindness.  Tritanopia deuteranopia and protanopia.  I have links to all of these so you can grab them after I have finished talking.  Use the label element.  Here is an example if I click that field the focus should go into that input.  That text input field.  It is really simple to do.  All you have to do is match the four attribute on the labels with ID on the element you are pairing it to.  That is it, simple to test.  Make sure you do it the with radio buttons, if you don’t wholly crap that is going to be difficult.  Use HTML5.  Here is a layout that properly looks familiar to you.  Really simple and basic.  You properly already know what those elements are on the page.  And there are HTML elements that speak to that.  The header a role of banner already built in the navigation which maybe lives on top or within the header.  The main content the footer, there is a search form and an aside etcetera.  Those are already built in.  Here is the “responsive version of it” narrow view port as we know it.  So same thing, similar layout, header nav form the role search, use the HTML5 you will be in much better place.  Bear in mind that the main you should only use one of those per page.  Screen reader users can jump to the main content of your area and if you have more than one main content area then you don’t have a main content area.   Use your headings wisely.  So this incredibly boring blog post on my site if you navigate by headings they show the entire struck to your of the article and users who navigate and listen to just the headings of the page to understand the structure.  So don’t skip levels.  Start with H 1.  Should match the title of the page.  Make sure you are nesting them appropriately.  If it says you can use all H 1s sorry that is wrong.  It has been written about many times don’t use a all HL approach.  Every time you use a new heading it should not be a HL.  If you think it is going to effect your search optimisation don’t worry about that Google has made it very clear there is no outline algorithm.  Using a button versus an anchor or input element, we can style them all the same way.  Really easy to do, don’t.  Consider using the right element for the task in hand.  Don’t use a div or a span.  If you an find yourself putting an alt click on a div or a span stop.  Think about what you are doing.  Cry a little.  If it takes me to another web page address including an anchor use the AH ref.  If it is only doing something on the page, not moving me off the page, collapsing, use the button element.  If you are submitting a form input type submit I find there are fewer conflicts if people use the in put type submit.  I have an article about this that talks about key handlers enter versus space and what the faked of those are.  Don’t use a tabindex of greater than zero.  As soon as you start tabbing it jumps right to the capture because it had a tabindex.  I could not even get to the skip navigation link, what is funny is that I find a bug with a digital gov team and they insisted I was wrong because apparently nobody there has a keyboard.  It is funny how you learn that stuff.  A Tab in takes of negative one is great if you don’t want a keyboard focus put you want to put focus on it at some point.  Like a close button on a modal.  Tabindex of zero puts it into a focus.  So if you go back two slides, tabindex of zero is useful for things that do become interactive for whatever reason.  Just don’t do tabindex of one or greater.  It is worth noting there are places where a tabindex of zero is very useful I have seen a grid that has either scrolling content or content that only appears on hover.  You may have content that is a scroll box a keyboard user can’t get into that and make it scroll.  So a Tab in takes of zero on that means it will get focus, you can give it a role, an aria label.  But a tabindex of zero means a user can tab into it and use the arrow keys to scroll up and down and experience the content otherwise missing.  Please do set the lang attribute.  I have a talk on this and talk about the wonderful benefits, probably the thing that is most fallible to continue to is screen readers in particular really really benefit from this.  They will say things the appropriate way.  In my other talk I have the lyrics of a Nick Cave song I have read out in German and French and they are that way.  Source order matters it is very easy to blow up the way we tab through content by using floats and absolute positioning.  Flex box and grid can screw things.  Just know what is going to happen when you start to reorder the content.  Definitely don’t disable zoom, definitely don’t do that, otherwise you would never know that Bill Murray thinks you are awesome.  So it is not just mobile user, all users, make sure you don’t have user scalable no.  Get rid of that.  If you are in supporting windows mobile phones the MS view port.  Most mobile devices over ride these.  So avoid infinite karoo wherever possible he says thinking about the WordPress themes page.  But I use this as an example.  Avoid infinite scroll it makes it impossible to access some of the content on the page the footer or side links it ruins the back button.  Sharing the URL is impossible you can’t just jump into a link and go back.  And less powerful the computers and devices will just choke and that is not fun for everybody.  Use captions and subtitles wherever possible.  No more craptions.com is a great resource.  Yes that says so long to his Viagra.  Don’t let Google auto caption, they will be terrible if you let Google auto caption you can use no more craptions and pool in that stuff that is time stamped and fix it which might use the word Viagra a lot more.  Remember everybody uses captions and sub titles.  Try to include the audio description “he dropped the microphone and everybody laughed, and the speak identification wherever possible.  Some of you may have heard of aria, you have probably seen people ask questions about aria all the time.  Don’t stress unless you are building really complex novel user interface elements you probably don’t need aria.  It has simple rules, don’t over write, HTML does a lot of great stuff, don’t change the stuff that is there, don’t make a heading in to a button.  And make sure they are still usable by the key board, you would not want to make aria make something more accessible and break it for key board users.  Don’t use roller presentations.  And remember that all interactive elements must have an accessible name.  Something that says what the control is, ideally what I is and what I does and in many cases what its state is, toggle, on, off, blue, angry.  So I mentioned the div with the div with unclick.  The tabindex of zero and the key press.  And then you want to make sure you give it a roll of buttons.  And so what you are doing is this does not even include all the code there is a lot of Java script to support it.  Just turning a div into a button when I could just do that.  It really is that simple.  Accessibility is not that hard to do conveniently WordPress has decided to go on a WCAG.  I don’t know if that is the way you are suppose to say it.  There is a lovely announcement from state of word 2015, she is just going to kill me after this.  What is hilarious about this there are no transcripts for the video you can see about how they are moving forward with this.  We are fortunate enough to have in Rian in our audience today.  “All new or updated code…..  Must conform form with mg 2.0 level AA.”  It is what people are using when it comes to government and law suits and a lot of business best practice the defacto standard.  All these great notes on that.  I will use it with you guys.  The accessibility ready tag to have prebuilt themes that are already there.  123 as of a few days ago the nice thing is it keeps growing.  Yes more notes.  By the way Rian won the heroes of accessibility award I thought that was awesome good for you, (Applause) absolutely.  She should be doing this.  Oh look it scrolls.  Jo Dulson wrote these.  I will wrap this up which will leave 12 seconds for questions.  It will take three minutes to explain I need 12 seconds.  Here is the general message trying to convey to you.  Supporting accessibility now is going to serve future you I showed you the statistics about how people accrue disability as they age or do dumb things as they do over time.  So supporting accessibility helps the injured or encumbered version of you.  Getting younger developers to buy-in to it now is going to help future you.  You are not always going to be the one who is able to do this, whether it is code it, drive it make it a requirement and write it into contracts.  Starting it now in a few years you are not going to be able to get people to build the stuff that will benefit you.  This is future proofing your life.  This is often held up as a wonderful example of how integrating accessibility into design can be great and look good.  This is a death trap.  This is a death trap for people who like to run upstairs like me and a death trap for anybody in a wheelchair the gradient is too high the turns end in concrete walls I imagine a pit of alligators off the shot here.  You have to be careful don’t just try and make it look good, put somebody in a wheelchair on that ramp and if they don’t die listen to what feedback they give you.  Accessibility is not a check list you can’t just say we built a ramp and wall away from it.  So this is a wonderful example of a ramp that goes into a drug store a friend of mine could not get into, they put the trees on the ramp and he wheeled up there and that is much more polite than what he said in real life.  It is not just a check list.  It is not something that you can do once and walk away from.  It is an ongoing process, something you have to maintain and usually the easiest way is to not stress bit, don’t over write it, if you have got good headings every where you are in good shape you probably don’t need to stress.  So it is not a check list.  It is an ongoing process, be prepared to internalise that.  I have all these resources you can look at on your own.  My slides will be available providing I can get good Wifi and I have how long for questions.  Two minutes.  I won’t properly need it, do we have any questions?

FROM THE FLOOR:  Do you have a view on access queues at all I know it is being phased in or faced out.

ADRIAN:  That is a really good question access keys are awesome in the right context the people who benefit from them are often using tools that inter kept with those keys and become problematic.  There is a group of people that feel access keys have value, the trick is presenting them so that people with assistive technology can still benefit, I think there are value to them.  I don’t think they are workable with current technology we have today.  I hope that was quick enough.  Other questions?  I know I answered everything.  Is everybody asleep?

FROM THE FLOOR:  You mentioned alt caps don’t do alt caps through for large box of text because it is difficult for anyone to read a large block.  What about for example Google material design recommends alt caps for buttons.

ADRIAN:  Here is a thing about alt caps screen reader will typically announce every letter, depending on the settings you might put something in alt caps and it will put SUB, it will think it is an acronym or abbreviation in head ins you can get away with it if you are using just CSS.  I always caution people to avoid all caps in user interface controls that is where the problem manifests it can prevent people from completing a task.

FROM THE FLOOR:  Do screen readers do they interpret text transform upper case too.

ADRIAN:  The screen reader based on how the browser passes it, it depends on the screen reader and the version and the user of the Browser and how the CSS was put in there.  It is not a simple answer it is variable, and that is where testing is important.  I have been signalled I have to shut up, you have been very polite about it.  Thank you (Applause) were you coming to get me off the stage can they still hear me.

VINEETA:  There is a room change or afternoon tea break now until ten past four.  So we have got some time.

ADRIAN:  I am going to be wandering around so please feel free to ask me questions in the hall or elsewhere.