The accessibility features of Yahoo! Finance
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

The accessibility features of Yahoo! Finance

  • 2,086 views
Uploaded 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.

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,086
On Slideshare
2,079
From Embeds
7
Number of Embeds
2

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 7

http://www.linkedin.com 5
http://coderwall.com 2

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
  • \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

Transcript

  • 1. The accessibility features ofYahoo! Finance CSUN Conference 2010 Dirk Ginader
  • 2. Markup (HTML)• good headings• alt attributes where they help• the best semantic markup for each job
  • 3. Style (CSS)• hiding extra information for screenreader user offscreen• giving clear focus indicators• readability
  • 4. Interaction (Javascript)• support, not break accessibility• make easier not harder• lead the user through the page• inform
  • 5. finance.yahoo.com /news
  • 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. finance.yahoo.com/currency-converter
  • 8. without Javascript
  • 9. without Javascript
  • 10. without Javascript
  • 11. with Javascript
  • 12. with Javascript
  • 13. with Javascript
  • 14. help
  • 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. finance.yahoo.com /portfolios
  • 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. 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. 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. 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. finance.yahoo.com/portfolios/manage
  • 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. http://ginader.comhttp://twitter.com/ginader