2.22 When an appropriate markup language exists, use markup rather than images to convey information
Contents
WAI Checkpoint 3.1
Full WAI text: "When an appropriate markup language exists, use markup rather than images to convey information." Mark-up refers to commands or symbols used to describe a document's logical structure or to indicate how it should look when it is printed or displayed. For example, HTML heading styles (h1, h2, etc.) are used to mark up section headings on a web page. MathML can be used to mark-up mathematic symbols and equations. It is possible to achieve the same visual effect by using images instead of markup, but this should be avoided.
Rationale
Sometimes designers use images to display text or symbols in a visually appealing format. This causes problems because images can't be described as part of an overall document structure which means that a lot of important contextual information is lost.
Users cannot re-size text that is displayed as images in their browser, which makes it difficult to read for people with poor eyesight who prefer larger sizes. Screen readers and Braille displays can translate mark-up into speech or Braille, making content and structure more intelligible to blind users.
Directions and Techniques
Use correct mark-up and style sheets to display symbols
Use mark-up to display symbols, such as currency symbols, mathematical or scientific notation. See the WAI recommended techniques for using markup rather than images. This includes an example of mark-up and style sheets used to display mathematical information using MathML.
How you could check for this:
There are no specific test methods recommended for this guideline.
Guidelines for Web Accessibility - Priority 2- 2.1 Ensure that images have sufficient contrast for people with colour deficient vision
- 2.2 Avoid causing content to blink
- 2.3 Avoid movement in content
- 2.4 Ensure that dynamic content is accessible or provide an alternative presentation or page
- 2.5 Use style sheets to control layout and presentation
- 2.6 Use relative rather than absolute units
- 2.7 Use header elements to convey structure
- 2.8 Break up large blocks of information where appropriate
- 2.9 Ensure that information laid out using tables make sense when linearised, or provide an alternative equivalent
- 2.10 Do not use structural mark-up to format information laid out using tables
- 2.11 Describe the purpose of frames and how they relate to each other if it is not obvious by their titles alone
- 2.12 Clearly identify the target of each link
- 2.13 Provide information about pages and sites in metadata
- 2.14 Provide information about the general layout of a site
- 2.15 Use navigation mechanisms consistently
- 2.16 Associate labels explicitly with their controls
- 2.17 Properly position the labels of form controls
- 2.18 Ensure that user interfaces are device-independent
- 2.19 Use logical event handlers in scripts
- 2.20 Use input device-independent event handlers in scripts and applets
- 2.21 Ensure that scripts and applets are accessible
- 2.22 When an appropriate markup language exists, use markup rather than images to convey information
- 2.23 Create documents that validate to published formal grammars
- 2.24 Mark up lists and list items using the proper HTML tags
- 2.25 Use quotation mark-up for quotations, but not for formatting
- 2.26 Where possible, use appropriate W3C technologies of the latest supported versions
- 2.27 Avoid deprecated features of W3C technologies
- 2.28 Do not periodically auto-refresh pages
- 2.29 Do not use mark-up to redirect pages automatically
- 2.30 Do not generate pop-ups or other windows and do not change the current window without informing the user
