WordPress.org

Forums

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

  1. Rian Rietveld
    Moderator
    Posted 1 year 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/

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Gravity Forms - Placeholders add-on
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic