Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
•Download as KEY, PDF•
1 like•909 views
With HTML5, the web is evolving from a browser/document-based experience to a desktop-like application accessed on multiple devices. What does HTML5 mean for Web accessibility? Is accessibility compromised or enhanced with this new standard? This session will review promising new features in HTML5 that promote accessibility and discuss possible challenges ahead and advice for ensuring HTML5 accessibility.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (17)
Similar to Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
Similar to Web Standards, HTML 5 & Accessibility - What makes a site accessible today? (20)
More from Ted Drake
More from Ted Drake (20)
Recently uploaded
Recently uploaded (20)
Web Standards, HTML 5 & Accessibility - What makes a site accessible today?
- 1. Segment 2: Web Standards & Accessibility Ted Drake, Yahoo Accessibility Lab Slideshare.net/7mary4
- 2. What does an Accessible Site Designed with Web Standards Look Like?
- 8. Topics • Features of an accessible site designed with Web Standards? • Beyond the blind • When web standards is not enough • Mobile Users
- 9. Is your standards‐based web site accessible?
- 10. Maybe
- 12. • Solid • VersaHle • SemanHc Data • Device Independent
- 13. StaHc
- 14. Dynamic
- 15. New Visual & Auditory Concerns • Expandable content • Editable text • Drag and Drop • Gestures • Closed CapHons • Regularly updated content • Dialogue boxes • Keyboard focus control
- 17. Expandable Content • BuTon for expand/contract • Place focus into expanded area • Tell user the container can be expanded
- 19. Live Regions • Define regions of the page that update automaHcally. • Should the screen reader user get a noHficaHon every Hme it changes?
- 20. CogniHve and Physical Concerns • Memory loss • Different cogniHve levels of understanding content. • What helps some will distract others • Dyslexia • Keyboard navigaHon • Voice recogniHon
- 21. Voice RecogniHon • Dragon Naturally Speaking • Images with text must have matching alt text. • Don’t autofocus form elements • Avoid mulHple links to different URLs with the same text.
- 23. • Avoid long sentences • Avoid large blocks of text • Avoid jusHfied alignment • Give the user white space • Dyslexie: font designed for dyslexia
- 26. iPhone and iPad • Full featured VoiceOver • Safari browser supports HTML5, CSS3, JavaScript • Custom gestures will conflict with VoiceOver. • No Flash support
- 27. Android, Blackberry, Nokia • Screen reader is available, but not as sophisHcated as VoiceOver • Use clean, structural markup for beTer performance • Android’s browser is full featured. Blackberry and Nokia are not as robust.
Editor's Notes
- 11:00 – 11:55 (45 minute talk, 10 minute Q&A)\n
- Accessible web sites look no different than others. \nHowever, there may be more attention to structure, headings, and color contrast.\nIt’s not our job as accessibility advocates to tell designers what they can’t do.\nRather we tell them how they can do it better.\n
- http://yahoo.com\n
- http://www.flickr.com/photos/alcomike/4257805475/\n
- http://en.wikipedia.org/wiki/Accessibility\nCommunity edited and producer driven sites may have inaccessible content. \nEditing tools need to encourage alternate text and use of headers instead of bold.\n
- http://bbc.co.uk\n
- http://apple.com/accessibility/voiceover/ \nas seen on an iPad\n
- \n
- \n
- Is it accessible for everyone? Is it accessible at all times?\nLet’s look at what web standards provides and what else you need.\n
- The foundation built by valid, semantic markup.\nSeparation of HTML, CSS, and JavaScript\nStructural markup with headers, lists, data tables, definition lists, etc instead of all divs with classes and ids\n
- Image: alt attribute provides alternate text, longdesc attribute provides location of a visual description of image, title attribute provides additional information, caption tag provides a visual caption.\nForms: keyboard accessible, inputs are properly labeled. Elements are grouped by subject, new form inputs make it easier to use mobile devices. \nStandards-based design allows the browser to set default behaviors. This allows a user to customize the experience.\nCleaner markup will perform better for those without broadband connections\n
- You can build an accessible web site with web standards. However, things start to fall apart when they are no longer static.\nLet’s look at some situations where the site is no longer a basic document.\n
- What if your site is dynamic? Is it still accessible?\nThe new generation of web sites need to be accessible at all times, not just when they load.\n
- Accessibility breaks down when our page begins changing. \nHow does a user know they can modify the page and when it has been modified?\nWhat if the page depends on mouse or finger gestures? \nDoes a keyboard user know where the cursor is located? \nCan they access the same information as a mouse user?\n
- http://finance.yahoo.com/news this screen allows the user to modify the order of categories displayed on the page.\nMore information in this presentation: http://www.slideshare.net/7mary4/yahoo-finance-accessibility-csun-2011\n
- Yahoo Finance expand/contract menu: http://finance.yahoo.com/news/\nMore information in this presentation: http://www.slideshare.net/7mary4/yahoo-finance-accessibility-csun-2011\nYou can use the aria-expanded=“true|false” attribute. http://www.marcozehe.de/2010/02/10/easy-aria-tip-5-aria-expanded-and-aria-controls/\nHTML5 details tag will allow native expand/collapse but browser support is not ready. http://html5doctor.com/the-details-and-summary-elements/ \nYUI library makes it easier to use ARIA http://yuilibrary.com/yui/docs/node-focusmanager/node-focusmanager-3.html\n
- Videos need closed captioning for the hearing impaired.\nHTML5 video’s captioning standard is still under development. Flash allows captioning quite easily. It’s usually done with JavaScript in HTML5 \nVideos should also have audio descriptions for the blind. This is an audio track that gives a visual description of the scene.\nThe Big Lebowski review by the Blind Film Critic: http://blindfilmcritic.com/archives/1382\n
- How to use ARIA Live Regions for dynamic content: http://wiki.codetalks.org/wiki/index.php/How_to_use_ARIA_Live_Regions_for_dynamic_content\n
- What if the reader forgets the beginning of the article before reading the final paragraph?\nIs the site usable if the person has to re-learn it each time?\nDoes the user understand where they are? Can they get back to it?\nWhat is the reading level? Do you have alternate versions for different levels (article summary)\nA visual pulsing for new items may help some and be very distracting to someone with ADD.\nDoes the typography and page design make it more difficult for people with dyslexia?\n
- \n
- CSS should have corresponding rules for :hover, :active, and :focus\nJavaScript that triggers events on hover also need to consider focus.\nMobile devices don’t have a mouse, so you cannot depend on hover in the future.\nUse tabindex=“0” to place an element in the tab flow. Use tabindex=“-1” to remove it from the flow. Setting any other value will force the element into a certain spot of the tab order, avoid this.\n
- http://www.studiostudio.nl/project-dyslexie/\n
- Who’s your audience? Smart phone (android/iOS) or older phones (nokia/windows/opera mini)?\nMobile browser information: http://quirksmode.org/mobile/\n
- Mobile development is quickly sliding into the bad days of tag soup markup. This is especially true when semantic markup may not perform as well on the mobile device.\nFor instance, a div with background image will animate faster than an image tag due to hardware acceleration. \nhttp://yaccessibilityblog.com/library/aria-fix-non-standard-images.html\n
- The swipe behavior becomes a tab when voiceover is enabled.\nThe rotate gesture becomes a rotor \nAre you prepared to display closed captions without flash?\n
- For mobile performance, minimize the DOM structure. Use fewer wrapper divs with classes, use CSS3 to replace rounded corners, transformations, and gradients.\n
- http://www.flickr.com/photos/drachmann/327122302/\n