The accessibility features of Yahoo! Finance

2,315 views

Published on

Yahoo! Finance, the largest financial site, features accessible tools to control your finances. Learn how to use these tools and what makes them accessible.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,315
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The accessibility features of Yahoo! Finance

    1. 1. The accessibility features ofYahoo! Finance CSUN Conference 2010 Dirk Ginader
    2. 2. Markup (HTML)• good headings• alt attributes where they help• the best semantic markup for each job
    3. 3. Style (CSS)• hiding extra information for screenreader user offscreen• giving clear focus indicators• readability
    4. 4. Interaction (Javascript)• support, not break accessibility• make easier not harder• lead the user through the page• inform
    5. 5. finance.yahoo.com /news
    6. 6. Sorting a list• up and down • Javascript optional buttons for each but more engaging entry experience for everybody• a clear feedback where you currently are in the list and where you can go
    7. 7. finance.yahoo.com/currency-converter
    8. 8. without Javascript
    9. 9. without Javascript
    10. 10. without Javascript
    11. 11. with Javascript
    12. 12. with Javascript
    13. 13. with Javascript
    14. 14. help
    15. 15. using a complex app• extra information in • it all works without the labels relying on a single level• multiple ways to achieve a goal • as easy as needed and as powerful as• multiple levels of possible informations
    16. 16. finance.yahoo.com /portfolios
    17. 17. data table• using scope=”col” • column sorting to clearly assign the accessible by using table headers proper buttons and info texts• adding extra context infos (green arrow pointing up with alt-attribute: “Up”)
    18. 18. drop down navigation• replacing existing • CSS trick to have a select form element top down tab order in the columns but• adding proper links only have one list instead because rather multiple lists Navigation = Link• focusing the first item in the new list of links
    19. 19. easy fallback for complex scroll nav• the scrolling tab list • the drop down list is keyboard and next to it gives an screenreader save easy and quick but might be hard alternative to understand
    20. 20. in page delete dialog• focus on the • non js fallback with information text page reload and instead of the close confirmation page button• after the successful delete move the focus on to the next item
    21. 21. finance.yahoo.com/portfolios/manage
    22. 22. drag and drop sorting• there is no • enter the desired accessible drag and new order and save drop that really works (sadly) • move the row with the cursor keys and• find and use good give screenreader solid alternatives users a usage hint in instead the label as well as a position info
    23. 23. http://ginader.comhttp://twitter.com/ginader

    ×