Screen Reader Override Element

This is an example of providing additional or alternate text for a screen reader to read. An example of using this could be that you have a label or heading that contains an acronym (e.g. FY for Fiscal Year) that the screen reader is mispronouncing. The screen readers can be configured to read specific strings a certain way but this approach can be used to provide a more verbose version of display text. You can also use this approach to provide more information that may not be necessary for display.

There are two CSS approaches listed below. One keeps the screen reader text inline but hidden and the other moves the element off screen. If you are including an override for a text you don't want the screen reader to read, that element should have aria-hidden="true" set. Keep in mind aria-hidden won't have an effect on elements that can receive keyboard focus, like a button.

CSS

.sr-override {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
}

Alternate CSS that positions the element off screen

.sr-override-abs {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    top: auto;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

html[dir=rtl] {
    .sr-override-abs {
        left: inherit;
        left: unset;
        right: -9999px;
    }
}

Example

<div>
    <!-- This will be visible on screen but hidden to the screen reader -->
    <span aria-hidden="true">FY</span>

 
    <!-- This will be hidden on screen but read by the screen reader -->
    <span class="sr-override">Fiscal Year</span>
<div>