Accessible Finance Tools and Techniques

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


Accessible Finance Tools and Techniques

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (9)

Similar to Accessible Finance Tools and Techniques

Similar to Accessible Finance Tools and Techniques (20)

More from Ted Drake

More from Ted Drake (20)

Recently uploaded

Recently uploaded (20)

Accessible Finance Tools and Techniques