问设置屏幕阅读器的困难图标

EN

.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 */
}

<!-- option 1 invisible text (screen reader only text) -->
<div class="course-difficulty">
    <p>Difficulty: </p>
    <div aria-hidden="true">
        <span class="fas fa-star"></span>
        <span class="fas fa-star"></span>
    </div>
    <span class="visually-hidden">2 out of 5</span>
</div>

<!-- option 2 aria-label -->
<div class="course-difficulty">
    <p aria-label="Difficulty: 2 out of 5">Difficulty: </p>
    <div aria-hidden="true">
        <span class="fas fa-star"></span>
        <span class="fas fa-star"></span>
    </div>
</div>