Design>Web Design>Accessibility>CSS

CSS in Action: Invisible Content Just for Screen Reader Users

Most of the techniques for making web content accessible to screen readers are invisible to visual users. Alternative (alt) text, table header tags, table summaries, and form tags are examples of techniques that make a big difference for screen reader users, but which have little or no impact on the visual appearance of the web content. Every once in a while, though, web designers confront situations in which the addition of accessible markup does have an impact on the visual layout. In some cases, this visual impact can decrease the usability of the content for visual users. In other cases, designers simply want to provide a more pleasing layout or appearance that would be compromised by including all of the text in a semantically correct format.

Screen Readers and CSS Layout

Screen readers are mostly mystical devices for almost all of us. Few of us actually own them. They’re incredibly expensive. Fewer yet know how to use them well, what their capabilities are, or how they actually work. Is it little wonder then, that big names in our web design world question how screen readers handle modern layout techniques? Not at all. The two gurus quoted below have other strengths, and specialities. They probably haven’t used a screen reader in ages.

Building Accessible Static Navigation with CSS

When building a navigation menu for a web site, steps should be taken to ensure that it is accessible, and degrades gracefully in older browsers with lesser CSS support. In this article we will explore one such implementation. The navigation menu you see in this example is built with valid, semantic HTML and CSS - no JavaScript is involved, as I felt this was unnecessary. The static (non-expanding/collapsing) nature of the example suits a web site comprised of twenty or less target pages.

Grid Design Basics: Grids for Web Page Layouts

Since tables were co-opted for layout purposes, columns have become key to many Web design layouts, and this thinking continued when CSS took over from tables (at least in the minds of savvy designers) for Web-page presentation. However, other fields of layout design don’t think in arbitrary columns, they work with grids, and these form the basis for the structure of page designs. This article will provide the lowdown on grid design for Web pages.

Unobtrusive and Keyboard Accessible Connected Select Boxes

Any web developer who has created a reasonably complex form is probably aware of the concept of multiple select elements that are connected – choosing something from one select box either makes a new select box appear or changes the options of one that is already visible.

Choose an Accessible Image Replacement Method

The technique of using CSS to replace normal HTML text, mostly for headings, with a background image in order to achieve a particular look has been talked about many, many times since early 2003.Several different image replacement methods have been proposed, each with their pros and cons. Some methods create accessibility problems, while others place restrictions on the type of image you can use or force you to use extraneous markup. No method that I am aware of is perfect.

Screen Readers Sometimes Ignore display:none

Using display:none does not always hide content from screen readers like JAWS and Window-Eyes, but there is a workaround.

Screen Readers and 'display:none'

When an element is hidden with display: none, the browser doesn't generate a box for the element; the element is not visible on the screen, and the layout of the page isn't effected by the element. As screen readers are supposed to read the screen, it makes sense that they do not announce content that is hidden with display: none.

A More Accessible Map

Is there a way to display text-based data on a map, keeping it accessible, useful and visually attractive? Yes: using an accessible CSS-based map in which the underlying map data is separated from the visual layout.

Accessible Pop-up Links

Sometimes we have to use pop-ups — so we might as well do them right. This article will show you how to make them more accessible and reliable while simplifying their implementation.

High Accessibility, High Design: CSS to the Rescue

Anyone with good graphic-design skills can use Web standards to produce attractive Web sites that function adequately for nearly all viewers and very well for most viewers – including people with disabilities. This article will explore a few details concerning the interplay of accessibility and Web design.

Accessibility and Cascading Style Sheets

An essay from an accessibility class, on the use of CSS to increase access to a page.

User-Defined Style Sheets and Accessibility

How you can set your own stylesheet for greater accessibility; another lecture/essay.

Creating Accessible Cascading Style Sheets

For years, the only way to format HTML in a visually appealing way was to use tables, even though tables were originally created to display tabular data. As the Web evolved and became more sophisticated, designers wanted to do more than just display text, they wanted to emulate printed documents. They wanted to make an artistic statement. There's nothing wrong with that. In fact, tables can be used for layout without ruining the accessibility of a Web site. Yes, it's ok to use tables for layout. Still, you can take your Web design to a higher level by eliminating tables entirely. The way to do this is through CSS (Cascading Style Sheets).

Accessibility Features of CSS

This document summarizes the features of the Cascading Style Sheets (CSS), level 2 Recommendation ([CSS2]) known to directly affect the accessibility of Web documents. Some of the accessibility features described in this document were available in CSS1 ([CSS1]) as well. This document has been written so that other documents may refer in a consistent manner to the accessibility features of CSS.