Why Accessibility is Important
Our mission at Desmos is to help every student learn math and love learning math. Our graphing calculator is used by millions of students all around the world, and we'd like to see that use expand to all students, including those with physical and cognitive disabilities. We have recently introduced improvements to the calculator to ensure students who are blind or visually impaired have the same opportunities as their peers to discover the joy of learning math.
We have reconfigured our software so that it's compliant with the WCAG 2.0 accessibility standards. Improvements to the calculator include a) respecting font-size settings of low vision users, b) ensuring that our colors have sufficient contrast, and c) making graphs accessible to fully blind students. First, we redesigned the calculator's expression list by upgrading MathQuill, the component that powers our equation editor. Previously inaccessible, MathQuill now communicates with screen readers, allowing them to speak equations in a verbally intuitive manner. For example, the text "cos(x)" is spoken as "cosine open-parenthesis x close-parenthesis," and "stddevx" is read aloud as "standard deviation of x." The screen reader voices additional cues to indicate a student's location within an expression. (Numerator or denominator, superscript or subscript, baseline, etc.) We have also added audio synthesis to the graphing component, allowing users to hear audible representations of graphs, explore their points of interest, and more. (The sine wave makes a particularly delightful sound.)
While the calculator’s screen reader accessibility has improved significantly, we welcome additional feedback from teachers and students. Please email us at firstname.lastname@example.org with any questions, comments, or suggestions for improvement.
More information regarding the current state of our calculator's accessibility is available on our WCAG 2.0 Compliance Spreadsheet.
For an optimal experience, we recommend Firefox with at least JAWS 17, Window-Eyes 9.5, or NVDA 2016.2. We also recommend using Chrome with at least JAWS 17 or NVDA 2016.2. Preliminary tests using Microsoft Edge alongside Narrator in the Windows 10 Anniversary Update (1607 build 10393) are encouraging, but it is not yet a combination we officially support. We also provide support for Internet Explorer, but be aware that audio tracing is not available in this browser.
On the Mac, we recommend using VoiceOver with Safari or Chrome on macOS 10.11 and higher.
Configuring Your Screen Reader
When the virtual PC cursor is active in JAWS, you can use the arrow keys and other single-letter commands to browse the page. When inactive (for example, when Forms Mode is active), all keyboard input passes through to the browser which is needed to enter expressions into the calculator. JAWS has a few ways to turn the virtual PC cursor on and off (such as entering Forms Mode). However, to keep things simple we recommend pressing Insert + Z or Caps Lock + Z. Alternatively, set the Automatic Forms Mode setting to "semi-auto" to have the virtual PC cursor disengage when appropriate.
Note that if you wish to re-enter virtual PC cursor mode while you are interacting with the calculator's expression list, press the virtual PC cursor command twice.
Because the calculator provides its own verbal output, we recommend disabling keyboard echo completely. To do this from anywhere while JAWS is running, press Insert + 2 or Caps Lock + 2 until "none" is spoken. Alternatively, key echo can be changed within the JAWS Settings Center.
If any Desmos-specific commands conflict with the screen reader, use its pass-through command before pressing the calculator hotkey. In JAWS, press Insert + 3 or Caps Lock + 3.
All JAWS keyboard shortcuts are available on the Freedom Scientific website: http://www.freedomscientific.com/doccenter/archives/training/JAWSKeystrokes.htm
When Window-Eyes' Browse Mode is active, you can use the arrow keys and other single-letter commands to browse the page. When off (when working with forms), all keyboard input is passed through to the browser which is needed to enter expressions into the calculator. To toggle Browse Mode on and off, press Control + Shift + A, or optionally verify that Automatic Form Interaction is enabled.
Because we provide verbal output when entering information into the calculator, we advise disabling keyboard echo completely. In Window-Eyes, press Insert + 2 or Caps Lock + 2 from anywhere until "none" is spoken.
If any Desmos-specific commands conflict with the screen reader, issue the bypass command before the calculator hotkey. In Window-Eyes, press Insert + B or Caps Lock + B.
All Window-Eyes keyboard shortcuts are available on the Ai Squared website: https://www.gwmicro.com/Window-Eyes/Manual/HTML/basic.html
On the web, the most important key for NVDA is Insert + Space, or Caps Lock + Space, which toggles browse mode on and off. When on, use the arrow keys and other single-letter commands to browse the page. When off, all keyboard input passes through to the browser which is needed to enter expressions into the calculator.
Note that if you wish to re-enter browse mode while you are interacting with the calculator's expression list, press CTRL + Insert + Space, or CTRL + Caps Lock + Space.
Because we provide verbal output when entering information into the calculator, we advise disabling keyboard echo completely. In NVDA, press Insert + 2 or Caps Lock + 2 until character echo is off, and likewise Insert + 3 or Caps Lock + 3 for words. You can also find the options for speaking typed characters and words in the NVDA Keyboard Settings dialog.
If any Desmos-specific commands conflict with those of the screen reader, issue the pass-through command before pressing the calculator hotkey. In NVDA, use Insert + F2 or Caps Lock + F2.
All NVDA keyboard shortcuts are available on the NV-Access website: http://webaim.org/resources/shortcuts/nvda
VoiceOver is Apple's built-in screen reader for the Mac, iPhone, and iPad. The mobile version of Desmos is not currently as accessible as its desktop counterpart. With that in mind, we only offer VoiceOver configuration details for macOS.
To enable and disable VoiceOver, press Command + F5. For some newer Macs, which swap the F keys with system functions, you may need to press Command + Fn + F5 instead. If your Mac has no function keys but instead utilizes the touch bar, press and hold Command and triple-tap the Touch ID sensor located in the upper right corner of the computer.
Out of the box, VoiceOver speaks a great deal of information, including hints on how to access common user interface elements (such as text boxes, buttons, and menus). These hints can be distracting when using the calculator, and consequently we recommend disabling them. To do so, open the VoiceOver Utility, navigate to the Verbosity group, and uncheck the option in the Hints tab. Press Control + Option + F8 to open VoiceOver Utility while VoiceOver is on.
While the VoiceOver utility is open, you may also wish to change the speaking of numbers from digits to words and set your typing echo to say nothing. These options are found in the Verbosity group under the Text tab. As the calculator provides keyboard echo already, having VoiceOver announce keystrokes along with the calculator will cause each symbol to be spoken twice. Speaking numbers as words will cause the number 100 to be voiced as "one hundred" instead of "one zero zero."
We recommend disabling Quick Nav to make it easier to interact with the calculator. This can be accomplished in the Commanders group of the VoiceOver utility in the Quick Nav tab. Alternatively, press Left Arrow and Right Arrow simultaneously to toggle Quick Nav on the fly.
When testing on Safari with VoiceOver enabled, use Tab and Shift + Tab to move among the main controls of the page. You will discover that if you Tab through a page with VoiceOver turned off that Tab behaves very differently, and will take you only to form elements. To cause Tab to function in a more standard manner, open Safari's preferences, navigate to the Advanced tab, and check the box labeled, "Press Tab to highlight each item on a web page." Chrome on macOS appears to behave normally in regards to Tab and thus doesn't have such an option.
For more information on VoiceOver and how to navigate with it, see Apple's documentation at https://www.apple.com/voiceover/info/guide/.
ChromeVox is a screen reader available as an extension for Chrome, and it is built into Chrome OS. To turn ChromeVox on and off, press Control + Alt + Z.
Because the calculator provides its own verbal output, we advise disabling spoken feedback (earcons) completely. To do this from anywhere, press Search + A, then E.
For more information about ChromeVox, see Google’s documentation: http://www.chromevox.com/
Expression Entry and Navigation
All right. Screen reader configured? You’re ready to start entering math! Our equation editor is powered by a technology called MathQuill. You can type things like y=2x^2, 2/3x-4y=7, sin(x), anything! You can also enter evaluable expressions, like 2^3 or 4+5, and the calculator will output the answer. When writing in MathQuill, Tab moves out of a block. In a fraction, Up Arrow and Down Arrow move between the numerator and denominator. Home and End move to the beginning and end of the current block, and Control + Home or End move to the beginning and end of the active expression.
We also provide an onscreen keypad suitable for entering equations with a touch-based device or mouse. While the keypad has been given appropriate ARIA markup, it is not included in the calculator's tab order. This decision was made deliberately. Typing an equation (such as sin(x)) into the expression is far more efficient than using Tab to navigate to each button. Additionally, this allows the keypad keys to be located on touch-based devices or when using screen enlargement software (such as MAGic and ZoomText). For a full list of our supported functions, visit our support site: http://support.desmos.com/hc/en-us/articles/212235786
For a quick reminder of these or any other keyboard shortcuts, use the keyboard shortcuts link in the calculator's help menu or press Control + / on Windows or Command + / on Mac.
MathQuill also provides the following screen reader-specific hotkeys for Windows and Mac.
|Function||Windows Shortcut||Mac Shortcut|
|Move to Previous Expression||Up Arrow or Shift + Tab||Up Arrow or Shift + Tab|
|Move to Next Expression||Down Arrow or Tab||Down Arrow or Tab|
|Remove Selected Empty Expression||Backspace||Delete|
|Previous Character||Left Arrow||Left Arrow|
|Next Character||Right Arrow||Right Arrow|
|Move to Numerator Within Fraction||Up Arrow||Up Arrow|
|Move to Denominator Within Fraction||Down Arrow||Down Arrow|
|Exit Current Block||Tab||Tab|
|Beginning of Current Block||Home||Fn + Left Arrow|
|End of Current Block||End||Fn + Right Arrow|
|Beginning of Current Expression||Control + Home||Control + Fn + Left Arrow|
|End of Current Expression||Control + End||Control + Fn + Right Arrow|
|Increase Selection Left||Shift + Left Arrow||Shift + Left Arrow|
|Increase Selection Right||Shift + Right Arrow||Shift + Right Arrow|
|Select All||Control + A||Command + A|
|Speak Parent Block||Control + Alt + Up Arrow||Control + Command + Up Arrow|
|Speak Focused Block||Control + Alt + Down Arrow||Control + Command + Down Arrow|
|Speak Left-Adjacent Block||Control + Alt + Left Arrow||Control + Command + Left Arrow|
|Speak Right-Adjacent Block||Control + Alt + Right Arrow||Control + Command + Right Arrow|
|Speak Selection||Control + Alt + Shift + Down Arrow||Control + Command + Shift + Down Arrow|
The calculator includes methods for entering special types of symbols and expressions. We have included some of the most common symbols below.
|Superscript||Shift + 6||Shift + 6|
|Subscript||Shift + -||Shift + -|
|∛ (or higher!)||"nthroot"||"nthroot"|
More details regarding these and other functions are available on the Desmos Learning site.
Dive deeper into data with tables! You can enter data manually or copy and paste data from an existing spreadsheet. Note that when copying and pasting a table from a spreadsheet, the column header titles will not transfer and there is a maximum of 50 rows. You can add a new table by selecting Table in the Add Item menu, or by pressing Control + Alt + T on Windows or Control + Command + T on Mac.
|Previous Cell||Shift + Tab||Shift + Tab|
|Previous Row||Up Arrow||Up Arrow|
|Next Row||Down Arrow||Down Arrow|
|Previous Column||Left Arrow||Left Arrow|
|Next Column||Right Arrow||Right Arrow|
|First Row in Column||Control + Up Arrow||Control + Up Arrow|
|Last Row in Column||Control + Down Arrow||Control + Down Arrow|
|First Column in Row||Control + Left Arrow||Control + Left Arrow|
|Last Column in Row||Control + Right Arrow||Control + Right Arrow|
|Speak Column Header||Control + H||Control + H|
When an expression contains free variables, Desmos will offer to define them as sliders. To try it for yourself, type y=mx+b and then press Enter to add sliders for m and b below the expression. Now, by changing the values of m and b, you can easily manipulate the graph of y=mx+b. Use Tab and the keyboard shortcuts below to adjust each slider when its handle is focused.
|Decrease Value||Left Arrow or Down Arrow||Left Arrow or Down Arrow|
|Decrease Value by Larger Increment||Page Down||Fn + Down Arrow|
|Increase Value||Right Arrow or Up Arrow||Right Arrow or Up Arrow|
|Increase Value by Larger Increment||Page Up||Fn + Up Arrow|
|Lowest Value||Home||Fn + Left Arrow|
|Highest Value||End||Fn + Right Arrow|
Audio Tracing for Expressions with a Graph
If an expression has a graph, you can hear a basic summary with Alt + S (or Option + S on a Mac). Activate audio trace mode with Alt + T (or Option + T on a Mac). Press Alt + T a second time to deactivate audio trace. Setting focus to a different part of the web page will also deactivate audio trace, so there is no need to worry about being stuck in this mode.
When listening to a graph through audio trace, changes in the stereo field reflect the value of the independent variable, and changes in the pitch reflect the dependent variable. Static will also be heard along with the tone when the dependent variable is less than 0, or by itself if the variable is undefined. In addition, the timbre of the tone changes when the independent variable is less than or greater than 0. A brief "pop" will sound whenever two curves intersect.
For example, consider the equation for a simple sine curve: y=sin(x). When audio trace is active, notice how the tone being played moves from left to right as x increases, and the tone's pitch rises and falls as the y-value changes. Observe how the resonance of the tone morphs once it crosses the X axis, and the static that plays whenever y moves below 0.
Note: On Windows, audio tracing is not available in Internet Explorer. We recommend using Chrome or Firefox to take advantage of this feature.
When audio trace is active, the following additional keyboard shortcuts are available:
|Enable or Disable Audio Trace Mode||Alt + T||Option + T|
|Summarize Graph||Alt + S||Option + S|
|Previous Point||Left Arrow , Down Arrow , or J||Left Arrow , Down Arrow , or J|
|Next Point||Right Arrow , Up Arrow , or L||Right Arrow , Up Arrow , or L|
|Next Point of Interest||Page Up , Tab , or I||Fn + Up Arrow , Tab , or I|
|Previous Point of Interest||Page Down , Shift + Tab , or K||Fn + Down Arrow , Shift + Tab , or K|
|First Point||Home or U||Fn + Left Arrow or U|
|Last Point||End or N||Fn + Right Arrow or N|
|Speak Point of Interest Count||P||P|
|Speak X Coordinate||X||X|
|Speak Y Coordinate||Y||Y|
|Speak Type of Selected Point||T||T|
|Move to Origin||O||O|
|Move to Previous Curve||Control + Up Arrow||Command + Up Arrow|
|Move to Next Curve||Control + Down Arrow||Command + Down Arrow|
|Hear Only Branch 1 Through 10||1 - 0||1 - 0|
|Adjust Playback Speed
(1 = slowest, 5 = fastest)
|Alt + 1 - 5||Option + 1 - 5|
|Announce Active Slider Animations||A||A|
When audio trace is active, and an expression contains adjustable factors available via sliders, you can modify their values to hear what effect the changes have on the current equation with the following commands:
|Function||Windows Shortcut||Mac Shortcut|
|Toggle Slider Trace Mode||S||S|
|Decrease Value of Selected Slider||Left Arrow or J||Left Arrow or J|
|Decrease Value of Selected Slider by Larger Increment||Page Down||Fn + Down Arrow|
|Increase Value of Selected Slider||Right Arrow or L||Right Arrow or L|
|Increase Value of Selected Slider by Larger Increment||Page Up||Fn + Up Arrow|
|Move to Lowest Value of Selected Slider||Home or U||Fn + Left Arrow or U|
|Move to Highest Value of Selected Slider||End or N||Fn + Right Arrow or N|
|Play/Pause Selected Slider||P||P|
|Select Next Slider||Down Arrow , Tab , or K||Down Arrow , Tab , or K|
|Select Previous Slider||Up Arrow , Shift + Tab , or I||Up Arrow , Shift + Tab , or I|
For example, take the classic equation for a line: y=mx+b. When audio trace is active, enter slider trace by pressing S, and note that the value of M is set to 1. Pressing H yields an ascending tone which pans from left to right, indicating a line with a positive slope. Next, press the Left Arrow twice until M is -1. Pressing H again now results in a descending tone panning from left to right, indicating a line with negative slope.
You can also animate one or more sliders by selecting them with the Up and Down Arrow keys and pressing P to play or pause them. If any sliders are animating during slider trace, a tone representing the currently selected point will sound and change as the point updates on screen.
Audio Trace Examples
The following examples demonstrate a few different types of equations and how they are rendered in audio trace. In each recording, the equation is read aloud followed by the sound of the graph.
- y=x Notice how the pitch of the tone increases as it moves from left to right, indicating a positive slope, and the static that is added when the line is below the X axis. Open this graph in the calculator.
- y=-x Notice how the pitch of the tone decreases as it moves from left to right, indicating a negative slope, and the static that is added when the line is below the X axis. Open this graph in the calculator.
- y=sin(x) Notice how the pitch of the tone regularly increases and decreases as it moves from left to right, indicating a periodic function, and the static that plays each time the line moves below the X axis. Open this graph in the calculator.
- y=x^2 Notice how the tone starts high, drops down, and raises as it moves from left to right, indicating a parabolic curve, and the static that plays when the line is off the screen. Open this graph in the calculator.
- x^2+y^2=9 This is the equation for a circle. Unlike the previous examples, this equation has two solutions which are played in sequence. First, from left to right, you will hear the tone move down, then up, which is the lower half of the circle. Next, from left to right, you hear a tone moving up, then down, indicating the top half of the circle. Notice the static which also plays as audio trace moves through those points which have no solution. We welcome feedback on how we might better convey multi-solution graphs through sound. Open this graph in the calculator.
Desmos provides hotkeys which can be used anywhere within the calculator to aid in managing graphs, adding expressions, and adjusting graph settings.
|Function||Windows Shortcut||Mac Shortcut|
|Open Hotkey Shortcuts Dialog||Control + /||Command + /|
|Close a Dialog||Esc||Esc|
|Open a Graph||Control + O||Command + O|
|Save a Graph||Control + S||Command + S|
|Print a Graph||Control + P||Command + P|
|Focus the Expression List||Control + Alt + E||Control + Command + E|
|Add an Expression||Control + Alt + X||Control + Command + X|
|Add a Note||Control + Alt + O||Control + Command + O|
|Add a Folder||Control + Alt + F||Control + Command + F|
|Collapse or Expand the Selected Folder||Alt + Up Arrow||Command + Up Arrow|
|Add an Image||Control + Alt + I||Control + Command + I|
|Add a Table||Control + Alt + T||Control + Command + T|
|Undo||Control + Z||Command + Z|
|Redo||Control + Shift + Z||Command + Shift + Z|
|Open or Close the Graph Settings Menu||Control + Alt + G||Control + Command + G|
|Open or Close the Account Menu||Control + Alt + A||Control + Command + A|
|Open or Close the Help Menu||Control + Alt + H||Control + Command + H|
|Open or Close the Language Menu||Control + Alt + L||Control + Command + L|
|Open or Close the Share Menu||Control + Alt + S||Control + Command + S|
You can download the Desmos Graphing Calculator app for Android or iOS. On Android, we recommend devices running at least Android 5.0 with Chrome 54 or newer installed along with an external keyboard to enter expressions and issue commands. The calculator's interface is fully accessible to VoiceOver users running iOS 9 and above. Note, however, that due to some core operating system bugs, we are unable to bring complete external keyboard support to iOS at this time. For more information regarding TalkBack and VoiceOver, refer to Android accessibility information or VoiceOver information. We are still working on mobile accessibility and would love your feedback! Please email your questions and comments to email@example.com.
We Would Love Your Feedback!
We are excited with our recent accessibility advances, and we also have more work to do. We would love your feedback on how we can support the best possible graphing experience for visually impaired students. Please email us at firstname.lastname@example.org with any questions or comments!