Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 6, 2020 at 11:23 pm #1243793
    rhae

    Hi, I’m using an Icon Box on a page, with a manual link back to the front page of the site.
    The setting is to apply the link to the icon and the title. The link works on both as expected.

    1) When checking the site for web accessibility through wave.webaim.org, I get an error on the Icon Box, telling me that there’s an empty link in the icon. ‘Empty link – A link contains no text.’

    2) Also I get the Alert ‘Redundant link – Adjacent links go to the same URL.’ Which is in a way logical, since I’m linking from both the icon as the text next to it. That was supposed to be user friendly. I don’t want to get in trouble with the Web accessibility though.

    I can’t figure out what I did wrong. Is it me, the test software or is it something that needs to be changed in the code of the theme?
    I hope you can help me with it. That same Icon Box is used on about 45 pages now (using a page template) and we’re going live on Tuesday.

    Best regards, Haiko.

    • This topic was modified 4 years, 2 months ago by rhae.
    September 7, 2020 at 10:01 am #1243879
    Nikko

    Hey rhae,

    Thanks for giving us admin access.
    I have modified the page you gave (Iconbox > Advanced > Link Settings > Apply link to icon from Yes, apply link to icon and title to No, apply link to the title).
    This fixes the error in https://wave.webaim.org/ though it removes the link from the icon.
    Since icons are using pseudo-element to show it basically has no text when it is transformed into a link.

    Best regards,
    Nikko

    September 7, 2020 at 10:19 am #1243889
    rhae

    Hi Nikko,

    thanks for looking into it.
    The solution works, but is not that I would like to do, since I do want the icon to be clickable.
    I would try to click on it myself.
    Is there no other way to fix this?

    Best regards, Haiko.

    September 7, 2020 at 10:36 am #1243893
    Nikko

    Hi Haiko,

    The workaround that I could think of right now is using a button and make it visually look like your current iconbox.
    Please try to do the following steps:
    – Use a button, add a label, link and the icon you used.
    – In Styling (tab), set Button Position to Align Left
    – Change Button Color to Custom Color
    – Set Custom Font Color to a black color (or anything)
    – In Advanced (tab) > Developer Settings > Custom CSS Class, put my-iconbox and save
    – Go to Enfold > General Styling > Quick CSS, then add this CSS Code:

    .my-iconbox a.avia-button {
    background-color: transparent !important;
}

    Let us know if this helps.

    Best regards,
    Nikko

    September 7, 2020 at 10:38 am #1243897
    rhae

    Hi Nikko,

    sounds good, I’ll give it a try. Thanks for the suggestion and explanation.

    Best regards, Haiko.

    September 7, 2020 at 11:12 am #1243905
    Nikko

    Hi Haiko,

    You’re welcome :)
    Just let us know your feedback, if you’ll need further assistance just post back here.

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.