The accessibility
features of
Yahoo! Finance
CSUN Conference 2010
Dirk Ginader

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

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

finance.yahoo.com
/currency-converter

without Javascript

without Javascript

without Javascript

with Javascript

with 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

finance.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 first
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 confirmation page
button
• after the successful
delete move the
focus on to the next
item

finance.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
• find 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