Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #1307871

    I am trying to make my Enfold site ADA Section 508 Compliant. The issue I keep coming across is the following error within my “accessibility checkers” is the “Redundant title text” alert within Icon Boxes.

    What It Means is that the Title attribute text is the same as text or alternative text.

    Is there a workaround for this? Or, perhaps a field within Icon Box advanced settings that will allow for the placement of an “Alt” tag? (Actually, it is not only icon boxes that do not have separate title and alt content.)

    Here’s an example of affected code:
    <a href="http://broken-no-more.org/resources/failed-drug-war/" title="Change">Change</a>

    If you would like to replicate the problem, see private below.

    Thank you.

    #1307954

    Hey laptophobo,

    Thank you for the inquiry.

    You may need to modify the iconbox shortcode file directly. You will find the title attribute or markup around line 580:

    $linktitle = $title;
    
    				switch( $linkelement )
    				{
    					case 'both':
    						if( $title ) 
    						{
    							$title = "<a href='{$link}' title='" . esc_attr( $linktitle ) . "' $blank>$linktitle</a>";
    						}
    
    						$display_char_wrapper['start'] = "a href='{$link}' title='"  . esc_attr($linktitle) . "' {$blank}";
    						$display_char_wrapper['end'] = 'a';
    						break;
    					case 'only_icon':
    						$display_char_wrapper['start'] = "a href='{$link}' title='" . esc_attr($linktitle) . "' {$blank}";
    						$display_char_wrapper['end'] = 'a';
    						break;
    					default:
    						if( $title ) 
    						{
    							$title = "<a href='{$link}' title='" . esc_attr( $linktitle ) . "' {$blank} >$linktitle</a>";
    						}
    
    						$display_char_wrapper['start'] = 'div';
    						$display_char_wrapper['end'] = 'div';
    						break;
    				}
    

    Best regards,
    Ismael

    #1308048

    Hi Ismael,

    A couple of questions: Where will I find this file that you suggest that I edit?
    And, if I change that file, won’t that change just go away after the next Enfold update?

    #1308052

    hm ?
    But isn’t that a strange take on ADA compliance? A reader is supposed to read the title attribute of the link, after all. So it makes a lot of sense for them to match, doesn’t it?
    _________________

    you find the file in : enfold/config-templatebuilder/avia-shortcodes/iconbox/iconbox.php

    Edit: you can have an edited copy of that file in a child-theme.
    Just create a folder in your child-themes folder : shortcodes and put in your child-theme functions.php:

    function avia_include_shortcode_template($paths){
      $template_url = get_stylesheet_directory();
          array_unshift($paths, $template_url.'/shortcodes/');
      return $paths;
    }
    add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
    #1308055

    for example you can change those lines to :

    if( ! empty( $link ) )
    {
    	$linktitle = $title;
    
    	switch( $linkelement )
    	{
    		case 'both':
    			if( $title ) 
    			{
    				$title = "<a href='{$link}' title='Link to " . esc_attr( $linktitle ) . "' $blank>$linktitle</a>";
    			}
    			
    			$display_char_wrapper['start'] = "a href='{$link}' title='Iconlink to "  . esc_attr($linktitle) . "' {$blank}";
    			$display_char_wrapper['end'] = 'a';
    			break;
    		case 'only_icon':
    			$display_char_wrapper['start'] = "a href='{$link}' title='Iconlink to " . esc_attr($linktitle) . "' {$blank}";
    			$display_char_wrapper['end'] = 'a';
    			break;
    		default:
    			if( $title ) 
    			{
    				$title = "<a href='{$link}' title='Link to " . esc_attr( $linktitle ) . "' {$blank} >$linktitle</a>";
    			}
    			
    			$display_char_wrapper['start'] = 'div';
    			$display_char_wrapper['end'] = 'div';
    			break;
    	}
    }

    see results here on those two iconboxes on the right: https://webers-testseite.de/tagood/

    #1308056

    PS : on Iconlist the same – lines 892ff
    enfold/config-templatebuilder/avia-shortcodes/iconlist/iconlist.php

    _________

    btw: an anchor link does not have on default an alt attribute: https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element

    href — Address of the hyperlink
    target — Browsing context for hyperlink navigation
    download — Whether to download the resource instead of navigating to it, and its filename if so
    ping — URLs to ping
    rel — Relationship between the location in the document containing the hyperlink and the destination resource
    hreflang — Language of the linked resource
    type — Hint for the type of the referenced resource
    referrerpolicy — Referrer policy for fetches initiated by the element

    #1308057

    Guenni,

    To answer your question about having a “title,” it is preferred. But it would then need to be accompanied by an “alt” attribute that has different wording than either the Title or the active text. Right now the code looks like this:

    <a href="http://broken-no-more.org/resources/failed-drug-war/" title="Change">Change</a>

    What the ADA compliance seems to want is that the “title” be different than the active text “Change”. Or, remove the “title” tag. What you have posted for me looks like it may work. I will try it and reply back.

    FYI: Here is what the compliance statement says about the above issue:
    Redundant title text
    What It Means:
    Title attribute text is the same as text or alternative text.
    Why It Matters
    The title attribute value is used to provide advisory information. It typically appears when the users hovers the mouse over an element. The advisory information presented should not be identical to or very similar to the element text or alternative text.
    What To Do
    In most cases the title attribute can be removed, otherwise modify it to provide advisory, but not redundant information. Note that the title text may or may not be read by a screen reader and is typically inaccessible to sighted keyboard users.

    • This reply was modified 3 years, 5 months ago by laptophobo.
    #1308058

    with the changes above it will be:
    ( click to enlarge )

    #1308060

    Guenni,

    Well, no luck on getting your code to work. Here is what I did:

    I added the following to my child theme function.php file:

    function avia_include_shortcode_template($paths){
      $template_url = get_stylesheet_directory();
          array_unshift($paths, $template_url.'/shortcodes/');
      return $paths;
    }
    add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

    I then made a copy of iconbox.php file and placed it in enfold-child>config-templatebuilder>avia-shortcodes>iconbox

    in that file, I replaced the content between lines 576 to 605 (which looked like your example) and replaced it with the content you provided.

    But no change in the results.

    • This reply was modified 3 years, 5 months ago by laptophobo.
    #1308062

    on Image ALB
    Edit : you changed your Content above so this post is obsolete

    • This reply was modified 3 years, 5 months ago by Guenni007.
    #1308227

    by the way: Link

    I then made a copy of iconbox.php file and placed it in enfold-child>config-templatebuilder>avia-shortcodes>iconbox

    on my post:

    Just create a folder in your child-themes folder : shortcodes

    as you can see in the code itself : $template_url.'/shortcodes/

    so insert the copy of iconbox.php to enfold-child/shortcodes

    #1308296

    Guenni,
    Thank you very much for that fix. I got it to work.
    For those, like me, that need extra hand-holding to get fixes to work, here are the steps I took:

    • Open the functions.php file in enfold-child
    • Add the following code:

    function avia_include_shortcode_template($paths){
      $template_url = get_stylesheet_directory();
          array_unshift($paths, $template_url.'/shortcodes/');
      return $paths;
    }
    add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

    • In enfold-child, create a new folder: “shortcodes” (enfold-child/shortcodes)
    • Copy the file “iconbox.php” within: enfold>config-templatebuilder>avia-shortcodes>iconbox – and add it into enfold-child>shortcodes.
    • Open the iconbox.php file and at (or around) line 576 to 605 is the content that will be replaced with the following (it will look similar to the replacement code):

    if( ! empty( $link ) )
    {
    	$linktitle = $title;
    
    	switch( $linkelement )
    	{
    		case 'both':
    			if( $title ) 
    			{
    				$title = "<a href='{$link}' title='Link to " . esc_attr( $linktitle ) . "' $blank>$linktitle</a>";
    			}
    			
    			$display_char_wrapper['start'] = "a href='{$link}' title='Iconlink to "  . esc_attr($linktitle) . "' {$blank}";
    			$display_char_wrapper['end'] = 'a';
    			break;
    		case 'only_icon':
    			$display_char_wrapper['start'] = "a href='{$link}' title='Iconlink to " . esc_attr($linktitle) . "' {$blank}";
    			$display_char_wrapper['end'] = 'a';
    			break;
    		default:
    			if( $title ) 
    			{
    				$title = "<a href='{$link}' title='Link to " . esc_attr( $linktitle ) . "' {$blank} >$linktitle</a>";
    			}
    			
    			$display_char_wrapper['start'] = 'div';
    			$display_char_wrapper['end'] = 'div';
    			break;
    	}
    }

    • Make sure to clear the cache and then check to see the change.

    • This reply was modified 3 years, 5 months ago by laptophobo.
    #1308302

    One other related issue. It is the same problem as “icon box” , but for “icon list”. Here too “title” is the same as the text.

    Should I open a new thread for this?

    #1308355

    i think no : Link

    PS : on Iconlist the same – lines 892ff
    enfold/config-templatebuilder/avia-shortcodes/iconlist/iconlist.php

    #1308454

    Hi Guenni,

    Thanks for the additional info. I believe that I have made the changes correctly for the above edited content to work within iconlist as well as iconbox.
    I copied “iconlist.php” (at: enfold/config-templatebuilder/avia-shortcodes/iconlist/iconlist.php) and then pasted it into enfold-child>shortcodes.
    I then edited the iconlist.php file (Between lines 892 to 922, there were 4 instances of: title=”’ that I change to: title=’Link to” These 4 instances were on the following lines: 901, 904, 908, 914.

    I tested and it appears to be okay.

    Thanks again for your help. I’ll try not to come back to you so often.

    • This reply was modified 3 years, 5 months ago by laptophobo.
    #1308507

    You are welcome.

    #1308563

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

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