Informative SVG
We use SVG to signal to users specific content. For example, Important information, focus question, an (short) assignment, general information. Since these SVG's aren't purely decorative we want to make them accessible to screen reader users also. According to an article in Smashing Magazin about creating accessible SVG's, the following pattern was most effective: PATTERN #8: <svg> + role="img" + <title> + aria-labelledby="[ID]"
This works perfectly in my production environment, but In Brightspace the <title> attribute is stripped from the HTML mark-up (probably for security reasons), so we cannot use this pattern.
Does anyone have another suggestion how to make informative SVG's accessible to screen reader users in the Brightspace LMS? For the moment we use the aria-label attribute, as this works. But I reckon it's a suboptimal solution.
Kind regards,
Arman
Comments
-
Interesting that the title gets stripped in Brightspace, because it doesn't do that on <img> tags.
I took a deep dive on SVGs last summer and would like to come back to this discussion when my work is less demanding, but in the meantime, I thought I'd offer two of the most compelling articles I came across last summer.
My understanding is that "it depends" on your use case as to what the best pattern should be when it comes to SVGs.
This first article from css-tricks was so helpful in understanding the mechanics of accessible SVG scenarios:The other article that I found compelling was a sort of survey of techniques and their effectiveness in different browsers - another dense read:
Hope that helps! -
Dear Andrea,
Thanks a lot for your reply. The articles you recommnded indeed prefer to use the <title> tag for making the SVG icons accessible for screen reader users. Unfortunately, this tag is stripped from the final HTML markup, making it impossible to implement the preferred strategies described in your recommended articles.
Still thanks a lot and I hope to see you back here, once your work is less demanding :)
Kind regards,
Arman
-
Hi Arman. I might flag it as an issue for D2L to reconsider since title tags on iframes are not stripped in my experience, having fixed a lot of YouTube code. After all the issues about "longDesc," I just started putting any long image description into a display:none toggle with a focusable, clickable link to toggle open the div to read the description. That solution is not SVG specific; it works for any image. That solution may have made me lazy, so I may not have kept up with all the nuances of SVG coding. My solution is preferred for me because it makes the description available to anyone (unlike most in the history of image replacement techniques), not just AT-only users. As the original Smashing article indicated. So, it may capture other communities like those with cognitive disabilities who prefer to read an informed description. It's simply a button with "aria-expanded" and "aria-controls" on it and appears to work across screen readers. I've meant to revisit it during the last five years because the div is collapsed by default and opened with JS. It should be expanded by default and collapsed with JS on page load (to capture some freak who has JS turned off in their browser, but D2L requires JS to be on, so I never bothered with that code polish). I also use the same code pedagogically whenever I need a "Think and Click" where I want students to think about some question before reading an explanation. The other elegance to the solution is that it doesn't rely on a separate file, whether HTML or some document that also needs to be updated. It's a single-page solution. It's not SVG-specific, but that's I would handle it.
-
And I have still have issues with WCAG and Deque on their haphazard nulling of the alt attribute. Users with a combination of a screen magnifier and a screen reader may benefit from a short alt description. But this is why #A11Y is both an art and a technique. Do you favour the users who want to gather the aesthetics of a page or those who want just the information? When I started every little rounded edge or curly-cue was an image. Now, we can do that with CSS. I feel WCAG has strayed too far from that "purely decorative" ethos. When in doubt, just stick a simple alt description on it. No harm in that.
-
Dear @Peter.D.346
Thanks a lot for your elaborate reply. Indeed the <title> tag is not stripped from <iframes>, but unfortunately from <svg>. You can also fill an svg with JS code, so I guess the stripping of the <title> in SVG is for security reasons. Thus it's very specific for SVG's. It is one of the quirks of D2L Brightspace.
Kind regards,
Arman
-
Yeah. My suggestion had nothing to do with the image type. It works across all images. It's superior to long description because it doesn't point to separate HTML file and is available to users not using a screen reader. longDesc should be deprecated. This code contains the longer description in a hidden block. You will need to include a right and down arrow. This code is for a "Think and Click"; just change the formatting and it becomes a "long description." Accurate alt text will allow a screen-reader user to decide if they want to hear the full description. Another plus of this code: it doesn't force screen-reader users to listen to an overly verbose alt text. This code should avoid conflicts with buttons in the D2L HTML template. It may not work properly on Chromium browsers with a mouse. I will update with a fix, but I think this is my latest code that works on Chromium. Let me know if it doesn't, and I will find the updated code. To reiterate, it doesn't matter the image type. You can be as verbose as you want in your image description. It is included on a single HTML file. The ARIA call alerts a screen-reader user to the expanded DIV and they can down-arrow into the description if they choose. I had to specify some CSS to not interfere with D2L buttons in their HTML template. Again, if it doesn't work properly in Chrome et al., I can update the latest code. I'd have to look it up.
-
And that code, even with the Chromium fix, may be wildly improved upon. If anyone has better code, feel free to share it. My solution is based on the old image-replacement techniques (https://css-tricks.com/the-image-replacement-museum/), which has a long and storied history going back 20 years.
