CSS Positioning

Welcome to our free Web Accessibility and Section 508 tutorial. This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers course.

Contact Us or call 1-877-932-8228
CSS Positioning

CSS Positioning

  • CSS should not be used for positioning content unless the page still makes sense when positioning is disabled

Another area of concern for accessibility is the use of CSS for positioning content. Just as you could simulate HTML structural elements with style sheets, and shouldn't, in the same way you could place content just about anywhere - and shouldn't. Make sure that your page makes sense when the positioning is disabled by turning off style sheets.

An artificial example of using CSS for structural markup and positioning is available from the Techniques document for the web Content Accessibility Guidelines where a menu structure is completely described with style markup. Here is a screen shot of what it looks like with CSS enabled: Screen shot of menus structures created with CSS

The contrived example has two columns of links, one headed by "Products" (Telephones, Computers, Portable MP 3 Players) and the other by "Locations" (Idaho, Wisconsin). Then, with style sheets turned off, because the elements can be placed anywhere with CSS, the structural information of the content is completely lost, yielding a list, 'Locations,Telephones, Portable MP3 Players, Wisconsin, Computers, Products, Idaho.'"/> the menu with style sheets disabled

Next

This tutorial is based on Webucator's Web Accessibility and Section 508 Training for Experienced Web Designers Course. We also offer many other Web Accessibility Training courses. Sign up today to get help from a live instructor.