To implement the feature in a web page, the web author must implement a CSS tooltip with the explanatory pictogram for selected words.
To implement the feature in a web page, the web author must implement a CSS tooltip with the explanatory pictogram for selected words. In the code below a simple implementation is shown.
```html
<style>
.tooltip{
...
...
@@ -42,7 +42,7 @@ To implement the feature in a web page, the web author must implement a CSS tool
</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]
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.
```html
...
...
@@ -55,6 +55,11 @@ In this case, the image would only be loaded if this is also desired by the user
</span>
</div>
```
#### Benefits
A web page with pictograms can contribute to meeting the two WCAG success criteria [3.1.3 Unusual Words](https://www.w3.org/WAI/WCAG21/Understanding/unusual-words.html) and [3.1.5 Reading Level](https://www.w3.org/WAI/WCAG21/Understanding/reading-level.html). This means that the function can contribute to web accessibility. Since the function is only useful for a certain user group (people with learning and/or reading difficulties), the function should only be visible to them. The technology of MQs makes it easy to implement. Without the MQs, it would only be possible to deactivate or activate the function through JS, which would result in additional work for the web author
