Mixed Content - text and math - html

Question

I have some content on a page that represents math formulas. This content is inside a <span> but it has custom drawn content inside of it mixed with text. I have text description of the math content that I could put inside an aria-label attribute in the <span>, but screen readers seem to ignore aria attributes for non-form elements.
Is there a way to get screen readers to use an alternate description for the content inside a <span> or a <div>?
My html looks like this
<span aria-label='[TEXT DESCRIPTION]'>
<svg>[SOME SVG CONTENT]</svg>
<span>[SOME TEXT CONTENT]</span>
</span>

Answer 1

Your code of
<span aria-label='[TEXT DESCRIPTION]'>
<svg>[SOME SVG CONTENT]</svg>
<span>[SOME TEXT CONTENT]</span>
</span>
looks slightly strange to me. The first thing I would do is change the outer span to a <div>. You may need to add something like tabindex="-1" to it. A more universal design approach would be to have the [TEXT DESCRIPTION] in plain text before/after [SOME TEXT CONTENT], the idea is if a person with a visual impairment needs extra assistance, then other people may as well.
The other option could be like
<div>
<svg aria-describedby="mathOne">.....</svg>
<span id="mathOne" class="offScreen">{Description}</span>
<span>Content</span>
</div>
From comments:
visually the svg and text content may be overlayed or positioned absolutely so that it makes sense from a math formula perspective. Think sqrt symbol that grows with the radical and radix.
My point is not to do this. The content <span> should be enhancing things. Let's pretend I am displaying the quadratic formula, the code would look like
<div>
<svg aria-describedby="mathOne">{Generated Formula}</svg>
<span id="mathOne" class="offScreen">negative B plus or minus the
square root of the radical B squared - 4 a c end radical all over 2 a.</span>
<span>In basic algebra, the quadratic formula is the solution of
the quadratic equation.</span>
</div>
Note: I haven't done stuff with math and visual impairments in 5 years, so there may be a better way of writing out the formula, but you get the idea.

Answer 2

You could try setting the role attribute to something like img and set the aria-label, like so.
<span role="img" aria-label="This will appear like an image. Nothing will be read from inside, but you can set your own description">
<span>here is some non-screen-readerable stuff</span>
</span>
Is this what you're looking for?
p.s. non-screen-readerable may or may not be proper use of English. But I think it illustrates the point.
Hope this helps!