1
2
I am Nitin.. A blind
Rubyist..! Have Made
‘technology’
my ‘vision’..!
Assistive Technologies
Accessibility – In Brief
RIA overview
ARIA overview
ARIA attributes
Demonstrations
Contributing Bac...
4
Assistive Technology
Screen Reader Magnifier
Braille Viewer
5
Screen reader is a software that reads the screen and
provides audio output enabling blind individuals access
informatio...
6
Windows OS Linux OS Mac OS
JAWS For Windows
NVDA
Windows-Eyes
ORCA Voice Over
7
Magnifiers Braille Display
Provides Braille output on a rubber screen.Magnifies the keyboard-highlighted
and Mouse-focus...
In simplest terms - Accessibility means making
something usable for everyone – including
people with disabilities.
8
9
10
Desktop
Application
Button
Text Box
Check Box
Tree View
Tab Panel
Screen
Reader
11
Traditional
Web
Application
Button
Text Box
Check Box
Tree View
Tab Panel
Screen
Reader
Managed using
CSS, Java script...
12
Rich
Internet
Application
Button
Text Box
Check Box
Tree View
Tab Panel
Screen
Reader
Rich Widgets
And, the answer is…...
Accessible
Rich
Internet
Applications Suite
13
Roles - <form role="search">
Properties – <input type="text" … aria-required="true">
States – <input type= "checkbox “… ar...
15
Good news: our site is now fully compliant with
accessibility standards. So the visually impaired
can hate it as much a...
16
17
Inaccessible
<section class="col-2-3" >
<h1>Keynotes</h1>
</section>
Accessible
<section class="col-2-3" role="region"
ari...
Inaccessible
<h2>
<a href="#keynote"> Keynotes</a>
</h2>
Accessible
<a href= "#keynote"> Keynotes</a>
19
Accessibility hin...
20
• Screen Reader knows No RED
• No ARIA Attributes
<input id="post_title"
name="post[title]" type="text">
21
With ARIA Attribute
<input aria-required="true"
id="post_title" name="post[title]"
type="text“>
22
23
<textarea aria-describedby="description"
id="post_body"
name="post[body]"></textarea>
<label for="post_Maximum 500
char...
Live Regions are the areas in a web page in which the contents are
updated dynamically and frequently.
Examples –
Live Cha...
25
26
<div id="liveregion2" class="region" role="log“
aria-live="polite" aria-atomic="true" aria-
relevant="additions">
</div>
27
Inaccessible
%section.panel{:id => "tabpanel1"}
%ul.nav.nav-tabs.nav-justified
%li{class: 'active', :id => "tab1"}
#sum...
@joshsoftware
28
29
Making RDoc Accessible
A long way to go
30
WAIable gem in Rails 5
31
http://www.w3.org/TR/WCAG/
http://www.w3.org/WAI/intro/aria.php
http://www.w3.org/TR/wai-aria-practices/
http://www.ogcio....
Video
33
Professional trainers & developers of accessibility.
Professional accessibility testers.
Consultation to corporates.
34
‘The power of the Web is in its
universality. Access by everyone
regardless of disability is an
essential aspect.’
Tim Ber...
Website- http://techvision.net.in
Email- info@techvision.net.in
Twitter- @techvision_ss
@nitinzd
@sidnc86
@talktodnyan
36
Upcoming SlideShare
Loading in …5
×

Rails_Conf_14_PPT_For_Accessibility

211 views

Published on

This presentation is about Web Accessibility and its importance in Rich Internet Applications. This was presented in rails conf 14 held at Chicago.

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

  • Be the first to like this

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

No notes for slide
  • Users with disabilities frequently rely on hardware and software to access web content. These tools, known as assistive technologies, range from screen readers to touch screens to Braille Displays and head pointers.In this workshop, we will be mainly focussing on Screen Readers as Assistive Technology.Blind users of the web frequently use software called a screen reader to read the contents of a web page out loud. Screen readers enable users to hear, rather than read, the contents of a web page. Two common screen readers are JAWS from Freedom Scientific and NVDA from NV Access. We will be demonstrating both in this session.
  • Users with disabilities frequently rely on hardware and software to access web content. These tools, known as assistive technologies, range from screen readers to touch screens to Braille Displays and head pointers.In this workshop, we will be mainly focussing on Screen Readers as Assistive Technology.Blind users of the web frequently use software called a screen reader to read the contents of a web page out loud. Screen readers enable users to hear, rather than read, the contents of a web page. Two common screen readers are JAWS from Freedom Scientific and NVDA from NV Access. We will be demonstrating both in this session.
  • Users with disabilities frequently rely on hardware and software to access web content. These tools, known as assistive technologies, range from screen readers to touch screens to Braille Displays and head pointers.In this workshop, we will be mainly focussing on Screen Readers as Assistive Technology.Blind users of the web frequently use software called a screen reader to read the contents of a web page out loud. Screen readers enable users to hear, rather than read, the contents of a web page. Two common screen readers are JAWS from Freedom Scientific and NVDA from NV Access. We will be demonstrating both in this session.
  • Users with disabilities frequently rely on hardware and software to access web content. These tools, known as assistive technologies, range from screen readers to touch screens to Braille Displays and head pointers.In this workshop, we will be mainly focussing on Screen Readers as Assistive Technology.Blind users of the web frequently use software called a screen reader to read the contents of a web page out loud. Screen readers enable users to hear, rather than read, the contents of a web page. Two common screen readers are JAWS from Freedom Scientific and NVDA from NV Access. We will be demonstrating both in this session.
  • In this workshop we will be talking only about Web Content Accessibility.Web &quot;content&quot; generally refers to the information in a web page or web application, including:Natural information such as text, images, and soundsCode or markup that defines structure, presentation, etc.Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.
  • Authors need to associate elements in the document to a WAI-ARIA role and the appropriate states and properties (aria-* attributes) during its life-cycle.The terms &quot;states&quot; and &quot;properties&quot; refer to similar features. Both provide specific information about an object, and both form part of the definition of the nature of roles. States and properties are both treated as aria-prefixed markupattributes. However, they are maintained conceptually distinct to clarify subtle differences in their meaning. One major difference is that the values of properties (such as aria-labelledby) are often less likely to change throughout the application life-cycle than the values of states (such as aria-checked) which may change frequently due to user interaction. Because the distinction between states and properties is of little consequence to most web content authors, we refer to both &quot;states&quot; and &quot;properties&quot; simply as &quot;attributes&quot; whenever possible.
  • &lt;input id=&quot;post_title&quot; name=&quot;post[title]&quot; type=&quot;text&quot;&gt;
  • &lt;input id=&quot;post_title&quot; name=&quot;post[title]&quot; type=&quot;text&quot;&gt;
  • Josh means “enthusiasm” and “passion” in Hindi. Its not Josh the name. Josh is one of India’s leading Ruby companies who has been helping us for the past 2 years in this effort.
  • Josh means “enthusiasm” and “passion” in Hindi. Its not Josh the name. Josh is one of India’s leading Ruby companies who has been helping us for the past 2 years in this effort.
  • Josh means “enthusiasm” and “passion” in Hindi. Its not Josh the name. Josh is one of India’s leading Ruby companies who has been helping us for the past 2 years in this effort.
  • Rails_Conf_14_PPT_For_Accessibility

    1. 1. 1
    2. 2. 2 I am Nitin.. A blind Rubyist..! Have Made ‘technology’ my ‘vision’..!
    3. 3. Assistive Technologies Accessibility – In Brief RIA overview ARIA overview ARIA attributes Demonstrations Contributing Back Mission References Q & A 3
    4. 4. 4 Assistive Technology Screen Reader Magnifier Braille Viewer
    5. 5. 5 Screen reader is a software that reads the screen and provides audio output enabling blind individuals access information available via electronic devices.
    6. 6. 6 Windows OS Linux OS Mac OS JAWS For Windows NVDA Windows-Eyes ORCA Voice Over
    7. 7. 7 Magnifiers Braille Display Provides Braille output on a rubber screen.Magnifies the keyboard-highlighted and Mouse-focused objects enabling low-vision users operate computers.
    8. 8. In simplest terms - Accessibility means making something usable for everyone – including people with disabilities. 8
    9. 9. 9
    10. 10. 10 Desktop Application Button Text Box Check Box Tree View Tab Panel Screen Reader
    11. 11. 11 Traditional Web Application Button Text Box Check Box Tree View Tab Panel Screen Reader Managed using CSS, Java script, etc.
    12. 12. 12 Rich Internet Application Button Text Box Check Box Tree View Tab Panel Screen Reader Rich Widgets And, the answer is…. ARIA
    13. 13. Accessible Rich Internet Applications Suite 13
    14. 14. Roles - <form role="search"> Properties – <input type="text" … aria-required="true"> States – <input type= "checkbox “… aria-checked =“false"> 14
    15. 15. 15 Good news: our site is now fully compliant with accessibility standards. So the visually impaired can hate it as much as everyone else does.
    16. 16. 16
    17. 17. 17
    18. 18. Inaccessible <section class="col-2-3" > <h1>Keynotes</h1> </section> Accessible <section class="col-2-3" role="region" aria-label="Keynotes"> <h1>Keynotes</h1> </section> 18
    19. 19. Inaccessible <h2> <a href="#keynote"> Keynotes</a> </h2> Accessible <a href= "#keynote"> Keynotes</a> 19 Accessibility hindrance
    20. 20. 20 • Screen Reader knows No RED • No ARIA Attributes <input id="post_title" name="post[title]" type="text">
    21. 21. 21 With ARIA Attribute <input aria-required="true" id="post_title" name="post[title]" type="text“>
    22. 22. 22
    23. 23. 23 <textarea aria-describedby="description" id="post_body" name="post[body]"></textarea> <label for="post_Maximum 500 characters are allowed" id="description">Maximum 500 characters are allowed</label>
    24. 24. Live Regions are the areas in a web page in which the contents are updated dynamically and frequently. Examples – Live Chat News Feeds 24
    25. 25. 25
    26. 26. 26 <div id="liveregion2" class="region" role="log“ aria-live="polite" aria-atomic="true" aria- relevant="additions"> </div>
    27. 27. 27 Inaccessible %section.panel{:id => "tabpanel1"} %ul.nav.nav-tabs.nav-justified %li{class: 'active', :id => "tab1"} #summary.tab-pane.active Accessible %section.panel{:id => "tabpanel1", :role => "application"} %ul.nav.nav-tabs.nav-justified{:role => "tablist"} %li{class: 'active', :role => "tab", :id => "tab1", "aria-controls" => "summary", "aria-selected" => :true} #summary.tab-pane.active{:role => "tabpanel"}
    28. 28. @joshsoftware 28
    29. 29. 29
    30. 30. Making RDoc Accessible A long way to go 30
    31. 31. WAIable gem in Rails 5 31
    32. 32. http://www.w3.org/TR/WCAG/ http://www.w3.org/WAI/intro/aria.php http://www.w3.org/TR/wai-aria-practices/ http://www.ogcio.gov.hk/en/community/web_accessibility http://www.w3.org/WAI/Policy/ 32
    33. 33. Video 33
    34. 34. Professional trainers & developers of accessibility. Professional accessibility testers. Consultation to corporates. 34
    35. 35. ‘The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.’ Tim Berners-Lee, W3C Director and inventor of the World Wide Web 35
    36. 36. Website- http://techvision.net.in Email- info@techvision.net.in Twitter- @techvision_ss @nitinzd @sidnc86 @talktodnyan 36

    ×