| pictograms-enabled | false (default); true | Indicates whether pictograms should be added to a text to support reading or not. | People with language comprehension, learning or reading difficulties.[^1][^2] |
The picture shows an example of how pictograms can be used to make a text more accessible. To do this, a pictogram is displayed for some words when the mouse pointer is hovered over them. A dash over the words indicates that a pictogram is available as an alternative.
To implement the feature in a web page, the web author must implement a CSS tooltip with the explanatory pictogram for selected words.
``` HTML
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltippicto {
visibility: hidden;
background-color: black;
color: #fff;
padding: 5px 0;
}
@media (pictograms-enabled) {
.tooltip:hover .tooltippicto {
visibility: visible;
}
.tooltip {
border-top: 1px solid black; /* Top line */
}
}
</style>
<div class="tooltip">banking
<span class="tooltippicto">
<img src="banking.jpg" alt="">
</span>
</div>
```
However, there exists the problem that the images are loaded even if the function is not desired and thus data is transferred unnecessarily. To counteract this behavior, the <picture> element could be used and the image source could be specified with an MQ. Unlike <video> elements, an MQ is legitimate there.[^3]
In this case, the image would only be loaded if this is also desired by the user.
