Posts Tagged ‘CSS’
Friday, March 16th, 2012
The browser provides visual feedback when a control receives focus. The default visualization usually matches how focus is rendered on the host platform: On Windows this is a subtle dotted outline, on MacOS a blue glow.
Windows: 
Mac: 
The focus outline is important in that it both directs the users attention, and serves as a cursor for users who navigate using the keyboard (most commonly by pressing Tab or Shift + Tab). Often the focus outline is removed using CSS, making navigation impossible for keyboard users.
Continue reading Focus Feedback
Tags: CSS, keyboard
Posted in Accessible Content, Code, Keyboard Access |
No Comments »
Tuesday, October 11th, 2011
CSS background images are the most popular means of using image sprites, but this technique can cause problems for users of High Contrast mode in Windows. Background images are disabled when High Contrast mode is enabled, causing all sprites to disappear. For example, consider the following toolbar containing buttons labeled with icons created using background images:
Here is how the toolbar renders when High Contrast mode is enabled.
As illustrated, use of CSS background images can result in information loss for users when High Contrast mode is enabled, especially in the following use cases:
- An image is the only visual label for a UI control (e.g. a button, menuitem, etc.)
- An image conveys state (e.g. selected, checked, etc.) or other supplemental information (e.g. a message has an attachment)
This is especially problematic considering High Contrast mode is designed to make the UI easier to see. Fortunately there are several alternatives to background images that work in High Contrast mode.
Continue reading Techniques for High-Contrast-Friendly Icons
Tags: CSS, high contrast, icon, Internet Explorer, low vision, sprite
Posted in Images |
No Comments »
Thursday, October 6th, 2011
Making a site or application accessible can seem so overwhelming that it can completely stall efforts before they begin. But sometimes simple changes can provide the necessary momentum while resulting in significant improvements for users.
So, in the spirit of small things that make a big difference, here’s a list of fixes for common accessibility problems.
Continue reading Easy Fixes to Common Accessibility Problems
Tags: ARIA, button, CSS, Easy Fixes, HTML5, JavaScript, label, Progressive Enhancement, role, YUI
Posted in Forms, Images |
No Comments »
Friday, April 8th, 2011
Sometimes it is difficult to keep track of your keyboard focus, landmark roles and tab index. We’ve created a couple bookmarklets for our own testing. These easy to use bookmarklets add CSS to quickly highlight your page’s information. Simply save the following links to your bookmarks, then load your test page and click the bookmark. While these work in all browsers, you’ll get better results using Firefox, Chrome, Safari, or Internet Explorer 9.
You’ll learn a lot about the Yahoo! home page’s use of ARIA with the landmark/tabindex bookmarklet. Check it out.
Tags: ARIA, bookmarklet, CSS, JavaScript, keyboard navigation, role
Posted in Tools |
No Comments »
Monday, March 28th, 2011
Even the best-intentioned web developers can make simple accessibility mistakes. This presentation was put together for an internal Yahoo! conference for front-end engineers. It reminds web developers that there are still some basic problems on the web, let’s fix these today and avoid them in the future. The presentation was written by Thierry Koblentz and Ted Drake.
Continue reading Common Accessibility Mistakes
Tags: CSS, f2esummit, HTML, tutorial, Yahoo!
Posted in Conference |
No Comments »
Tuesday, March 8th, 2011
Yahoo’s HackU events allow Yahoo! engineers to hang out with college students for a week as they explore the latest technologies and spend 24 hours in a caffeine powered hack-a-thon. The University of Washington features several accessibility related research programs. So it was great to visit the campus and deliver this presentation on the existing accessibility challenges and future innovations.
This year’s HackU event featured some amazing hacks. The Accessible Hack award winning team attempted to translate data charts into readable text.
You can skip the slide movie and go straight to the presentation transcript with notes.
Continue reading Yahoo! Hack University: Accessibility Innovations and Challenges
Tags: ARIA, CSS, hack, hacku, images, Seattle, University of Washington, Washington, Yahoo!
Posted in Presentations, Slideshow |
No Comments »
Wednesday, February 9th, 2011
Dirk Ginader gave this presentation on the 5 layers of accessibility at a Skills Matter event in London. Dirk pushes the traditional view of web development as three layers (HTML, CSS, JavaScript) by adding CSS for JavaScript enabled users and ARIA functionality. This presentation also uses the Yahoo! Finance Currency Converter as an example of progressive enhancement.
Continue reading Five Layers of Accessibility
Tags: ARIA, CSS, Dirk Ginader, HTML, JavaScript, London, YDN
Posted in Video |
No Comments »
Tuesday, January 4th, 2011
How to hide content on a web page
There are times when you want to hide content on your page. There are several methods, each has advantages and disadvantages. This page will help you understand why you would choose the best method.
Continue reading Accessible solutions for hiding content
Tags: CSS, display, JavaScript, tabs, visibility
Posted in Accessible Content |
No Comments »
