Mixed Content - Text and Math

Question

I have content on a page representing math formulas. This content is inside <span>, but it has custom framed content mixed with text. I have a textual description of the mathematical content that I could put inside the attribute aria-labelin <span>, but, apparently, screen readers ignore the attributes of the aria for non-format elements.

Is there a way to get screen readers to use an alternative description for content inside <span>or <div>?

My html looks like

<span aria-label='[TEXT DESCRIPTION]'>
    <svg>[SOME SVG CONTENT]</svg>
    <span>[SOME TEXT CONTENT]</span>
</span>

Answer 1

Your code

<span aria-label='[TEXT DESCRIPTION]'>
    <svg>[SOME SVG CONTENT]</svg>
    <span>[SOME TEXT CONTENT]</span>
</span>

. , , <div>. , - tabindex="-1". , [ ] / [ ], , , .

<div>
  <svg aria-describedby="mathOne">.....</svg>
  <span id="mathOne" class="offScreen">{Description}</span>
  <span>Content</span>
</div>

:

svg , . sqrt, .

- . <span> . , ,

<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>

. 5 , , .

Answer 2

- img aria, .

<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>

, ?

p.s. - . , .

, !