• Resolved sanla

    (@sanla)


    Hi Anthony,

    In the style.css there are 3 options to hide elements but keep them visible for screenreaders:

    .screen-reader-text
    .assistive text
    .visuallyhidden

    But I’m confused; How are they supposed to be used? This is my main question, but if it helps I split it up in separated questions:

    1.
    Why is class .screen-reader-text not used and / or replaced by class .assistive text?

    2.
    The class visuallyhidden in the style.css (taken over from html5boilerplate) looks almost identical with the code explained on www.ads-software.com, https://make.www.ads-software.com/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/ .
    a.
    Why is the class .visuallyhidden used only once – in the header template – instead of assistive text, or the other way around?
    b.
    Why is the class .screen-reader-text not used?

    Thanks in advance!
    Sandra
    Code snips below:
    /* Text meant only for screen readers. */
    .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    }

    /* Text meant only for screen readers */
    .assistive-text {
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    }

    /* Hide only visually, but have it available for screenreaders: h5bp.com/v */
    .visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: px;
    margin: -px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: px; }

Viewing 1 replies (of 1 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    Honest answer, it’s probably just from using different sources such as that .org post you mentioned and stuff html5boilerplate. These could all be combined into one class

Viewing 1 replies (of 1 total)
  • The topic ‘Use classes for screen readers’ is closed to new replies.