␡
- Applying CSS to the page
- Styling the basic and enhanced experiences
- Accessibility considerations
- Dealing with bugs and browser inconsistencies
This chapter is from the book
This chapter is from the book
This chapter is from the book
This chapter is from the book
Accessibility considerations
When applying style to a page, there are a multitude of usability and accessibility issues to consider for all users, including those with disabilities.
The W3C offers an extensive recommendation called "Web Content Accessibility Guidelines 2.0" (WCAG), which covers a range of accessibility best practices, including meaningful markup choices, visual design considerations, and use of JavaScript to improve accessibility. There are several we feel are very important that are worth highlighting:
- Text size and scaling: Design pages with text sizes that are large enough for the average user to read easily. CSS written using flexible units such as em and %, or keywords like small, medium, and large, allows users to easily resize the text to their preference. While most modern browsers can resize page content regardless of its CSS units, Internet Explorer versions 6 and earlier require the use of flexible units for text scaling to work.
- Contrast ratios: To ensure that text content is comfortably readable for a broad audience, WCAG recommends a text color-to-background contrast ratio of no less than 3:1 for large text and 5:1 for smaller text. (For reference, black text on a white background is 21:1, and the mid-gray for hex#666 on white is 5.74:1.) There are many tools to test specific contrasts and ensure acceptable contrast levels.
- Color accommodations: Interfaces frequently build in color-based visual cues—from colored text for links, to red/green indicators for performance, to highlights for alerts. Six to nine percent of the population suffers from some level of color-blindness, with the most common type manifesting itself in a difficulty distinguishing red and green values. For this reason, any visual indicator should have both a shift in color value and a secondary visual indication like a distinctly different shape or pattern to make it usable for people with color-blindness.
- Clear link affordances: Users expect that text located in certain locations on the page—at the top, along the left column, and at the bottom—will be links regardless of style; for text links in the body of the page, it's important to style them with adequate difference from surrounding text, and consider underlining them at all times, or at least on hover, for optimal clarity.
- Background color fallback: When using a background image behind text, be sure to set a complementary background color behind the image as a fallback in case the image fails to load or the user has images disabled. (Contrast-ratio considerations, described above, should be applied in this case as well.)
There are also a number of our own accessibility best practice guidelines we always keep in mind when considering overall page layout and structure:
- Consider screen resolutions: When designing pages with fixed widths, we recommend designing within the common screen resolution of 960 pixels wide, to ensure most users will not need to scroll horizontally.
- Present comfortable column and line widths: Columns of text that are roughly 80 characters wide (about 9–10 words) are most comfortable to read. For very text-heavy sites, we consider even narrower columns to facilitate comfortable scanning and reading.
- Work with native browser focus styling when possible: Most browsers handle focus with a dotted or glowing outline that allows users to easily navigate a page with their keyboard. While this outline treatment sometimes clashes with the intended user interface design, we recommend that you don't disable it; if you do, be sure to create another style, like a border or background color shift, that appears on focus to provide clear feedback to users navigating the page without a mouse.
- Follow established conventions: Across the web, users are trained to find common features in specific locations—primary navigation at the top or left of the page; account tools, shopping-cart feedback, and logout links at the top right; and user help links at the bottom of the page, for example. Positioning elements in a predictable and consistent location helps users find what they need efficiently.
- Hide and show content safely: Whenever you use CSS to hide text from visual users, be sure to do so in an accessible manner. Using display: none or visibility: hidden will likely hide the text from screen readers as well, meaning they won't be able to access that content. One accessible hiding solution is absolutely positioning an element off the page, out of view to visual users, by setting a large negative left value (don't set a top value, as this could inhibit accessibility). Another solution is to set a large negative text indent on the element, and a hidden overflow, to move the text out of view.
- Try to avoid scrolling areas within a page: The overflow property is used to specify how content should appear when it overflows the boundaries of its container (visible, cropped, or scrollable). Some mobile browsers, like the iPhone, support scrolling overflow, but don't display scrollbars, and require two fingers to scroll these areas, making scrolling areas are difficult to use—others don't support scrolling at all.