When CSS is disabled or unsupported, does the page´s structure allow for an understandable reading order?
When Cascading Style Sheets were developed, web designers were able to separate presentation from content in web pages, because the visual presentation (including the layout) of a web page can be controlled with style sheets while the content can rest in HTML. This "separation of work" allows designers and developers to create much more streamlined web sites that are easier to manage. When a separate file controls how the web page looks, there is more freedom to experiment with different designs.
CSS is such a powerful and versatile tool that it can be relied upon too much. For example, CSS can be used to style text to look like a heading, instead of using actual heading tags. Looking at the page, you would assume that headings had been used to separate different sections of the page - but someone using a screen reader who would be unable to use a "read list of headings" command and hear the headings.
People with disabilities, particularly people with low vision, appreciate the ability to specify a user style sheet. In some browsers, you can set it up so your style sheet will take precedence over any settings of the current page. Another area of concern for accessibility is the use of CSS to position content. A web designer shouldn't simulate HTML structural elements with style sheets. It's a good idea to make sure that your page makes sense, that the content is in a logical order when the positioning is disabled by turning off style sheets. Imagine its being read in that order by a screen reader. For the most part, screen readers read pages as if style sheets were turned off.
Sometimes CSS is used to create background images that are considered "presentational" rather than "informational." These images can't be given alt text. Thus, background images shouldn't contain information necessary for content or functionality, such as a mission statement, an important slogan, or even the main site title.
CSS can also cause problems with hand held devices that have tiny screens, Formatting features such as fixed-width, positioning, and the various textual effects aren’t as effective when viewed on a small screen. These types of effects, more often than not, cause the user to have to scroll horizontally to view the content.
- Creating Accessible CSS (WebAIM)
- Pitfalls with CSS (WebAIM)
- Cascading Style Sheets (Jim Thatcher)
- CSS: Managing Background Images Responsibly
- Naughty or Nice: CSS Background Images
- RNIB: CSS layout and positioning