Separating Content from Presentation*

Why do it?

Accessibility support can be added to conventionally designed Web pages that use table layout and contain internal presentation styles, but separating HTML content from presentation in external Cascading Style Sheets provides much better accessibility support

Users with disabilities are not only able to experience web pages using different modalities (e.g., screen readers), but they also can establish their own style sheets that use different colors, font sizes, etc., that override the developer-designed styles sheets.

That means that your red and green web page may be viewed in black and white and the graphics may be turned off.

User styles in the Opera Browser

To see this in action, download and install a copy of the Opera browser. Next turn the developer styles off.

• Click Tools>Preferences
• Click on the Advanced Tab
• Click Content in the left menu bar
• Click the Styles button on the right-hand side of the window
• In the Presentation Modes window, uncheck all of the Author Mode checkboxes, and check all the User Mode checkboxes.
• Change the default mode to User Mode. There is a default CSS style sheet, but you can also set up your own stylesheet
• Click OK to set the styles to User Mode
• View a Web page to see the difference

top

Stylesheets provide independent content order: linearized layout

Screen readers ignore internal styles, and instead read the content in a linear order.

The most important page content can be near the top of the HTML page, even though its appearance may be to the right or below content, such as navigation, that is repeated from page to page. The disabled person can then obtain the important information on the page without reading content they may have read before.

When you format different areas of the page with div tags, the order of the content on the HTML page can reflect the order of importance rather than physical layout.

Resources

The Opera Browser

top