U4-10207 - WCAG-Compatibility - 1.1.1 Non-text Content

Created by Jeffrey Schoemaker 31 Jul 2017, 09:28:05 Updated by JorgenVerweij 01 Aug 2018, 06:42:44

In order to make Umbraco WCAG-compatible this is one of the issues that should be solved. As presented in this blog-article (https://www.perplex.nl/en/blog/2017/making-umbraco-atag-and-wcag-compatible/) the first part of the solution is to annotate all icons in the content tree.

The fix would be:

Type: PageContact

The current code is:


I think the solution could be pretty straight forward.



James South 09 Nov 2017, 12:31:24

Adding an extra span adds nothing contextually to the screen reader since the css driven background image provides no context.

A much more complete fix would be to drop background images and use SVG with appropriate role title and description semantics


Inline SVG with appropriate attribution:

<svg role="img" aria-labelledby="home-title "home-description">

Home The home page document type ... {html}

Inline SVG using an icon font (probably simpler to generate):

Home Type {html}

See the following link for more information.


Jon Humphrey 09 Nov 2017, 13:04:55

Thanks James! I like this approach more too however it doesn’t resolve the issue Sebastiaan and I found where the actual doctypealias is not in the model so we can’t apply it to any element until that changes?


James South 10 Nov 2017, 01:34:18

No worries, Add that info and implementing the rest shouldn't be too difficult I would hope?

JorgenVerweij 10 Nov 2017, 07:59:19

Great idea to change it to a more accessible icon-system. The disadvantage of this solution (for now) is that offering ARIA as the only text alternative is not yet sufficient according to Dutch Accessibility Guidelines. In addition, the impact of this fix is quite big because Umbraco's entire icon-system needs to be changed. By adding the hidden span like Jeffrey suggest, users with text-to-speech software are provided with the additional information they need to understand the type of element in the content-tree.

Jon Humphrey 10 Nov 2017, 10:04:43

@JorgenVerweij.1 what's the difference between adding a new span element inside the anchor tag, as you've done, or adding the title and descriptions directly to the SVG? I'm not quite following this but am eager to understand!

JorgenVerweij 10 Nov 2017, 10:49:24

@jon@randomprecision.co.uk the effect of both solutions is the same, you add textual context to visual items. But only relying on "new" technologies like ARIA and SVG descriptions is not sufficient according to Dutch Accessibility Guidelines. Many users with text-to-speech software and a braille terminal use older versions (because it's only compensated by your health insurance every 5-6-7 years) without the support for ARIA.

And the impact of creating a whole new icon-system is much bigger i think?

James South 11 Nov 2017, 05:40:16

@JorgenVerweij.1 Do you have a link to an English language version of those guidelines? SVG usage in the manner I described manner is the W3C recommended approach and support is good.

If we're gonna fix something we should do it properly or not at all.

JorgenVerweij 14 Nov 2017, 10:02:00

@JimbobSquarePants, i can't find a English version of these guidlines but here is a comment (on Success Criterion 4.1.2) from an accessibility-audit performed a few weeks ago for one of our clients. "The aria-expanded attribute is used. ARIA is not yet supported by all assistive technologies, so you can not rely on this. This occurs on all pages in the header."

I'll try to contact them this week with this question and let you know their answer...

James South 16 Nov 2017, 22:52:10

Thanks @JorgenVerweij.1 I'm not convinced by the interpretation delivered by that company to you on the report you received.

{{aria-labelledby}} is listed specifically under the title Sufficient Techniques within the Success Criterion 4.12 documentation.


Here's SVG specific support https://www.w3.org/TR/SVG2/access.html

Here's a blog post from the Paciello Group on aria support from 2013. The only limiting factor at that point was Jaws on Chrome and Firefox. https://developer.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/

In the 4 years since support has come a long way and is very good. https://thepaciellogroup.github.io/VFO-standards-support/aria.html

MathJax determined it was good enough also (they use {{aria-label}} rather than {{aria-labelledby}}) and they heavily depend on this technique. https://github.com/mathjax/MathJax/issues/1192

That aside, the original technique combining background image + an extra span is insufficient due to the lack of meaningful context. By replacing background images with inline sprited SVG you not only add context (equivalent of the label -> input relationship in forms) but also improve the presentational flexibility of the iconography due to inherited fill support. (We could potentially have unlimited color schemes)

I'll freely admit that this is a hell of a lot of work but something that I strongly believe should be included in V8.

JorgenVerweij 24 Nov 2017, 11:55:13

@JimbobSquarePants This company one of the 3 institutions that performes audits for the "drempelvrij" qualitymark, the Dutch quality brand for accessible websites.The ARIA-is-not-yet-supported-not-only-rely-on-it rule is now part of their proces. They will renew this process next year, combined with the new WCAG 2.1 guidlines and I hope/think ARIA-support will be part of it from then. Also I think that renewing the Umbraco icon system is a very good thing to do (and a lot of work)!

Jon Humphrey 31 Jul 2018, 13:18:09

@JorgenVerweij.1 has the Dutch guidelines been updated this year as expected or are we still facing the backwards compatibility issue as before?

JorgenVerweij 01 Aug 2018, 06:42:44

@jon@randomprecision.co.uk Still no update around the process for testing accessible websites for the "drempelvrij" qualitymark. I hope this will happen in the next few months.

Priority: Normal

Type: Usability Problem

State: Submitted


Difficulty: Very Easy


Backwards Compatible: True

Fix Submitted:

Affected versions: 7.6.0

Due in version:


Story Points: