CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1739902561245459979"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1739902561245459979"> <title> Images of Text | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Images of Text" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <meta property="og:description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <link rel="canonical" href="https://www.w3.org/WAI/tutorials/images/textual/" /> <meta property="og:url" content="https://www.w3.org/WAI/tutorials/images/textual/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:image" content="https://www.w3.org/WAI/content-images/tutorials/images/social.png" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="https://www.w3.org/WAI/content-images/tutorials/images/social.png" /> <meta property="twitter:title" content="Images of Text" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).","headline":"Images of Text","image":"https://www.w3.org/WAI/content-images/tutorials/images/social.png","url":"https://www.w3.org/WAI/tutorials/images/textual/"}</script>  <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-images-of-text "> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"> <a href="/WAI/meta/customize/">Change Text Size or Colors</a> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> </ul></nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Search:</span> <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/tutorials/"><span>Tutorials</span></a></li><li><a lang="en" href="/WAI/tutorials/images/"><span>Images</span></a></li><li><a lang="en" href="/WAI/tutorials/images/textual/" aria-current="page"><span>Images of Text</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="en" href="/WAI/design-develop/" class="page-link"><span>Design & Develop</span></a></li><li> <a lang="en" href="/WAI/tips/writing/" class="page-link"><span>Tips for Writing</span></a></li><li> <a lang="en" href="/WAI/tips/designing/" class="page-link"><span>Tips for Designing</span></a></li><li> <a lang="en" href="/WAI/tips/developing/" class="page-link"><span>Tips for Developing</span></a></li><li> <a lang="en" href="/WAI/media/av/" class="page-link"><span>Audio & Video Media</span></a><ul><li> <a lang="en" href="/WAI/media/av/users-orgs/" class="page-link"><span>User Needs</span></a></li><li> <a lang="en" href="/WAI/media/av/planning/" class="page-link"><span>Planning</span></a></li><li> <a lang="en" href="/WAI/media/av/av-content/" class="page-link"><span>Audio Content & Video Content</span></a></li><li> <a lang="en" href="/WAI/media/av/description/" class="page-link"><span>Description</span></a></li><li> <a lang="en" href="/WAI/media/av/captions/" class="page-link"><span>Captions/Subtitles</span></a></li><li> <a lang="en" href="/WAI/media/av/transcripts/" class="page-link"><span>Transcripts</span></a></li><li> <a lang="en" href="/WAI/media/av/transcribing/" class="page-link"><span>Transcribing Audio to Text</span></a></li><li> <a lang="en" href="/WAI/media/av/sign-languages/" class="page-link"><span>Sign Languages</span></a></li><li> <a lang="en" href="/WAI/media/av/player/" class="page-link"><span>Media Player</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/" aria-current="location" class="page-link"><span>Tutorials</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/" class="page-link"><span>Page Structure</span></a><ul><li> <a lang="en" href="/WAI/tutorials/page-structure/regions/" class="page-link"><span>Page Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/labels/" class="page-link"><span>Labeling Regions</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/headings/" class="page-link"><span>Headings</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/content/" class="page-link"><span>Content Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/page-structure/example/" class="page-link"><span>Full Example</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/menus/" class="page-link"><span>Menus</span></a><ul><li> <a lang="en" href="/WAI/tutorials/menus/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/flyout/" class="page-link"><span>Fly-Out Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus/" class="page-link"><span>Application Menus</span></a></li><li> <a lang="en" href="/WAI/tutorials/menus/application-menus-code/" class="page-link"><span>Application Menu Example & Code</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/images/" aria-current="location" class="page-link"><span>Images</span></a><ul><li> <a lang="en" href="/WAI/tutorials/images/informative/" class="page-link"><span>Informative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decorative/" class="page-link"><span>Decorative Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/functional/" class="page-link"><span>Functional Images</span></a></li> <li> <a lang="en" href="/WAI/tutorials/images/textual/" aria-current="page" class="page-link"><span>Images of Text</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/complex/" class="page-link"><span>Complex Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/groups/" class="page-link"><span>Groups of Images</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/imagemap/" class="page-link"><span>Image Maps</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/decision-tree/" class="page-link"><span>An <code style="color: inherit;">alt</code> Decision Tree</span></a></li><li> <a lang="en" href="/WAI/tutorials/images/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/tables/" class="page-link"><span>Tables</span></a><ul><li> <a lang="en" href="/WAI/tutorials/tables/one-header/" class="page-link"><span>One Header</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/two-headers/" class="page-link"><span>Two Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/irregular/" class="page-link"><span>Irregular Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/multi-level/" class="page-link"><span>Multi-level Headers</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/caption-summary/" class="page-link"><span>Caption & Summary</span></a></li><li> <a lang="en" href="/WAI/tutorials/tables/tips/" class="page-link"><span>Tips and Tricks</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/forms/" class="page-link"><span>Forms</span></a><ul><li> <a lang="en" href="/WAI/tutorials/forms/labels/" class="page-link"><span>Labeling Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/grouping/" class="page-link"><span>Grouping Controls</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/instructions/" class="page-link"><span>Form Instructions</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/validation/" class="page-link"><span>Validating Input</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/notifications/" class="page-link"><span>User Notifications</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/multi-page/" class="page-link"><span>Multi-page Forms</span></a></li><li> <a lang="en" href="/WAI/tutorials/forms/custom-controls/" class="page-link"><span>Custom Controls</span></a></li></ul></li><li> <a lang="en" href="/WAI/tutorials/carousels/" class="page-link"><span>Carousels</span></a><ul><li> <a lang="en" href="/WAI/tutorials/carousels/structure/" class="page-link"><span>Structure</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/functionality/" class="page-link"><span>Functionality</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/animations/" class="page-link"><span>Animations</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/styling/" class="page-link"><span>Styling</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/working-example/" class="page-link"><span>Working Example</span></a></li><li> <a lang="en" href="/WAI/tutorials/carousels/full-code/" class="page-link"><span>Complete Code</span></a></li></ul></li></ul></li></ul></nav> </div> <main id="main" lang="en"> <header class="in-resource"> <h1> Images of Text </h1><p>in <a lang="en" href="/WAI/tutorials/images/"><span>Images Tutorial</span></a></p></header> <aside class="box box-full"><header class="box-h box-h-full"> <h2> Summary </h2></header><div class="box-i"> <p>Images of text display text that is intended to be read. With the current CSS capabilities in most web browsers, it is good design practice to use actual text that is styled with CSS rather than image-based text presentation. Genuine text is much more flexible than images: It can be resized without losing clarity, and background and text colors can be modified to suit the reading preferences of users. Images are more likely to distort and pixelate when resized. In those rare situations where images of text must be used, the text alternative must contain the same text presented in the image.</p> </div></aside> <nav class="box box-simple" aria-labelledby="tocheading" id="toc"> <header id="tocheading" class="box-h box-h-simple"> Page Contents</header> <div class="box-i"> <ul id="markdown-toc"> <li><a href="#styled-text-decorative-effect" id="markdown-toc-styled-text-decorative-effect"><strong>Example 1:</strong> Styled text with decorative effect</a> <ul> <li><a href="#using-an-image" id="markdown-toc-using-an-image">Using an image</a></li> <li><a href="#using-css3" id="markdown-toc-using-css3">Using CSS3</a></li> </ul> </li> <li><a href="#example-2-image-of-text-used-as-an-unlinked-logo" id="markdown-toc-example-2-image-of-text-used-as-an-unlinked-logo"><strong>Example 2:</strong> Image of text used as an unlinked logo</a></li> <li><a href="#example-3-mathematical-expressions" id="markdown-toc-example-3-mathematical-expressions"><strong>Example 3:</strong> Mathematical expressions</a> <ul> <li><a href="#using-images" id="markdown-toc-using-images">Using images</a></li> <li><a href="#using-mathml" id="markdown-toc-using-mathml">Using MathML</a></li> </ul> </li> </ul> </div> </nav> <h2 id="styled-text-decorative-effect"><strong>Example 1:</strong> Styled text with decorative effect</h2> <p>This following image is used to convey a slogan text with decorative effects.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <p><img src="/WAI/content-images/tutorials/images/bad-top-text.png" alt="City Lights: your access to the city." /></p> </div></aside> <h3 id="using-an-image">Using an image</h3> <p>Previously it was not possible to create such text using CSS styling that would be rendered consistently across browsers, which is why images of text were used. The text alternative for this image is the same as the slogan presented in the image: “Your access to the city”. The decorative effects (stylized text and shadow) are not be described because they are not relevant.</p> <aside class="box box-example"><header class="box-h box-h-example"> Code</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><img</span> <span class="na">src=</span><span class="s">"access-city.png"</span> <span class="na">alt=</span><span class="s">"Your access to the city."</span><span class="nt">></span> </code></pre></div></div> </div></aside> <h3 id="using-css3">Using CSS3</h3> <p>The visual effects in the above image can be produced using CSS3 and an embedded font. Authors and developers that have to support older browsers may find the image example useful if a less styled fallback text isn’t an option.</p> <aside class="box box-simple box-right"><header class="box-h box-h-simple box-h-right"> Browser Support</header><div class="box-i"> <p>Displaying these effects requires browsers that support the following web technologies:</p> <ul> <li><a href="https://www.w3.org/TR/css3-transforms/">CSS Transforms</a></li> <li><a href="https://www.w3.org/TR/css3-webfonts/">CSS Fonts</a></li> </ul> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <div class="background"> <div class="tagline"><span>Your access to the city</span></div> </div> <style> @font-face { font-family: 'Harabara Hand'; src: url('/WAI/content-images/tutorials/images/harbarbarahand.ttf') format('truetype'); } .background { background-color: #FFF; padding: 2em; } .tagline { padding-left: 1em; background-color: #DDD9D6; font-family: 'Harabara Hand', cursive; text-transform: lowercase; color: #226C8E; font-size: 1.5em; box-shadow: 0 2px 4px rgba(0,0,0,.5); letter-spacing: -1px; } .tagline span { display: inline-block; -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); } </style> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code: HTML</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"tagline"</span><span class="nt">><span></span>Your access to the city<span class="nt"></span></div></span> </code></pre></div></div> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code: CSS</header><div class="box-i"> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">@font-face</span> <span class="p">{</span> <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Harabara Hand'</span><span class="p">;</span> <span class="nl">src</span><span class="p">:</span> <span class="sx">url('harabarahand.ttf')</span> <span class="n">format</span><span class="p">(</span><span class="s2">'truetype'</span><span class="p">);</span> <span class="p">}</span> <span class="nc">.background</span> <span class="p">{</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#FFF</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">2em</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.tagline</span> <span class="p">{</span> <span class="nl">font-family</span><span class="p">:</span> <span class="s2">'Harabara Hand'</span><span class="p">,</span> <span class="nb">cursive</span><span class="p">;</span> <span class="nl">text-transform</span><span class="p">:</span> <span class="nb">lowercase</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="m">#226C8E</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">1.5em</span><span class="p">;</span> <span class="nl">letter-spacing</span><span class="p">:</span> <span class="m">-1px</span><span class="p">;</span> <span class="nl">padding-left</span><span class="p">:</span> <span class="m">1em</span><span class="p">;</span> <span class="nl">background-color</span><span class="p">:</span> <span class="m">#DDD9D6</span><span class="p">;</span> <span class="nl">box-shadow</span><span class="p">:</span> <span class="m">0</span> <span class="m">2px</span> <span class="m">4px</span> <span class="n">rgba</span><span class="p">(</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">0</span><span class="p">,</span><span class="m">.5</span><span class="p">);</span> <span class="p">}</span> <span class="nc">.tagline</span> <span class="nt">span</span> <span class="p">{</span> <span class="nl">display</span><span class="p">:</span> <span class="n">inline-block</span><span class="p">;</span> <span class="nl">transform</span><span class="p">:</span> <span class="n">rotate</span><span class="p">(</span><span class="m">-10deg</span><span class="p">);</span> <span class="p">}</span> </code></pre></div></div> </div></aside> <aside class="box box-simple box-notes"><header class="box-h box-h-simple box-h-notes"> Note</header><div class="box-i"> <p>The code snippet doesn’t show any <a href="https://www.w3.org/TR/css-2010/#experimental">vendor prefixes</a>. These can be added to increase compatibility with older versions of web browsers using their experimental implementation of CSS3 features.</p> </div></aside> <h2 id="example-2-image-of-text-used-as-an-unlinked-logo"><strong>Example 2:</strong> Image of text used as an unlinked logo</h2> <p>The following image is the logo for the Web Accessibility Initiative. It is not part of a link, so the text alternative is “Web Accessibility Initiative”. There’s no need to mention that it is a logo.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <p><img src="/WAI/content-images/tutorials/images/wai.png" alt="Web Accessibility Initiative" /></p> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><img</span> <span class="na">src=</span><span class="s">"wai.png"</span> <span class="na">alt=</span><span class="s">"Web Accessibility initiative"</span><span class="nt">></span> </code></pre></div></div> </div></aside> <aside class="box box-simple box-notes"><header class="box-h box-h-simple box-h-notes"> Note</header><div class="box-i"> <ol> <li> <p>Images used as logos are exempt from some of the accessibility requirements that apply to other images of text. For example, there are no minimum color contrast and text size requirements.</p> </li> <li> <p>If this logo were linked then it would become a functional image. See <a href="/WAI/tutorials/images/functional/#image-used-alone-as-a-linked-logo">Functional Images: Image used alone as a linked logo</a>.</p> </li> </ol> </div></aside> <h2 id="example-3-mathematical-expressions"><strong>Example 3:</strong> Mathematical expressions</h2> <p>Historically, math expressions have often been presented as images because of the difficulty of presenting equations and special math symbols with HTML. However, MathML is emerging as the preferred presentation of accessible math on the Web.</p> <h3 id="using-images">Using images</h3> <p>The image below displays a recurring decimal number (decimal numbers that never end). The <code class="language-plaintext highlighter-rouge">alt</code> text for this recurring number is “0.3333 recurring. (In the image, the recurrence is indicated by a line over the ‘3’ in the fourth decimal place.)”</p> <p>In this particular example, the way that the recurrence is shown is important, so it is also described in the text alternative. As with other images, the author is in the best position to determine what information is intended to be conveyed by the image and construct the text alternative accordingly.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <p><img src="/WAI/content-images/tutorials/images/repeat1.png" alt="0.3333 recurring. (The recurrence is indicated by a line over the ‘3’ in the fourth decimal place)" /></p> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><img</span> <span class="na">src=</span><span class="s">"0dot3333recurring.png"</span> <span class="na">alt=</span><span class="s">"0.3333 recurring. (The recurrence is indicated by a line over the ‘3’ in the fourth decimal place)"</span><span class="nt">></span> </code></pre></div></div> </div></aside> <h3 id="using-mathml">Using MathML</h3> <p>Images of math expressions should only be used in <em>exceptional circumstances</em> – for example when the expression is an exception to the regular content of the page or website. The preferred method for displaying math expressions is MathML, which can present mathematical expressions semantically.</p> <p>If math forms are a substantial part of the content (for example, for online maths courses), <a href="https://www.w3.org/Math/">MathML</a> should be used instead. MathML represents both presentation and content semantically, making it potentially more accessible to a wider range of users.</p> <aside class="box box-simple box-right"><header class="box-h box-h-simple box-h-right"> Accessibility Support: MathML, Web Browsers, and Assistive Technologies</header><div class="box-i"> <p>Most web browsers need plugins to render MathML correctly – especially for the new MathML 3.0 features used in this example. To see the MathML example below, <a href=" https://addons.mozilla.org/en-US/firefox/addon/presentation-mathml-polyfill/">this Firefox plugin</a> may be needed.</p> <p>Some libraries that polyfill MathML for web browsers, like <a href="https://www.mathjax.org">MathJax</a>, provide support for accessibility features.</p> <p>Accessibility support for MathML varies, but continues to improve as web browsers and assistive technology evolve. It is important to evaluate MathML support before deciding which techniques to use.</p> <p>Find more information about the state of MathML <a href="https://trac.webkit.org/wiki/MathML">in Webkit-based</a> and <a href="https://developer.mozilla.org/en-US/docs/Mozilla/MathML_Project/Status">in Mozilla-based browsers</a>.</p> </div></aside> <p>The simple example of the recurring number illustrates the difficulty of describing both the content and presentation in mathematical expressions succinctly and clearly. Specifically, it is cumbersome to describe the position and location of the over-line representing recurrence, though it is important for some classroom settings. For more complex expressions or equations, text alternatives for images are unlikely to provide sufficient detail succinctly. MathML helps provide such semantics within the code rather than as text.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example</header><div class="box-i"> <math> <mstack stackalign="right"> <msline length="1" /> <mn> 0.3333 </mn> </mstack> </math> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Code</header><div class="box-i"> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><math></span> <span class="nt"><mstack</span> <span class="na">stackalign=</span><span class="s">"right"</span><span class="nt">></span> <span class="nt"><msline</span> <span class="na">length=</span><span class="s">"1"</span><span class="nt">/></span> <span class="nt"><mn></span> 0.3333 <span class="nt"></mn></span> <span class="nt"></mstack></span> <span class="nt"></math></span> </code></pre></div></div> </div></aside> <aside class="box box-simple box-notes"><header class="box-h box-h-simple box-h-notes"> Note</header><div class="box-i"> <p>The above code includes semantic information that conveys both content and presentation to assistive technologies.</p> </div></aside> <aside class="box box-large box-icon" id="related"><header class="box-h box-h-large box-h-icon box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-default "><use xlink:href="/WAI/assets/images/icons.svg#icon-default"></use></svg> Related WCAG resources</header><div class="box-i"> <p>These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combined the following WCAG success criteria and techniques from different conformance levels:</p> <p><strong>Techniques:</strong></p> <ul><li><a href="https://www.w3.org/TR/WCAG20-TECHS/C22">C22: Using CSS to control visual presentation of text</a></li><li><a href="https://www.w3.org/TR/WCAG20-TECHS/G94">G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content</a></li></ul> </div></aside> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href="/WAI/tutorials/images/functional/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-left pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-left"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Previous:</span> <span class="pager--item-text-target">Functional Images</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/tutorials/images/complex/"> <svg focusable="false" aria-hidden="true" class="icon-arrow-right pager--item-icon"><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-right"></use></svg> <span class="pager--item-text"> <span class="pager--item-text-direction">Next:</span> <span class="pager--item-text-target">Complex Images</span> </span> </a> </li> </ul></nav><aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i"><p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button"><span>E-mail</span></a><a href=" https://github.com/w3c/wai-website/edit/main/pages/design-develop/tutorials/images/textual.md " class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&wai-resource-id=wai-tutorials&wai-url=https://www.w3.org/WAI/tutorials/images/textual/" class="button"><span>New GitHub Issue</span></a></div></div></aside> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Back to Top</span></a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"> <div><strong>Status:</strong> Updated 12 April 2017 </div> <div> Editors: <ul class="sentence"> <li><a href="https://www.w3.org/People/yatil/">Eric Eggert</a></li> <li><a href="https://www.w3.org/People/shadi/">Shadi Abou-Zahra</a></li> </ul>   Update Editor: <ul class="sentence"> <li>Brian Elton</li> </ul>   Contributors: <ul class="sentence"> <li>see <a href="/WAI/tutorials/acknowledgements/">Acknowledgements</a></li> </ul> </div> <p>Developed by the Education and Outreach Working Group (<a href="https://www.w3.org/groups/wg/eowg">EOWG</a>). Developed with support from the <a href="https://www.w3.org/WAI/ACT/">WAI-ACT project</a>, co-funded by the <strong>European Commission <abbr title="Information Society Technologies">IST</abbr> Programme</strong>.</p> </div> </footer><footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 2025 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1739902561245459979"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1739902561245459979"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>