When HTML markup is used to separate content from presentation, the accessibility is greatly increased.
With all formatting and layout information contained in the CSS the correct semantic markup of the HTML is maintained, i.e. headings (<h1>, <h2>), lists (<ul>, <ol>), emphasized text (<strong>), etc.
An example of semantically correct HTML:
Benefits of using CSS
Using CSS and correct semantic markup ensures Web sites are flexible enough to meet different user needs, preferences and situations. This flexibility:
- enables people with disabilities to navigate the Web using assistive technologies. People with visual impairments, for example, may use screen readers that read out loud the content of a page or translate it to a Braille display.
- allows people with mobility impairment who may be unable to use a mouse to surf the Web by just using the keyboard or another assistive device.
- allows Web pages to be optimised for display on different types of devices, such as iPhones, by using different CSS.
- makes it easier for search engines to index the content which contributes to an increased visibility in search results.
- makes Web sites easier to maintain, with redesigns and different language versions quicker to implement.
- ensures Web sites are easier to access with low-bandwidth connections.