Support » Accessibility » What is “assistive-text”?

  • Resolved McContax

    (@masscarl61)


    I am trying to understand the theme “twentyeleven” these days.But I have no idea about this
    <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>

    And I have already understood these.

    <div class="skip-link"><a class="assistive-text" href="#content"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
    <div class="skip-link"><a class="assistive-text" href="#secondary"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>

    It shows up as a link when I click TAB.But I still don’t understand this one
    <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>

    • This topic was modified 3 weeks, 4 days ago by  McContax.
Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    It’s text meant for people using assistive technologies. It is sometimes useful to add context to components through plain text, which is usually hidden to others but still accessible to people using assistive technologies.

    This code:

    
    <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
    

    Is a heading used to help people identify the main navigation element. This theme is quite old and there are better ways to do this nowadays, such as using the ‘aria-label’ attribute on the navigation element

    It should not however show on tab, because it’s not a tabbable element. Tabbable elements are interactive elements and this is just a heading.

    Either there’s a bug on your site showing this on tab, or you’re looking at the wrong thing.

    I got to admit that I was too tired last night,which makes me unable to explain it cliearly.But thanks for your help.I have solved it.

    This code is the one that will show up when I click “TAB”.It’s from theme twentyeleven.

    <div class="skip-link"><a class="assistive-text" href="#content"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
    <div class="skip-link"><a class="assistive-text" href="#secondary"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>

    But thanks for your help I have understood now.

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.