WordPress.org

Ready to get started?Download WordPress

Forums

Gravity Forms - Placeholders add-on
Label display none and screen readers (1 post)

  1. Rian Rietveld
    Member
    Posted 4 months ago #

    Hi,
    Thanks for this plugin, it's just what I was looking for and it works great :-)
    Can I make one suggestion to improve it's accessibility?

    In gf.placeholders.js the display of the label is set to none:
    var $labels = $('label[for=' + id + ']').hide();

    This means that for people using a screen reader, the label is also skipped and the relation label-input field is lost. That way a form gets unreadable for a screen reader user.

    Maybe it's a better solution to hide the label using CSS adding a screen-reader-text class like
    .screen-reader-text {
    position:absolute;
    left:-10000px;
    top:0;
    width:1px;
    height:1px;
    overflow:hidden;
    }

    More info about this you can find at:
    http://webaim.org/techniques/css/invisiblecontent/
    http://www.coolfields.co.uk/2009/12/text-for-screen-readers-only/

    Kind regards,
    Rian

    https://wordpress.org/plugins/gravity-forms-placeholders/

Reply

You must log in to post.

About this Plugin

About this Topic

  • RSS feed for this topic
  • Started 4 months ago by Rian Rietveld
  • This topic is not resolved
  • WordPress version: 3.8.1