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 5 years, 11 months ago by wadams92101.
The page I need help with: [log in to see the link]
-
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 indexSince 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"
oralt="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 5 years, 11 months ago by wadams92101.
- This reply was modified 5 years, 11 months ago by wadams92101.
- This reply was modified 5 years, 11 months ago by wadams92101.
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/d177d5f73b6e7debcc4a86792a289e920bca159eto 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 5 years, 11 months ago by Paul Bearne.
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/d177d5f73b6e7debcc4a86792a289e920bca159eThanks 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 hadI’m still getting the same user-id alt text for all avatars. Did I miss something?
HI ,Suggest me with solution of same sort of WCAG 2.0 errors on oue website https://mytriptools.com
Document has invalid language code.
[Line 1, Col 1] <html> <head> <meta name=”robots” content=”noindex,nofollow”> <script src=”/_Incapsula_Resource?S …
Add a valid 2 letter or 3 letter language code as defined in the ISO 639 specification to the HTML ‘lang’ attribute. For XHTML, both ‘lang’ and ‘xml:lang’ must be set.
Document language not identified.
[Line 1, Col 1] <html> <head> <meta name=”robots” content=”noindex,nofollow”> <script src=”/_Incapsula_Resource?S …
For HTML documents add the lang attribute and a valid ISO-639-1 two letter language code to the opening HTML element. For XHTML documents add both the lang and xmllang attributes with a valid ISO-639-1 two letter language code to the opening HTML element.
- The topic ‘Empty title creates WCAG accessibility error – “empty header”’ is closed to new replies.