🗣️ New rule to the jsx-a11y ruleset

[ematipico]

For accessibility purpose, images should have a title, svg also. The suggested way to provide this is by adding a <title> straight after the svg element:

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in">
  <g>
    <title>Company sales by region</title>
    <desc>
      This is a bar chart which shows 
      company sales by region.
    </desc>
  </g>
</svg>

I was wondering that maybe we could show and error if <title>is not there.
This rule should also handle the case aria-labelledby is used, because it's valid.

First case

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in" aria-labelledby="title">
  <g>
    <span id="title">Company sales by region</span>
  </g>
</svg>

Second case:

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in" aria-labelledby="titleId descriptionId">
  <g>
    <span id="titleId">Company sales by region</span>
    <span id="descriptionId">Company sales by region</span>
  </g>
</svg>

<desc> is not mandatory.

Source: https://www.w3.org/TR/SVG11/struct.html#DescriptionAndTitleElements
Article: https://css-tricks.com/accessible-svgs/

[bitpshr]

I think this is a great rule to add. Something like jsx-a11y/svg-has-title or something. Thanks for taking the time to research and propose this!

[botoxparty]

Hey,

So i've been implementing this and have a couple of questions...

Has anyone seen this implemented somewhere before? Would love to see the rules they've written for it.

aria-labelledby

<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" width="4in" height="3in" aria-labelledby="titleId descriptionId">
  <g>
    <span id="titleId">Company sales by region</span>
    <span id="descriptionId">Company sales by region</span>
  </g>
</svg>

I don't think it's valid to nest a <span> in there, I can only find examples where a <title> and <desc> are used with the id attribute to link to aria-labelledby.

In the css-tricks article you shared, we need to use aria-labelledby because of a bug in chrome and in Firefox (which appears to have been patched 2 months ago). It might not be necessary to include this.

multiple nested graphical elements

So in an SVG each child element can have it's own title and description. I've created a codepen here demonstrating that:

https://codepen.io/botoxparty/pen/bGpGLOB

And here's an example of how it can affect screen readers, note the text in the tool tips.

SVG img role

is there currently a rule that adds the img role to an SVG? Depending on what the SVG is representing the child elements may need a role="presentation" attribute on them

[ematipico]

In the css-tricks article you shared, we need to use aria-labelledby because of a bug in chrome and in Firefox (which appears to have been patched 2 months ago). It might not be necessary to include this.

This would make things much simpler to implement! If this was due to a browser bug, I'd say we can ignore this check. What do you think?

So in an SVG each child element can have it's own title and description.

If we play well the implementation of the rule, we won't need to do a nested check: if (svg[role=img] OR ellipse tag OR <any other tag that represents an image (e.g. path. etc.)>). I am not an expert when it comes to svg, so I am totally open to suggestions

is there currently a rule that adds the img role to an SVG? Depending on what the SVG is representing the child elements may need a role="presentation" attribute on them

We don't have such rule. How would the role affect the svg in this case?

[ljharb]

@ematipico it's be great if you filed an issue/PR on eslint-plugin-jsx-a11y as well, if you have a useful a11y rule.

[botoxparty]

This would make things much simpler to implement! If this was due to a browser bug, I'd say we can ignore this check. What do you think?

I would agree that if it's a browser bug we can ignore it.

If we play well the implementation of the rule, we won't need to do a nested check: if (svg[role=img] OR ellipse tag OR <any other tag that represents an image (e.g. path. etc.)>). I am not an expert when it comes to svg, so I am totally open to suggestions

I think we should follow the rules defined in the MDN docs for SVG title.

We could start with something like this:

if: Does SVG title? PASS
else if: Do all children have titles? PASS
else: FAIL

The docs also mention: Note: For backward compatibility with SVG 1.1, <title> elements should be the first child element of their parent.

For the sake of simplicity I think we should target SVG 2.0

We don't have such rule. How would the role affect the svg in this case?

Looking deeper into this on the MDN ARIA docs, defining role="img" would be optional.

Scenario 1:

You have an SVG of a logo that has multiple child elements, you would want to add role="img" so that the screen reader doesn't read each child element.

Scenario 2:

You have an SVG of a bar graph, you would not use role="img" so that the screen reader will read each bar.

I'm also not an expert on SVG or ARIA this is all just from my research and experience. I'll get started on the logic described above. Are you able to assign this issue to me?

[botoxparty]

@ematipico Check out this branch here: https://github.com/botoxparty/rome/tree/jsx-a11y-svgHasTitle

run ./rome check svg-test/test.tsx to see the results, comment/uncomment the code blocks as needed.

[ematipico]

For the sake of simplicity I think we should target SVG 2.0

Sounds good to me!

Looking deeper into this on the MDN ARIA docs, defining role="img" would be optional.

This could be material for another lint rule, where if a SVG has role="img", it should have aria-label.

Feel free to open a draft PR so we can discuss technical details there :)

[botoxparty]

Cool i've created a Draft PR

Will also need a bit of help with writing a test.

[patrickjm]

Would this consider the presence of ariaHidden?

Seems to me like that property would mark the node to be ignored by this rule.

[ematipico]

The attribute would tell the screen reader to ignore the element, still the element would be visible. What do you suggest?

[patrickjm]

My guess is that the rule wouldn't look for label attributes or title elements in svgs where ariaHidden is set to true.

In the odd case where ariaHidden is an expression rather than hardcoded, maybe a rule override comment would simplify things.

[botoxparty]

@patrickjm Can you point me in the direction where there's another override rule comment in the Rome project? Want to see how we've been doing it for this implementation.

[botoxparty]

Bump @patrickjm @ematipico

I'm sure everyones been super busy with the release, just bringing this back into consciousness to get it over the line.

[ematipico]

@botoxparty basically if there's an attribute ariaHidden, you don't need to apply the rule.

I left some feedback on your PR some time ago.

[botoxparty]

Oh shit i totally missed it @ematipico !

You provided very comprehensive feedback! I'll jump on it this afternoon.