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

3.
About Accessibility

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.
DisabledSeniors CitizensLow literacy levelTemporary illnessAdvanced UsersFor Everyone

8.
Latest Technology Available HTML5 CSS3 JavaScript

9.
The Business Case

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)

11.
4 Key Areas

12.
4 Key Areas Hearing Mobility Cognitive Visual

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

14.
1/4 HearingPERCEIVABLE Text alternative to all non-text content Alternative for media using subtitles Transcribed text and Sign language

15.
2/4 Mobility ProblemDifficulty with Mouse, Keyboard Solution Make it OPERABLE

16.
2/4 MobilityOPERABLE 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 SolutionMake it UNDERSTANDABLE

18.
3/4 CognitiveUNDERSTANDABLE 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 VisualROBUST 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 PrinciplePerceivable 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 EnhancementDesign in a Progressive enhancement wayAll content available by HTML aloneUse semantically structured HTMLAll 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 AccessibleUse „label” tag for describing form elementsAssociate labels with controls using "for" attributeCreate a logical tab order with “tabindex”For tabbed interface use aria-hidden and aria-pressedUse “fieldset” and “legend” to group form elementsUse 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>

37.
Step 4: Accessible Images

38.
Step 4: Make Images AccessibleUse ”alt” attribute for alternative text for the imageUse “title” attribute for tooltipUse role=“presentation” to ignore the imageUse blank ”alt” for decorative imagesUse meaningful name for src=“meaningful.png”

39.
Step 5: Accessible Media

40.
Step 5: Make Media AccessibleMedia player features navigable by keyboardClosed captions with timed text filesSwitchable sign translation videoTranscripts, 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.inlinesvgPerform better when smallernumber 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.canvasPerform better when large number of objects and surface issmall

46.
Step 6: Know HTML5 Animations Animation: CSS3• Styles for Individual elements• Use CSS3 animation if available• Better than JavaScript based animation• Check Modernizr.csstransitionsCan perform better with GPU acceleration

47.
Step 6: Know HTML5 AnimationsAnimation: CSS3var elem = $(„myelement); JS CODEelem.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 EasyFont size should always be relative , never fixedLinks should be underlined and of different colorUse Anchor links, easily navigable by screen readersMeaningful link text , avoid using “click here” or “more”

50.
Step 7: Make Content EasyAvoid long pages and minimize scrollingTest navigation with Keyboard tabSpelling help in SearchColor in CSS with foreground & background colorSimple and Machine (Screen reader) readablewords like “Home page”

51.
Thank You Raj LalTwitter @ iRajLal