Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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 6 years, 11 months ago by lssu.
    #832717

    Hey 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 credentials

    Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

    Best regards,
    John Torvik

    #832839
    This reply has been marked as private.
    #834935

    Hi,

    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,
    Ismael

    #835558

    Thank you very much!

    #835733

    Hi,

    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,
    Rikard

    #835813

    Thanks, you can close it. I believe I have what I need.

    #835923

    Great! 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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘aria-label for icon elements that are used for links’ is closed to new replies.