Building An Accessible Site from the Ground Up

4,166 views

Published on

Tips for making your site accessible to everyone. Lots of HTML, CSS, and JavaScript tips.

Published in: Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,166
On SlideShare
0
From Embeds
0
Number of Embeds
797
Actions
Shares
0
Downloads
20
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Building An Accessible Site from the Ground Up

  1. 1. Building An Accessible Site from the Ground Up
  2. 2. Russell Heimlich @KingKool68 ‣Web Developer at the Pew Research Center ‣http://www.russellheimlich.com/blog
  3. 3. I Like Funny T-Shirts
  4. 4. What is accessibility? http://www.flickr.com/photos/artbystevejohnson/4610457832/
  5. 5. Accessibility is NOT just about people with disabilities.
  6. 6. Accessibility is about PEOPLE! http://www.flickr.com/photos/elvire-r/2451784799/
  7. 7. Devices ‣Desktop Computer ‣Mobile ‣In Between (iPad, Netbooks) ‣TV’s http://www.flickr.com/photos/krossbow/4757275301/
  8. 8. Interactions ‣Mouse ‣Keyboard ‣Touchscreen ‣Screenreader http://www.flickr.com/photos/a6u571n/3207185886/
  9. 9. Technologies ‣JavaScript ‣CSS ‣Images display: none;
  10. 10. So what can be done to make websites more accessible?
  11. 11. Think About The HTML
  12. 12. Use the Right Element for the Job <p> = paragraph <h1>-<h6> = Heading 1 through 6 <div class=”paragraph”> Using Tables for Layout
  13. 13. Be Aware of the Source Order ‣Markup content the way it should be read NOT the way it should be displayed. Header Header Aside Content Content Aside
  14. 14. Create Consistent Conventions <div id=”header”> <ul id=”nav”> <div id=”content”> <div id=”sidebar”> <div id=”footer”>
  15. 15. Use Alt Attributes on <img> ‣Include text to display as a backup ‣Provide context to what the user is missing ‣If the image is purely decoration use alt=””
  16. 16. Style Alt Text a img { background-color:#EDEBD5; border:medium none; color:#000; font-size:28px; line-height:125%; }
  17. 17. Why Bother with Alt Text? ‣Screenreaders read filenames when no alt attribute ‣Text-only browsers/devices benefit ‣Image links have anchor text/context ‣Google indexes alt text ‣Sometimes your CDN goes down
  18. 18. Form Inputs
  19. 19. Associate Inputs with Labels ‣Link descriptive text with an input field ‣Provides context about what is expected ‣Clicking label focuses input field
  20. 20. Implicit vs. Explicit Labels <label for=”name”>Name</label> <input type=”text” id=”name”> <label> Name <input type=”text”> </label> label { curser: pointer; }
  21. 21. Use Most HTML5 Input Types ‣type=”search” ‣type=”tel” ‣type=”url” ‣type=”email” ‣Old browsers fallback to type=”text”
  22. 22. Type=”search” Has Slight Benefit http://css-tricks.com/webkit-html5-search-inputs/
  23. 23. Fieldsets Group Several Inputs <fieldset id=”contact”> <label> Name <input type="text"> </label> <label> Email <input type="email"> </label> </fieldset>
  24. 24. Legend is a Caption for Fieldsets <fieldset id=”contact”> <legend>Contact Info</legend> .... </fieldset
  25. 25. Keyboard Navigation
  26. 26. Turn it on in OSX System Preferences -> Keyboard -> All Controls or Press Control + F7
  27. 27. Tab Index ‣Use tabindex attribute to specify tab order ‣Tab index goes from lowest to highest ‣tabindex=”-1” will be skipped ‣If you use proper HTML source order, you’re done!
  28. 28. This Site is Gorgeous! http://www.hd-live.co.uk/
  29. 29. Pretty Hover State http://www.hd-live.co.uk/
  30. 30. No Focus State Defined! http://www.hd-live.co.uk/
  31. 31. :focus = :hover ‣Anywhere :hover is used, add :focus as well a:hover, a:focus { text-decoration:underline; color:red; }
  32. 32. Design for the Outline a { /* This is bad! */ outline:0; } a:focus { /* Keyboard Users */ outline: thin dotted #000; } a:hover { /* Mouse Users */ outline:none; }
  33. 33. Design for the Outline ‣Adding outline style is the same as adding a border ‣Some elements need 1 or 2 px of padding ‣TEST, TEST, TEST!
  34. 34. Hiding Content the Accessible Way /* Hides from keyboard users */ display:none; /* Hidden but still accessible */ .hidden { left:-999em; position:absolute; top:auto; }
  35. 35. Reavling Hidden Content /* Reveal on Focus */ .hidden:focus { position:static; }
  36. 36. Skip Navigation Link ‣Lets a visitor skip straight to the content ‣Without it, keyboard visitors suffer ‣Should be the first element after <body> ‣Can be visible or hidden based on the desgin ‣If hidden, should stand out on focus
  37. 37. Skip Navigation Link <body> <a id="top" href="#content"> Skip to Content</a>
  38. 38. Skip Navigation Link #top:focus { position:static; font-size:1.5em; background-color:#FFFFD5; display:block; font-weight:bold; color:#000; padding:2px 15px 5px; }
  39. 39. Screenreaders
  40. 40. Add an Anchor to Search Forms <form action="/search/#content"> <label for=”q”>Search</label> <input type="search" id=”q”> <input type=”submit” value=”search”> </form>
  41. 41. Add an Anchor to Search Forms ‣Skips visitors straight to the results ‣No need for screenreaders to read through nav
  42. 42. ARIA Landmark Roles ‣Help define the structure of a document ‣Screenreaders can move around different sections ‣Just add role attribute to an element <div id=”header” role=”banner”>
  43. 43. role=”article” ‣Content that makes sense in its own right, such as a complete blog post, a comment on a blog, a post in a forum, and so on.
  44. 44. role=”banner” ‣Site-orientated content, such as the title of the page and the logo. ‣Header
  45. 45. role=”complementary” ‣Supporting content for the main content, but meaningful in its own right when separated from the main content. ‣Aside or sidebar
  46. 46. role=”contentinfo” ‣Child content, such as footnotes, copyrights, links to privacy statement, links to preferences, and so on. ‣Footer
  47. 47. role=”main” ‣Content that is directly related to or expands on the central content of the document. ‣Main content container, #content
  48. 48. role=”navigation” ‣Content that contains the links to navigate this document and/or related documents.
  49. 49. role=”search” ‣This section contains a search form to search the site.
  50. 50. Mobile
  51. 51. Mobile Stylesheet ‣Smartphones handle websites OK ‣Dumb phones need a slimmed down stylesheet ‣http://perishablepress.com/press/2009/08/02/ the-5-minute-css-mobile-makeover/
  52. 52. Why should I care?
  53. 53. More Visitors ‣The more ways your site can be accessed, the more potential visitors. ‣More visitors = more traffic ‣More traffic = more conversions (sales, ad clicks, downloads, whatever)
  54. 54. Happier Visitors ‣Users that can find what they’re looking for become loyal, repeat visitors. ‣Loyalty = word of mouth ‣Adds to your brand/reputation
  55. 55. Search Engine Optimization ‣Accessible content makes Google Happy! ‣Happy Google ranks you better! ‣Better Rankings = More Traffic ‣Sometimes you need to disguise accessibility with SEO to sell it to stakeholders.
  56. 56. The Spirit of the Web ‣The Internet is an open platform ‣The web wants to be device agnostic ‣Different ways to view the same content is what makes the Internet a special medium.
  57. 57. It’s the right thing to do! ‣At the end of the day, it’s people on the other end of your website.
  58. 58. Thank You!
  59. 59. Accessibility Resources ‣ http://webaim.org ‣ http://diveintoaccessibility.org/ ‣ http://juicystudio.com/article/examining-wai-aria-document-andmark- roles.php ‣ http://www.w3.org/standards/webdesign/accessibility ‣ http://jfciii.com/

×