Cascading Stylesheets CSS in Accessibility

The cascading style sheets are used to design the website. As mentioned in the HTML part, design and structure are separated. This has the advantage for the visually impaired that they can create their own style sheets in order to use their own color schemes.

Invisible Elements

CSS is also used to hide elements intended to help the blind, most notably the jump anchors and section headings.

Other elements are reformatted via CSS, for example lists have a bullet and wrap by default. The list item is removed with CSS and the automatic line break can be hidden for horizontal navigation.

Formatting

Otherwise, CSS naturally plays a major role in the formatting of texts or the positioning of elements. I wrote elsewhere about text formatting. Using CSS, the font size of headings, the letter spacing of continuous text and much more can be formatted.

Colors

The colors are also mainly set via CSS. The current CSS 2.1 is a fairly old standard, so many modern requirements are not met: e.g. there are no filters or gradients as supported by SVG. Therefore, background images or even JavaScript are used for more complex graphics tasks. Both have disadvantages: some people have JavaScript turned off by default and, for example, the visually impaired cannot adjust the colors and contrast of background images.

It makes sense to carry out as many design tasks as possible using CSS. This simplifies adaptability. CSS has the advantage that different styles can be specified for different output devices. A mobile device with a small display, for example, sees a different website than a large TFT display.

Focus

An important element for keyboard users is focus. The keyboard user mainly uses the tab key to jump to an element on the web page. The focus shows which element is currently tabbed. The focus most often shows up as a border, underline, or color change, or as a cursor in form fields. Mouse pointers also mainly see the focus when moving over it. It is possible to set different changes for mouse touch and keyboard focus, but I don't know of any case where this would make sense, but I don't think there's anything wrong with it.

CSS should also be used to avoid sloppiness in design. We all know that when we're in a hurry and use tabs, spaces and the return key to indent. From experience I can say that this rarely saves time. The two minutes that you need to write a CSS class for it are compared to a time-consuming search for sources of error and a time-consuming and annoying correction, which also takes much longer.

Read more