2: Information Design  in Designer Modules, Curricula on Web Accessibility

• Foundation Prerequisites
• Designer Module 1: Visual Design
• Basic knowledge of:
  • Visual Design
  • Prototyping
  • Responsive Design
  • Information Architecture

• Applied expertise in teaching:
  • WCAG Success Criterion 1.1.1 Non-text Content
  • WCAG Success Criterion 1.3.1 Info and Relationships
  • WCAG Success Criterion 1.3.3 Sensory Characteristics
  • WCAG Success Criterion 1.3.5 Identify Input Purpose
  • WCAG Success Criterion 1.4.5 Images of Text
  • WCAG Success Criterion 2.4.4 Link purpose (In Context)
  • WCAG Success Criterion 2.4.6 Headings and Labels
  • WCAG Success Criterion 3.1.3 Unusual Words
  • WCAG Success Criterion 3.1.4 Abbreviations
  • WCAG Success Criterion 3.3.2 Labels or Instructions
• In-depth knowledge of:
  • Foundation Prerequisites
  • Designer Module 1: Visual Design
  • Visual Design
  • Prototyping
  • Responsive Design
  • Information Architecture

Discuss ways to use text and semantic structure to communicate the organization of pages and documents. For example, using pages to split the content into logical units, landmarks to define page regions, and headings with their corresponding rank levels to group related information.

Discuss the use of diagrams and illustrations to help users understand the information provided in text.

Learning Outcomes for Topic

Students should be able to:

• design textual content to be easily consumed, for example by splitting larger blocks of text into more manageable segments using:
  • pages
  • landmarks with their corresponding region type
  • headings (with their corresponding rank levels)
  • sidebars and other page regions
  • paragraphs, lists, and other structures to convey content meaning
• define the presentation of:
  • diagrams and illustrations to make textual information easier to understand; for example, a diagram of the process described in the text
  • textual information to make diagrams and illustrations perceivable, for example a text description of an electronic device in a user manual
  • methods to provide specific definitions of words and meaning of phrases, such as professional terms, idioms, and jargon
  • methods to provide the expanded form or meaning of acronyms and abbreviations
• identify related requirements for:
  • developers to code the regions, headings, and language of pages and parts
  • content authors to provide clear language and easy-to-read texts whenever possible

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Discuss different types of page regions, including header, navigation, main, and footer. Demonstrate that, in addition to visually distinguishing these regions, some people need semantics and text to understand the relations between them. Explain that defining and planning the different regions is a designer’s responsibility, whereas adding the semantics is a responsibility shared with the developer.
• Show examples of online articles and forms. Discuss how these are divided into manageable pieces so that they are easier to understand and to navigate. For example, by using headings with their corresponding rank levels to indicate the different parts, as well as sections, paragraphs, and lists to convey content meaning.
• Show examples of diagrams and illustrations that can complement the information presented in text. For example, visual instructions that supplement the text of a user manual. Explain that they help users with reading disabilities to understand difficult pieces of text. Explain that defining the presentation of such diagrams and illustrations is a responsibility of the designer, whereas providing the diagrams and illustrations is a responsibility of the content author. For reference on how to provide visual illustrations, pictures, and symbols to help explain ideas, events, and processes, see technique G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes.
• Show examples of text descriptions to make diagrams and illustrations perceivable. For example, text descriptions of an electronic device layout. Explain that these descriptions help people who don’t see the images to perceive the information. Explain that defining the presentation of such descriptions is a responsibility of the designer, whereas providing such descriptions is a responsibility shared with the content author. Text alternatives will be discussed in detail in Designer Module 5: Images and Graphics.
• Show examples of words that may be difficult to understand or that are used in a specialized way. Explain that people who are not familiar with such words need definitions to understand their meaning. Explain that defining the methods to provide such definitions is a designer’s responsibility, whereas providing the definitions is a responsibility shared with the content author.
• Show examples of abbreviations, such as short forms of words and acronyms. Explain that people who are not familiar with the abbreviations need an explanation or an expansion of that abbreviation to understand them. Explain that specifying the methods to provide such explanations or expansions is a designer’s responsibility, whereas providing the explanations or expansions is a responsibility shared with the content author.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

• Practical — Give students an eBook. Ask them to propose how it might be split into smaller and more manageable pieces to make content easier to understand and navigate. Assess how students use pages, landmarks, and headings with their corresponding rank levels as well as paragraphs, lists, and other structures to split large amounts of text into smaller and more manageable pieces.
• Practical — Give students a complex piece of text. Ask them to select diagrams and illustrations that complement the text. Assess how students select diagrams and illustrations to complement processes and instructions presented in text.
• Practical — Give students diagrams and illustrations. Ask them to select descriptions to make information perceivable for people who cannot see the images. Assess how students select descriptions for diagrams and illustrations.
• Practical — Give students unusual words and abbreviations. Ask them to select methods to explain such words or expand the abbreviations. Assess how students select methods to provide explanations of unusual words and expansions of abbreviations.

Discuss the use of labels, instructions, and graphical representations to help people understand the purpose and functionality of user interface components. Explain that defining the presentation of labels, instructions, and graphical representations is a responsibility of the designer, whereas providing such labels and instructions is a responsibility shared with the content author.

Learning Outcomes for Topic

Students should be able to:

• specify clear and distinguishable labels for components, including visual and programmatic names
• define overall instructions to make information in multi-step processes more understandable, for example text and graphical representations
• define visual and non-visual instructions to communicate the total number of steps and the current step in multi-step forms and processes
• associate controls that share the same purpose, such as those collecting personal information, payment methods, or consent to legal conditions, and communicate such groups visually and non-visually

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of labels, including names for links, buttons, and form controls. Explain that these labels help users identify these components. Explain that defining the presentation of these labels is a designer’s responsibility, implementing these labels is a developer’s responsibility, and providing labels is a responsibility shared with the content author.
• Show examples of overall instructions, such as indications of what will happen after pressing a button. Explain that these instructions help users better understand the purpose and functionality of components. Explain that instruction presentation is a designer’s responsibility, implementing these instructions is a developer’s responsibility, and defining the content of these instructions is a responsibility shared with the content author.
• Show examples of multi-step processes, such as a multi-step form, with instructions to indicate the current step and total number of steps in the process. Then show examples of multi-step processes without such instructions. Compare the user experiences for each of the examples. Explain that people rely on such instructions to get an understanding of where they are in the process and how many steps the process has. Explain that defining the presentation of such instructions is a designer’s responsibility, implementing these instructions is a developer’s responsibility, and providing these instructions is a responsibility shared with the content author.
• Show examples of form controls that share the same purpose, such as those collecting personal information, payment methods, or consent to legal conditions. Explain that grouping them is essential for some people to understand and fill in such forms and is useful for all users. Discuss several ways to group those controls both visually and non-visually, such as using proximity relations or putting each of the groups on a dedicated step of the process. Explain that designing the grouping relations and defining how they look is a designer’s responsibility, whereas coding those relations is a developer’s responsibility.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

• Practical — Have students group related information in a form that collects personal information, payment methods, and consent to legal conditions. Assess how students build groups of related information, and how students provide ways for users to identify each of the groups.
• Practical — Give students a long list of items and ask them to select ways to split the list into smaller subsets. Assess how students use different strategies to group long sets of data into smaller subsets.

Investigate strategies that people with disabilities use to interact with information presented in tables. For example, using textual descriptions, graphical representations of the table content, as well as several simpler tables or individual lists to present the information in a complex table.

Learning Outcomes for Topic

Students should be able to:

• identify uses of tables to present data that share a logical relationship
• define table header cells and data cells, and provide clear and distinguishable styles for each
• define graphical representations of complex tables that help users more easily understand their purpose and meaning
• evaluate the use of complex tables and select simpler ways to provide the information, for example:
  • simpler tables
  • charts, diagrams, and other graphical representations
  • individual lists
  • plain text
• identify related requirements for
  • developers to programmatically associate table descriptions, data cells, and header cells with their corresponding table
  • content authors to provide table descriptions where appropriate

Teaching Ideas for Topic

Optional ideas to teach the learning outcomes:

• Show examples of different types of information presented in tables. Explain that tables are used when there is a logical, tabular relationship between the information presented, for example when displaying a list of events with their date and venue.
• Refer back to Designer Module 1: Visual Design, Topic: Flexible Layouts and explain that some users may require different ways of presenting tabular information. For example, providing graphical representations for complex tables, splitting complex tables into simpler ones, and using lists to group the logically related information.
• Show examples of table data cells and header cells. Discuss with students which of these cells should be the header cells and which should be the data cells. Emphasize that the relation between the table data cells and header cells must be perceived both visually and non-visually. Explain that providing the styles is a designer’s responsibility, whereas establishing the programmatic relation is a responsibility shared with the developer.

Ideas to Assess Knowledge for Topic

Optional ideas to assess knowledge:

• Practical — Give students a table and ask them to define the table’s header cells and data cells. Assess how students understand the difference between header cells and data cells.
• Practical — Give students a set of tables and ask them to provide clear styles to distinguish header cells from data cells. Assess how students provide clear and distinguishable styles for header cells and data cells.
• Practical — Give students a complex table and ask them to split the information using simpler tables, lists, and graphical representations where appropriate. Assess how students provide alternative ways to present tabular information.