要素を見えないようにするが、スクリーンリーダーには読ませるcss

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    position: fixed;
    white-space: nowrap;
    width: 1px; }

最近はこっちのほうがよさそう

.visually-hidden {
    position: fixed !important;
    /* keep it on viewport */
    top: 0px !important;
    left: 0px !important;
    /* give it non-zero size, VoiceOver on Safari requires at least 2 pixels
    before allowing buttons to be activated. */
    width: 4px !important;
    height: 4px !important;
    /* visually hide it with overflow and opacity */
    opacity: 0 !important;
    overflow: hidden !important;
    /* remove any margin or padding */
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* ensure no other style sets display to none */
    display: block !important;
    visibility: visible !important;
}