Icons

Icons are commonly used in educational content to convey meaning visually. In accessible book production, icons must be captured clearly and consistently in XML to ensure they remain informative for all readers, including those using assistive technology.

Basic XML Structure

Use the following format to include icons in XML:

<img alt="" role="informative" src="/img/icon.jpg"/>

• Always use an empty alt attribute (alt="") unless specifically instructed otherwise.
• Add role="informative" in most cases.
• The src attribute should point to the icon file in the img/ directory.

Role Attribute: When to Use role="informative"

• In almost all cases, icons must be marked with role="informative".
• This ensures assistive technology recognizes them as meaningful parts of the content.

Exception: Use of <figure>

If an icon stands alone — for example, used as a decorative or organizational marker — it may be wrapped in a <figure> tag:

<figure>
  <img alt="" role="informative" src="/img/warning.jpg"/>
</figure>

Placement of Icons

Icons must be placed inline within the textual element they belong to. Examples include:

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

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

File Naming and Reuse

• Reuse icons: If the same icon appears more than once, capture it only once and reuse the same filename.
• Naming: Unless otherwise instructed, name icons logically based on what they depict. For example:

<img alt="" role="informative" src="/img/calendar.jpg"/>
<img alt="" role="informative" src="/img/computer.jpg"/>

Use lowercase letters, no spaces.

Avoid filenames like img/Icon 1.jpg.

Real-World Examples from Schoolbooks

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

Example 1: Tip icons

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

Example 2: Instructional icon for assessment

<assessment>
<p xml:lang="fr"><number>23</number> <img alt="" role="informative" src="/img/fivedots.jpg"/> Travaille avec ton groupe. Choisis les vacances de tes rêves.</p>
<list type="unordered" bullet="dash" xml:lang="fr">
<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>

Example 3: Multiple icons in table

<table>
<tbody>
<tr>
<td></td>
<td><img alt="" role="informative" src="/img/man.jpg"/></td>
<td><img alt="" role="informative" src="/img/woman.jpg"/></td>
<td><img alt="" role="informative" src="/img/womanman.jpg"/> <img alt="" role="informative" src="/img/womanwoman.jpg"/></td>
</tr>
<tr>
<tr>...</tr>
</tbody>
</table>

Checklist

• Icon uses <img> with role="informative"
• Placed inline unless standalone
• Correctly named file (lowercase, no spaces)
• Reuse existing icons when possible