Web Accessibility: 
Making Websites Better for Everyone

945 views

Published on

Making our sites easier to use for users who face vision or mobility challenges makes them easier for everyone to use.

Published in: Internet
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
945
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
2
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • This is my friend Mike.
    How I met him
  • Rum, generous
    Stayed in touch
  • Moved
    Photos
    Restaurant
    Airports
    “Blind”
    When I make websites, I think about Mike.

    Mike looks very thoughtful in all the photos I have of him, starting wistfully off into the distance, mostly because he can’t see the camera.
    Restaurant. Airports. Mike never uses the world blind, I knew he couldn’t see very well but I didn’t actually know he was blind until he used CNIB card to get me a free train ticket as his “escort”.
    When I make websites, I think about Mike.

    (2:10)
  • Define
    common tools
    a11y tools

    Web accessibility is a catch all term for the stuff we can do to make it easier for people who use different tools to access the web. Instead of the tools we take for granted like: a monitor, a mouse, or a keyboard they may rely on tools like screen readers, voice recognition software, high-contrast plugins, or trackballs.

    Let’s look at five examples of assistive technology and then I’ll talk about what it means to build an accessible website, and how that makes your site better for all your users.
  • Define
    Really fast
    Read example
    Scanning (heading/link)
  • Background
    Color
    Turning this…
  • …this.
    Different
    Customizable

    Different high contrast themes work differently. I’ve seen ones that makes the links a rather alarming shade of green and of course the users can customize them from here if they want.
  • Explain
    Page up/down
    Keywords

    Voice recognition software lets the user navigate using a series of predefined verbal commands. “Page up” and “page down” are pretty straight forward but it gets more complicated when the user wants to click on a link or a form element. Some software will allow the user to navigate using keywords. For the top story on the BBC home page we could say “Russia” and if that’s the only story about Russia on the page we’re go to go. If there’s another link with the word Russia the links get numbered and the user can identify the link by number.
  • Grid
    1…

    To click when there’s no clear text prompt the user can divide the screen into a grid and work their way in. So a one on the opening grid would focus the grid on one section of the screen.
  • Refine
    Course Pointer.

    To click on the top story we’re in good shape now but to click on News instead of Sport then we would have to refine the grid again.

    This is an example of we call a coarse pointer. It’s a term you might have heard before to describe fingers on touch screens. The opposite of a coarse pointer is a fine pointer which is what we get with a mouse which is accurate to a single pixel. That doesn’t mean the person using it can be that accurate though
  • Explain
    Pointer
    keyboard

    Trackballs separate the act of clicking the mouse buttons from moving the mouse. They’re intended for people who don’t have fine motor control so that they don’t move the mouse by accident while they’re trying to click on something. Like voice recognition users these users can find it hard to to hit a small target and trackball users may also struggle to use a regular keyboard.
  • Some users only use a pointer. Other users only use a keyboard - navigating the page by paging up and down and tabbing between elements. Like those with touch screens these users are incapable of hovering over an element on the page.
  • - youTub
    Try it

    If you’re interested in seeing any of these technologies in use there are lots of good youTube videos you can watch to see an expert at work.

    And if you want to play with how any of these work yourself there are lots of free plugins and trial versions available for download.

    (6:25)
  • Stats
    Impact. Raise hands
    Make a difference.
    What does it mean? 4 things

    You may be wondering how many of your users depend on these technologies but it’s hard for us to get statistics on it. For the most part these technologies are invisible to our analytics but let me give you some idea of the impact you can have.

    Raise your hand if you know someone who is:
    Blind, someone with MS, ALS, Cerebral Palsy, Muscular dystrophy, arthritis, Parkinsons, someone deaf, someone colour blind, someone with dyslexia, or someone who’s had a stroke.

    I have 3 hands up now. Look around. (hands down) I like to think we all got into web design to make a difference…. This, right here, is, this is our chance! Think of the difference it makes to someone who can’t read labels, talk on the phone, or walk around a store be able to come to your site and find an easy way to shop, apply for a job, message their friends, or whatever it is your site does.

    So what does it meant to build an accessible website? Well, to have a truly accessible website 4 things need to be done well:
  • #1) User Experience Design. We need to have well organized content, good information architecture, and clear interface design.
  • Basically, if your users can’t find what they need when they can see and hear all of your site, nothing a developer can add will make it any more accessible.
  • A solid foundation of semantic HTML is necessary for accessibility.
  • Semantic is the technical term, what we really mean here is meaningful markup.
  • When making accessible sites, this is the area that people typically focus on first. Lucky for us this means that the W3C got a bunch of experts together and created an acronym.

    The Web Content Accessibility Guidelines are a bunch of really basic things I hope we’re all already doing but because they’ve all been written down in once place there are now handy check lists and validators we can run out sites through. I’m not kidding about how basic these rules are. They’re things like: use heading tags for headings, put your links around descriptive text, and use an actual submit button to submit an actual form.

    If the first time you heard the term accessibility applied to the web was today, your homework is go home and run your site through the evaluation tool at wave.webaim.org and start by just reading and understanding the changes it wants you to make.
  • WCAG is the first people think of when they discuss accessibility and where there are laws mandating accessibility they reference the WCAG.
    I wish I could tell you…
  • #3) CSS

    By itself semantic HTML is very accessible. If you’ve done a good job making sure your content makes sense without visual formatting all you need to do with CSS is just be careful not to screw up that accessibility when we add our presentation layer.

    Begin by styling the right element. If that h3 needs to look like an h2, make a class to apply the style, don’t change the HTML to make it easier to style. THIS GOES DOUBLE, TRIPPLE, QUADRUPLE, FOR FORM ELEMENTS. Browser makers have done a lot of work making form elements accessible and you lose all that if you try to make your own from scratch.

    You can also use CSS to make small improvements like providing icons with text fallbacks, large hit areas for course pointers, and hiding visual flourishes from screen readers by moving them into generated content because > doesn’t sound like a right arrow even if it looks like one.
  • #4) Javascript. When I started doing web design screen readers couldn’t handle Javascript at all but now they’re quite happy too – leading to a bunch of different problems.

    Like with CSS, every time we add some javascript to the page we need to we aware we could be breaking some of HTML’s built in accessibility. For example: by default the page is linear but javascript often causes content or our attention to jump around the page. It’s important to respect the keyboard and screen reader users’ position on the page when we do this. If you have a button that opens a modal window return the user’s focus to the button when they close the modal.

    Also, give users control over videos and animations. Flashing or moving page elements can cause trigger seizures or vertigo for some people, they can be a distraction for users with learning disabilities, and they can just really annoy other people.
  • Semantic HTML isn’t always enough to communicate what we’re doing to screen readers, and for those users specifically the W3C has created a set of roles and attributes you can add to your HTML to make make it clear-er to screen readers the purpose of different elements on the page and how they interact with each other. These are called ARIA roles and and attributes.

    If you make small brochure sites you can learn most of what you need to know about ARIA in 2 hours, if you make apps with complex functionality give yourself a little longer.
  • Me travel
    Intro Steve
    Detail
    phone

    This is Steve. I met Steven when he was running what was best but inadequately described as an agency. When I decided I was going to go freelance and travel the world Steve was the first person to give me work… and the second… and the fourth… and the fifth… and the seventh. In fact it very quickly be came clear that there was a place for me at his company and Steve talked his business partner into hiring me even though I was on the verge of moving to the other side of the planet.

    Steve was impressed by my attention to detail. He liked that I did things like adding icons to alert messages or insisted on displaying error instead of just putting a coloured border around a from field. Steve knew, if you can count on someone to get the little things right, you can count on them to get the big ones right too.

    Steve was the kind of boss who takes a turn answering the support phone on weekends. Which is how I found out that he’s colour blind.

    One Monday I came in and he was on the phone with a client’s hosting company giving them unsolicited web design tips. Our client’s site had gone down over the weekend and in the process of tracing the problem Steve visited their website looking for a list of which of their servers were up and down.
  • This, more or less, is what Steve saw. Well, one of their servers is having issues. Or maybe it’s two? It’s not really clear when you can’t see the colour.
  • Steve is in good company… 10%…

    This is not the real hosting company website, of course. I’ve changed the code to protect the guilty but also because I want to use it as an example.
  • Oh fictional hosting company. You’re really terrible at front-end development. Not inline styles terrible, but I’d still fail you.

    Let’s see what we can do to make this code better.
  • This list of server details should really be a list.
  • This text at the top here, that identifies what comes right after it. That’s clearly a heading.
  • What is this? It seems to call itself a button but… it’s not really a button.

    It’s in a span tag.
  • The javascript for the button isn’t keyboard or touch accessible. How do you click with a keyboard? Or with a finger for that matter? In fact, our keyboard users can’t get to this so-called button at all, because span elements cannot get focus.
  • but even if they could get focus our user couldn’t tell, because there are no focus styles defined so they wouldn’t know when to “click”
  • Let’s fix that button.
  • First we’ll make that span into a button element. Whew, that feels so much better already.

    There’s different types of buttons and IE gets finicky if it can’t figure out which kind we mean, so we’ll be specific.
  • Type=“button” is what we use for javascript interactions within a page. It’s not like a hack-y anchor link with an empty href, this is the right element for the job.
  • We don’t actually need to alter the javascript, we already got this one for free by using a built in element. A button will trigger the click event on click, keypress, or touch.
  • And what do we do about our CSS?
    Well, now that we’re using a button element the browsers automatically apply an outline to the button when it gets focus. (blue/dotted)
    But let’s assume our client complained because that’s cuz its ugly and asked us to remove it. NEVER REMOVE FOCUS STYLES. Nope, don’t do it. If you don’t like them *design better ones*
  • Providing an alternative is easy though, let’s just duplicate the hover styles. Done.
    Well, almost. The only indication that we’re interacting with this element is a change in background colour and text colour. Remember that a high-contrast theme will over-ride background and text colour declarations - leaving these users without any indication that they’re hovered or focused on the element.
    I’m just going to add an underline in there for them.
  • What else can we do to fix that button?

    Well, D-E-T-A-I-L-S will be read out by a screen reader as if it was an acronym, so let’s make that lower case, we can uppercase it again with CSS in a minute.
  • And there’s a weird unicode character there, I’m not sure what a screen reader will do with that either but it’s a presentation decision, so let’s remove it from the HTML and move it into the CSS.

    Actually, you know what? This button isn’t really about details at all. This button is all about the server.
  • Let’s remove the “details” and the weird unicode character all together and replace them with the server name.
  • And instead of keeping the button styles on that little grey button. I’m just going to make that button take up that entire line.
  • To help you visualize it, you can pretend I just did this. Though after we apply the classes…
  • Moving the styles from the h3 to the button
  • … it ends up looking more like this. Which gives us a bit of a usability problem since the sever names don’t *look* like we can interact with them.
  • - So I’m going to change the CSS to add that entire grey button using generated content, moving these presentation decisions into the CSS where they belong.
    I’ve also added speak:none to the declaration so that the weird unicode character won’t be read out.
    Generated content is mostly not read out …
  • And, of course, we’ll update the corresponding declaration for hover and focus.
  • Let’s check in with the browser to help us visualize what we’ve done.
  • We just made the hit area of these buttons wayyyy bigger. The entire bar is clickable, press-able, and touchable now, and assistive technology will associate these buttons with the names of the servers, rather reading them out as “details, details, details”

    We’re also taking advantage of Fitt’s Law…
  • Fitt’s law basically says, the bigger something it is, the *faster* it is for us to interact with. So while voice recognition and trackball users might see the most returns from this, all our users are going to find it easier to interact with those buttons.
  • We still haven’t solved Steve’s problem though, have we? Let’s fix that by adding an icon with a text fallback.
  • I’m going to do that using a very similar syntax to what is outlined in the Filament Group’s excellent blog post Bullet Proof Accessible Icon Fonts. Really great article.
  • I’m going to add the icon using CSS generated content but I’m not just going to rely on speak:none. I’m going to go a step further and add a span element to the page as my hook for the icon and put our first ARIA role to that. Aria-hidden has much wider support than speak:none and we can depend on it.
  • So there’s our generated content icons.
  • And we’re also going to provide a text fallback.

    Resist the urge to make the fallback “check mark” or “x” just because that’s what the icon is. Instead, think about what we’re trying to communicate here. The important information is whether or not the server is up or down, so that’s what we’re going to use for our fallback text.
  • This is effectively what we have at the moment but I’m going to hide that fallback text…
  • Using a class I’m calling offscreen.
  • Hiding content from our visual users while making it available to screen readers and other users who consume our content without visual formatting is not as easy as declaring display: none. In fact, screen readers will respect how we as developers use display:none by not reading it out to their users. They also won’t read out the contents of elements with a 0 height or width. So we’re borrowing a technique developed by Jonathan Snook when he worked for Yahoo. He’s written an excellent blog post on it, which I encourage you to read. This class might look familiar to some of you, it also ships with HTML5 Boilerplate as visually_hidden and bootstrap as assistive-text.
  • So with our fallback text safely out of the way now we have icons for our colour blind users. Lots of other people benefit from these enhancements too, English as second language users, users with cognitive impairments, or users with learning disabilities will all understand our meaning faster when we combine words with icons and other visual cues like the colours. And there’s one more group of users we just helped out.
  • Hello high contrast theme users, we haven’t forgotten you.
  • So, what just happened there?
  • We chose the right HTML elements for the job. Just by going from span to button we gained the ability to focus on the element with the keyboard and event handling for click, tap, and key press, all provided by functionality already built into the browser.
  • By using descriptive text for headings and buttons we made it easier for screen readers and voice recognition software users to navigate and improved the search engine optimization of the page.
  • By creating larger hit areas for people who use voice recognition or trackballs we also made it easier for touch screen and in fact, all users to get to those buttons.
  • We added icons for colour blind and high contrast theme users, icons that will help everyone understand our content faster. We also added presentational visual cues but we kept those in the CSS.
  • And we provided text fallbacks for the users that can’t see those visual cues.
  • What we did doesn’t look all that different does it?
  • But it *feels* different. It feels like good, well crafted, code.

    And if this is all you do, this is a better experience for a lot of people.
  • Before I go, though, I want to show you a more complex example of ARIA attributes at work. As I said before ARIA is extra attributes you can add to your HTML to make make it clear-er to screen readers the purpose of different elements on the page and how they interact with each other.
  • The two elements that are interacting with each other here are our button an our list.
  • So we’ll start be linking them with aria-controls and an id. The value of the aria-controls needs to match the id of the element that it control.
  • Next we’ll add an indication of the functionality here. ARIA-expanded signals that the controlling button element expands and collapses the list element it’s linked to, and that currently the list is collapsed. We’ll also add ARIA-hidden to the the list, to collapse it in the eyes of the screen reader.
  • we also need to wire up some javascript to make this all work. When the controlling button is clicked on, we can get the ID of the list it targets from its aria-controls attribute and then we can toggle the values of the aria-expanded and aria-hidden attributes.
  • turning this into
  • this. If you want to chain this together with jQuery’s toggle functions you can. But I’m going to make the far-out suggestion here that you just rely on these attributes to do all your work for you.
  • Rather than relying on javascript to change the display, can use our aria-hidden attribute to hide that list for every user, this simplifies testing because you will have a visual indication if something goes wrong.
    We toggled another attribute too, didn’t we?
  • We can use aria-expanded to style our buttons as well. \25BE doesn’t sound much like the down arrow but…
  • It looks like one. That’s the kind of attention to detail that will get you noticed by a Steve.
  • I have both the before and after versions of this code up on my blog and if you’re thinking you’d like to play around with some assistive technology yourself, these two examples will give you a feel for how much of a difference you can make.
  • - we don’t ask
    2nd narure
    don’t pitch

    This might sound like a lot to take in but I want to remind you that there was a first time, a very first time, that you learned what a function declaration was, looked up the difference between a radio button and a checkbox, and Googled the different between a class and an ID.

    These are all second nature to us now. Web accessibility can become second nature too. Once you’ve learned the basics it integrates into your workflow without taking any extra time and makes your websites better.

    When we pitch to our clients or our bosses we don’t sell them on semantic HTML and we don’t start putting paragraphs and headings in span tags if someone tells us it’s not important. Like semantics, accessibility is part of making a good website, one you can be proud of because…
  • a11y = good
    descriptive text, larger hit areas, icons
    raise hand if

    …when we make our sites more accessible we make them easier for *everyone* to use.

    Raise your hand if you have ever:
    clicked on a form label instead of the form element, if you’ve ever submitted a form by hitting enter, read a transcript instead of watching a video, tried to use a site after your Bluetooth mouse died, injured your hand or arm, tried to use a touch screen with your nose, or, finally, raise your hand if you’ve ever used a search engine. If you have your hand up, you, personally, benefited from web accessibility whether you knew it or not.

    So even if you don’t have a Mike or a Steve in your life to inspire you - you can use accessibility techniques to make your sites better for all your users.
  • And the next time you start a new project:
    Think about what your users can and cannot see.
    Thank about what they can and cannot interact with.
    Don’t screw up HTML’s native accessibility.
    Do what you can to make your site better.
    Make a difference to someone and make a difference to everyone.
  • My name is Stephanie Hobson and I like to make websites everyone can use.

    (pause)
    Read out slide
    Slides are on site
  • Web Accessibility: 
Making Websites Better for Everyone

    1. 1. WEB ACCESSIBILITY: MAKING WEBSITES BETTER FOR EVERYONE
    2. 2. WHAT IS WEB ACCESSIBILITY?
    3. 3. SCREEN READER Page has fifty-eight headings and two hundred seventy-one links BBC dash Homepage Link Graphic BBC Heading level two Heading level two BBC navigation List of nine items bullet Link News bullet Link Sport bullet Link Weather bullet Link Capital bullet Link Future bullet Link Shop bullet Link TV bullet Link Radio bullet Link More… List end
    4. 4. HIGH CONTRAST
    5. 5. HIGH CONTRAST
    6. 6. VOICE RECOGNITION
    7. 7. VOICE RECOGNITION
    8. 8. VOICE RECOGNITION
    9. 9. TRACKBALL
    10. 10. KEYBOARD
    11. 11. TRY IT YOURSELF Jaws / ChromeVox Windows High Contrast Theme Turn off your mouse Use your elbows (not fingers)
    12. 12. YOU SHOULD CARE ABOUT ACCESSIBILITY
    13. 13. 1: UX Content Information Architecture Interface Design
    14. 14. 1: UX xkcd.com/773
    15. 15. 2: HTML
    16. 16. 2: HTML Semantic HTML: When the HTML markup reinforces the meaning (aka semantics) of the information on the page.
    17. 17. 2: HTML WCAG 2.0 (Web Content Accessibility Guidelines) wave.webaim.org
    18. 18. Section508 Rehabilitation Act Americans with Disabilities Act Nat’l Federation of the Deaf vs. Netflix Inc ADA Department of Justice Advance Notice Of Proposed Rulemaking CharterofRightsandFreedoms Canadian Human Rights Act Ontarians with Disabilities Act Schedules I, I.I and II of the Financial Administration Act Title III
    19. 19. 3: CSS Don’t screw up your HTML Make small improvements
    20. 20. 4: JAVASCRIPT Don’t screw up your HTML
    21. 21. 4: JAVASCRIPT Don’t screw up your HTML ARIA Roles and Attributes (Accessible Rich Internet Applications)
    22. 22. <div class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </div> <div class="server_details"> <div>Hostname: web02.onr.example.com</div> <div>Service Tag: JCQFZK1</div> <div>Datacentre: ONR</div> <div>Rack Location: 104.6, Unit #24</div> </div>
    23. 23. <div class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </div> <div class="server_details"> <div>Hostname: web02.onr.example.com</div> <div>Service Tag: JCQFZK1</div> <div>Datacentre: ONR</div> </div>
    24. 24. <div class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </div> <dl class="server_details"> <dt>Hostname:</dt><dd>web02.onr.example.com</d <dt>Service Tag:</dt><dd>JCQFZK1</dd> <dt>Datacentre:</dt><dd>ONR</dd> </dl>
    25. 25. <div class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </div> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
    26. 26. <h3 class="server">Blueberry <span class="server_button"> DETAILS ▸</span> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
    27. 27. <h3 class="server">Blueberry <span class="server_button"> DETAILS ▸ </span> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com< <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
    28. 28. $('.server_button').on('click', function() { $(this) .parent().next() .toggleClass('hide'); });
    29. 29. .server_button:hover { background-color: #000; color: #fff; }
    30. 30. <h3 class="server">Blueberry <span class="server_button"> DETAILS ▸ </span> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com< <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
    31. 31. <h3 class="server">Blueberry <button class="server_button"> DETAILS ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
    32. 32. <h3 class="server">Blueberry <button class="server_button" type="button"> DETAILS ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
    33. 33. $('.server_button').on('click', function() { $(this) .parent() .next() .toggle(); });
    34. 34. .server_button:hover { background-color: #000; color: #fff; }
    35. 35. .server_button:hover, .server_button:focus { background-color: #000; color: #fff; }
    36. 36. .server_button:hover, .server_button:focus { background-color: #000; color: #fff; text-decoration: underline; }
    37. 37. <h3 class="server">Blueberry <button class="server_button" type="button"> DETAILS ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
    38. 38. <h3 class="server">Blueberry <button class="server_button" type="button"> Details ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
    39. 39. <h3 class="server">Blueberry <button class="server_button" type="button"> Details ▸ </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
    40. 40. <h3 class="server"> <button class="server_button" type="button"> Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
    41. 41. <h3 class="server"> <button class="server_button" type="button"> Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
    42. 42. <h3> <button class="server" type="button"> Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
    43. 43. .server_button .server:after { content: 'Details 25B8’; text-transform: uppercase; speak: none; background-color: #fff; border-radius: 4px; border: 0px none; box-shadow: 0px -2px
    44. 44. .server_button:hover, .server_button:focus .server:hover:after, .server:focus:after { /* same styles as before */ }
    45. 45. Click here
    46. 46. “…the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target” FITTS’ LAW - Wikipedia FTW
    47. 47. <span aria-hidden="true" class="icon_check"></span> <span class="offscreen"> This server is up: </span>
    48. 48. <span aria-hidden="true" class="icon_check"></span> <span class="offscreen"> This server is up: </span>
    49. 49. .icon_check:before { content: '2713'; speak: none; } .icon_times:before { content: '2715'; speak: none; }
    50. 50. <span aria-hidden="true" class="icon_check"></span> <span class="offscreen"> This server is up: </span>
    51. 51. <span aria-hidden="true" class="icon_check"></span> <span class="offscreen"> This server is up: </span>
    52. 52. .offscreen { position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); }
    53. 53. WHAT JUST HAPPENED?
    54. 54. WHAT JUST HAPPENED? - choose the right element
    55. 55. WHAT JUST HAPPENED? - choose the right element - use descriptive calls to action
    56. 56. WHAT JUST HAPPENED? - choose the right element - use descriptive calls to action - make hit areas bigger
    57. 57. WHAT JUST HAPPENED? - choose the right element - use descriptive calls to action - make hit areas bigger - add visual cues
    58. 58. WHAT JUST HAPPENED? - choose the right element - use descriptive calls to action - make hit areas bigger - add visual cues in the CSS - don’t just add visual cues
    59. 59. <h3> <button class="server" type="button"> <span aria-hidden="true" class="icon_check" <span class="offscreen">This server is up: < Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
    60. 60. <h3> <button class="server" type="button"> <span aria-hidden="true" class="icon_check" <span class="offscreen">This server is up: < Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
    61. 61. <h3> <button class="server" type="button"> <span aria-hidden="true" class="icon_check" <span class="offscreen">This server is up: < Blueberry </button> </h3> <dl class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
    62. 62. <h3> <button aria-controls="raspberry" class="serve <span aria-hidden="true" class="icon_check" <span class="offscreen">This server is up: < Blueberry </button> </h3> <dl id="raspberry" class="server_details"> <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd> </dl>
    63. 63. <h3> <button aria-controls="raspberry" aria-expanded="false" class="server" t <span aria-hidden="true" class="icon_check" <span class="offscreen">This server is up: < Blueberry </button> </h3> <dl id="raspberry" aria-hidden="true" class="ser <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
    64. 64. $('[aria-expanded]').on('click', function() { var id = $(this) .attr(aria-contols); /* toggle values of aria-expanded & aria-hidden */ });
    65. 65. <h3> <button aria-controls="raspberry" aria-expanded="false" class="server" t <span aria-hidden="true" class="icon_check" <span class="offscreen">This server is up: < Blueberry </button> </h3> <dl id="raspberry" aria-hidden="true" class="ser <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
    66. 66. <h3> <button aria-controls="raspberry" aria-expanded="true" class="server" ty <span aria-hidden="true" class="icon_check" <span class="offscreen">This server is up: < Blueberry </button> </h3> <dl id="raspberry" aria-hidden="false" class="se <dt>Hostname:</dt><dd> web02.onr.example.com</ <dt>Service Tag:</dt><dd> JCQFZK1</dd> <dt>Datacentre:</dt><dd> ONR</dd>
    67. 67. .server_details[aria-hidden=true]{ display: none; }
    68. 68. .server[aria-expanded=false]:after{ content: 'Details 25B8'; } .server[aria-expanded=true]:after{ content: 'Details 25BE'; }
    69. 69. DON’T SELL IT, DO IT
    70. 70. BETTER FOR EVERYONE
    71. 71. I LIKE TO MAKE WEBSITES EVERYONE CAN USE @stephaniehobson stephaniehobson.ca
    72. 72. RESOURCES - webaim.org - wave.webaim.org - alistapart.com/article/the-accessibility-of-wai-aria - 24ways.org/2009/dont-lose-your-focus/ - blog.paciellogroup.com/2010/01/high-contrast-proof-css-sprites - filamentgroup.com/lab/bulletproof_icon_fonts.html - snook.ca/archives/html_and_css/hiding-content-for-accessibility - snook.ca/archives/html_and_css/floated-label-pattern-css

    ×