Use markup and style sheets and do so properly

These checkpoints are all about using HTML and CSS properly to keep content and layout separate. The checkpoints are:

• Use markup rather than images to convey information [Priority 2]
• Create documents that validate to published formal grammars [Priority 2]
• Use style sheets to control layout and presentation [Priority 2]
• Use relative rather than absolute units [Priority 2]
• Use header elements to convey document structure [Priority 2]
• Mark up lists and list items properly [Priority 2]
• Mark up quotations. Do not use quotation markup just to indent text [Priority 2]

Why the checkpoints are important

Some pages use images to display text or symbols in a visually appealing format. This causes problems:

• Images can't be described as part of an overall document structure which means that a lot of important contextual information is lost
• Users can’t re-size text that is displayed as images in the browser, which makes it difficult to read for people with poor eyesight who prefer larger font sizes
• Screen readers and Braille displays can't translate images into speech or Braille, making content unavailable to blind users

If you write HTML that validates to formal grammars, assistive technology (like screen readers or Braille devices), indexing tools, search engines, programs that extract tables to databases, navigation tools that use header elements and automatic text translation software can work correctly.

Use style sheets to separate structure and presentation. This brings several benefits, including improved accessibility, manageability, and portability:

• Accessibility improves because users can choose between different styles and may even override the defined style sheets with their own. These could include larger font sizes or different colour schemes to improve legibility
• Separating presentation and structure facilitates device independence, making it is easier to tailor the presentation to different browsers or user agents
• Using style sheets also reduces the file size of web pages and speeds up download time, which is helpful for user who may be working with a slow connection

Fixed sizes may allow you to control the look of your page but cause many problems:

• If you design with one window size in mind and the user does not work with that size window, key features will disappear off the edge of the screen. This affects users with smaller monitors, or users who like to enlarge the text size. If the width of the page is designed to display well in a fixed browser window size and the user enlarges the text, it could become too large to display on screen
• If you fix the font size, a user can't scale it up to make it easy to read. Users might want to do this if they use a small screen, such as a mobile device or laptop, or if they have poor eyesight

Relative sizes mean that the web site can be used on a wider variety of access devices, with the minimum design effort and also provides users with the flexibility to scale key elements to a size that suits their needs.

If you don’t use markup properly, it makes life difficult for browsers and specialised software that is developed according to markup specifications. If you use markup for a presentation effect (e.g., using a table for layout or a header to change the font size), it makes it difficult for users with specialised software or hardware to understand the organisation of the page or to navigate through it. For example:

• Many people navigate or skim through pages by reading the headings to get a feel for the structure and an overview of the content and scope of a document
• HTML allows you to specify a hierarchy of heading levels by using different header tags: H1, H2, H3, etc. The tag not only defines the hierarchical order of a heading, it also affects visual presentation (an H1 heading looks bigger and bolder than an H2 heading). If you use the header tags to make non-heading text bigger and bolder, you can confuse users by making content which is not a header look like one. This makes it very difficult to understand the structure of a page
• Screen readers use a different tone of voice for headers or quotation, providing important clues about document structure. Misusing headings or quotations will misinform and confuse screen reader users
• Screen reader users will refer to the numbers in an ordered list for navigation and context. If the numbers do not relate to a clear structural hierarchy, users will be easily confused