The document discusses accessibility best practices for finance tools on Yahoo, including:
- Commitment to accessibility, progressive enhancement, and semantic markup in finance tools
- Features of Yahoo Finance like currencies, portfolios, finance news, and the MarketDash app
- Tips for accessible markup, CSS, JavaScript, tables, forms, navigation, dialogs, and alternatives to non-accessible elements like drag and drop.
2. 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
12. Markup (HTML)
• good headings
• alt attributes where
they help
• the best semantic
markup for each job
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
13. Style (CSS)
• hiding extra information
for screenreader user
offscreen
• giving clear focus
indicators
• readability
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
14. Interaction (Javascript)
• support, not break
accessibility
• make easier not harder
• lead the user through
the page
• inform
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
24. 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
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
34. 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
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
37. 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”)
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
38.
39.
40.
41.
42. 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
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
43.
44. 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
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
45.
46.
47. 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
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility
52. 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
Yahoo! Accessibility Lab Accessibility.Yahoo.Com | @yahooaccess | Facebook.com/YahooAccessibility