HTML and CSS

Summary

Use minimalist HTML to semantically describe the content of a page, and CSS to style it.

Impact

Impact

Users of adaptive technologies navigate webpages via HTML headings and ARIA landmarks.

  • If your HTML does not semantically describe the structure of the content, screen reader users won't be able to navigate it.
  • In addition, if you use excessive HTML markup instead of CSS to style the content, you may make it much more difficult for screen reader users to understand the content. 
  • If you don't use CSS, you won't be able to easily style the content for different audiences and devices, which will add to your workload as you try to maintain a site.
Dos and Don'ts

Dos and Don'ts

Expand all

Separate Content from Presentation

Your content will be more accessible as well as usable if you separate presentation from content. It will also be much easier to maintain over time.

Do

Use minimalist HTML code to semantically describe the content it represents. For example:

  • Use heading tags in hierarchical order.
  • Use paragraph tags to indicate sections of content that express a particular topic or theme.
  • Use blockquote tags to indicate a quotation.

Use cascading style sheets (CSS) to style your content for different audiences and devices.

Don't

Don't use HTML to layout web content or change the way it looks unless the markup also reflects the content's structural meaning. For example:

  • Don't use blockquote or list tags just to indent text.
  • Don't use paragraph tags and non-breaking spaces just to add extra space between content elements.
  • Don't use bold tags to emphasize text.

Don't select a heading level purely for how it appears in the browser. 

Use H1 Tag Once per Page and Repeat Text in Title Tag

Do

Use H1 tags only once per page to indicate the page's title.

Repeat all or part of the H1 text in the title tag.

Don't

Don't include more than one H1 tag.

Don't use different text in the title and the one H1 tag.

Mark Up Headings in a Logical Order

If you don't mark up headings correctly, adaptive technology users won't be able to navigate your webpages.

Do

  • Mark up headings in a logical order from H1 (usually the page title) to H2 to H3, and so on.
  • Use H1 tags only once per page to indicate the page's title.
  • Repeat all or part of the H1 text in the title tag.
  • Change the visual display of headings (font-size, font-face, color, etc.) using CSS.

Don't

  • Don't skip heading levels (e.g., use H3 after H1 without an H2 in between).
  • Don't use different text in the title and H1 tags.
  • Don't select a heading level purely for how it appears in the browser. 
How-to

How-to

Designing for Screen Reader Compatibility from WebAIM

How to Meet WCAG (Quick Reference) from W3C Web Accessibility Initiative