Semantic markup, page titles and language: accessibility for developers

  • Author: Access iQ ®
  • Date: 1 Feb 2013
  • Access: Premium

Quick facts

Semantic markup means structuring markup that adds and supports the meaning of the text, complies with web standards and helps communicate more than the text could do on its own.

  • Support meaning through markup
  • Use the right language for the job
  • Provide descriptive and unqiue page titles
  • Use the lang and xml:lang attributes to identify the language of the page
  • Include WAI-ARIA where practicable

The W3C has developed a series of technical specifications and guidelines it has adopted as Standards, which together define an Open Web Platform 'that has the unprecedented potential to enable developers to build rich interactive experiences, powered by vast data stores, that are available on any device'.

On the internet there are two basic types of content:

  • Documents: primarily focussed on presenting information.
  • Applications: focussed on functions, transactions, and interactions.

Most often there is some overlap, for instance, when an application has a large information page or a document includes an interactive form, but on the whole, most pages fall clearly on one side or the other. Markup languages like HTML and XML give structure and meaning to a document. Semantic markup means structuring markup that adds and supports the meaning of the text, complies with web standards and helps communicate more than the text could do on its own.

Web standards enforce the separation of presentation from meaning, structure from content. The standards state that presentation, meaning and functionality should remain as separate as possible, partly through the different languages used for each; CSS, HTML, JavaScript. This is how, for example, <em> (for emphasis, which denotes a change in meaning or status) is more semantic than <i> (for italic, which denotes a change in presentation or style). Semantic markup prefers the instructions related to presentation be called from a style sheet using cascading style sheets (CSS) and not in HTML, unless the CSS properties are enclosed in a <style> element in the <head> of the document.

Semantic markup also requires including appropriate and correctly formatted meta information, which by being machine-friendly helps web content to be found, understood, indexed and inter-related to contribute to a semantic web. Some of the meta information like page titles and document language provide meaning and information that help not only understanding but also usefulness. Following some of these conditions is very easy to do, some taking only a few minutes to apply to an entire large website, but have lasting benefits to their place in the internet.

Following web standards and using semantic markup will, by and large, enhance accessibility. This is not because accessibility is built into web standards but because standards-compliant semantic markup is more machine-readable, which includes browsers, search engines and the assistive technologies used by people with disabilities. Good semantic markup also allows better keyboard navigation, making the site easier for everyone to use.

Because WCAG 2.0 is published by the W3C through WAI, web standards (which are also managed by the W3C) support the four Principles of Accessibility that require web content to be:

  • Perceivable
  • Operable
  • Understandable
  • Robust

Guideline 1.3 Adaptable states:

Create content that can be presented in different ways (for example simpler layout) without losing information or structure.

The way to follow this guideline as a developer is to ensure markup is standards-compliant and uses semantic markup correctly. WCAG 2.0 suggests several specific techniques for doing just that.

Premium Content

Premium content is available to users that have a current subscription to the content.

This topic is part of our premium content range. To access it, you need a 12-month premium subscription — but let’s put that in perspective. How many hours will you waste if you try to find free information on the internet? And how can you be sure that free info is correct? Or comprehensive? Or specific to your role?

With a premium subscription, you get virtually everything you need, all in one place. All you need to do is follow the information provided, and you’ll know you’re covered.

Each subscription includes:

  • A year of content updates — Premium content is updated regularly, and you get all of those updates for free.
  • Professional support — Ask questions or request further information from an Access iQ™ specialist.
  • Access to Q&A — See the questions and answers submitted by other premium subscribers, so you remain up-to-date on the accessibility challenges faced by others in the industry.

Unlock this content: