-
AuthorPosts
-
July 31, 2017 at 3:52 pm #832196
I would like to use an icon element as a link to another page. Currently, for accessibility, this turns into link with no text. Is there a way to add an aria-label field to the icon element so the aria-label is added to the
<a href>
tag? I can use shortcode, but that defeats the use of avia layout builder.<a href="http://www.google.com" aria-label="Visit Google"><span class="av_font_icon avia_animate_when_visible av-icon-style- av-no-color avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style=""><span class="av-icon-char" style="font-size:40px;line-height:40px;" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span></span></a>
- This topic was modified 7 years, 4 months ago by lssu.
August 1, 2017 at 9:31 am #832717Hey lssu,
Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:
– Link to your site
– WordPress Admin username / password
– FTP credentialsDon’t forget to select Set as private reply. This ensures your information is only visible to our staff.
Best regards,
John TorvikAugust 1, 2017 at 1:14 pm #832839This reply has been marked as private.August 6, 2017 at 6:25 am #834935Hi,
Thank you for the info.
Please turn on the custom css class field then add a unique class attribute to the button element. Add “visit-event-button” for example then use the following script in the functions.php file.
// add aria-label function ava_custom_script_mod(){ ?> <script> (function($){ function a() { $('.visit-event-button a').attr('aria-label', 'Visit Campus Life'); $('.other-button-1 a').attr('aria-label', 'Other Button 1'); $('.other-button-2 a').attr('aria-label', 'Other Button 2'); $('.other-button-3 a').attr('aria-label', 'Other Button 3'); } a(); })(jQuery); </script> <?php } add_action('wp_footer', 'ava_custom_script_mod');
Enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Best regards,
IsmaelAugust 7, 2017 at 7:15 pm #835558Thank you very much!
August 8, 2017 at 8:11 am #835733Hi,
Glad we could help. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardAugust 8, 2017 at 1:04 pm #835813Thanks, you can close it. I believe I have what I need.
August 8, 2017 at 5:24 pm #835923Great! For any other questions or issues, feel free to post them here on the forum and we will do our best to assist you.
For your information, you can also take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
We’d also appreciate it if you can take a moment to review our theme if you haven’t already. https://themeforest.net/downloads
Thank you for using Enfold.
Cheers!
Sarah -
AuthorPosts
- The topic ‘aria-label for icon elements that are used for links’ is closed to new replies.