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

1. The accessibility
features of
Yahoo! 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

14. 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

15. finance.yahoo.com
/currency-converter

17. without Javascript

18. without Javascript

19. without Javascript

20. with Javascript

21. with Javascript

22. with Javascript

23. help

24. 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

25. finance.yahoo.com
/portfolios

27. 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”)

32. 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

34. 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

37. 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

38. finance.yahoo.com
/portfolios/manage

42. 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

43. http://ginader.com
http://twitter.com/ginader