Pictograms

Pictograms are commonly used in educational content to convey meaning visually. In accessible book production, pictograms must be captured clearly and consistently in XML to ensure they remain informative for all readers, including those using assistive technology. It’s alt-attribute must be filled with a short description.

Basic XML structure

Use the following format to include pictograms in XML:

<img alt="short description" role="informative" src="/img/pictogram.jpg" type="pictogram"/>

• Fill the alt attribute as instructed in the textbook-specific instructions. Otherwise leave empty.
• Add role="informative" and type="pictogram" in all cases. This ensures assistive technology recognizes them as meaningful parts of the content.
• The src attribute should point to the pictogram file in the img/ directory.

Exception: use of <figure>

If the pictogram stands alone – for example, used as a decorative or organizational marker – it may be wrapped in a <figure> tag:

<figure>
  <img alt="let op" role="informative" src="/img/warning.jpg" type="pictogram"/>
</figure>

Placement of pictograms

Pictograms that are part of an assessment, must be placed in the <indicators> element. See indicators. In all other cases, place the pictogram inline within the textual element they belong to. Example of the latter are:

<p>This is a tip <img alt="onthouden" role="informative" src="/img/lightbulb.jpg" type="pictogram"/> you should remember.</p>

<li>Open the <img alt="online" role="informative" src="/img/computer.jpg" type="pictogram"/> settings panel.</li>

Repeating pictograms and file naming

• Reuse pictograms: if the same pictograms appears more than once in the book, capture it only once and reuse the same filename.
• Naming: name the pictograms based on the instructions on the textbook-specific instruction page. . For example:

<img alt="tijd" role="informative" src="/img/calendar.jpg" type="pictogram"/>
<img alt="online" role="informative" src="/img/computer.jpg" type="pictogram"/>

Use lowercase letters, no spaces. Avoid filenames like img/pictogram 1.jpg.

Real-world examples from schoolbooks

To guide correct implementation, here are examples from actual schoolbooks:

Example 1: computer pictogram

<p><img alt="online" role="informative" src="/img/laptop.jpg" type="pictogram"/> Ga naar de <em fontStyles="italic">Flitskaarten</em> en <em fontStyles="italic">Test jezelf</em>.
</p>

Example 2: Instructional pictogram for assessment

<assessment>
<title number="23" label="assessment">23</title>
<indicators><img alt="groepje" role="informative" src="/img/fivedots.jpg" type="pictogram"/></indicators>
<p fontStyles="bold">Travaille avec ton groupe. Choisis les vacances de tes rêves.</p>
<list listType="unordered" bulletType="dash">
<li>Cherche une photo de la destination de tes rêves sur Internet et écris en français cinq mots sur tes vacances.</li>
<li>Montre la photo à ton groupe et explique en néerlandais pourquoi tu as choisi les mots.</li>
</list>
</assessment>

Checklist

• Pictogram uses <img> with role="informative" and type="pictogram".
• Placed inside <indicators> within assessment. Otherwise proces inline or as standalone within figure.
• Fill the alt-attributes as instructed.
• Correctly named file (lowercase, no spaces).
• Reuse existing pictograms within one production if possible.