Practical Accessibility
• Brian Richwine
     Indiana University

• Mary Stores
     Indiana University

• Eli Cochran
   ...
Practical Accessibility
So… what are we talking
     about here?
auditory
physical
auditory
physical
auditory
   visual
physical
auditory
              cognitive
   visual
accessibility starts
  with usability
How accessible is Sakai?
First Demo...
OK, Wow!
Breaking it down…
Sakai is mostly accessible
Logo Banner Logout My Workspace ETS Supervisors UIE Seminars Student Portal Go-To
Network My Active Sites Press alt + up a...
Logo Banner
Logout

    *   My Workspace
    *   ES 101A--Social Science Methods
    *   UIE Seminars
    *   20TH-C LIT T...
Semantics
the branch of linguistics and logic concerned with meaning
Semantics = meaning!
Forums (Forums)
<br>
Gradebook (Gradebook)
<br>
Messages (Messages)
<br>
Polls (Polls)
<br>
<span class=”highlight”>Portfo...
Forums (Forums)
<br>
Gradebook (Gradebook)
<br>
Messages (Messages)
<br>
Polls (Polls)
<br>
<span class=”highlight”>Portfo...
Semantics provide more
   than just meaning
Headings

<h1>
    <h2>
           <h3>
             <h4>
               <h5>
Paragraphs

<p>

   not <br> or <div>
   for content.
<blockquote>
is not just a convenient tag for
   indenting something
form elements
Click Me
Click Me
Click Me

<input type=”image” src=”click-me.png” />
Click Me

<input type=”image” src=”click-me.png” />


<button><img src=”click-me.png” /></button>
Click Me

<input type=”image” src=”click-me.png” />


<button><img src=”click-me.png” /></button>


<a href=”javascript:bt...
Click Me
<script>

 $(“#click_me_img”).click(function(){
     doSomething()
 });

</script>
Web 2.0
Web 2.0

Javascript, CSS, AJAX
create new things
create new things


insert elements on the page
create new things


insert elements on the page
  .: anywhere at anytime :.
new things
new things
new things
new things
WAI - ARIA
Web Accessibility Initiative - Accessible Rich Internet Applications

   provides a way to describe
     • new ...
WAI - ARIA
Web Accessibility Initiative - Accessible Rich Internet Applications

   great promise but…
     • inconsistent...
WAI - ARIA
Web Accessibility Initiative - Accessible Rich Internet Applications


                           learn it…
   ...
Datepicker:
Datepicker:
visual datepicker to select the date
for 1st History 1A exam
Datepicker:
visual datepicker to select the date
for 1st History 1A exam
.date-description {
    display: none;
}
Datepicker:
visual datepicker to select the date
for 1st History 1A exam




                                       .date-...
.date-description {
    position: absolute;
    left: -2000px;
}
alternative inputs
      Pick a date:
alternative inputs
      Pick a date:




               6/16/10
alternative inputs
alternative inputs
Add how many items:
       5
alternative inputs
Add how many items:
       5              5
Dynamically inserted elements
Dynamically inserted elements
Provide focus


       $(“.mydialog h1”).focus();
do not append() to the end
do not append() to the end
         Pick a date:




                  6/16/10
do not append() to the end
         Pick a date:




                  6/16/10
              Date Updated!
do not append() to the end
do not append() to the end
$(“p.updated”).appendto(“body”);
do not append() to the end
$(“p.updated”).appendto(“body”);
$(“p.updated”).focus();
do not append() to the end
<body>
  <h1>My Page</h1>


  <p>Pick a date:</p>
  <div class=”date-widget”>
     .: widget st...
do not append() to the end
<body>
  <h1>My Page</h1>


  <p>Pick a date:</p>
  <div class=”date-widget”>
     .: widget st...
do not append() to the end
<body>
  <h1>My Page</h1>


  <p>Pick a date:</p>
  <div class=”date-widget”>
     .: widget st...
do not append() to the end
<body>
  <h1>My Page</h1>


  <p>Pick a date:</p>
  <div class=”date-widget”>
     .: widget st...
do not append() to the end
$(“p.updated”).appendto(“.date-widget”);
$(“p.updated”).focus();
do not append() to the end
<body>
  <h1>My Page</h1>




                                 }
  <p>Pick a date:</p>
  <div c...
Resources
Accessibility WG
 Google: sakai accessibility
Resources
 •     e Fluid Project
 • WebAIM
 • BBC's Future Media Standards
     Semantic Mark-up Guidelines
 • Screen Read...
Google: sakai accessibility
•    ursday @ 2pm in Mesa Verde C
    Working Session/Discussion on:
    Making Sakai 3 Accessible
• Lightening Talk @ 4pm...
Q&A
Practical Accessibility
Practical Accessibility
Practical Accessibility
Practical Accessibility
Practical Accessibility
Practical Accessibility
Practical Accessibility
Practical Accessibility
Upcoming SlideShare
Loading in …5
×

Practical Accessibility

397 views

Published on

common accessibility problems and solutions, presented at the Sakai Conference 2010 in Denver, CO on June 16, 2010

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
397
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

  • The title of this presentation is Practical Accessibility and we have less than an hour to cover a huge subject. So we&amp;#x2019;re not going to spend a lot of time on what is disability or why make things accessible.

    This presentation will focus on common problems and solutions. Hopefully have a little time for Q&amp;A and leave you with some resources. We won&amp;#x2019;t cover everything, but we&amp;#x2019;ll get you started.

  • But some introduction is necessary&amp;#x2026; because most peoples definition of accessibility is too narrow.

    When thinking about accessibility most people immediately think of the needs of blind users. And that is a good place to start.
  • For example there are many different reasons why someone might difficulty controlling a mouse or a keyboard from paralysis to a mild tremor, and many levels of visual acuity from blindness to just having old eyes. And cognitive disabilities effect 1 in 5 people challenging their ability to parse, learn and remember information.

    Every person has different needs, we can&amp;#x2019;t tell you how to meet all those needs, not just because we only have an hour, but also because we don&amp;#x2019;t know your users and what they need.
  • For example there are many different reasons why someone might difficulty controlling a mouse or a keyboard from paralysis to a mild tremor, and many levels of visual acuity from blindness to just having old eyes. And cognitive disabilities effect 1 in 5 people challenging their ability to parse, learn and remember information.

    Every person has different needs, we can&amp;#x2019;t tell you how to meet all those needs, not just because we only have an hour, but also because we don&amp;#x2019;t know your users and what they need.
  • For example there are many different reasons why someone might difficulty controlling a mouse or a keyboard from paralysis to a mild tremor, and many levels of visual acuity from blindness to just having old eyes. And cognitive disabilities effect 1 in 5 people challenging their ability to parse, learn and remember information.

    Every person has different needs, we can&amp;#x2019;t tell you how to meet all those needs, not just because we only have an hour, but also because we don&amp;#x2019;t know your users and what they need.
  • For example there are many different reasons why someone might difficulty controlling a mouse or a keyboard from paralysis to a mild tremor, and many levels of visual acuity from blindness to just having old eyes. And cognitive disabilities effect 1 in 5 people challenging their ability to parse, learn and remember information.

    Every person has different needs, we can&amp;#x2019;t tell you how to meet all those needs, not just because we only have an hour, but also because we don&amp;#x2019;t know your users and what they need.
  • And ultimately accessibility starts with good usability. Anything which frustrates a user with full, unfettered capabilities, if that user actually exists, will doubly frustrate someone who has a disability, small or large.
  • One of the key questions that evaluators ask about Sakai is whether it is accessible. The best way to answer that question is to show you. So Mary, how accessible is Sakai?

    [Mary]
    Very accessible, but not completely, but it is getting even better with Sakai 2.7
    Let&amp;#x2019;s show, and in the process give you an idea of how a real person with a visual disability uses Sakai.
    Every person uses the web differently, especially people with disabilities, and users of adaptive devices. Adaptive devices are themselves very adaptive and every user configures and uses the devices differently. However what you&amp;#x2019;re about to see and hear is pretty typical.
  • Mary&apos;s walk through
  • That was a lot to take in
  • let&amp;#x2019;s see if pull out a few things from that demo
  • Accessibility has been a pretty big priority on Sakai for quite some time.

    Second, if you&amp;#x2019;ve never experienced someone using the web with a screen reader before, you might have been very surprised. I used to assume that screen reader users read through a page from top to bottom to find what they were looking for.
  • I guess I thought that the web looked something like this to the screen reader
  • OK, maybe not that bad, maybe more like this

    it was a huge revelation for me to see that most screen reader users don&amp;#x2019;t see the a page this way at all
  • they scan and parse the page in a way very similar to the way that a sighted user does. They use the screen reader to look for landmarks such as headings, links, lists, and other elements, focusing on those items and then jumping (via keystrokes) to the item that is relevant to the current task or interest.

    But for that to work, the elements of the page must be correctly identified on the page through their HTML tags and attributes.
  • We as designers and developers provide every element on the page with the proper Semantics to provide meaning and context not just to the user directly but by way of interpretation by adaptive devices.

    If we provide the wrong semantics or we provide those semantics in the wrong way, then we make it impossible or at least a bit more difficult for the device and the user to complete their goals.
  • As you saw in the example the markup for the checkboxes lacked enough information to be easily accessed. But Mary was lucky, this table was otherwise very well designed and implemented. It contained a summary that provided context&amp;#x2026;
  • and row and column headers that allowed Mary another way to know which checkbox was which. With out those things Mary, would have been completely lost.
  • I&amp;#x2019;m going to back up for a moment. Because we really jumped over the basics, with a real world example of how markup allows a person to navigate the page with out seeing the page.

    But lets talk about when it goes horribly wrong, and sadly there are times, when it does go horribly wrong.
  • [Brian] This is an example from Site Info, where the red highlight, which indicates which tools were just added is completely in accessible
  • here&amp;#x2019;s the markup

    anyone see what&amp;#x2019;s wrong
  • OK, it is a list that is defined by text with line breaks to break up the rows and the highlight is attached to the Portfolio&amp;#x2019;s row with a class name. And classnames are arbitrary and not parsed by screen readers.

    A better way to convey this information would be with another list that came before the list of tools that simply displays the newly added tools.
  • [Eli] most tags convey both meaning and an organizational structure which can be used both by the user and the adaptive device for navigation

    Let&amp;#x2019;s explore some specific tags and their use and abuse




  • I have abused heading tags. Just thinking, ah, I&amp;#x2019;ll use the h3 instead of h2 here because the h2 looks way to big and horsey. But that&amp;#x2019;s what style sheets are for to change the look of the headings.

    The heading it&amp;#x2019;s self is there to define the structure of the page. It is the outline of the page.

    it is very important to use headings consistently on the page and between pages.

    And, and this is just a convention, not a rule, there should only be only one H1 on a page. The h1 should be treated as a &amp;#x201C;title&amp;#x201D;.

  • paragraph tags allow users to skim through a page jumping from paragraph to paragraph
  • [mary]
    is for quotes! by the wide abuse of this tag is has become meaningless but it could be very useful if it was used correctly

    use CSS for indenting which give you more control anyway
  • screen readers treat forms in a special way because forms are so important to getting things done on the web, but it is really easy, especially with new interactive technologies such as JS to by pass using real form elements but by doing so you are by passing the built in functionality of the screen reader and losing interactivity that you could otherwise get for free, a simple example is that most browsers automatically tab through form elements

  • screen readers treat forms in a special way because forms are so important to getting things done on the web, but it is really easy, especially with new interactive technologies such as JS to by pass using real form elements but by doing so you are by passing the built in functionality of the screen reader and losing interactivity that you could otherwise get for free, a simple example is that more browsers and ad easy tab through form elements

    JS opens up many opportunities for richer interactivity but you should always start with the default tags that will be picked by the screen reader and take advantage of the built meaning

    for example you can add a click event to any element with out a link tag but a screen reader will then not add that actionable element to it&amp;#x2019;s list of links and it will be lost to the user

    there is a lot more to say about how to make forms, tables, and richly interactive web applications accessible but we can&amp;#x2019;t cover it all. So before we break for questions, let&amp;#x2019;s give you some resources

    - Thurs Lightening Talks on labeling
    - Thursdays BOF on making making Sakai 3 accessible

    - Accessbility WG - we&amp;#x2019;re here for you (mary)
    - review
    - consult on solutions

    - There are many great sources of info we have pulled many of them together on the Acc WG wiki

    but here are four
    - Web AIM
    - Fluid Project
    - BBC
    - Mozilla

  • psuedo code
  • psuedo code
  • psuedo code
  • psuedo code
  • which brings us to Web 2.0
  • Web 2.0 as you well know opens up a world of possibilities but it also makes it easier than every to amek likfe hell for people with disabilities, but it also carries with it the ability to make things even more acessible than ever before...


  • let&amp;#x2019;s focus on the two primary problems with Web 2.0

    using JS and CSS you can create new things, things for which there are no built-in tags

    and you can add elements to page on the fly, whereever and whenever you want
  • let&amp;#x2019;s focus on the two primary problems with Web 2.0

    using JS and CSS you can create new things, things for which there are no built-in tags

    and you can add elements to page on the fly, whereever and whenever you want
  • let&amp;#x2019;s focus on the two primary problems with Web 2.0

    using JS and CSS you can create new things, things for which there are no built-in tags

    and you can add elements to page on the fly, whereever and whenever you want
  • what kind of new things&amp;#x2026;

    sliders
    date pickers
    dialog boxes

    there is no &lt;slider&gt; tag, no built-in concept in HTML

    an adaptive device doesn&amp;#x2019;t know what do with it, it doesn&amp;#x2019;t know how to describe it.

    some day there might new HTML semantics to describe some of these things (making a cryptic reference to HTML 5), but that&amp;#x2019;s not really the point, because as soon as you add semantics to HTML for sliders, datepickers and dialogs... someone will come along and invent some other new gizmo that doesn&amp;#x2019;t have a description.

    So you need to add your own descriptions and context for these elements and/or provide alternative ways to do the same thing.
  • what kind of new things&amp;#x2026;

    sliders
    date pickers
    dialog boxes

    there is no &lt;slider&gt; tag, no built-in concept in HTML

    an adaptive device doesn&amp;#x2019;t know what do with it, it doesn&amp;#x2019;t know how to describe it.

    some day there might new HTML semantics to describe some of these things (making a cryptic reference to HTML 5), but that&amp;#x2019;s not really the point, because as soon as you add semantics to HTML for sliders, datepickers and dialogs... someone will come along and invent some other new gizmo that doesn&amp;#x2019;t have a description.

    So you need to add your own descriptions and context for these elements and/or provide alternative ways to do the same thing.
  • what kind of new things&amp;#x2026;

    sliders
    date pickers
    dialog boxes

    there is no &lt;slider&gt; tag, no built-in concept in HTML

    an adaptive device doesn&amp;#x2019;t know what do with it, it doesn&amp;#x2019;t know how to describe it.

    some day there might new HTML semantics to describe some of these things (making a cryptic reference to HTML 5), but that&amp;#x2019;s not really the point, because as soon as you add semantics to HTML for sliders, datepickers and dialogs... someone will come along and invent some other new gizmo that doesn&amp;#x2019;t have a description.

    So you need to add your own descriptions and context for these elements and/or provide alternative ways to do the same thing.









  • so what do I mean by alternative input

    here is an admittedly lame use of a slider control but it is easy to understand... it...

    but sliders are spatial controls, and to a person who doesn&amp;#x2019;t see a web page spatial controls are pretty meaningless

    or even for a keyboard user, who can&amp;#x2019;t drag the slider, giving that user the ability to focus on teh slider control and use the arrow keys to move the control left and right is tedious at best.

    the solution... provide a text box to type into!

    you might even chose to mark up the page in such a way that keyboard and screen reader skips the slider entirely.

    same for the datepicker, inherently inaccessible.
  • so what do I mean by alternative input

    here is an admittedly lame use of a slider control but it is easy to understand... it...

    but sliders are spatial controls, and to a person who doesn&amp;#x2019;t see a web page spatial controls are pretty meaningless

    or even for a keyboard user, who can&amp;#x2019;t drag the slider, giving that user the ability to focus on teh slider control and use the arrow keys to move the control left and right is tedious at best.

    the solution... provide a text box to type into!

    you might even chose to mark up the page in such a way that keyboard and screen reader skips the slider entirely.

    same for the datepicker, inherently inaccessible.












  • [Mary] talk about what the WG can do for you

    consulting
    testing and evaluation
    suggest solutions
    biweekly teleconferences
    participate

  • [Brian]
    The Fluid Project
    WebAIM - WebAIM is a great place to learn about web accessibility from the perspective of people with various disabilities, learn techniques to handle web accessibility issues, and understand the practical meaning of the various laws and guidelines.
    BBC&apos;s Future Media Standards Semantic Mark-up Guidelines - A great style guide to using the appropriate HTML to mark-up page content.
    Screen Reader User Survey - The results from this survey provides great insight into the demographics and preferences of screen reader users.




  • Practical Accessibility

    1. 1. Practical Accessibility • Brian Richwine Indiana University • Mary Stores Indiana University • Eli Cochran University of California, Berkeley
    2. 2. Practical Accessibility
    3. 3. So… what are we talking about here?
    4. 4. auditory
    5. 5. physical auditory
    6. 6. physical auditory visual
    7. 7. physical auditory cognitive visual
    8. 8. accessibility starts with usability
    9. 9. How accessible is Sakai?
    10. 10. First Demo...
    11. 11. OK, Wow!
    12. 12. Breaking it down…
    13. 13. Sakai is mostly accessible
    14. 14. Logo Banner Logout My Workspace ETS Supervisors UIE Seminars Student Portal Go-To Network My Active Sites Press alt + up and down arrows to scroll through menu Fall 2007 accessible site Summer 2010 testing bspace OTHER My Workspace PROJECTS Doing Disability Working Group ETS Supervisors Go-To Network Identity and Access Management Student Portal UIE Seminars Hidden Sites are not included in this menu. Access them in My Workspace -> Worksite Setup. To hide a site, go to My Workspace - > Preferences -> Customize Tabs. Tools begin here Home Site Setup My Files Membership Schedule Announcements Preferences Account Need Help? Content begins here Message of the Week Help for Message of the Week Options Welcome, Summer Session students and instructors! Would you like to create a site for the course you're teaching? Look here for more help. Have questions about what you can or cannot do within bSpace? Visit these FAQs, organized by campus role, to learn more. Instructors: As the end of the semester approaches, be sure to consult our online tools and services for help with processing and posting grades on bSpace. Click the links below for help: Enter or updates grades Finalize grades in Gradebook And before summer gets underway, create your course site for Fall Course lists and rosters for Summer and Fall are available now! Brownbag Series for Instructors: This Spring, ETS will hold brownbag discussions to review current technologies to enhance teaching and learning. Each brownbag will be followed the next week by a hands-on workshop. Attend brownbag or workshop or both! Full schedule pdf Virtual Worlds (Second Life) - hands on Date: Tuesday, June 8th, Noon - 1:00 pm. Location: 4 Dwinelle Hall, Level 'C' More information. Teaching Enrichment Program (TEP): This new program identifies instructors who express an interest in the use of technology for teaching and would like to discover the full scope of their pedagogical needs. Instructional Designers from ETS will design a solution that meets your course goals, determining which tool or tools are best and implementing them for you. For more information, please see the TEP flier. Reset My Workspace Information Need Help? Known Issues Fill out the Support Request Form Sign up for a workshop Reference the online tutorials Guidelines for posting copyrighted material Limited access to bSpace using Safari Problems copying and pasting from Microsoft Word Internet Explorer 6 users cannot re-order materials in Resources Help for My Workspace Information | Request bSpace Support | Webcast | Classroom Technology | Educational Technology Services | University of California | The Sakai Project | Opens in a new window Powered by Sakai Copyright 2005-2009 UC Regents. All rights reserved. bSpace - 2.6_4a - Sakai 2.6.x - Server bspace-prod-02
    15. 15. Logo Banner Logout * My Workspace * ES 101A--Social Science Methods * UIE Seminars * 20TH-C LIT THEORY Sp10 * 5TH YR JAPANESE B Sp10 * My Active Sites Fall 2009 * UIE Seminars Spring 2010 * 20TH-C LIT THEORY Sp10 * 5TH YR JAPANESE B Sp10 * ES 101A--Social Science Methods OTHER * My Workspace PROJECTS * Doing Disability Working Group * ETS Supervisors * Go-To Network * Identity and Access Management * Student Portal Hidden Sites are not included in this menu. Access them in My Workspace -> Worksite Setup. To hide a site, go to My Workspace -> Preferences -> Customize Tabs. Tools begin here
    16. 16. Semantics the branch of linguistics and logic concerned with meaning
    17. 17. Semantics = meaning!
    18. 18. Forums (Forums) <br> Gradebook (Gradebook) <br> Messages (Messages) <br> Polls (Polls) <br> <span class=”highlight”>Portfolios (Portfolios)</span> <br> Resources (Resources)
    19. 19. Forums (Forums) <br> Gradebook (Gradebook) <br> Messages (Messages) <br> Polls (Polls) <br> <span class=”highlight”>Portfolios (Portfolios)</span> <br> Resources (Resources)
    20. 20. Semantics provide more than just meaning
    21. 21. Headings <h1> <h2> <h3> <h4> <h5>
    22. 22. Paragraphs <p> not <br> or <div> for content.
    23. 23. <blockquote> is not just a convenient tag for indenting something
    24. 24. form elements
    25. 25. Click Me
    26. 26. Click Me
    27. 27. Click Me <input type=”image” src=”click-me.png” />
    28. 28. Click Me <input type=”image” src=”click-me.png” /> <button><img src=”click-me.png” /></button>
    29. 29. Click Me <input type=”image” src=”click-me.png” /> <button><img src=”click-me.png” /></button> <a href=”javascript:btnAction();”> <img src=”click-me-btn.png” /> </a>
    30. 30. Click Me <script> $(“#click_me_img”).click(function(){ doSomething() }); </script>
    31. 31. Web 2.0
    32. 32. Web 2.0 Javascript, CSS, AJAX
    33. 33. create new things
    34. 34. create new things insert elements on the page
    35. 35. create new things insert elements on the page .: anywhere at anytime :.
    36. 36. new things
    37. 37. new things
    38. 38. new things
    39. 39. new things
    40. 40. WAI - ARIA Web Accessibility Initiative - Accessible Rich Internet Applications provides a way to describe • new things (roles) • menus, tabs, progress bars, … • the state of things (states) • active, disabled, busy, … • updates (live regions)
    41. 41. WAI - ARIA Web Accessibility Initiative - Accessible Rich Internet Applications great promise but… • inconsistent browser support • xed de nition, just like HTML
    42. 42. WAI - ARIA Web Accessibility Initiative - Accessible Rich Internet Applications learn it… use it… but don’t rely on it!
    43. 43. Datepicker:
    44. 44. Datepicker: visual datepicker to select the date for 1st History 1A exam
    45. 45. Datepicker: visual datepicker to select the date for 1st History 1A exam
    46. 46. .date-description { display: none; }
    47. 47. Datepicker: visual datepicker to select the date for 1st History 1A exam .date-description { position: absolute; left: -2000px; }
    48. 48. .date-description { position: absolute; left: -2000px; }
    49. 49. alternative inputs Pick a date:
    50. 50. alternative inputs Pick a date: 6/16/10
    51. 51. alternative inputs
    52. 52. alternative inputs Add how many items: 5
    53. 53. alternative inputs Add how many items: 5 5
    54. 54. Dynamically inserted elements
    55. 55. Dynamically inserted elements
    56. 56. Provide focus $(“.mydialog h1”).focus();
    57. 57. do not append() to the end
    58. 58. do not append() to the end Pick a date: 6/16/10
    59. 59. do not append() to the end Pick a date: 6/16/10 Date Updated!
    60. 60. do not append() to the end
    61. 61. do not append() to the end $(“p.updated”).appendto(“body”);
    62. 62. do not append() to the end $(“p.updated”).appendto(“body”); $(“p.updated”).focus();
    63. 63. do not append() to the end <body> <h1>My Page</h1> <p>Pick a date:</p> <div class=”date-widget”> .: widget stuff here :. </div> <p>a bunch more stuff…</p> <p>even more stuff…</p> <p>yep, even more stuff…</p> <p class=”updated”> Date Updated! </p> </body>
    64. 64. do not append() to the end <body> <h1>My Page</h1> <p>Pick a date:</p> <div class=”date-widget”> .: widget stuff here :. </div> } Date Widget <p>a bunch more stuff…</p> <p>even more stuff…</p> <p>yep, even more stuff…</p> <p class=”updated”> Date Updated! </p> </body>
    65. 65. do not append() to the end <body> <h1>My Page</h1> <p>Pick a date:</p> <div class=”date-widget”> .: widget stuff here :. </div> } Date Widget <p>a bunch more stuff…</p> } <p>even more stuff…</p> <p>yep, even more stuff…</p> Everything else on the page <p class=”updated”> Date Updated! </p> </body>
    66. 66. do not append() to the end <body> <h1>My Page</h1> <p>Pick a date:</p> <div class=”date-widget”> .: widget stuff here :. </div> } Date Widget <p>a bunch more stuff…</p> } <p>even more stuff…</p> <p>yep, even more stuff…</p> Everything else on the page <p class=”updated”> Date Updated! </p> </body> } Date Con rmation
    67. 67. do not append() to the end $(“p.updated”).appendto(“.date-widget”); $(“p.updated”).focus();
    68. 68. do not append() to the end <body> <h1>My Page</h1> } <p>Pick a date:</p> <div class=”date-widget”> .: widget stuff here :. <p class=”updated”> Date Widget Date Updated! </p> & the con rmation </div> <p>a bunch more stuff…</p> } <p>even more stuff…</p> <p>yep, even more stuff…</p> Everything else on the page </body>
    69. 69. Resources
    70. 70. Accessibility WG Google: sakai accessibility
    71. 71. Resources • e Fluid Project • WebAIM • BBC's Future Media Standards Semantic Mark-up Guidelines • Screen Reader User Survey
    72. 72. Google: sakai accessibility
    73. 73. • ursday @ 2pm in Mesa Verde C Working Session/Discussion on: Making Sakai 3 Accessible • Lightening Talk @ 4pm in Bristlecone An Accessibility Fundamental: Making sure text is meaningful and makes sense out of context: Why & How
    74. 74. Q&A

    ×