SlideShare a Scribd company logo
1 of 51
Download to read offline
Accessible Design with HTML5
     Developing Websites for Everyone




                               Raj Lal
                         Senior Engineer
Agenda




  About         Business   4 Key Areas   7 Steps in
  Accessibility Case                     HTML5
About Accessibility
About Accessibility



  Accessibility is about making web pages
                Easier to Use
About Accessibility


                      Easier to Access



             For Everyone



                      Latest Technology
                          Available
Easier to Access
• Screen readers
• Audio browsers
• Only keyboard or mouse
• Limited bandwidth
• Old browsers, computers
• Mobile / touch devices
Disabled
Seniors Citizens
Low literacy level
Temporary illness
Advanced Users




For Everyone
Latest Technology Available




         HTML5 CSS3 JavaScript
The Business Case
The Business Case

              Search Engine Optimization
              Higher Search Engine Ranking
              Senior Citizens spend 2x time buying online
              Affluent customers may not be tech savvy
              Its also a Law (section 508)
4 Key Areas
4 Key Areas

          Hearing
         Mobility
         Cognitive
              Visual
1/4 Hearing


                Problem
       Cannot hear media
                Solution
  Make it PERCEIVABLE
1/4 Hearing

PERCEIVABLE
  Text alternative to all non-text content

  Alternative for media using subtitles

  Transcribed text and Sign language
2/4 Mobility


                      Problem
Difficulty with Mouse, Keyboard
                      Solution
         Make it OPERABLE
2/4 Mobility


OPERABLE
  All function accessible from keyboard alone

  No auto refresh, allow stop time based contents

  Navigate with proper use of Headings & Anchors

  Joysticks, Voice recognition or audio feedback
3/4 Cognitive


                       Problem
     Difficulty with Text content

                       Solution
Make it UNDERSTANDABLE
3/4 Cognitive
UNDERSTANDABLE
  High color contrast 4.5:1

  Use San serif fonts & allow resize

  Avoid auto-play of media, animation

  Avoid auto refresh, or flashy graphics

  Use multiple visual cues, std. icons & audio feedback
4/4 Visual


                      Problem
 Cannot see the content or color

                       Solution
            Make it ROBUST
4/4 Visual

ROBUST
   Broken HTML tag can cause difficulty in screen reader

   Follow HTML standard specifications

   Use syntactically correct HTML & validate web page

   Proper “lang” attributes in the markup

   Use “acronym” and “abbr” tag with proper usage
W3C’s The POUR Principle




Perceivable   Operable   Understand   Robust
                             able
7 Steps in HTML5
Step 1: Make Progressive Enhancements
Step 1: Progressive Enhancement



                              HTML CSS
                              JavaScript
                HTML CSS
  HTML
Step 1: Progressive Enhancement


Design in a Progressive enhancement way
All content available by HTML alone
Use semantically structured HTML
All presentation elements in the style sheet
Step 1: Example

    <h1>Top Level Heading</h1>
    <section>
     <h1>Second Level Heading</h1>
     <p>An <strong>important</strong>
         text in <em>section</em> element
     </p>
    </section>
Step 1: Comparison
                                      Bad Example

 <div class="depth0">
 <a href="#" name="d26">
  <img id="vh_div16indic" src="pix/closed.gif" alt="Closed">
  Security
 </a>
 </div>
 <span id="vh_div16"></span>

                                    Good example
 <li class="closed"><a href="#">Security</a></li>
Step 1: Comparison

                                           Bad Example

 <font size=”14px” color=”#000”>
 <b>Welcome to the site</b></font>
 <td style="width:180px" id="left-column">…

                                      Good example
 <style type="text/css">
 <!-- td#left-column {width: 180px;} -->
 </style>
 <h1>Welcome to the site</h1>
 <table><tr><td id="left-column">…
Step 2: Allow Content Navigation
Step 2: Allow content navigation


  Accessible navigation sidebar
  Option to skip to main content
  Menus accessible from keyboard
  Proper nesting of headings, h1, h2, h3, etc.
Step 2: Layout




        OLD      HTML5
Step 2: Layout with Role



                       <header role="banner">
                       <nav role="navigation">
                       <section role=“main”>
                       <footer role=“toolbar”>
                       <footer role=“button”>
                       …



        HTML5              Accessible HTML5
Step 3: Makes FORMS Accessible
Step 3: Make Forms Accessible


Use „label” tag for describing form elements
Associate labels with controls using "for" attribute
Create a logical tab order with “tabindex”
For tabbed interface use aria-hidden and aria-pressed
Use “fieldset” and “legend” to group form elements
Use aria-live=“assertive” in the form for validation
Step 3: HTML code



                                   Good example
 <ul class="group">

 <li><input type="radio" id="EHTML" value="html" checked>
 <label for="EHTML">HTML</label></li>

 <li><input type="radio" id="ETEXT" value="text" >
 <label for="ETEXT">Text</label></li>

 </ul>
Step 3: HTML code



                                    Good example
 <fieldset>
   <legend tabindex="10"><b>Personal Details</b>
  </legend>
   <label for="name">Name:</label>
   <input id="name" type="text" size="30" tabindex="11">
  <br>
   <label for="id">ID Number:</label>
   <input id="id" type="text" size="10" tabindex="12">
 </fieldset>
Step 4: Accessible Images
Step 4: Make Images Accessible


Use ”alt” attribute for alternative text for the image
Use “title” attribute for tooltip
Use role=“presentation” to ignore the image
Use blank ”alt” for decorative images
Use meaningful name for src=“meaningful.png”
Step 5: Accessible Media
Step 5: Make Media Accessible


Media player features navigable by keyboard

Closed captions with timed text files

Switchable sign translation video

Transcripts, caption and sign language
Step 6: Know HTML5 Animations
Step 6: Know HTML5 Animations


                                CSS3
               Canvas &         Animation
  SVG &        JavaScript
  JavaScript
Step 6: Know HTML5 Animations

    Animation: SVG

•    2D vector graphics using XML
•    Object retained in the memory
•    Full DOM support
•    SVG elements can be styled
•    Check Modernizr.svg Modernizr.inlinesvg

Perform better when smaller
number of elements and large surface
HTML CODE

<svg id="svgElement"
width="800px" height="600px"
viewBox="0 0 800 600">

<rect x="0" y="0" width="100%"
 height="100%" rx="10" ry="10"
 style="fill: white; stroke: black;" />

<circle id="circle0" cx="40" cy="40" r="40"
style="fill: orange; stroke: black; stroke-
width: 1;" />
</svg>
Step 6: Know HTML5 Animations
    Animation: Canvas: Context 2D

•    Bitmap drawing area
•    Rectangles, lines, arcs, paths
•    Stateless
•    No DOM support, single element
•    Check Modernizr.canvas

Perform better when large number of objects and surface is
small
Step 6: Know HTML5 Animations

    Animation: CSS3

•   Styles for Individual elements
•   Use CSS3 animation if available
•   Better than JavaScript based animation
•   Check Modernizr.csstransitions

Can perform better with GPU acceleration
Step 6: Know HTML5 Animations
Animation: CSS3
var elem = $(„myelement');             JS CODE

elem.addEventListener('click',
function loop() {
elem.style.left = „100px';}, false);

#myelement                             CSS
{
…
-ms-transition: opacity 1s ease;
transition: opacity 1s ease;
}
Step 7: Make Content Easy
Step 7: Make Content Easy

Font size should always be relative , never fixed

Links should be underlined and of different color

Use Anchor links, easily navigable by screen readers

Meaningful link text , avoid using “click here” or “more”
Step 7: Make Content Easy

Avoid long pages and minimize scrolling

Test navigation with Keyboard tab

Spelling help in Search

Color in CSS with foreground & background color

Simple and Machine (Screen reader) readable
words like “Home page”
Thank You
    Raj Lal




Twitter @ iRajLal

More Related Content

What's hot

The Semantic Web
The Semantic WebThe Semantic Web
The Semantic Webostephens
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5Robert Nyman
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBWahyu Putra
 
Intro to HTML & Semantic Markup (Chapter 2 - Sorta Brief Version)
Intro to HTML & Semantic Markup (Chapter 2 - Sorta Brief Version)Intro to HTML & Semantic Markup (Chapter 2 - Sorta Brief Version)
Intro to HTML & Semantic Markup (Chapter 2 - Sorta Brief Version)Nicole Ryan
 
Web 3.0 The Semantic Web
Web 3.0 The Semantic WebWeb 3.0 The Semantic Web
Web 3.0 The Semantic WebHatem Mahmoud
 
semantic web-unique presentation
semantic web-unique presentationsemantic web-unique presentation
semantic web-unique presentationramesh kumar
 
Basics of css and xhtml
Basics of css and xhtmlBasics of css and xhtml
Basics of css and xhtmlsagaroceanic11
 
The Social Semantic Web: An Introduction
The Social Semantic Web: An IntroductionThe Social Semantic Web: An Introduction
The Social Semantic Web: An IntroductionJohn Breslin
 
The Social Semantic Web and Linked Data
The Social Semantic Web and Linked DataThe Social Semantic Web and Linked Data
The Social Semantic Web and Linked DataAlexandre Passant
 
Jarrar: The Next Generation of the Web 3.0: The Semantic Web
Jarrar: The Next Generation of the Web 3.0: The Semantic WebJarrar: The Next Generation of the Web 3.0: The Semantic Web
Jarrar: The Next Generation of the Web 3.0: The Semantic WebMustafa Jarrar
 
Semantic Web: Intro
Semantic Web: IntroSemantic Web: Intro
Semantic Web: IntroFariz Darari
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5Nir Elbaz
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & FriendsRemy Sharp
 

What's hot (20)

The Open Web
The Open WebThe Open Web
The Open Web
 
The Semantic Web
The Semantic WebThe Semantic Web
The Semantic Web
 
An Introduction To HTML5
An Introduction To HTML5An Introduction To HTML5
An Introduction To HTML5
 
Training HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPBTraining HTML5 CSS3 Ilkom IPB
Training HTML5 CSS3 Ilkom IPB
 
Html5 basics
Html5 basicsHtml5 basics
Html5 basics
 
Intro to HTML & Semantic Markup (Chapter 2 - Sorta Brief Version)
Intro to HTML & Semantic Markup (Chapter 2 - Sorta Brief Version)Intro to HTML & Semantic Markup (Chapter 2 - Sorta Brief Version)
Intro to HTML & Semantic Markup (Chapter 2 - Sorta Brief Version)
 
Web 3.0 The Semantic Web
Web 3.0 The Semantic WebWeb 3.0 The Semantic Web
Web 3.0 The Semantic Web
 
semantic web-unique presentation
semantic web-unique presentationsemantic web-unique presentation
semantic web-unique presentation
 
Chapter14
Chapter14Chapter14
Chapter14
 
Basics of css and xhtml
Basics of css and xhtmlBasics of css and xhtml
Basics of css and xhtml
 
The Social Semantic Web: An Introduction
The Social Semantic Web: An IntroductionThe Social Semantic Web: An Introduction
The Social Semantic Web: An Introduction
 
The Open Web
The Open WebThe Open Web
The Open Web
 
The Social Semantic Web and Linked Data
The Social Semantic Web and Linked DataThe Social Semantic Web and Linked Data
The Social Semantic Web and Linked Data
 
CSS: Introduction
CSS: IntroductionCSS: Introduction
CSS: Introduction
 
Chapter10
Chapter10Chapter10
Chapter10
 
Jarrar: The Next Generation of the Web 3.0: The Semantic Web
Jarrar: The Next Generation of the Web 3.0: The Semantic WebJarrar: The Next Generation of the Web 3.0: The Semantic Web
Jarrar: The Next Generation of the Web 3.0: The Semantic Web
 
Semantic Web: Intro
Semantic Web: IntroSemantic Web: Intro
Semantic Web: Intro
 
Chapter1
Chapter1Chapter1
Chapter1
 
Introduction to html 5
Introduction to html 5Introduction to html 5
Introduction to html 5
 
HTML5 & Friends
HTML5 & FriendsHTML5 & Friends
HTML5 & Friends
 

Similar to Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal

Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!Tady Walsh
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Centurydreamwidth
 
Building appsinsilverlight4 part_1
Building appsinsilverlight4 part_1Building appsinsilverlight4 part_1
Building appsinsilverlight4 part_1Dennis Perlot
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Emagination ®
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayTodd Anglin
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential TrainingKaloyan Kosev
 
HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)Performics.Convonix
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Wahyu Putra
 
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...John Hartley
 
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTMLEast of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTMLFrédéric Harper
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptTodd Anglin
 
HTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm SoftwareHTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm SoftwareRomin Irani
 
Web accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tipsWeb accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tipsHenny Swan
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookScottperrone
 
Html5 shubelal
Html5 shubelalHtml5 shubelal
Html5 shubelalShub
 

Similar to Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal (20)

Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!
 
Web Accessibility for the 21st Century
Web Accessibility for the 21st CenturyWeb Accessibility for the 21st Century
Web Accessibility for the 21st Century
 
Building appsinsilverlight4 part_1
Building appsinsilverlight4 part_1Building appsinsilverlight4 part_1
Building appsinsilverlight4 part_1
 
Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009Accessibility And 508 Compliance In 2009
Accessibility And 508 Compliance In 2009
 
Are you accessible
Are you accessibleAre you accessible
Are you accessible
 
HTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use TodayHTML5 and CSS3 Techniques You Can Use Today
HTML5 and CSS3 Techniques You Can Use Today
 
HTML5 Essential Training
HTML5 Essential TrainingHTML5 Essential Training
HTML5 Essential Training
 
HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)HTML5 and Search Engine Optimization (SEO)
HTML5 and Search Engine Optimization (SEO)
 
Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3Create Responsive Website Design with Bootstrap 3
Create Responsive Website Design with Bootstrap 3
 
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
 
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTMLEast of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
 
[In Control 2010] HTML5
[In Control 2010] HTML5[In Control 2010] HTML5
[In Control 2010] HTML5
 
WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)WHAT IS HTML5?(20100510)
WHAT IS HTML5?(20100510)
 
Interactivity in EPUB3 - #FBM12
Interactivity in EPUB3 - #FBM12Interactivity in EPUB3 - #FBM12
Interactivity in EPUB3 - #FBM12
 
HTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm SoftwareHTML5 Webinar - Mind Storm Software
HTML5 Webinar - Mind Storm Software
 
Web accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tipsWeb accessibility testing methodologies, tools and tips
Web accessibility testing methodologies, tools and tips
 
HTML 5 Step By Step - Ebook
HTML 5 Step By Step - EbookHTML 5 Step By Step - Ebook
HTML 5 Step By Step - Ebook
 
Html5 shubelal
Html5 shubelalHtml5 shubelal
Html5 shubelal
 
Looking into HTML5 + CSS3
Looking into HTML5 + CSS3Looking into HTML5 + CSS3
Looking into HTML5 + CSS3
 

More from Raj Lal

Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0Raj Lal
 
UX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experienceUX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experienceRaj Lal
 
Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization  Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization Raj Lal
 
The art and science of website optimization
The art and science of website optimizationThe art and science of website optimization
The art and science of website optimizationRaj Lal
 
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...Raj Lal
 
Why Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fishermanWhy Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fishermanRaj Lal
 
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...Raj Lal
 
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Raj Lal
 
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLalDesigning Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLalRaj Lal
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bendRaj Lal
 
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Raj Lal
 
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...Raj Lal
 
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...Raj Lal
 
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLalDeveloping Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLalRaj Lal
 
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York  @iRajLalUpgrade Your Website to HTML5 - VSLive Conference New York  @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLalRaj Lal
 
Fun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLalFun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLalRaj Lal
 
Honeycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLalHoneycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLalRaj Lal
 
Two thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLalTwo thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLalRaj Lal
 
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLalAngry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLalRaj Lal
 
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...Raj Lal
 

More from Raj Lal (20)

Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0Teamcalendar.AI presskit 1.0
Teamcalendar.AI presskit 1.0
 
UX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experienceUX Workshop: How to design a product with great user experience
UX Workshop: How to design a product with great user experience
 
Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization  Workshop Stanford University - 28th July 2018 on Website Optimization
Workshop Stanford University - 28th July 2018 on Website Optimization
 
The art and science of website optimization
The art and science of website optimizationThe art and science of website optimization
The art and science of website optimization
 
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
UX Workshop - Talent 2 Talent Conference, Ryerson University, Toronto Canada,...
 
Why Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fishermanWhy Toastmasters - The story of a fisherman
Why Toastmasters - The story of a fisherman
 
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
Build Amazing Camera Apps for Superphones - Silicon Valley Code Camp, 6 Oct, ...
 
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
 
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLalDesigning Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
Designing Killer Apps for Mobile Devices ModevUX May 9 2013 mclean VA - @iRajLal
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
Accessible design with html5 JS Everywhere 2012 Oct 26 Fairmont Hotel San Jos...
 
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
Accessibility on Windows Phone - Windows Phone Meetup at Nokia - 16 October @...
 
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
Accessible design - HOW Interactive Design Conference Washington DC SEPT 27-2...
 
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLalDeveloping Apps for Nokia Windows Phone  VSLiv Conference May 15, 2012 @iRajLal
Developing Apps for Nokia Windows Phone VSLiv Conference May 15, 2012 @iRajLal
 
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York  @iRajLalUpgrade Your Website to HTML5 - VSLive Conference New York  @iRajLal
Upgrade Your Website to HTML5 - VSLive Conference New York @iRajLal
 
Fun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLalFun with silverlight4 Table of Content @iRajLal
Fun with silverlight4 Table of Content @iRajLal
 
Honeycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLalHoneycomb User Interface Design @iRajLal
Honeycomb User Interface Design @iRajLal
 
Two thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLalTwo thumbs User Interface @iRajLal
Two thumbs User Interface @iRajLal
 
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLalAngry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
Angry Developer: Creating a Game in QML and JavaScript for MeeGo N9 @iRajLal
 
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
Fun with QML and JavaScript: Embedded Linux Conference 11th April 2011, Hotel...
 

Recently uploaded

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 

Recently uploaded (20)

UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 

Accessible Design with HTML5 - HTML5DevConf.com May 21st San Francisco, 2012 @iRajLal

  • 1. Accessible Design with HTML5 Developing Websites for Everyone Raj Lal Senior Engineer
  • 2. Agenda About Business 4 Key Areas 7 Steps in Accessibility Case HTML5
  • 4. About Accessibility Accessibility is about making web pages Easier to Use
  • 5. About Accessibility Easier to Access For Everyone Latest Technology Available
  • 6. Easier to Access • Screen readers • Audio browsers • Only keyboard or mouse • Limited bandwidth • Old browsers, computers • Mobile / touch devices
  • 7. Disabled Seniors Citizens Low literacy level Temporary illness Advanced Users For Everyone
  • 8. Latest Technology Available HTML5 CSS3 JavaScript
  • 10. The Business Case Search Engine Optimization Higher Search Engine Ranking Senior Citizens spend 2x time buying online Affluent customers may not be tech savvy Its also a Law (section 508)
  • 12. 4 Key Areas Hearing Mobility Cognitive Visual
  • 13. 1/4 Hearing Problem Cannot hear media Solution Make it PERCEIVABLE
  • 14. 1/4 Hearing PERCEIVABLE Text alternative to all non-text content Alternative for media using subtitles Transcribed text and Sign language
  • 15. 2/4 Mobility Problem Difficulty with Mouse, Keyboard Solution Make it OPERABLE
  • 16. 2/4 Mobility OPERABLE All function accessible from keyboard alone No auto refresh, allow stop time based contents Navigate with proper use of Headings & Anchors Joysticks, Voice recognition or audio feedback
  • 17. 3/4 Cognitive Problem Difficulty with Text content Solution Make it UNDERSTANDABLE
  • 18. 3/4 Cognitive UNDERSTANDABLE High color contrast 4.5:1 Use San serif fonts & allow resize Avoid auto-play of media, animation Avoid auto refresh, or flashy graphics Use multiple visual cues, std. icons & audio feedback
  • 19. 4/4 Visual Problem Cannot see the content or color Solution Make it ROBUST
  • 20. 4/4 Visual ROBUST Broken HTML tag can cause difficulty in screen reader Follow HTML standard specifications Use syntactically correct HTML & validate web page Proper “lang” attributes in the markup Use “acronym” and “abbr” tag with proper usage
  • 21. W3C’s The POUR Principle Perceivable Operable Understand Robust able
  • 22. 7 Steps in HTML5
  • 23. Step 1: Make Progressive Enhancements
  • 24. Step 1: Progressive Enhancement HTML CSS JavaScript HTML CSS HTML
  • 25. Step 1: Progressive Enhancement Design in a Progressive enhancement way All content available by HTML alone Use semantically structured HTML All presentation elements in the style sheet
  • 26. Step 1: Example <h1>Top Level Heading</h1> <section> <h1>Second Level Heading</h1> <p>An <strong>important</strong> text in <em>section</em> element </p> </section>
  • 27. Step 1: Comparison Bad Example <div class="depth0"> <a href="#" name="d26"> <img id="vh_div16indic" src="pix/closed.gif" alt="Closed"> Security </a> </div> <span id="vh_div16"></span> Good example <li class="closed"><a href="#">Security</a></li>
  • 28. Step 1: Comparison Bad Example <font size=”14px” color=”#000”> <b>Welcome to the site</b></font> <td style="width:180px" id="left-column">… Good example <style type="text/css"> <!-- td#left-column {width: 180px;} --> </style> <h1>Welcome to the site</h1> <table><tr><td id="left-column">…
  • 29. Step 2: Allow Content Navigation
  • 30. Step 2: Allow content navigation Accessible navigation sidebar Option to skip to main content Menus accessible from keyboard Proper nesting of headings, h1, h2, h3, etc.
  • 31. Step 2: Layout OLD HTML5
  • 32. Step 2: Layout with Role <header role="banner"> <nav role="navigation"> <section role=“main”> <footer role=“toolbar”> <footer role=“button”> … HTML5 Accessible HTML5
  • 33. Step 3: Makes FORMS Accessible
  • 34. Step 3: Make Forms Accessible Use „label” tag for describing form elements Associate labels with controls using "for" attribute Create a logical tab order with “tabindex” For tabbed interface use aria-hidden and aria-pressed Use “fieldset” and “legend” to group form elements Use aria-live=“assertive” in the form for validation
  • 35. Step 3: HTML code Good example <ul class="group"> <li><input type="radio" id="EHTML" value="html" checked> <label for="EHTML">HTML</label></li> <li><input type="radio" id="ETEXT" value="text" > <label for="ETEXT">Text</label></li> </ul>
  • 36. Step 3: HTML code Good example <fieldset> <legend tabindex="10"><b>Personal Details</b> </legend> <label for="name">Name:</label> <input id="name" type="text" size="30" tabindex="11"> <br> <label for="id">ID Number:</label> <input id="id" type="text" size="10" tabindex="12"> </fieldset>
  • 38. Step 4: Make Images Accessible Use ”alt” attribute for alternative text for the image Use “title” attribute for tooltip Use role=“presentation” to ignore the image Use blank ”alt” for decorative images Use meaningful name for src=“meaningful.png”
  • 40. Step 5: Make Media Accessible Media player features navigable by keyboard Closed captions with timed text files Switchable sign translation video Transcripts, caption and sign language
  • 41. Step 6: Know HTML5 Animations
  • 42. Step 6: Know HTML5 Animations CSS3 Canvas & Animation SVG & JavaScript JavaScript
  • 43. Step 6: Know HTML5 Animations Animation: SVG • 2D vector graphics using XML • Object retained in the memory • Full DOM support • SVG elements can be styled • Check Modernizr.svg Modernizr.inlinesvg Perform better when smaller number of elements and large surface
  • 44. HTML CODE <svg id="svgElement" width="800px" height="600px" viewBox="0 0 800 600"> <rect x="0" y="0" width="100%" height="100%" rx="10" ry="10" style="fill: white; stroke: black;" /> <circle id="circle0" cx="40" cy="40" r="40" style="fill: orange; stroke: black; stroke- width: 1;" /> </svg>
  • 45. Step 6: Know HTML5 Animations Animation: Canvas: Context 2D • Bitmap drawing area • Rectangles, lines, arcs, paths • Stateless • No DOM support, single element • Check Modernizr.canvas Perform better when large number of objects and surface is small
  • 46. Step 6: Know HTML5 Animations Animation: CSS3 • Styles for Individual elements • Use CSS3 animation if available • Better than JavaScript based animation • Check Modernizr.csstransitions Can perform better with GPU acceleration
  • 47. Step 6: Know HTML5 Animations Animation: CSS3 var elem = $(„myelement'); JS CODE elem.addEventListener('click', function loop() { elem.style.left = „100px';}, false); #myelement CSS { … -ms-transition: opacity 1s ease; transition: opacity 1s ease; }
  • 48. Step 7: Make Content Easy
  • 49. Step 7: Make Content Easy Font size should always be relative , never fixed Links should be underlined and of different color Use Anchor links, easily navigable by screen readers Meaningful link text , avoid using “click here” or “more”
  • 50. Step 7: Make Content Easy Avoid long pages and minimize scrolling Test navigation with Keyboard tab Spelling help in Search Color in CSS with foreground & background color Simple and Machine (Screen reader) readable words like “Home page”
  • 51. Thank You Raj Lal Twitter @ iRajLal

Editor's Notes

  1. Section 508: information technology is accessible to people with disabilities. 
  2. Presentation elements which change the visual content (for eg. bold, italics)
  3. A text-to-speech reader also understands the tags &lt;strong&gt; or &lt;em&gt; but it treats text output with those tags very differently to the way a visual browser responds. The TTS reader adjusts vocal tone or volume, rather than contrast or text style, which conveys the same meaning but through a different medium.
  4. Use List instead of DIVsIndentation without spacer.gif use &lt;Ul&gt;
  5. Use List instead of DIVsIndentation without spacer.gif use &lt;Ul&gt;
  6. for good navigation in screen reader
  7. for good navigation in screen reader
  8. A text-to-speech reader also understands the tags &lt;strong&gt; or &lt;em&gt; but it treats text output with those tags very differently to the way a visual browser responds. The TTS reader adjusts vocal tone or volume, rather than contrast or text style, which conveys the same meaning but through a different medium.
  9. A text-to-speech reader also understands the tags &lt;strong&gt; or &lt;em&gt; but it treats text output with those tags very differently to the way a visual browser responds. The TTS reader adjusts vocal tone or volume, rather than contrast or text style, which conveys the same meaning but through a different medium.
  10. for good navigation in screen reader
  11. for good navigation in screen reader
  12. Use List instead of DIVsIndentation without spacer.gif use &lt;Ul&gt;
  13. Use List instead of DIVsIndentation without spacer.gif use &lt;Ul&gt;
  14. for good navigation in screen reader
  15. for good navigation in screen reader
  16. for good navigation in screen reader
  17. for good navigation in screen reader
  18. for good navigation in screen reader
  19. for good navigation in screen reader
  20. for good navigation in screen reader
  21. for good navigation in screen reader
  22. for good navigation in screen reader
  23. for good navigation in screen reader
  24. for good navigation in screen reader
  25. for good navigation in screen reader
  26. for good navigation in screen reader
  27. for good navigation in screen reader