HTML semantics and .sr-only: proposal to rewrite examples

[notabene]

Hi,

at Affichage et vocalisation des prix this code is provided:

<p class="example" aria-hidden="true">
à partir de
<span class="price">
120<sup>,90€</sup><sub>/mois</sub>
</span>
<p>
<span class="sr-only">à partir de 120,90€ par mois</span>

Several problems arise:

1. The semantics of sup and sub are wrong, these tags must be used for indicia, not for formatting. (These elements must be used only to mark up typographical conventions with specific meanings, not for typographical presentation for presentation's sake.)
2. Doubling content will not be properly understood in any case when CSS is disabled or not loaded.

Suggestion:

<p class="example"> <!-- aria-hidden="true" removed -->
à partir de
<span class="price">
120<span class="cents">,90€</span><span class="sr-only">par </span><span class="payment-cycle">/mois</span>
</span>
</p>

(The “/” in “/mois” can be left, I think, as it will not be read by screen readers and will only be seen as a small glitch in the case when CSS does not load properly. YMMV though 😉 )

---

Same goes here:

<p aria-hidden="true">
    <strong>à partir de </strong><span class="price">1€*</span>
    <s>129,90€</s><br>
    *voir conditions
</p>
<span class="sr-only">à partir de 1€ au lieu de 129,90€ voir conditions</span>

That could be

<p>
    <strong>à partir de </strong><span class="price">1€*</span>
    <span class="sr-only">au lieu de</span>
    <s>129,90€</s><br>
    *voir conditions
</p>