Day 13: “A11y Considerations in Math on the Web” / Manuel Sánchez #204
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Ready to review/merge, @matuzo ! Hope you like it! |
ZoeBijl
changed the title
ZoeBijl
requested changes
Oct 29, 2025
| Maybe it has happened to you that you wanted to write some formulas in HTML to display them on a website, and even though there are multiple ways to do it, accessibility is often not considered in the process. How the formula is read by screen readers is crucial to ensure that we don't leave anyone behind. | ||
|
|
||
| ## Heading | ||
| Even though the web is full of many different and interesting approaches, the reality is that [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) is usually the best option for this problem. It has its own syntax and was not originally designed for the web, but MathML provides various elements that give the correct semantics to the different parts of a formula. |
There was a problem hiding this comment.
i think this flows a bit nicer with what you want to say. i tried to separate the cause and effect as it were.
Suggested change
| Even though the web is full of many different and interesting approaches, the reality is that [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) is usually the best option for this problem. It has its own syntax and was not originally designed for the web, but MathML provides various elements that give the correct semantics to the different parts of a formula. | |
| The web is full of many different and interesting approaches for representing formulas. In reality, [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) is usually the best option to solve this problem, even if it wasn’t originally designed for the web. A big plus is that it has its own syntax, MathML provides various elements that give the correct semantics to the different parts of a formula. |
| Let's take the famous Pythagorean Theorem as an example. | ||
|
|
||
| ## Heading | ||
| <section style="margin-bottom: 2rem" > |
There was a problem hiding this comment.
would it make sense to follow your own advise and use an aria-label here?
| </section> | ||
| ``` | ||
|
|
||
| Alternatively, we also have the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/math_role"><code>role="math"</code></a> from the ARIA specification. With that, even if you use an image or non-semantic HTML, you can still achieve accessibility. As shown on the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/math_role">Mozilla page about <code>role="math"</code></a>, we could have: |
There was a problem hiding this comment.
Suggested change
| Alternatively, we also have the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/math_role"><code>role="math"</code></a> from the ARIA specification. With that, even if you use an image or non-semantic HTML, you can still achieve accessibility. As shown on the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/math_role">Mozilla page about <code>role="math"</code></a>, we could have: | |
| Alternatively, we also have the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/math_role"><code>"math"</code> role</a> from the ARIA specification. With that, even if you use an image or non-semantic HTML, you can still achieve an accessibile result. As shown on the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/math_role">Mozilla page about <code>role="math"</code></a>, we could have: |
| </math> | ||
| ``` | ||
|
|
||
| <p class="highlight"><strong><abbr title="too long; didn't read">TL;DR:</abbr></strong> MathML Core is what browsers implement today; MathML 4 is the broader language evolving around it..</p> |
There was a problem hiding this comment.
i think this should be at the top of the section. now it’s more of a “too late, did read” 🤓
|
|
||
| ## The future of MathML | ||
|
|
||
| Before we look ahead, it's useful to understand where MathML comes from and why there's both a 'Core' and a 'version 4' in development. |
There was a problem hiding this comment.
this might be the curse of knowledge on your part, but i have no idea that there’s a “core” and “version 4”. perhaps this section can be restructured a bit to include some more history and explain this?
| Maybe it has happened to you that you wanted to write some formulas in HTML to display them on a website, and even though there are multiple ways to do it, accessibility is often not considered in the process. How the formula is read by screen readers is crucial to ensure that we don't leave anyone behind. | ||
|
|
||
| ## Heading | ||
| Even though the web is full of many different and interesting approaches, the reality is that [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) is usually the best option for this problem. It has its own syntax and was not originally designed for the web, but MathML provides various elements that give the correct semantics to the different parts of a formula. |
| Maybe it has happened to you that you wanted to write some formulas in HTML to display them on a website, and even though there are multiple ways to do it, accessibility is often not considered in the process. How the formula is read by screen readers is crucial to ensure that we don't leave anyone behind. | ||
|
|
||
| ## Heading | ||
| Even though the web is full of many different and interesting approaches, the reality is that [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) is usually the best option for this problem. It has its own syntax and was not originally designed for the web, but MathML provides various elements that give the correct semantics to the different parts of a formula. |
There was a problem hiding this comment.
Even though the web is full of many different and interesting approaches
it might be worth naming some of the other approaches.
| </math> | ||
| ``` | ||
|
|
||
| Unlike plain HTML with <code>sup</code> or <code>span</code>, which only describe presentation, MathML defines each role explicitly: |
There was a problem hiding this comment.
this is a good selling point for MathML. are there other solutions that offer this functionality too? or is this exclusive to MathML?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.