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?1732542395990846989"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1732542395990846989"> <title> Writing for Web Accessibility – Tips for Getting Started | Web Accessibility Initiative (WAI) | W3C</title><link rel="stylesheet" href="/WAI/tips/css/tips.css?1732542395990846989"> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Writing for Web Accessibility – Tips for Getting Started" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Summary" /> <meta property="og:description" content="Summary" /> <link rel="canonical" href="https://www.w3.org/WAI/tips/writing/" /> <meta property="og:url" content="https://www.w3.org/WAI/tips/writing/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:type" content="article" /> <meta property="article:published_time" content="2024-11-25T13:46:35+00:00" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:title" content="Writing for Web Accessibility – Tips for Getting Started" /> <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":"BlogPosting","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"dateModified":"2024-11-25T13:46:35+00:00","datePublished":"2024-11-25T13:46:35+00:00","description":"Summary","headline":"Writing for Web Accessibility – Tips for Getting Started","mainEntityOfPage":{"@type":"WebPage","@id":"https://www.w3.org/WAI/tips/writing/"},"url":"https://www.w3.org/WAI/tips/writing/"}</script>  <meta name="twitter:image" property="og:image" content="https://www.w3.org/WAI/assets/images/social-sharing-default.jpg"> <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-writing-for-web-accessibility-tips-for-getting-started resource-tips"> <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 languagelist"> <strong>This page in:</strong> <ul class="languagelistul"><li><strong style="text-transform: capitalize;">English</strong></li><li><a style="text-transform: capitalize;" href="/WAI/tips/writing/fr" lang="fr" dir="auto" translate="no">français</a></li> <li><a style="text-transform: capitalize;" href="/WAI/tips/writing/id" lang="id" dir="auto" translate="no">Bahasa Indonesia</a></li> <li><a style="text-transform: capitalize;" href="/WAI/tips/writing/ja" lang="ja" dir="auto" translate="no">日本語</a></li> </ul> </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> <li><button id="showoptions" data-showhidebuttonid="header-showoptions" class="showhidebutton button-inline" data-target="#controls .opt" aria-expanded="false" data-large-aria-expanded="true" data-showtext='<svg focusable="false" aria-hidden="true" class="icon-languages "><use xlink:href="/WAI/assets/images/icons.svg#icon-languages"></use></svg> Show Customization, Languages, Translations' data-hidetext='Hide Options'><svg focusable="false" aria-hidden="true" class="icon-languages "><use xlink:href="/WAI/assets/images/icons.svg#icon-languages"></use></svg> Show Customization, Languages, Translations</button></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/tips/writing/" aria-current="page"><span>Tips for Writing</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/" aria-current="page" 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/" 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/" 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/" 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><nav class="sidenav-languages" aria-labelledby="languagehead"> <header id="languagehead">Languages/Translations</header> <ul class="langlist"> <li style="margin-bottom: 2px;"><strong style="text-transform: capitalize;">English (original)</strong></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/tips/writing/fr" dir="auto" translate="no" lang="fr">français</a></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/tips/writing/id" dir="auto" translate="no" lang="id">Bahasa Indonesia</a></li><li style="margin-bottom: 2px;"><a style="text-transform: capitalize;" href="/WAI/tips/writing/ja" dir="auto" translate="no" lang="ja">日本語</a></li></ul> <p><a href="/WAI/translations/">All Translations</a></p> <p><a href="/WAI/about/translating/">Translating WAI Resources</a></p> </nav> </div> <main id="main" lang="en"> <header class="in-resource"> <h1> <svg class="icon-in-title" aria-hidden="true"><use xlink:href="/WAI/content-images/tips/icons.svg#writing"></use></svg> Writing for Web Accessibility </h1><p>in <a lang="en" href="/WAI/tips/"><span>Tips for Getting Started</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>This page introduces some basic considerations to help you get started writing web content that is more accessible to people with disabilities. These tips are good practice to help you meet Web Content Accessibility Guidelines (WCAG) requirements. Follow the links to the related WCAG requirements, detailed background in the “Understanding” document, guidance from Tutorials, user stories, and more.</p> </div></aside> <nav class="box box-simple box-full" aria-labelledby="tocheading" id="toc"> <header id="tocheading" class="box-h box-h-simple box-h-full"> Page Contents</header> <div class="box-i"> <ul id="markdown-toc"> <li><a href="#provide-informative-unique-page-titles" id="markdown-toc-provide-informative-unique-page-titles">Provide informative, unique page titles</a></li> <li><a href="#use-headings-to-convey-meaning-and-structure" id="markdown-toc-use-headings-to-convey-meaning-and-structure">Use headings to convey meaning and structure</a></li> <li><a href="#make-link-text-meaningful" id="markdown-toc-make-link-text-meaningful">Make link text meaningful</a></li> <li><a href="#write-meaningful-text-alternatives-for-images" id="markdown-toc-write-meaningful-text-alternatives-for-images">Write meaningful text alternatives for images</a></li> <li><a href="#create-transcripts-and-captions-for-multimedia" id="markdown-toc-create-transcripts-and-captions-for-multimedia">Create transcripts and captions for multimedia</a></li> <li><a href="#provide-clear-instructions" id="markdown-toc-provide-clear-instructions">Provide clear instructions</a></li> <li><a href="#keep-content-clear-and-concise" id="markdown-toc-keep-content-clear-and-concise">Keep content clear and concise</a></li> </ul> </div> </nav> <h2 id="provide-informative-unique-page-titles">Provide informative, unique page titles</h2> <p>For each web page, provide a short title that describes the page content and distinguishes it from other pages. The page title is often the same as the main heading of the page. Put the unique and most relevant information first; for example, put the name of the page before the name of the organization. For pages that are part of a multi-step process, include the current step in the page title.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example: Page Titles</header><div class="box-i"> <div class="page-title"> <figure> <figcaption><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Home page title</figcaption> <div> <svg version="1.1" width="462" height="27"> <g transform="scale(1.2)"> <path class="banner" d="M 0 9.75 L 0 14.8125 L 0 21.625 L 384.5 21.625 L 384.5 14.8125 L 384.5 9.75 L 384.5 3.25 C 384.5 1.59314575 383.15685 .25 381.5 .25 L 3 .25 C 1.34314575 .25 0 1.59314575 0 3.25 Z" fill="#f5f5f5" /> <text transform="translate(10 15)">Space Teddy Inc.</text> <g transform="translate(333 4)"> <rect x="0" y="9.5" width="10" height="1.5" /> <path d="M 24 10 L 17 10 L 17 4 L 24 4 Z M 16 11 L 25 11 L 25 3 L 16 3 Z" /> <path d="M 41 3 L 40 2 L 36 6 L 32 2 L 31 3 L 35 7 L 31 11 L 32 12 L 36 8 L 40 12 L 41 11 L 37 7 Z" /> </g> </g> </svg> </div> </figure> <figure> <figcaption><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Page name followed by organization name</figcaption> <div> <svg version="1.1" width="462" height="27"> <g transform="scale(1.2)"> <path class="banner" d="M 0 9.75 L 0 14.8125 L 0 21.625 L 384.5 21.625 L 384.5 14.8125 L 384.5 9.75 L 384.5 3.25 C 384.5 1.59314575 383.15685 .25 381.5 .25 L 3 .25 C 1.34314575 .25 0 1.59314575 0 3.25 Z" fill="#f5f5f5" /> <text transform="translate(10 15)">Latest News • Space Teddy Inc.</text> <g transform="translate(333 4)"> <rect x="0" y="9.5" width="10" height="1.5" /> <path d="M 24 10 L 17 10 L 17 4 L 24 4 Z M 16 11 L 25 11 L 25 3 L 16 3 Z" /> <path d="M 41 3 L 40 2 L 36 6 L 32 2 L 31 3 L 35 7 L 31 11 L 32 12 L 36 8 L 40 12 L 41 11 L 37 7 Z" /> </g> </g> </svg> </div> </figure> <figure> <figcaption><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Page name including step in a process</figcaption> <div> <svg version="1.1" width="462" height="27"> <g transform="scale(1.2)"> <path class="banner" d="M 0 9.75 L 0 14.8125 L 0 21.625 L 384.5 21.625 L 384.5 14.8125 L 384.5 9.75 L 384.5 3.25 C 384.5 1.59314575 383.15685 .25 381.5 .25 L 3 .25 C 1.34314575 .25 0 1.59314575 0 3.25 Z" fill="#f5f5f5" /> <text transform="translate(10 15)">Buy Your Bear (Step 1 of 3) • Space Teddy Inc.</text> <g transform="translate(333 4)"> <rect x="0" y="9.5" width="10" height="1.5" /> <path d="M 24 10 L 17 10 L 17 4 L 24 4 Z M 16 11 L 25 11 L 25 3 L 16 3 Z" /> <path d="M 41 3 L 40 2 L 36 6 L 32 2 L 31 3 L 35 7 L 31 11 L 32 12 L 36 8 L 40 12 L 41 11 L 37 7 Z" /> </g> </g> </svg> </div> </figure> </div> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#page-titled">Page Titled 2.4.2</a> (<a href="/WAI/WCAG21/Understanding/page-titled">Understanding 2.4.2</a>)</li> </ul> </li> </ul> </div></aside> <h2 id="use-headings-to-convey-meaning-and-structure">Use headings to convey meaning and structure</h2> <p>Use short headings to group related paragraphs and clearly describe the sections. Good headings provide an outline of the content.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example: Using headings to organize content</header><div class="box-i"> <div class="heading-structure two-column"> <figure> <figcaption><svg focusable="false" aria-label="Wrong" class="icon-ex-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-ex-circle"></use></svg> Lack of headings</figcaption> <div> <img src="/WAI/content-images/tips/headings-poor.png" alt="Illustration of no headings, see below for detailed example" /> </div> <details id="no-headings"><summary> <p>View inline example</p> </summary> <div> <h2 id="no-headings-modal-title"><span class="visuallyhidden">Example: </span>Headings and Subheadings</h2> <p>HTML elements provide information on structural hierarchy of a document. Using elements correctly will help convey additional meaning to assistive technology. In many cases, doing so will also make your document easier to edit.</p> <p>For documents longer than three or four paragraphs, headings and subheadings are important for usability and accessibility. They help readers to determine the overall outline of a document and to navigate to specific information of interest.</p> <p>Headings are classified into levels from one to six. The highest level is "Level 1" and often corresponds to the title of the page or major document section.</p> <p>Visual readers identify headers by scanning pages for text of a larger size or a different style. Assistive technology users are not able to see these visual changes, so changing the style is not a sufficient cue.</p> <p>Instead, the headings must be semantically "tagged" so that assistive technology can identify headings. Then headings can also be used for navigation.</p> <p>This makes adding headings one of the most important tools for screen reader users, so that they can learn what is on the page. Note that tagging usually triggers a formatting change visually which can be adjusted in many documents.</p> <p><cite>Adapted from <a href="https://accessibility.psu.edu/headings/">Headings and Subheadings at Penn State</a></cite></p> </div> </details> </figure> <figure> <figcaption><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Using headings and subheadings</figcaption> <div> <img src="/WAI/content-images/tips/headings-good.png" alt="Illustration of good heading structure, see below for detailed example" /> </div> <details id="headings-good"><summary> <p>View inline example</p> </summary> <div> <h2 id="headings-modal-title"><span class="visuallyhidden">Example: </span>Headings and Subheadings</h2> <p><abbr>HTML</abbr> elements provide information on structural hierarchy of a document. Using elements correctly will help convey additional meaning to assistive technology. In many cases, doing so will also make your document easier to edit.</p> <h3><span class="visuallyhidden">Example: </span>Purpose of Headings</h3> <p>For documents longer than three or four paragraphs, headings and subheadings are important for usability and accessibility. They help readers to determine the overall outline of a document and to navigate to specific information of interest.</p> <h4><span class="visuallyhidden">Example: </span>Heading Levels</h4> <p>Headings are classified into levels from one to six. The highest level is "Level 1" and often corresponds to the title of the page or major document section.</p> <h3><span class="visuallyhidden">Example: </span>Meaning vs. Formatting</h3> <p>Visual readers identify headers by scanning pages for text of a larger size or a different style. Assistive technology users are not able to see these visual changes, so changing the style is not a sufficient cue.</p> <p>Instead, the headings must be semantically "tagged" so that assistive technology can identify headings. Then headings can also be used for navigation.</p> <p>This makes adding headings one of the most important tools for screen reader users, so that they can learn what is on the page. Note that tagging usually triggers a formatting change visually which can be adjusted in many documents.</p> <p><cite>Adapted from <a href="https://accessibility.psu.edu/headings/">Headings and Subheadings at Penn State</a></cite></p> </div> </details> </figure> </div> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#headings-and-labels">Headings and Labels 2.4.6</a> (<a href="/WAI/WCAG21/Understanding/headings-and-labels">Understanding 2.4.6</a>)</li> <li><a href="/WAI/WCAG21/quickref/#section-headings">Section Headings 2.4.10</a> (<a href="/WAI/WCAG21/Understanding/section-headings">Understanding 2.4.10</a>)</li> <li><a href="/WAI/WCAG21/quickref/#info-and-relationships">Info and Relationships 1.3.1</a> (<a href="/WAI/WCAG21/Understanding/info-and-relationships">Understanding 1.3.1</a>)</li> </ul> </li> <li><strong>User Stories</strong> <ul> <li><a href="/WAI/people-use-web/user-stories/story-one/">Ade, reporter with limited use of his arms</a></li> <li><a href="/WAI/people-use-web/user-stories/story-two/">Ian, data entry clerk with autism</a></li> <li><a href="/WAI/people-use-web/user-stories/story-three/">Lakshmi, senior accountant who is blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-eight/">Stefan, student with attention deficit hyperactivity disorder and dyslexia</a></li> </ul> </li> </ul> </div></aside> <h2 id="make-link-text-meaningful">Make link text meaningful</h2> <p>Write link text so that it describes the content of the link target. Avoid using ambiguous link text, such as ‘click here’ or ‘read more’. Indicate relevant information about the link target, such as document type and size, for example, ‘Proposal Documents (RTF, 20MB)’.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example: Using link text to describe target page</header><div class="box-i"> <div class="meaningful-links two-column"> <figure> <figcaption><svg focusable="false" aria-label="Wrong" class="icon-ex-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-ex-circle"></use></svg> No information</figcaption> <div> <p class="fail">For more information on device independence, <a href="javascript:return false">click here</a>.</p> </div> </figure> <figure> <figcaption><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Meaningful information</figcaption> <div> <p class="pass">Read more <a href="javascript: return false">about device independence</a>.</p> </div> </figure> </div> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#link-purpose-in-context">Link Purpose (In Context) 2.4.4</a> (<a href="/WAI/WCAG21/Understanding/link-purpose-in-context">Understanding 2.4.4</a>)</li> <li><a href="/WAI/WCAG21/quickref/#link-purpose-link-only">Link Purpose (Link Only) 2.4.9</a> (<a href="/WAI/WCAG21/Understanding/link-purpose-link-only">Understanding 2.4.9</a>)</li> </ul> </li> <li><strong>User Stories</strong> <ul> <li><a href="/WAI/people-use-web/user-stories/story-one/">Ade, reporter with limited use of his arms</a></li> <li><a href="/WAI/people-use-web/user-stories/story-two/">Ian, data entry clerk with autism</a></li> <li><a href="/WAI/people-use-web/user-stories/story-three/">Lakshmi, senior accountant who is blind</a></li> <li><a href="/WAI/people-use-web/user-stories/story-eight/">Stefan, student with attention deficit hyperactivity disorder and dyslexia</a></li> <li><a href="/WAI/people-use-web/user-stories/story-nine/">Elias, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> </ul> </li> </ul> </div></aside> <h2 id="write-meaningful-text-alternatives-for-images">Write meaningful text alternatives for images</h2> <p>For every image, write alternative text that provides the information or function of the image. For purely decorative images, there is no need to write alternative text.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example: Using alternative text to communicate important information</header><div class="box-i"> <div class="text-alt two-column"> <figure> <figcaption><svg focusable="false" aria-label="Wrong" class="icon-ex-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-ex-circle"></use></svg> Uninformative</figcaption> <div> <img src="/WAI/content-images/tips/phone_charging.png" alt="Charging phone" /> <div> <p> Charging the phone: Connect the phone to a power outlet using the cable and power adaptor provided.</p> <p><strong>Alternative text for image</strong>: "Charging phone"</p> </div> </div> </figure> <figure> <figcaption><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Informative</figcaption> <div> <img src="/WAI/content-images/tips/phone_charging.png" alt="Plug cable into the bottom edge of the phone." /> <div> <p>Charging the phone: Connect the phone to a power outlet using the cable and power adaptor provided.</p> <p><strong>Alternative text for image</strong>: "Plug cable into the bottom edge of the phone."</p> </div> </div> </figure> </div> <p class="note">Alternative text is usually not visible; it is included in this example just so you can see what it is.</p> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#non-text-content">Non-text Content 1.1.1</a> (<a href="/WAI/WCAG21/Understanding/non-text-content">Understanding 1.1.1</a>)</li> </ul> </li> <li><strong>Tutorial</strong> <ul> <li><a href="/WAI/tutorials/images/">Images</a></li> </ul> </li> <li><strong>User Story</strong> <ul> <li><a href="/WAI/people-use-web/user-stories/story-three/">Lakshmi, senior accountant who is blind</a></li> </ul> </li> </ul> </div></aside> <h2 id="create-transcripts-and-captions-for-multimedia">Create transcripts and captions for multimedia</h2> <p>For audio-only content, such as a podcast, provide a transcript. For audio and visual content, such as training videos, also provide captions. Include in the transcripts and captions the spoken information and sounds that are important for understanding the content, for example, ‘door creaks’. For video transcripts, also include a description of the important visual content, for example ‘Athan leaves the room’.</p> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li> <p><strong><a href="/WAI/media/av/">Making Audio and Video Media Accessible</a></strong></p> </li> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#captions-prerecorded">Captions (Prerecorded) 1.2.2</a> (<a href="/WAI/WCAG21/Understanding/captions-prerecorded">Understanding 1.2.2</a>)</li> <li><a href="/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded">Audio Description or Media Alternative (Prerecorded) 1.2.3</a> (<a href="/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded">Understanding 1.2.3</a>)</li> </ul> </li> <li><strong>User Stories</strong> <ul> <li><a href="/WAI/people-use-web/user-stories/story-six/">Dhruv, older adult student who is deaf</a></li> <li><a href="/WAI/people-use-web/user-stories/story-seven/">Marta, marketing assistant who is deaf and blind</a></li> </ul> </li> </ul> </div></aside> <h2 id="provide-clear-instructions">Provide clear instructions</h2> <p>Ensure that instructions, guidance, and error messages are clear, easy to understand, and avoid unnecessarily technical language. Describe input requirements, such as date formats.</p> <aside class="box box-example"><header class="box-h box-h-example"> Example: Instructions communicate what information the user should provide</header><div class="box-i"> <div class="errors"> <figure> <div> <form action="#" method="post"> <p id="password-desc">Password should be at least six characters with at least one number (0-9).</p> <div class="row"> <label for="password">Password</label> <input aria-describedby="password-desc" type="password" id="password" name="password" value="" /> </div> </form> </div> </figure> </div> </div></aside> <aside class="box box-example"><header class="box-h box-h-example"> Example: Error indicates what the problem is and, possibly, how to fix it</header><div class="box-i"> <div class="errors"> <figure> <div> <ol class="fa-ul error-list"> <li id="error_email"><svg focusable="false" aria-label="Error" class="icon-warning "><use xlink:href="/WAI/assets/images/icons.svg#icon-warning"></use></svg> <a href="javascript:return false">The username 'superbear' is already in use.</a></li> <li id="error_password"><svg focusable="false" aria-label="Error" class="icon-warning "><use xlink:href="/WAI/assets/images/icons.svg#icon-warning"></use></svg> <a href="javascript:return false">The password needs to include at least one number.</a></li> </ol> </div> </figure> </div> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#labels-or-instructions">Labels or Instructions 3.3.2</a> (<a href="/WAI/WCAG21/Understanding/labels-or-instructions">Understanding 3.3.2</a>)</li> </ul> </li> <li><strong>User Stories</strong> <ul> <li><a href="/WAI/people-use-web/user-stories/story-two/">Ian, data entry clerk with autism</a></li> <li><a href="/WAI/people-use-web/user-stories/story-eight/">Stefan, student with attention deficit hyperactivity disorder and dyslexia</a></li> <li><a href="/WAI/people-use-web/user-stories/story-nine/">Elias, retiree with low vision, hand tremor, and mild short-term memory loss</a></li> </ul> </li> </ul> </div></aside> <h2 id="keep-content-clear-and-concise">Keep content clear and concise</h2> <p>Use simple language and formatting, as appropriate for the context.</p> <ul> <li>Write in short, clear sentences and paragraphs.</li> <li>Avoid using unnecessarily complex words and phrases.</li> <li>Expand acronyms on first use. For example, Web Content Accessibility Guidelines (WCAG).</li> <li>Consider providing a glossary for terms readers may not know.</li> <li>Use list formatting as appropriate.</li> <li>Consider using images, illustrations, video, audio, and symbols to help clarify meaning.</li> </ul> <aside class="box box-example"><header class="box-h box-h-example"> Example: Making content readable and understandable</header><div class="box-i"> <div class="two-column"> <figure class="from-col1 to-col2"> <figcaption><svg focusable="false" aria-label="Wrong" class="icon-ex-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-ex-circle"></use></svg> Unnecessarily complex</figcaption> <div> <p class="fail">CPP: In the event of a vehicular collision, a company assigned representative will seek to ascertain the extent and cause of damages to property belonging to all parties involved. Once our representative obtains information that allows us to understand the causality, we may or may not assign appropriate monetary compensation. The resulting decision may occasion one of the following options: the claim is not approved and is assigned a rejected status, the status of the claim is ambiguous and will require additional information before further processing can occur, the claim is partially approved and reduced payment is assigned and issued, or claim is fully approved and total claim payment is assigned and issued.</p> </div> </figure> <figure class="from-col3 to-col4"> <figcaption><svg focusable="false" aria-label="OK" class="icon-check-circle "><use xlink:href="/WAI/assets/images/icons.svg#icon-check-circle"></use></svg> Easier to understand</figcaption> <div> <p class="pass">Claims Processing Procedure (CPP): If you have a car accident, our agent will investigate. Findings will determine any claim payment. This could result in:</p> <ul> <li>Approved claim - full payment</li> <li>Partially approved claim - reduced payment</li> <li>Undetermined claim - more information needed</li> <li>Rejected claim - no payment</li> </ul> <p><img src="/WAI/content-images/tips/clear_text_diagram.png" alt="" style="" /></p> </div> </figure> </div> </div></aside> <aside class="box box-simple"><header class="box-h box-h-simple"> More Information</header><div class="box-i"> <ul> <li><strong>WCAG</strong> <ul> <li><a href="/WAI/WCAG21/quickref/#reading-level">Reading Level 3.1.5</a> (<a href="/WAI/WCAG21/Understanding/reading-level">Understanding 3.1.5</a>)</li> <li><a href="/WAI/WCAG21/quickref/#unusual-words">Unusual Words 3.1.3</a> (<a href="/WAI/WCAG21/Understanding/unusual-words">Understanding 3.1.3</a>)</li> <li><a href="/WAI/WCAG21/quickref/#abbreviations">Abbreviations 3.1.4</a> (<a href="/WAI/WCAG21/Understanding/abbreviations">Understanding 3.1.4</a>)</li> </ul> </li> <li><strong>User Stories</strong> <ul> <li><a href="/WAI/people-use-web/user-stories/story-two/">Ian, data entry clerk with autism</a></li> <li><a href="/WAI/people-use-web/user-stories/story-five/">Sophie, basketball fan with Down syndrome</a></li> <li><a href="/WAI/people-use-web/user-stories/story-eight/">Stefan, student with attention deficit hyperactivity disorder and dyslexia</a></li> </ul> </li> </ul> </div></aside> <aside class="box box-large"><header class="box-h box-h-large box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-readmore "><use xlink:href="/WAI/assets/images/icons.svg#icon-readmore"></use></svg> Learn More About Accessibility</header><div class="box-i"> <p>These tips are a few of the things you need to consider for web accessibility. Additional guidance on writing that meets the accessibility needs of people with cognitive and learning disabilities is in <strong><a href="https://www.w3.org/WAI/WCAG2/supplemental/objectives/o3-clear-content/">Use Clear and Understandable Content</a></strong>.</p> <p>The following resources help you learn why accessibility is important, and about guidelines for making the web more accessible to people with disabilities.</p> <ul> <li><a href="/WAI/fundamentals/accessibility-intro/">Accessibility Introduction</a> — Introduces accessibility and provides links to many helpful resources</li> <li><a href="/WAI/fundamentals/accessibility-principles/">Accessibility Principles</a> — An introduction to the <abbr>WCAG</abbr> requirements</li> <li><a href="/WAI/people-use-web/">How people with disabilities use the web</a> — Real-life examples showing the importance of accessibility for people with disabilities</li> <li><a href="/WAI/WCAG21/quickref/">How to Meet WCAG (Quick Reference)</a> — customizable reference of all WCAG requirements and techniques</li> </ul> </div></aside> <nav class="pager" aria-label="Previous/Next Page" style="clear: both;"> <ul><li class="pager--item previous"> <a href="/WAI/tips/"> <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">Overview</span> </span> </a> </li><li class="pager--item next"> <a href="/WAI/tips/designing/"> <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">Tips for Designing</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/collections/_tips/writing.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-tips&wai-url=https://www.w3.org/WAI/tips/writing/" 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"><p><strong>Updated:</strong> 16 July 2024. <a href="/WAI/tips/changelog/">Latest changes</a>.</p><p><strong>Date:</strong> Minor update 16 July 2024. Updated 5 August 2022. First published September 2015.</p> <p><strong>Editors:</strong> <a href="https://www.w3.org/People/kevin">Kevin White</a>, <a href="https://www.w3.org/People/shadi">Shadi Abou-Zahra</a>, and <a href="https://www.w3.org/People/Shawn">Shawn Lawton Henry</a>. <a href="/WAI/tips/acknowledgements/">Acknowledgements</a>.</p> <p>Developed by the <a href="https://www.w3.org/WAI/EO/">Education and Outreach Working Group (EOWG)</a>. Developed with support from the <a href="https://www.w3.org/WAI/DEV/">WAI-DEV project</a>, co-funded by the European Commission <abbr title="Information Society Technologies">IST</abbr> Programme.</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 © 2024 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?1732542395990846989"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1732542395990846989"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>