# Graph Narration for Accessibility

**URL:** <https://cl.desmos.com/t/graph-narration-for-accessibility/2166>\
**Category:** Questions\
**Created:** [December 10, 2020, 5:15pm UTC](https://cl.desmos.com/t/graph-narration-for-accessibility/2166 "2020-12-10T17:15:58Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![baoutlaw](https://avatars.discourse-cdn.com/v4/letter/b/73ab20/32.png) [@baoutlaw](https://cl.desmos.com/u/baoutlaw)\
**Post date:** [December 10, 2020, 5:15pm UTC](https://cl.desmos.com/t/graph-narration-for-accessibility/2166/1 "2020-12-10T17:15:58Z")

</div>

I am working on making my Desmos activities accessible. I understand how to use “narration” for a graph that is static. But what if I have a graph that is not static?

For example, let’s say I have a graph that changes when a slider is moved. How can I write a narration that is dependent upon where the slider (which is a point) is located? Here is an example of a slide I’ve been working on.

> **[Narration • Activity Builder by Desmos](https://teacher.desmos.com/activitybuilder/custom/5fd2573c1aa0c50d43e52ec3)**
>
> by Brooke Outlaw

I do not feel like the narration I have now is accessible. I believe that there should be a new narration for every time the slider is moved, but I’m not sure how to do that. Any help would be greatly appreciated. Thanks!

---

<div class="post-metadata">

**Author:** ![JayChow](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/jaychow/32/1674_2.png) [@JayChow](https://cl.desmos.com/u/JayChow)\
**Post date:** [December 10, 2020, 6:58pm UTC](https://cl.desmos.com/t/graph-narration-for-accessibility/2166/2 "2020-12-10T18:58:35Z")

</div>

Hey Brooke! There are a few options at your disposal, but the method we use here is to apply a hidden point label to your movable point. Here’s what we’d do in your case (courtesy of master narrator and graph guru Dave Cesa):

1. On the point label (of the movable point) add the following: `c=${C}`
2. Uncheck the “label” option on the point.  
The screen reader will narrate that info when you tab to the point or change the slider value.

Another way to do it would be to add a separate narration for each thing  
narration(1): static info  
narration(2): c value info  
narration(3): function info  
Each narration line will read when there’s an update, so separating them would ensure that only new relevant information will be read.

It could go _something_ (probably not exactly) like this:

narration(1): The background of this graph is a coordinate grid. Both the x- any y-axes run from -10 to 10. The graph of a square root function is shown. A movable point controls its vertex. Another movable point controls the value of a variable c.

narration(2): c=${c}

narration(3): The square root function has equation `f(x)=sqrt (x+${c})` .

---

<div class="post-metadata">

**Author:** ![baoutlaw](https://avatars.discourse-cdn.com/v4/letter/b/73ab20/32.png) [@baoutlaw](https://cl.desmos.com/u/baoutlaw)\
**Post date:** [December 10, 2020, 9:45pm UTC](https://cl.desmos.com/t/graph-narration-for-accessibility/2166/3 "2020-12-10T21:45:35Z")

</div>

Thanks!

So if I’m understanding you correctly, I just need to create another point that is basically a duplicate point of the moveable one, label it as c=${c}, and uncheck the label option? No additional narration needed?

---

<div class="post-metadata">

**Author:** ![JayChow](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/jaychow/32/1674_2.png) [@JayChow](https://cl.desmos.com/u/JayChow)\
**Post date:** [December 10, 2020, 9:47pm UTC](https://cl.desmos.com/t/graph-narration-for-accessibility/2166/4 "2020-12-10T21:47:28Z")

</div>

You actually want to use the movable point you have now. That way when a student tabs to that point it will read the label. Just uncheck the box so that its not visible.

---

<div class="post-metadata">

**Author:** ![baoutlaw](https://avatars.discourse-cdn.com/v4/letter/b/73ab20/32.png) [@baoutlaw](https://cl.desmos.com/u/baoutlaw)\
**Post date:** [December 10, 2020, 9:48pm UTC](https://cl.desmos.com/t/graph-narration-for-accessibility/2166/5 "2020-12-10T21:48:44Z")

</div>

Okay, thanks! Should I keep the narration I already have “behind” the graph, or is that now irrelevant?

---

<div class="post-metadata">

**Author:** ![JayChow](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/jaychow/32/1674_2.png) [@JayChow](https://cl.desmos.com/u/JayChow)\
**Post date:** [December 10, 2020, 9:50pm UTC](https://cl.desmos.com/t/graph-narration-for-accessibility/2166/6 "2020-12-10T21:50:21Z")

</div>

Any static narration you want to be read should stay there. This point label trick will only read those two words and only when you tab to the point. A full graph-level narration is great to communicate the set up of the graph, etc.

---

<div class="post-metadata">

**Author:** ![baoutlaw](https://avatars.discourse-cdn.com/v4/letter/b/73ab20/32.png) [@baoutlaw](https://cl.desmos.com/u/baoutlaw)\
**Post date:** [December 10, 2020, 9:51pm UTC](https://cl.desmos.com/t/graph-narration-for-accessibility/2166/7 "2020-12-10T21:51:33Z")

</div>

Makes sense. Thanks so much!

---

<div class="post-metadata">

**Author:** ![baoutlaw](https://avatars.discourse-cdn.com/v4/letter/b/73ab20/32.png) [@baoutlaw](https://cl.desmos.com/u/baoutlaw)\
**Post date:** [December 10, 2020, 10:26pm UTC](https://cl.desmos.com/t/graph-narration-for-accessibility/2166/8 "2020-12-10T22:26:00Z")

</div>

This might be a dumb question/comment… But I can’t get it to recognize ${c} in the narration for the graph. It keeps telling me that it is “unable to find component or variable c” even though I put it in the label of the moveable point. Is there an additional step I might be missing?

---

<div class="post-metadata">

**Author:** ![Daniel\_Grubbs](https://yyz1.discourse-cdn.com/flex031/user_avatar/cl.desmos.com/daniel_grubbs/32/719_2.png) [@Daniel\_Grubbs](https://cl.desmos.com/u/Daniel_Grubbs)\
**Post date:** [December 10, 2020, 10:28pm UTC](https://cl.desmos.com/t/graph-narration-for-accessibility/2166/9 "2020-12-10T22:28:23Z")

</div>

Try `${yourGraphName.number(`c`)}`.

I’m guessing your label is actually in the graph and not in the CL.

---

<div class="post-metadata">

**Author:** ![baoutlaw](https://avatars.discourse-cdn.com/v4/letter/b/73ab20/32.png) [@baoutlaw](https://cl.desmos.com/u/baoutlaw)\
**Post date:** [December 10, 2020, 10:29pm UTC](https://cl.desmos.com/t/graph-narration-for-accessibility/2166/10 "2020-12-10T22:29:46Z")

</div>

I actually just tried this right before you sent it and it isn’t giving me an error! BUT, I don’t have any screen reader software so it’s hard to know what it will “read”… Thanks!
