Your SlideShare is downloading. ×

Introduction to WAI-ARIA

6,053
views

Published on

Web applications today are a challenge to make accessible because native HTML does not have the language to support the types of widgets added to Web pages. WAI-ARIA provides a way to add roles, …

Web applications today are a challenge to make accessible because native HTML does not have the language to support the types of widgets added to Web pages. WAI-ARIA provides a way to add roles, states and properties to make RIA accessible to assistive technology such as screen readers.

Published in: Technology

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,053
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • When sites are correctly designed, developed, and edited, we provide the opportunity for all users to have equal access to information and functionality.
  • Transcript

    • 1. ••• – – –• – © 2012 Interactive Accessibility 3
    • 2. <div id="slider"> <div id="slider-thumb"> <img src="sliderbar.gif"> </div></div>
    • 3. • – – –
    • 4. • – – –•
    • 5. ••• – – –
    • 6. • – – – –• – – – – – –• –
    • 7. ARIA States &Roles Properties
    • 8. <a href=“link.html” role=“button”>My button</a>• <button>My button</button>
    • 9. <button role="heading“ aria- level=“1”>text</button>• – <h1>text</h1>• – –
    • 10. • –
    • 11. <h1 role=“button”>heading button</h1>•• <h1><span role=“button”>heading button</span></h1> <h1><button>heading button</button></h1>
    • 12. • – What is the key command to • activate a button? • • • – –
    • 13. • – • – ••
    • 14. <div id="slider" tabindex="0" role="slider"> <div id="slider-thumb"> <img src="sliderbar.gif"> </div></div>
    • 15. • – – – –
    • 16. <div id="slider" title="Price" tabindex="0"role="slider" aria-valuemin="1" aria-valuemax="100" aria-valuenow="7" aria-label="Price"> <div id="slider-thumb"> <img src="sliderbar.gif"> </div></div>
    • 17. • – –•
    • 18. • – – –• –
    • 19. • • – – – – – – – – – –• – –
    • 20. • –• –• –
    • 21. •••••••
    • 22. Thank you!Are your sites accessible?

    ×