By Stephen Walker

Ever been working on an Avada form, set the field to required, and then you start seeing spots? No, you’re not seeing things. The Avada team wrapped the required identifier (asterisk *) with an abbreviation(<abbr>) element to provide screen readers with a readable element. Unfortunately, they didn’t take into account that many browsers have a text-decoration dotted underline as the default styling of the abbreviation. The simple fix is just to override the styling. I submitted a feature request to do away with this because the form is already accessible using the required and aria-required attributes.

abbr.fusion-form-element-required {
    text-decoration: none;
}

Originally published on September 5, 2022

share the article

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Remove RankMath Annoyance

    If you are a user of RankMath, I suspect you have encountered the annoying notification when you delete an item that is prompting you to set a redirect after you have deleted content. In and of itself, it is actually quite useful, but it doesn’t go away if you close […]

  • List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

  • Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

  • Add Images to RSS

    By default, Avada does not include images in the RSS feed. This little bit of code in the function.php or your code snippet manager will take care of that.

  • Video Sizes

    Just a quick list of video sizes that can be used in the YouTube element to maintain the 16:9 aspect ratio.

  • Unsetting Fusion Gutenberg

    Trying to use Gutenberg can be a challenge due to some decisions the Avada team made a few releases ago.