Yahoo! Finance accessibility: CSUN 2011

Accessible Finance Tools
Dirk Ginader and Ted Drake
Yahoo! Finance | Yahoo! Accessibility Lab

Yahoo! Finance

• #1 Finance web site
• 19 countries
• Shared features and accessibility
• New iPad app: MarketDash

Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility

Finance Accessibility

• Strong commitment to accessibility
• Progressive enhancement
• Semantic markup
• Early accessibility testing


Currencies

Some rights reserved by epSos.de on Flickr

Finance News


MarketDash
Uses MyPortfolio
Real-time market data
Headlines
Comparisons


More on Finance

• Mutual funds and bonds
• Home, auto, credit card rates
• Personal ﬁnance investing information
• Personalized alerts


Markup (HTML)
• good headings
• alt attributes where
they help

• the best semantic
markup for each job


Style (CSS)
• hiding extra information
for screenreader user
offscreen

• giving clear focus
indicators

• readability


Interaction (Javascript)
• support, not break
accessibility

• make easier not harder

• lead the user through
the page

• inform


ﬁnance.yahoo.com
/news


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


ﬁnance.yahoo.com
/currency-converter


without Javascript


with Javascript


help


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


ﬁnance.yahoo.com
/portfolios


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


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 ﬁrst
item in the new list
of links


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


in page delete dialog
• focus on the • non js fallback with
information text page reload and
instead of the close conﬁrmation page
button

• after the successful
delete move the
focus on to the next
item


ﬁnance.yahoo.com
/portfolios/manage


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
• ﬁnd and use good give screenreader
solid alternatives users a usage hint in
instead the label as well as a
position info


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

Visit the Yahoo Accessibility Lab’s Blog
Accessibility.Yahoo.Com
@yahooaccess
facebook.com/YahooAccessibility

Dirk Ginader
@ginader
Ginader.com


Yahoo! Finance accessibility: CSUN 2011

More Related Content

Viewers also liked

Similar to Yahoo! Finance accessibility: CSUN 2011

More from Ted Drake

Recently uploaded

Yahoo! Finance accessibility: CSUN 2011