Use Valid Markup to Prevent Possible Accessibility Issues

One of the principles of web accessibility is to ensure that web content is robust, meaning that content is compatible with a wide range of user agents. Using valid markup is one way to help ensure that content is accessible to a variety of browsers, browser versions, and assistive technologies. While sloppy markup does not always break accessibility, there is a chance that it can cause accessibility issues.

Common Validation Errors

There are numerous ways to create invalid markup. Though the majority of these ways do not affect accessibility, there are some validation errors that can affect how assistive technologies interact with web content and how web content is rendered to users. Some of these errors include:

  • Duplicate IDs (can break the accessibility of labels for forms, table header cells, etc.)
  • Duplicate attributes on the same element
  • Not enclosing inline elements within block elements (for example, putting links or images on their own, outside of paragraphs or other block elements)
  • Closing elements in the wrong order (for example <strong><em>Emphasized text</strong></em> should be <strong><em>Emphasized text</em></strong>)
  • Use of deprecated/outdated elements (for example <u>, <font>, <i>)

Though WCAG 2.0 does not require markup to pass all validation rules, it does specify critical validation rules for parsing. Valid markup is a quick start to ensuring accessibility; and there are accessible alternatives that can replace deprecated markup like using CSS for presentation. We can test for markup validity using the W3C Validator at http://validator.w3.orgopens in a new window.