Reports

I found this code on another stack overflow question which referenced it from another stack overflow question. This code will have the screen reader say "two thousand five hundred euros" but not read "2.500", while at the same time the 2.500 being visible to all users.

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<p><span class="visually-hidden">two thousand five hundred </span>€<span aria-hidden="true">2.500</span></p>

Citations:

accessibility p tag different text for screen reader
How to hide a text and make it accessible by screen reader?

79667639