mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Math
synced 2024-11-24 07:34:22 +00:00
Improve the way mathematical formulas are exposed to screen readers.
- Mark the png and svg fallback as aria-hidden="true". - For browsers without good enough MathML visual rendering, hide the <math> tag in a way that still makes it accessible to screen readers. Bug: 66537 Change-Id: I7ecf07a4da669d927e11265fd497a813786c6410
This commit is contained in:
parent
ccd0819ffc
commit
9f6257c329
|
@ -393,7 +393,7 @@ class MathMathML extends MathRenderer {
|
||||||
if ( $class ) { $attribs['class'] = $class; }
|
if ( $class ) { $attribs['class'] = $class; }
|
||||||
if ( $style ) { $attribs['style'] = $style; }
|
if ( $style ) { $attribs['style'] = $style; }
|
||||||
// an alternative for svg might be an object with type="image/svg+xml"
|
// an alternative for svg might be an object with type="image/svg+xml"
|
||||||
return Xml::element( 'img', $this->getAttributes( 'img', $attribs , array( 'src' => $url ) ) );
|
return Xml::element( 'img', $this->getAttributes( 'img', $attribs , array( 'src' => $url, 'aria-hidden' => 'true' ) ) );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -8,8 +8,17 @@
|
||||||
@namespace m url('http://www.w3.org/1998/Math/MathML');
|
@namespace m url('http://www.w3.org/1998/Math/MathML');
|
||||||
|
|
||||||
/* Default style for MathML. */
|
/* Default style for MathML. */
|
||||||
.mwe-math-mathml-inline { display: none; }
|
.mwe-math-mathml-inline { display: inline !important; }
|
||||||
.mwe-math-mathml-display { display: none; margin-left: auto; margin-right: auto; }
|
.mwe-math-mathml-display { display: block !important; margin-left: auto; margin-right: auto; }
|
||||||
|
.mwe-math-mathml-inline, .mwe-math-mathml-display {
|
||||||
|
/* We try to hide the MathML formula in a way that still makes it accessible to screen readers. */
|
||||||
|
clip: rect(1px, 1px, 1px, 1px);
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
m|math {
|
m|math {
|
||||||
/* Try OpenType MATH fonts, the WOFF fallback and the old math fonts */
|
/* Try OpenType MATH fonts, the WOFF fallback and the old math fonts */
|
||||||
font-family: Cambria Math, Latin Modern Math, STIX Math, LatinModernMathWOFF, MathJax_Main, STIXGeneral, serif;
|
font-family: Cambria Math, Latin Modern Math, STIX Math, LatinModernMathWOFF, MathJax_Main, STIXGeneral, serif;
|
||||||
|
@ -48,8 +57,14 @@ img.mwe-math-fallback-png-display { display: block; }
|
||||||
@-moz-document url-prefix() {
|
@-moz-document url-prefix() {
|
||||||
/* For Gecko browsers, hide the SVG fallback and show the MathML instead.
|
/* For Gecko browsers, hide the SVG fallback and show the MathML instead.
|
||||||
We override the style for SVG and MathML above */
|
We override the style for SVG and MathML above */
|
||||||
.mwe-math-mathml-inline { display: inline !important; }
|
.mwe-math-mathml-inline, .mwe-math-mathml-display {
|
||||||
.mwe-math-mathml-display { display: block !important; }
|
clip: auto;
|
||||||
|
overflow: visible;
|
||||||
|
position: static;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
:root * > .mwe-math-mathml-inline + img.mwe-math-fallback-svg-inline,
|
:root * > .mwe-math-mathml-inline + img.mwe-math-fallback-svg-inline,
|
||||||
:root * > .mwe-math-mathml-display + img.mwe-math-fallback-svg-display { display: none !important; }
|
:root * > .mwe-math-mathml-display + img.mwe-math-fallback-svg-display { display: none !important; }
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue