1 / 28

Designing Accessible Websites: Embracing Web Standards for All Users

This presentation by Ted Drake from Yahoo's Accessibility Lab explores what an accessible website looks like when designed with web standards. It covers essential features such as semantic data, mobile accessibility, and the importance of expandable content and keyboard navigation. Key considerations for diverse user needs, including cognitive and physical challenges, are highlighted to ensure inclusivity. Learn how to create a versatile web experience that caters to everyone, enhancing usability beyond traditional standards.

cahil
Télécharger la présentation

Designing Accessible Websites: Embracing Web Standards for All Users

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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?

  3. Topics • Features of an accessible site designed with Web Standards? • Beyond the blind • When web standards is not enough • Mobile Users

  4. Is your standards-based web site accessible?

  5. Maybe

  6. Web Standards Foundation

  7. Solid • Versatile • Semantic Data • Device Independent

  8. Static

  9. Dynamic

  10. New Visual & Auditory Concerns • Expandable content • Editable text • Drag and Drop • Gestures • Closed Captions • Regularly updated content • Dialogue boxes • Keyboard focus control

  11. Drag and Drop Provide non-mouse alternative

  12. Expandable Content • Button for expand/contract • Place focus into expanded area • Tell user the container can be expanded

  13. Video Accessibility

  14. Live Regions • Define regions of the page that update automatically. • Should the screen reader user get a notification every time it changes?

  15. Cognitive and Physical Concerns • Memory loss • Different cognitive levels of understanding content. • What helps some will distract others • Dyslexia • Keyboard navigation • Voice recognition

  16. Voice Recognition • Dragon Naturally Speaking • Images with text must have matching alt text. • Don’t autofocus form elements • Avoid multiple links to different URLs with the same text.

  17. Keyboard Navigation

  18. Avoid long sentences • Avoid large blocks of text • Avoid justified alignment • Give the user white space • Dyslexie: font designed for dyslexia

  19. Mobile Browsers and Accessibility

  20. New DeviceSame Accessibility Concerns

  21. iPhone and iPad • Full featured VoiceOver • Safari browser supports HTML5, CSS3, JavaScript • Custom gestures will conflict with VoiceOver. • No Flash support

  22. Android, Blackberry, Nokia • Screen reader is available, but not as sophisticated as VoiceOver • Use clean, structural markup for better performance • Android’s browser is full featured. Blackberry and Nokia are not as robust.

  23. Questions? Question mark in Esbjerg Some rights reserved by alexanderdrachmann

More Related