-
AuthorPosts
-
January 21, 2025 at 5:01 pm #1475502
Hi Enfold team.
Hopefully you had a good start to 2025.To test how I can achieve digital accessibility on my site, i.e. remove the barriers, I am currently trying out WAVE.
I have embedded an av_font_icon on my Enfold site and provided it with a link (a mailto:-link to my email address). Wave finds this problem with my av_font_icon:“Empty link
A link contains no text.”I don’t even know what kind of text should be there at the moment (that will be my next research step), but given the special syntax of the av_font_icons, I do not have an idea how and where I have to insert something like text or whatever. Or – asked you in another way: which element can I integrate into the av-font-icon-syntax to solve my “no-text-issue”?
<p style=”text-align: center;”>[av_font_icon icon='ue805' font='entypo-fontello' style='border' caption='Questions on all topics' link='mailto: (Email address hidden if logged out) ' linktarget='' size='70px' position='center' animation='' color='white' sonar_effect_effect='1' sonar_effect_color='white' sonar_effect_duration='1' sonar_effect_scale='1.5' sonar_effect_opac='0.2' animation=''id='' custom_class='' av_uid='av-5rzj40' admin_preview_bg=''][/av_font_icon]</p>
Can you give me a tip on what I need to do?
Best regards
GrobiJanuary 22, 2025 at 6:00 am #1475528Hey Grobi,
Thank you for the inquiry.
You might need to manually apply the link to the parent element instead of the icon, then add an invisible element with text (Mail):
Example:
<a href="mailto: (Email address hidden if logged out) " style=”text-align: center;”>[av_font_icon icon='ue805' font='entypo-fontello' style='border' caption='Questions on all topics' link='mailto: (Email address hidden if logged out) ' linktarget='' size='70px' position='center' animation='' color='white' sonar_effect_effect='1' sonar_effect_color='white' sonar_effect_duration='1' sonar_effect_scale='1.5' sonar_effect_opac='0.2' animation=''id='' custom_class='' av_uid='av-5rzj40' admin_preview_bg=''][/av_font_icon]<span class="hidden visually-hidden">Mail</span></a>
Best regards,
IsmaelJanuary 22, 2025 at 2:48 pm #1475556Hey Ismael, thank you very much for again answering so fast.
I’m afraid that this is not the solution yet, as you can see in the screenshot.
(or I didn’t do it correctly).Ismael, since I’ve already spent so much time cleaning up my site in terms of accessibility (as I already mentioned, only for testing purposes), I’ve decided to design this part of the site differently and do it without the link with the sonar-effect-icon (there are enough sonar effects there anyway…).
Thank you very much for the idea you had!I probably have to start a new thread for this – but I dare to ask the following: as you can see in the screenshot in the bottom right corner, Wave also throws up an error regarding the scroll-to-top link. Wave complains that the title (scroll-top) is the same as the text.
“Redundant title text
Title attribute text is the same as text or alternative text.”<span class=”avia_hidden_link_text”>
Scroll-top
</span>How (I mean, where) can I change the title of the scroll-to-top link in Enfold so that the error message no longer appears?
I would appreciate it if you could help me.Best regards
GrobiJanuary 23, 2025 at 5:53 am #1475618Hi,
Thank you for the update.
Regarding the scroll-top-top button, you can override the footer.php file in your child theme. Look for this line of code and adjust as necessary.
<a href='#top' title='<?php _e( 'Scroll to top', 'avia_framework' ); ?>' id='scroll-top-link' <?php echo av_icon_string( 'scrolltop' ); ?> tabindex='-1'><span class="avia_hidden_link_text"><?php _e( 'Scroll to top', 'avia_framework' ); ?></span></a>
Best regards,
Ismael -
AuthorPosts
- You must be logged in to reply to this topic.