SharePoint 2013 Fixing WCAG F38 Failure–Images without ALT tags–using a Control Adapter–Display Templates
The WCAG (Web Content Accessibility Guidelines) provide a baseline for accessibility standards so various tools, such as screen readers, can provide a reasonable experience for those with accessibility challenges.
With regards to images, the guideline provides that all Image tabs <img…> should probably (I say probably here for various reasons) have an ALT tag.
In the case of filler images, or “decorative” that isn’t representative of content, according to F38 here: They should have an empty ALT tag – thus ‘alt=””’.
The above reference specifically states for validation:
Tests
Procedure
For any img
element that is used for purely decorative content:
-
Check whether the element has no
role
attribute or has arole
attribute value that is not "presentation". -
Check whether the element has no
alt
attribute or has analt
attribute with a value that is not null.
Expected Results
-
If step #1 is true and if step #2 is true, this failure condition applies and content fails the Success Criterion.
How this Applies to SharePoint 2013
In SharePoint 2013, if using Display Templates, the generation of the master page is done by the Design Manager “parts”.
Inside of HTML version of the master pages, you will see the following:
<body> <!--SPM:<SharePoint:ImageLink runat="server" />-->
This will translate to just using the ImageLink SharePoint Web Control, and will emit the following:
<div id="imgPrefetch" style="display:none"> <img src="http://blogs.msdn.com/_layouts/15/images/favicon.ico?rev=23" /> <img src="http://blogs.msdn.com/_layouts/15/images/spcommon.png?rev=23" /> <img src="http://blogs.msdn.com/_layouts/15/images/spcommon.png?rev=23" /> <img src="http://blogs.msdn.com/_layouts/15/images/siteIcon.png?rev=23" />
So, we need to “add” an alt=”” tag to this “block” of HTML.
To do this, we can utilize a ControlAdapter – which is a Web Forms based concept, that allows interception at Render time for the control. In the past, ControlAdapters were used in SharePoint 2007 to provide all the rewriting of HTML Tables to more CSS friendly versions – ultimately at the time to help with the WCAG needs.
ControlAdapter
The main part of the control adapter to do this re-rendering is within the Render statement. Below are the primary methods that will do this rendering and fixup of the IMG tags:
namespace ImageLinkControlAdapter.Code { public class ImageLinkAdapter : ControlAdapter { protected override void Render(System.Web.UI.HtmlTextWriter writer) { /// First we get the control's planned HTML that is emmitted... using (StringWriter baseStringWriter = new StringWriter()) using (HtmlTextWriter baseWriter = new HtmlTextWriter(baseStringWriter)) { base.Render(baseWriter); baseWriter.Flush(); baseWriter.Close(); /// Now we have an HTML element... string baseHtml = baseStringWriter.ToString(); /// now fixit up... writer.Write(RebuildImgTag(baseHtml)); } }internal string RebuildImgTag(string existingTagHtml) { var pattern = @"<img\s[^>]*>"; var rv = Regex.Replace(existingTagHtml, pattern, this.InsertAlt); return rv; } internal string InsertAlt(Match match) { return this.InsertAlt(match.ToString()); } internal string InsertAlt(string existingTag) { if (!existingTag.StartsWith("<img", StringComparison.InvariantCultureIgnoreCase)) return existingTag; if (existingTag.Contains("alt=", StringComparison.InvariantCultureIgnoreCase)) return existingTag; var insertPoint = existingTag.IndexOf("/>"); var rv = existingTag.Insert(insertPoint, "alt=\"\""); return rv; } } internal static class StringExtensions { public static bool Contains(this string source, string toCheck, StringComparison comp) { return source.IndexOf(toCheck, comp) >= 0; } }</pre></div>
Finally, the full Visual Studio 2013 Solution and source is located here:
https://github.com/cicorias/SharePoint-ImageLink-WCAG-Control-Adapter
As a bonus, there’s a Feature Receiver that will deploy the *.browser file to the Web Application’s App_Browsers directory as well.
Links
http://www.w3.org/WAI/intro/wcag
https://github.com/cicorias/SharePoint-ImageLink-WCAG-Control-Adapter