Support » Plugin: Author Avatars List » Empty title creates WCAG accessibility error – “empty header”

  • Hi Paul: Thanks for keeping a great plugin going. I don’t use the title tag of the plugin. I opt for a more customized heading using a text widget. However, this results in an accessibility error under WCAG – empty header. The error isn’t resolved using display:none; in the widget title element. How can I make the empty header disappear for screenreaders? It would be great of your plugin had an option to turn off the title element / field. Thanks

    • This topic was modified 1 month, 3 weeks ago by  wadams92101.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Paul Bearne

    (@pbearne)

    Hi

    I would love to fix this but I am not sure what we need to do

    Can you provide a copy of the WCAG report so I can see if can understand the problem

    Paul

    Hi Paul, I can send you a screenshot if you provide me a way to upload it to you. But basically, it just says:

    Documentation

    Errors
    Empty heading
    What It Means
    A heading contains no content.
    Why It Matters
    Some users, especially keyboard and screen reader users, often navigate by heading elements. An empty heading will present no information and may introduce confusion.
    How to Fix It
    Ensure that all headings contain informative content.
    The Algorithm… in English
    A heading element is present that contains no text (or only spaces) and no images with alternative text.
    Standards and Guidelines
    Section 508 (o)
    1.3.1 Info and Relationships (Level A)
    2.4.1 Bypass Blocks (Level A)
    2.4.6 Headings and Labels (Level AA)
    Icon index

    Since I used some custom html and a link in heading above the widget (using a text widget), I just want to leave the title field for the AA widget empty. But empty headers are an error for WCAG compliance. So if there was a way to turn off the title field, that would be perfect.

    I’ve hacked it with display: none; and for some reason it still shows up as an error in the error accumulator on the side of the page but it doesn’t show up on the page itself, like it did before I hacked the CSS.

    On another WCAG issue, the alt text for the user avatars is showing the users’ names. This is triggering another WCAG alert for having alt text that is identical to adjacent text (the user names). I’d like to add the word “avatar” to the alt text with user name. I found this article with a code hack: https://wireflare.com/blog/alt-title-tags-gravatars-wordpress/ It didn’t work for me. Is the alt text for the user avatars/ images in the Author List widget generated by the plugin or is the plugin passing it through from somewhere else?

    This is what the firebug / chrome inspect is showing for the alt text:

    <img src="/avatars/johndoe-av.jpg" class="avatar avatar-90 avatar-default" height="90" width="90" style="width: 90px; height: 90px;" title="John Doe" alt="John Doe">

    I’d like the alt text to read alt="John Doe Avatar" or alt="Avatar for John Doe"

    OK, progress:

    I have three things defining avatar alt text: The Add Local Avatar plugin, the Author Avatars List plugin, and the Genesis child theme.
    I modified the Add Local Avatar plugin php file as follows (for {$alt} added)

    // WAA Mod to get name alt text.
    	$alt = get_the_author_meta( 'display_name' );
    	$avatar = "<img src='{$src}' class='{$class} avatar-{$size} avatar-default' height='{$size}' width='{$size}' style='width: {$size}px; height: {$size}px;' alt='avatar for {$alt}'/>";

    It worked in the Featured Posts widget but made all the Authors List Avatars change to “avatar for UrbDeZine”

    I did the mod in the functions.php file from the article previously cited.

    function replace_content($text)
    {
    $alt = get_the_author_meta( 'display_name' );
    $text = str_replace('alt=\'\'', 'alt=\'Avatar for '.$alt.'\' title=\'Gravatar for '.$alt.'\'',$text);
    return $text;
    }
    add_filter('get_avatar','replace_content');

    It worked for my avatar for my bio at the bottom of articles – figures because that is a Genesis themes feature.

    But now all the avatars in the AA-List plugin have identical alt text without the user name.

    What is the hack for the php file for Authors Avatar List plugin to make the alt text alt="Avatar for username" with username being the variable that identifies the correct name of user associated with the avatar?

    • This reply was modified 1 month, 2 weeks ago by  wadams92101.
    • This reply was modified 1 month, 2 weeks ago by  wadams92101.
    • This reply was modified 1 month, 2 weeks ago by  wadams92101.
    Plugin Author Paul Bearne

    (@pbearne)

    I see your problem

    My code just calls get_avatar() to get the image I had no control over what it returns

    So I have added some filters on the HTML output
    you can see the changes here
    https://github.com/pbearne/wp-author-avatars/commit/d177d5f73b6e7debcc4a86792a289e920bca159e

    to the Dev version on github
    https://github.com/pbearne/wp-author-avatars
    download link
    https://github.com/pbearne/wp-author-avatars/archive/master.zip

    		/**
    		 * filter the avatar
    		 *
    		 * @param string $avatar The HTML returned from get_avatar() etc.
    		 * @param object $user The user object
    		 */
    		$avatar = apply_filters( 'aa_user_avatar_html', $avatar, $user );

    You can look at running your replace_content code on this filter as

    
    function replace_content($avatar, $user)
    {
    $alt = $user->user_nicename;
    $avatar= str_replace('alt=\'\'', 'alt=\'Avatar for '.$alt.'\' title=\'Gravatar for '.$alt.'\'',$avatar);
    return $avatar;
    }
    add_filter('aa_user_avatar_html','replace_content', 10, 3);
    
    

    $user is the full user object so you maybe able to relace the get_the_author_meta( ‘display_name’, $user->user_id ) with as abouve

    I have added some more filters

    
    				/**
    				 * filter the avatar alt
    				 *
    				 * @param string $avatar The HTML returned from get_avatar() etc.
    				 * @param object $user The user object
    				 */
    				$alt = apply_filters( 'aa_user_avatar_alt', $alt, $user );
    
    
    			/**
    				 * filter the avatar title
    				 *
    				 * @param string $title users nicename.
    				 * @param object $user The user object
    				 */
    				$title = apply_filters( 'aa_user_avatar_alt', $title, $user );
    				$avatar = preg_replace( '@ ?\/>@', ' title="' . $title . '" />', $avatar );
    

    There is also a filter the span

    
    /**
    * filter the span that holds the avatar
    *
    * @param string $html The sprintf template.
    * @param string $title The value passed to the title attr in span.
    * @param string $avatar The HTML returned from get_avatar() etc.
    * @param object $user The user object
    */
    $html .= sprintf( apply_filters( 'aa_user_avatar_template', '<span class="avatar" title="%s">%s</span>', $title, $avatar, $user ), $title, $avatar );
    

    Hope this helps

    Please let know if this fixes it and I will release this as an update

    Paul

    • This reply was modified 1 month, 2 weeks ago by  Paul Bearne.
    Plugin Author Paul Bearne

    (@pbearne)

    my full post was held for moderation

    Added some filters on the HTML output
    you can see the changes here
    https://github.com/pbearne/wp-author-avatars/commit/d177d5f73b6e7debcc4a86792a289e920bca159e

    Thanks Paul: I put the code in the plugin UserList.clas.php. I’m still getting the “avatar for UrbDeZine” alt text for everybodies’ avatar. I sent you a screenshot via email. As noted above, the hacks to the child theme’s functions.php and the Add Local Avatar plugin’s avatars.php file fixed the alt text for avatars that display outside of your plugin. However, the avatars in the Author Avatars List plugin now displays the one-size-fits-all alt text.

    Hi Paul, Just checking in. My coding ability is very limited, so I just want to make sure I followed your instructions correctly:
    1) Uploaded and activated your beta wp-author-avatar-master zip
    2) I used your replace_content code instead of what I had

    I’m still getting the same user-id alt text for all avatars. Did I miss something?

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