CINXE.COM

<!doctype html> <html lang="en-US" prefix="og: https://ogp.me/ns#"> <head> <base href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"> <link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"> <meta name="theme-color" content="#ffffff"> <link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"> <link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"> <title>HTML: A good basis for accessibility - Learn web development | MDN</title> <link rel="alternate" title="HTML: Eine gute Grundlage für Barrierefreiheit" href="https://developer.mozilla.org/de/docs/Learn/Accessibility/HTML" hreflang="de"> <link rel="alternate" title="HTML: Una buena base para la accesibilidad" href="https://developer.mozilla.org/es/docs/Learn/Accessibility/HTML" hreflang="es"> <link rel="alternate" title="HTML : une bonne base pour l'accessibilité" href="https://developer.mozilla.org/fr/docs/Learn/Accessibility/HTML" hreflang="fr"> <link rel="alternate" title="HTML: アクセシビリティの良き基本" href="https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML" hreflang="ja"> <link rel="alternate" title="HTML: 접근성의 좋은 기반" href="https://developer.mozilla.org/ko/docs/Learn/Accessibility/HTML" hreflang="ko"> <link rel="alternate" title="HTML: Boas práticas em acessibilidade" href="https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/HTML" hreflang="pt"> <link rel="alternate" title="HTML: Хорошая основа для доступности" href="https://developer.mozilla.org/ru/docs/Learn/Accessibility/HTML" hreflang="ru"> <link rel="alternate" title="HTML：无障碍的良好基础" href="https://developer.mozilla.org/zh-CN/docs/Learn/Accessibility/HTML" hreflang="zh"> <link rel="alternate" title="HTML: A good basis for accessibility" href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML" hreflang="en"> <link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""> <link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hreflang="en"> <meta name="description" content="A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility."> <meta property="og:url" content="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML"> <meta property="og:title" content="HTML: A good basis for accessibility - Learn web development | MDN"> <meta property="og:type" content="website"> <meta property="og:locale" content="en_US"> <meta property="og:description" content="A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility."> <meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:height" content="1080"> <meta property="og:image:width" content="1920"> <meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."> <meta property="og:site_name" content="MDN Web Docs"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:creator" content="MozDevNet"> <link rel="canonical" href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML"> <style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style> <script src="/static/js/gtag.js" defer></script> <script defer src="/static/js/main.30156711.js"></script> <link href="/static/css/main.f41bc727.css" rel="stylesheet"> <meta http-equiv="X-Translated-By" content="Google"> <meta http-equiv="X-Translated-To" content="fr"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.1_qyHg0XphE.O/am=DAY/d=1/rs=AN8SPfo_O3MiUOHLzIFK2FbMzbiipwQcbg/m=corsproxy" data-sourceurl="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML"></script> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.1_qyHg0XphE.O/am=DAY/d=1/exm=corsproxy/ed=1/rs=AN8SPfo_O3MiUOHLzIFK2FbMzbiipwQcbg/m=phishing_protection" data-phishing-protection-enabled="false" data-forms-warning-enabled="true" data-source-url="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML"></script> <meta name="robots" content="none"> </head> <body> <script type="text/javascript" src="https://www.gstatic.com/_/translate_http/_/js/k=translate_http.tr.en_GB.1_qyHg0XphE.O/am=DAY/d=1/exm=corsproxy,phishing_protection/ed=1/rs=AN8SPfo_O3MiUOHLzIFK2FbMzbiipwQcbg/m=navigationui" data-environment="prod" data-proxy-url="https://developer-mozilla-org.translate.goog" data-proxy-full-url="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" data-source-url="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML" data-source-language="pl" data-target-language="fr" data-display-language="en-GB" data-detected-source-language="" data-is-source-untranslated="false" data-source-untranslated-url="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML&anno=2" data-client="tr"></script> <script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script> <div id="root"> <ul id="nav-access" class="a11y-nav"> <li><a id="skip-main" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#content">Skip to main content</a></li> <li><a id="skip-search" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#top-nav-search-input">Skip to search</a></li> <li><a id="skip-select-language" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#languages-switcher-button">Skip to select language</a></li> </ul> <div class="page-wrapper category-learn document-page"> <div class="top-banner loading"> <section class="place top container"></section> </div> <div class="sticky-header-container"> <header class="top-navigation "> <div class="container "> <div class="top-navigation-wrap"> <a href="https://developer-mozilla-org.translate.goog/en-US/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="logo" aria-label="MDN homepage"> <svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewbox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"> <title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path> </svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button> </div> <div class="top-navigation-main"> <nav class="main-nav" aria-label="Main menu"> <ul class="main-menu nojs"> <li class="top-level-entry-container "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="top-level-entry">References</a> <ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"> <li class="apis-link-container mobile-only "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Overview / Web Technology </div> <p class="submenu-item-description">Web technology reference for developers</p> </div></a></li> <li class="html-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon html"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> HTML </div> <p class="submenu-item-description">Structure of content on the web</p> </div></a></li> <li class="css-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon css"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> CSS </div> <p class="submenu-item-description">Code used to describe document style</p> </div></a></li> <li class="javascript-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon javascript"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> JavaScript </div> <p class="submenu-item-description">General-purpose scripting language</p> </div></a></li> <li class="http-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTTP?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon http"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> HTTP </div> <p class="submenu-item-description">Protocol for transmitting web resources</p> </div></a></li> <li class="apis-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon apis"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Web APIs </div> <p class="submenu-item-description">Interfaces for building web applications</p> </div></a></li> <li class="apis-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Mozilla/Add-ons/WebExtensions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Web Extensions </div> <p class="submenu-item-description">Developing extensions for web browsers</p> </div></a></li> <li class="apis-link-container desktop-only "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Web Technology </div> <p class="submenu-item-description">Web technology reference for developers</p> </div></a></li> </ul></li> <li class="top-level-entry-container active"><button type="button" id="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="top-level-entry">Guides</a> <ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"> <li class="apis-link-container mobile-only "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon learn"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Overview / MDN Learning Area </div> <p class="submenu-item-description">Learn web development</p> </div></a></li> <li class="apis-link-container desktop-only "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon learn"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> MDN Learning Area </div> <p class="submenu-item-description">Learn web development</p> </div></a></li> <li class="html-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon html"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> HTML </div> <p class="submenu-item-description">Learn to structure web content with HTML</p> </div></a></li> <li class="css-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon css"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> CSS </div> <p class="submenu-item-description">Learn to style content using CSS</p> </div></a></li> <li class="javascript-link-container "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon javascript"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> JavaScript </div> <p class="submenu-item-description">Learn to run scripts in the browser</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Accessibility </div> <p class="submenu-item-description">Learn to make the web accessible to all</p> </div></a></li> </ul></li> <li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="https://developer-mozilla-org.translate.goog/en-US/plus?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="top-level-entry">Plus</a> <ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Overview </div> <p class="submenu-item-description">A customized MDN experience</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/ai-help?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> AI Help </div> <p class="submenu-item-description">Get real-time assistance and support</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/updates?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Updates </div> <p class="submenu-item-description">All browser compatibility updates at a glance</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/docs/features/overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Documentation </div> <p class="submenu-item-description">Learn how to use MDN Plus</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/docs/faq?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> FAQ </div> <p class="submenu-item-description">Frequently asked questions about MDN Plus</p> </div></a></li> </ul></li> <li class="top-level-entry-container "><a class="top-level-entry menu-link" href="https://developer-mozilla-org.translate.goog/en-US/curriculum/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Curriculum <sup class="new">New</sup></a></li> <li class="top-level-entry-container "><a class="top-level-entry menu-link" href="https://developer-mozilla-org.translate.goog/en-US/blog/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Blog</a></li> <li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button> <ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/play?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> Playground </div> <p class="submenu-item-description">Write, test and share your code</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/observatory?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> HTTP Observatory </div> <p class="submenu-item-description">Scan a website for free</p> </div></a></li> <li class=" "><a href="https://developer-mozilla-org.translate.goog/en-US/plus/ai-help?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="submenu-item "> <div class="submenu-icon"></div> <div class="submenu-content-container"> <div class="submenu-item-heading"> AI Help </div> <p class="submenu-item-description">Get real-time assistance and support</p> </div></a></li> </ul></li> </ul> </nav> <div class="header-search"> <form action="/en-US/search" class="search-form search-widget" id="top-nav-search-form" role="search"> <label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autocomplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required value=""><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button> <div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div> </form> </div> <div class="theme-switcher-menu"> <button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button> </div> <ul class="auth-container"> <li><a href="https://developer-mozilla-org.translate.goog/users/fxa/login/authenticate/?next=/en-US/docs/Learn/Accessibility/HTML&_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="login-link" rel="nofollow">Log in</a></li> <li><a href="https://developer-mozilla-org.translate.goog/users/fxa/login/authenticate/?next=/en-US/docs/Learn/Accessibility/HTML&_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li> </ul> </div> </div> </header> <div class="article-actions-container"> <div class="container"> <button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button> <nav class="breadcrumbs-container" aria-label="Breadcrumb"> <ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"> <li property="itemListElement" typeof="ListItem"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Guides</span></a> <meta property="position" content="1"></li> <li property="itemListElement" typeof="ListItem"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Accessibility</span></a> <meta property="position" content="2"></li> <li property="itemListElement" typeof="ListItem"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">HTML: A good basis for accessibility</span></a> <meta property="position" content="3"></li> </ol> </nav> <div class="article-actions"> <button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button> <ul class="article-actions-entries"> <li class="article-actions-entry"> <div class="languages-switcher-menu open-on-focus-within"> <button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>English (US)</span></button> <div class="hidden"> <ul class="submenu language-menu " aria-labelledby="language-menu-button"> <li class=" "> <form class="submenu-item locale-redirect-setting"> <div class="group"> <label class="switch"><input type="checkbox" name="locale-redirect"><span class="slider"></span><span class="label">Remember language</span></label><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a> </div> </form></li> <li class=" "><a data-locale="de" href="https://developer-mozilla-org.translate.goog/de/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>Deutsch</span><span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></a></li> <li class=" "><a data-locale="es" href="https://developer-mozilla-org.translate.goog/es/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>Español</span></a></li> <li class=" "><a data-locale="fr" href="https://developer-mozilla-org.translate.goog/fr/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>Français</span></a></li> <li class=" "><a data-locale="ja" href="https://developer-mozilla-org.translate.goog/ja/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>日本語</span></a></li> <li class=" "><a data-locale="ko" href="https://developer-mozilla-org.translate.goog/ko/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>한국어</span></a></li> <li class=" "><a data-locale="pt-BR" href="https://developer-mozilla-org.translate.goog/pt-BR/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>Português (do Brasil)</span></a></li> <li class=" "><a data-locale="ru" href="https://developer-mozilla-org.translate.goog/ru/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>Русский</span></a></li> <li class=" "><a data-locale="zh-CN" href="https://developer-mozilla-org.translate.goog/zh-CN/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="button submenu-item"><span>中文 (简体)</span></a></li> </ul> </div> </div></li> </ul> </div> </div> </div> </div> <div class="main-wrapper"> <div class="sidebar-container"> <aside id="sidebar-quicklinks" class="sidebar"> <button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button> <nav aria-label="Related Topics" class="sidebar-inner"> <header class="sidebar-actions"> <section class="sidebar-filter-container"> <div class="sidebar-filter "> <label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autocomplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button> </div> </section> </header> <div class="sidebar-inner-nav"> <div class="in-nav-toc"> <div class="document-toc-container"> <section class="document-toc"> <header> <h2 class="document-toc-heading">In this article</h2> </header> <ul class="document-toc-list"> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#html_and_accessibility">HTML and accessibility</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#good_semantics">Good semantics</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#accessible_data_tables">Accessible data tables</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#text_alternatives">Text alternatives</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#more_on_links">More on links</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#test_your_skills!">Test your skills!</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#summary">Summary</a></li> </ul> </section> </div> </div> <div class="sidebar-body"> <ol> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Getting_started_with_the_web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Complete beginners start here!</a></li> <li class="toggle"> <details> <summary>Getting started with the web</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Getting_started_with_the_web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started with the web</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Installing basic software</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What will your website look like?</a><abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Dealing with files</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML basics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS basics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript basics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Publishing your website</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How the web works</a></li> </ol> </details></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML — Structuring the web</a></li> <li class="toggle"> <details> <summary>Introduction to HTML</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Introduction_to_HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to HTML</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started with HTML</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What's in the head? Metadata in HTML</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML text fundamentals</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Creating hyperlinks</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Advanced text formatting</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Document and website structure</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Debugging HTML</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Marking up a letter</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Structuring a page of content</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Multimedia and embedding</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Multimedia_and_embedding?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Multimedia and embedding</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Images in HTML</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Video and audio content</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">From object to iframe — other embedding technologies</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Adding vector graphics to the web</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Responsive images</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Mozilla splash page</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>HTML tables</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Tables?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML tables</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Tables/Basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML table basics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Tables/Advanced?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML table advanced features and accessibility</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Tables/Structuring_planet_data?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Structuring planet data</a></li> </ol> </details></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS — Styling the web</a></li> <li class="toggle"> <details> <summary>CSS first steps</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/First_steps?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS first steps</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/First_steps/What_is_CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What is CSS?</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/First_steps/Getting_started?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started with CSS</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How CSS is structured</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/First_steps/How_CSS_works?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How CSS works</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/First_steps/Styling_a_biography_page?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling a biography page</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>CSS building blocks</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS building blocks</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Selectors?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS selectors</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Type, class, and ID selectors</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Attribute selectors</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Pseudo-classes and pseudo-elements</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Combinators</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Cascade, specificity, and inheritance</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Cascade layers</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/The_box_model?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">The box model</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Backgrounds and borders</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Handling different text directions</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Overflowing content</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Values_and_units?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS values and units</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Sizing items in CSS</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Images, media, and form elements</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Styling_tables?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling tables</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Advanced styling effects</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Debugging CSS</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Organizing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Organizing your CSS</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Fundamental CSS comprehension</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Creating fancy letterheaded paper</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Building_blocks/A_cool_looking_box?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">A cool-looking box</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Styling text</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Styling_text?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS styling text</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Styling_text/Fundamentals?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Fundamental text and font styling</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Styling_text/Styling_lists?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling lists</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Styling_text/Styling_links?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling links</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Styling_text/Web_fonts?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web fonts</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Typesetting a community school homepage</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>CSS layout</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/CSS_layout?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS layout</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/CSS_layout/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to CSS layout</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Normal Flow</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/CSS_layout/Flexbox?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Flexbox</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/CSS_layout/Grids?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Grids</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/CSS_layout/Floats?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Floats</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/CSS_layout/Positioning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Positioning</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Multiple-column layout</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Responsive design</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/CSS_layout/Media_queries?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Beginner's guide to media queries</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Legacy layout methods</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Supporting older browsers</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Fundamental layout comprehension</a></li> </ol> </details></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript — Dynamic client-side scripting</a></li> <li class="toggle"> <details> <summary>JavaScript first steps</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/First_steps?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript first steps</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What is JavaScript?</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/First_steps/A_first_splash?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">A first splash into JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What went wrong? Troubleshooting JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/First_steps/Variables?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Storing the information you need — Variables</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/First_steps/Math?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Basic math in JavaScript — numbers and operators</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/First_steps/Strings?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Handling text — strings in JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Useful string methods</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/First_steps/Arrays?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Arrays</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Silly story generator</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>JavaScript building blocks</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Building_blocks?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript building blocks</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Building_blocks/conditionals?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Making decisions in your code — conditionals</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Looping code</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Building_blocks/Functions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Functions — reusable blocks of code</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Build your own function</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Building_blocks/Return_values?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Function return values</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Building_blocks/Events?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to events</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Event bubbling</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Image gallery</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Introducing JavaScript objects</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Objects?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introducing JavaScript objects</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Objects/Basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript object basics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Objects/Object_prototypes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Object prototypes</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Objects/Object-oriented_programming?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Object-oriented programming</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Classes in JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Objects/JSON?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Working with JSON</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Objects/Object_building_practice?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Object building practice</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Adding features to our bouncing balls demo</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Asynchronous JavaScript</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Asynchronous?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Asynchronous JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Asynchronous/Introducing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introducing asynchronous JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Asynchronous/Promises?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How to use promises</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How to implement a promise-based API</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Asynchronous/Introducing_workers?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introducing workers</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Asynchronous/Sequencing_animations?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Sequencing animations</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Client-side web APIs</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Client-side_web_APIs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-side web APIs</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to web APIs</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Manipulating documents</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Fetching data from the server</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Third-party APIs</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Drawing graphics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Video and Audio APIs</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-side storage</a></li> </ol> </details></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web forms — Working with user data</a></li> <li class="toggle"> <details> <summary>Web form building blocks</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web form building blocks</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms/Your_first_form?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Your first form</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms/How_to_structure_a_web_form?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How to structure a web form</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms/Basic_native_form_controls?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Basic native form controls</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms/HTML5_input_types?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">The HTML5 input types</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms/Other_form_controls?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Other form controls</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms/Styling_web_forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling web forms</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms/Advanced_form_styling?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Advanced form styling</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms/UI_pseudo-classes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">UI pseudo-classes</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms/Form_validation?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-side form validation</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Sending form data</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Advanced web form techniques</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms/How_to_build_custom_form_controls?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">How to build custom form controls</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Sending forms through JavaScript</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS property compatibility table for form controls</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Forms/HTML_forms_in_legacy_browsers?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML forms in legacy browsers</a></li> </ol> </details></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Accessibility — Make the web usable by everyone</a></li> <li class="toggle"> <details open> <summary>Accessibility guides</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Accessibility</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/What_is_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What is accessibility?</a></li> <li><em><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" aria-current="page">HTML: A good basis for accessibility</a></em></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/CSS_and_JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS and JavaScript accessibility best practices</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/WAI-ARIA_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">WAI-ARIA basics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/Multimedia?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Accessible multimedia</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/Mobile?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Mobile accessibility</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Assessment: Accessibility troubleshooting</a></li> </ol> </details></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Performance — Making websites fast and responsive</a></li> <li class="toggle"> <details> <summary>Performance guides</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web performance</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Performance/why_web_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">The "why" of web performance</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Performance/What_is_web_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">What is web performance?</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Performance/Perceived_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Perceived performance</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Performance/Measuring_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Measuring performance</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Performance/Multimedia?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Multimedia: Images</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Performance/video?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Multimedia: video</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Performance/JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">JavaScript performance optimization</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Performance/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML performance optimization</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Performance/CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">CSS performance optimization</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Performance/business_case_for_performance?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">The business case for web performance</a></li> </ol> </details></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/MathML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">MathML — Writing mathematics with MathML</a></li> <li class="toggle"> <details> <summary>MathML first steps</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/MathML/First_steps?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">MathML first steps</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/MathML/First_steps/Getting_started?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started with MathML</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/MathML/First_steps/Text_containers?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">MathML Text Containers</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/MathML/First_steps/Fractions_and_roots?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">MathML fractions and roots</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/MathML/First_steps/Scripts?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">MathML scripted elements</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/MathML/First_steps/Tables?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">MathML tables</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Three famous mathematical formulas</a></li> </ol> </details></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Games?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Games — Developing games for the web</a></li> <li class="toggle"> <details> <summary>Guides and tutorials</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Games/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to game development for the Web</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Games/Techniques?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Techniques for game development</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Games/Tutorials?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Tutorials</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Games/Publishing_games?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Publishing games</a></li> </ol> </details></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Tools and testing</a></li> <li class="toggle"> <details> <summary>Client-side web development tools</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Understanding client-side web development tools</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-side tooling overview</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Command line crash course</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Package management basics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introducing a complete toolchain</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Deploying our app</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Introduction to client-side frameworks</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to client-side frameworks</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Framework main features</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>React</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started with React</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Beginning our React todo list</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Componentizing our React app</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">React interactivity: Events and state</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">React interactivity: Editing, filtering, conditional rendering</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Accessibility in React</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">React resources</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Ember</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started with Ember</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Ember app structure and componentization</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Ember interactivity: Events, classes and state</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Ember Interactivity: Footer functionality, conditional rendering</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Routing in Ember</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Ember resources and troubleshooting</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Vue</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started with Vue</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Creating our first Vue component</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Rendering a list of Vue components</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Adding a new todo form: Vue events, methods, and models</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling Vue components with CSS</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Using Vue computed properties</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Vue conditional rendering: editing existing todos</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Vue refs and lifecycle methods for focus management</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Vue resources</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Svelte</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started with Svelte</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Starting our Svelte to-do list app</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Dynamic behavior in Svelte: working with variables and props</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Componentizing our Svelte app</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Working with Svelte stores</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">TypeScript support in Svelte</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Deployment and next steps</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Angular</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Getting started with Angular</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Beginning our Angular todo list app</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Styling our Angular app</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Creating an item component</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Filtering our to-do items</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Building Angular applications and further resources</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Git and GitHub</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/GitHub?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Git and GitHub</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Cross browser testing</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Cross browser testing</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to cross-browser testing</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Strategies for carrying out testing</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Handling common HTML and CSS problems</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Handling common JavaScript problems</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Handling common accessibility problems</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Implementing feature detection</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to automated testing</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Setting up your own test automation environment</a></li> </ol> </details></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Server-side website programming</a></li> <li class="toggle"> <details> <summary>First steps</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/First_steps?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Server-side website programming first steps</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/First_steps/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to the server side</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Client-Server Overview</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/First_steps/Web_frameworks?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Server-side web frameworks</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/First_steps/Website_security?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Website security</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Django web framework (Python)</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Web Framework (Python)</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django introduction</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/development_environment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Setting up a Django development environment</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial: The Local Library website</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/skeleton_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 2: Creating a skeleton website</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/Models?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 3: Using models</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/Admin_site?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 4: Django admin site</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/Home_page?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 5: Creating our home page</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/Generic_views?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 6: Generic list and detail views</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/Sessions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 7: Sessions framework</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/Authentication?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 8: User authentication and permissions</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/Forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 9: Working with forms</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/Testing?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 10: Testing a Django web application</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/Deployment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django Tutorial Part 11: Deploying Django to production</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/web_application_security?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Django web application security</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Django/django_assessment_blog?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Assessment: DIY Django mini blog</a></li> </ol> </details></li> <li class="toggle"> <details> <summary>Express Web Framework (Node.js/JavaScript)</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Express_Nodejs?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express web framework (Node.js/JavaScript)</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express/Node introduction</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Setting up a Node development environment</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial: The Local Library website</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 2: Creating a skeleton website</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Express_Nodejs/routes?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 4: Routes and controllers</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 5: Displaying library data</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Express_Nodejs/forms?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 6: Working with forms</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Server-side/Express_Nodejs/deployment?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Express Tutorial Part 7: Deploying to production</a></li> </ol> </details></li> <li class="section"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Common_questions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Further resources</a></li> <li class="toggle"> <details> <summary>Common questions</summary> <ol> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Common_questions?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Common questions</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Howto?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Use HTML to solve common problems</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/CSS/Howto?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Use CSS to solve common problems</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/JavaScript/Howto?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Solve common problems in your JavaScript code</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Common_questions/Web_mechanics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web mechanics</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Common_questions/Tools_and_setup?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Tools and setup</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Common_questions/Design_and_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Design and accessibility</a></li> </ol> </details></li> </ol> </div> </div> <section class="place side"></section> </nav> </aside> <div class="toc-container"> <aside class="toc"> <nav> <div class="document-toc-container"> <section class="document-toc"> <header> <h2 class="document-toc-heading">In this article</h2> </header> <ul class="document-toc-list"> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#html_and_accessibility">HTML and accessibility</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#good_semantics">Good semantics</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#accessible_data_tables">Accessible data tables</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#text_alternatives">Text alternatives</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#more_on_links">More on links</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#test_your_skills!">Test your skills!</a></li> <li class="document-toc-item "><a class="document-toc-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#summary">Summary</a></li> </ul> </section> </div> </nav> </aside> <section class="place side"></section> </div> </div> <main id="content" class="main-content "> <article class="main-page-content" lang="en-US"> <header> <h1>HTML: A good basis for accessibility</h1> </header> <div class="section-content"> <ul class="prev-next"> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/What_is_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Previous </span></a></li> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Overview: Accessibility</span></a></li> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/CSS_and_JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Next </span></a></li> </ul> <p>A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</p> <figure class="table-container"> <table> <tbody> <tr> <th scope="row">Prerequisites:</th> <td>A basic understanding of HTML (see <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Introduction_to_HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Introduction to HTML</a>), and an understanding of <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/What_is_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">what accessibility is</a>.</td> </tr> <tr> <th scope="row">Objective:</th> <td>To gain familiarity with the features of HTML that have accessibility benefits and how to use them appropriately in your web documents.</td> </tr> </tbody> </table> </figure> </div> <section aria-labelledby="html_and_accessibility"> <h2 id="html_and_accessibility"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#html_and_accessibility">HTML and accessibility</a></h2> <div class="section-content"> <p>As you learn more about HTML — read more resources, look at more examples, etc. — you'll keep seeing a common theme: the importance of using semantic HTML (sometimes called POSH, or Plain Old Semantic HTML). This means using the correct HTML elements for their intended purpose as much as possible.</p> <p>You might wonder why this is so important. After all, you can use a combination of CSS and JavaScript to make just about any HTML element behave in whatever way you want. For example, a control button to play a video on your site could be marked up like this:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><div>Play video</div> </code></pre> </div> <p>But as you'll see in greater detail later on, it makes sense to use the correct element for the job:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><button>Play video</button> </code></pre> </div> <p>Not only do HTML <code><button></code>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the <kbd>Tab</kbd> key and activate their selection using <kbd>Space</kbd>, <kbd>Return</kbd> or <kbd>Enter</kbd>.</p> <p>Semantic HTML doesn't take any longer to write than non-semantic (bad) markup if you do it consistently from the start of your project. Even better, semantic markup has other benefits beyond accessibility:</p> <ol> <li><strong>Easier to develop with</strong> — as mentioned above, you get some functionality for free, plus it is arguably easier to understand.</li> <li><strong>Better on mobile</strong> — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.</li> <li><strong>Good for SEO</strong> — search engines give more importance to keywords inside headings, links, etc. than keywords included in non-semantic <code><div></code>s, etc., so your documents will be more findable by customers.</li> </ol> <p>Let's get on and look at accessible HTML in more detail.</p> <div class="notecard note"> <p><strong>Note:</strong> It is a good idea to have a screen reader set up on your local computer so that you can do some testing of the examples shown below. See our <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#screen_readers">Screen readers guide</a> for more details.</p> </div> </div> </section> <section aria-labelledby="good_semantics"> <h2 id="good_semantics"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#good_semantics">Good semantics</a></h2> <div class="section-content"> <p>We've already talked about the importance of proper semantics, and why we should use the right HTML element for the job. This cannot be ignored, as it is one of the main places that accessibility is badly broken if not handled properly.</p> <p>Out there on the web, the truth is that people do some very strange things with HTML markup. Some abuses of HTML are due to legacy practices that have not been completely forgotten, and some are just plain ignorance. Whatever the case, you should replace such bad code.</p> <p>Sometimes you are not in the position to get rid of lousy markup — your pages might be generated by some kind of server-side framework over which you don't have full control, or you might have third party content on your page (such as ad banners) over which you have no control.</p> <p>The goal isn't "all or nothing"; every improvement you can make will help the cause of accessibility.</p> </div> </section> <section aria-labelledby="text_content"> <h3 id="text_content"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#text_content">Text content</a></h3> <div class="section-content"> <p>One of the best accessibility aids a screen reader user can have is an excellent content structure with headings, paragraphs, lists, etc. An excellent semantic example might look something like the following:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html example-good notranslate"><code><h1>My heading</h1> <p>This is the first section of my document.</p> <p>I'll add another paragraph here too.</p> <ol> <li>Here is</li> <li>a list for</li> <li>you to read</li> </ol> <h2>My subheading</h2> <p> This is the first subsection of my document. I'd love people to be able to find this content! </p> <h2>My 2nd subheading</h2> <p> This is the second subsection of my content, which I think is more interesting than the last one. </p> </code></pre> </div> <p>We've prepared a version with longer text for you to try out with a screen reader (see <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/accessibility/html/good-semantics.html" class="external" target="_blank">good-semantics.html</a>). If you try navigating through this, you'll see that this is pretty easy to navigate:</p> <ol> <li>The screen reader reads each header out as you progress through the content, notifying you what a heading is, what is a paragraph, etc.</li> <li>It stops after each element, letting you go at whatever pace is comfortable for you.</li> <li>You can jump to the next/previous heading in many screen readers.</li> <li>You can also bring up a list of all headings in many screen readers, allowing you to use them as a handy table of contents to find specific content.</li> </ol> <p>People sometimes write headings, paragraphs, etc. using line breaks and adding HTML elements purely for styling, something like the following:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html example-bad notranslate"><code><span style="font-size: 3em">My heading</span> <br /><br /> This is the first section of my document. <br /><br /> I'll add another paragraph here too. <br /><br /> 1. Here is <br /><br /> 2. a list for <br /><br /> 3. you to read <br /><br /> <span style="font-size: 2.5em">My subheading</span> <br /><br /> This is the first subsection of my document. I'd love people to be able to find this content! <br /><br /> <span style="font-size: 2.5em">My 2nd subheading</span> <br /><br /> This is the second subsection of my content. I think is more interesting than the last one. </code></pre> </div> <p>If you try our longer version out with a screen reader (see <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html" class="external" target="_blank">bad-semantics.html</a>), you'll not have a very good experience — the screen reader hasn't got anything to use as signposts, so you can't retrieve a useful table of contents, and the whole page is seen as a single giant block, so it is just read out in one go, all at once.</p> <p>There are other issues too beyond accessibility — it is harder to style the content using CSS, or manipulate it with JavaScript, for example, because there are no elements to use as selectors.</p> <h4 id="using_clear_language">Using clear language</h4> <p>The language you use can also affect accessibility. In general, you should use clear language that is not overly complex and doesn't use unnecessary jargon or slang terms. This not only benefits people with cognitive or other disabilities; it benefits readers for whom the text is not written in their first language, younger people…, everyone, in fact! Apart from this, you should try to avoid using language and characters that don't get read out clearly by the screen reader. For example:</p> <ul> <li>Don't use dashes if you can avoid it. Instead of writing 5–7, write 5 to 7.</li> <li>Expand abbreviations — instead of writing Jan, write January.</li> <li>Expand acronyms, at least once or twice, then use the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/abbr?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><abbr></code></a> tag to describe them.</li> </ul> </div> </section> <section aria-labelledby="page_layouts"> <h3 id="page_layouts"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#page_layouts">Page layouts</a></h3> <div class="section-content"> <p>In the bad old days, people used to create page layouts using HTML tables — using different table cells to contain the header, footer, sidebar, main content column, etc. This is not a good idea because a screen reader will likely give out confusing readouts, especially if the layout is complex and has many nested tables.</p> <p>Try our example <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/accessibility/html/table-layout.html" class="external" target="_blank">table-layout.html</a> example, which looks something like this:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><table width="1200">  <tr id="heading"> <td colspan="6"> <h1 align="center">Header</h1> </td> </tr>  <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">Home</a> </td> <td width="200"> <a href="#" align="center">Our team</a> </td> <td width="200"> <a href="#" align="center">Projects</a> </td> <td width="200"> <a href="#" align="center">Contact</a> </td> <td width="300"> <form width="300"> <label >Search <input type="search" name="q" placeholder="Search query" width="300" /> </label> </form> </td> <td width="100"> <button width="100">Go!</button> </td> </tr>  <tr id="spacer" height="10"> <td></td> </tr>  <tr id="main"> <td id="content" colspan="4">  </td> <td id="aside" colspan="2" valign="top"> <h2>Related</h2>  </td> </tr>  <tr id="spacer" height="10"> <td></td> </tr>  <tr id="footer"> <td colspan="6"> <p>©Copyright 1996 by nobody. All rights reversed.</p> </td> </tr> </table> </code></pre> </div> <p>If you try to navigate this using a screen reader, it will probably tell you that there's a table to be looked at (although some screen readers can guess the difference between table layouts and data tables). You'll then likely (depending on which screen reader you're using) have to go down into the table as an object and look at its features separately, then get out of the table again to carry on navigating the content.</p> <p>Table layouts are a relic of the past — they made sense back when CSS support was not widespread in browsers, but now they just create confusion for screen reader users. Additionally, their source code requires more markup, which makes them less flexible and more difficult to maintain. You can verify these claims by comparing your previous experience with a <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/" class="external" target="_blank">more modern website structure example</a>, which could look something like this:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><header> <h1>Header</h1> </header> <nav>  </nav>  <main>  <article> <h2>Article heading</h2>  </article> <aside> <h2>Related</h2>  </aside> </main>  <footer>  </footer> </code></pre> </div> <p>If you try our more modern structure example with a screen reader, you'll notice that the layout markup no longer interferes with or causes confusion in the content readout. It is also much leaner and smaller in terms of code size, which means the code is easier to maintain and requires less bandwidth for users to download, making it particularly beneficial for those on slow connections.</p> <p>Another consideration when creating layouts is using HTML semantic elements as seen in the above example (see <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#content_sectioning">content sectioning</a>) — you can create a layout using only nested <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/div?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><div></code></a> elements, but it is better to use appropriate sectioning elements to wrap your main navigation (<a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/nav?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><nav></code></a>), footer (<a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/footer?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><footer></code></a>), repeating content units (<a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/article?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><article></code></a>), etc. These provide extra semantics for screen readers (and other tools) to give users extra clues about the content they are navigating (see <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.accessibilityoz.com/2020/02/html5-sectioning-elements-and-screen-readers/" class="external" target="_blank">Screen Reader Support for new HTML5 Section Elements</a> for an idea of what screen reader support is like).</p> <div class="notecard note"> <p><strong>Note:</strong> In addition to having good semantics and an attractive layout, your content should make logical sense in its source order — you can always place it where you want using CSS later on, but you should get the source order right to start with, so what screen reader users get read out to them will make sense.</p> </div> </div> </section> <section aria-labelledby="ui_controls"> <h3 id="ui_controls"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#ui_controls">UI controls</a></h3> <div class="section-content"> <p>By UI controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls. In this section, we'll look at the basic accessibility concerns to be aware of when creating such controls. Later articles on WAI-ARIA and multimedia will look at other aspects of UI accessibility.</p> <p>One key aspect of the accessibility of UI controls is that by default, browsers allow them to be manipulated by the keyboard. You can try this out using our <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html" class="external" target="_blank">native-keyboard-accessibility.html</a> example (see the <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html" class="external" target="_blank">source code</a>). Open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements. The focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.</p> <p><img src="/en-US/docs/Learn/Accessibility/HTML/button-focused-unfocused.png" alt="Three buttons with the text "Click me!", "Click me too!", and "And me!" inside them respectively. The third button has a blue outline around it to indicate current tab focus." width="288" height="39" loading="lazy"></p> <div class="notecard note"> <p><strong>Note:</strong> You can enable an overlay that shows the page tabbing order in your developer tools. For more information see: <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html%23show-web-page-tabbing-order" class="external" target="_blank">Accessibility Inspector > Show web page tabbing order</a>.</p> </div> <p>You can then press Enter/Return to follow a focused link or press a button (we've included some JavaScript to make the buttons alert a message), or start typing to enter text in a text input. Other form elements have different controls; for example, the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/select?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><select></code></a> element can have its options displayed and cycled between using the up and down arrow keys.</p> <div class="notecard note"> <p><strong>Note:</strong> Different browsers may have different keyboard control options available. See <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#using_native_keyboard_accessibility">Using native keyboard accessibility</a> for more details.</p> </div> <p>You essentially get this behavior for free, just by using the appropriate elements, e.g.</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html example-good notranslate"><code><h1>Links</h1> <p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p> <p> Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>. </p> <h2>Buttons</h2> <p> <button data-message="This is from the first button">Click me!</button> <button data-message="This is from the second button">Click me too!</button> <button data-message="This is from the third button">And me!</button> </p> <h2>Form</h2> <form> <div> <label for="name">Fill in your name:</label> <input type="text" id="name" name="name" /> </div> <div> <label for="age">Enter your age:</label> <input type="text" id="age" name="age" /> </div> <div> <label for="mood">Choose your mood:</label> <select id="mood" name="mood"> <option>Happy</option> <option>Sad</option> <option>Angry</option> <option>Worried</option> </select> </div> </form> </code></pre> </div> <p>This means using links, buttons, form elements, and labels appropriately (including the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/label?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><label></code></a> element for form controls).</p> <p>However, it is again the case that people sometimes do strange things with HTML. For example, you sometimes see buttons marked up using <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/div?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><div></code></a>s, for example:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html example-bad notranslate"><code><div data-message="This is from the first button">Click me!</div> <div data-message="This is from the second button">Click me too!</div> <div data-message="This is from the third button">And me!</div> </code></pre> </div> <p>But using such code is not advised — you immediately lose the native keyboard accessibility you would have had if you'd just used <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/button?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><button></code></a> elements, plus you don't get any of the default CSS styling that buttons get. In the rare to non-existent case when you need to use a non-button element for a button, use the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/Accessibility/ARIA/Roles/button_role?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>button</code> role</a> and implement all the default button behaviors, including keyboard and mouse button support.</p> <h4 id="building_keyboard_accessibility_back_in">Building keyboard accessibility back in</h4> <p>Adding such advantages back in takes a bit of work (you can see an example in our <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html" class="external" target="_blank">fake-div-buttons.html</a> example — also see the <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html" class="external" target="_blank">source code</a>). Here we've given our fake <code><div></code> buttons the ability to be focused (including via tab) by giving each one the attribute <code>tabindex="0"</code>. We also include <code>role="button"</code> so screen reader users know they can focus on and interact with the element:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><div data-message="This is from the first button" tabindex="0" role="button"> Click me! </div> <div data-message="This is from the second button" tabindex="0" role="button"> Click me too! </div> <div data-message="This is from the third button" tabindex="0" role="button"> And me! </div> </code></pre> </div> <p>Basically, the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Global_attributes/tabindex?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>tabindex</code></a> attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order. This is nearly always a bad idea, as it can cause major confusion. Use it only if you really need to, for example, if the layout shows things in a very different visual order to the source code, and you want to make things work more logically. There are two other options for <code>tabindex</code>:</p> <ul> <li><code>tabindex="0"</code> — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of <code>tabindex</code>.</li> <li><code>tabindex="-1"</code> — this allows not normally tabbable elements to receive focus programmatically, e.g., via JavaScript, or as the target of links.</li> </ul> <p>While the above addition allows us to tab to the buttons, it does not allow us to activate them via the <kbd>Enter</kbd>/<kbd>Return</kbd> key. To do that, we had to add the following bit of JavaScript trickery:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">js</span> </div> <pre class="brush: js notranslate"><code>document.onkeydown = (e) => { // The Enter/Return key if (e.key === "Enter") { document.activeElement.click(); } }; </code></pre> </div> <p>Here we add a listener to the <code>document</code> object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/KeyboardEvent/key?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>key</code></a> property; if the key pressed is <kbd>Enter</kbd>/<kbd>Return</kbd>, we run the function stored in the button's <code>onclick</code> handler using <code>document.activeElement.click()</code>. <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/API/Document/activeElement?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>activeElement</code></a> which gives us the element that is currently focused on the page.</p> <p>This is a lot of extra hassle to build the functionality back in. And there's bound to be other problems with it. <strong>Better to just use the right element for the right job in the first place.</strong></p> <h4 id="meaningful_text_labels">Meaningful text labels</h4> <p>UI control text labels are very useful to all users, but getting them right is particularly important to users with disabilities.</p> <p>You should make sure that your button and link text labels are understandable and distinctive. Don't just use "Click here" for your labels, as screen reader users sometimes get up a list of buttons and form controls. The following screenshot shows our controls being listed by VoiceOver on Mac.</p> <p><img src="/en-US/docs/Learn/Accessibility/HTML/voiceover-formcontrols.png" alt="List of form input labels being listed by VoiceOver software on Mac. This list contains meaningless labels like 'happy menu button` given to various form controls like button, textfield and link" width="802" height="604" loading="lazy"></p> <p>Make sure your labels make sense out of context, read on their own, as well as in the context of the paragraph they are in. For example, the following shows an example of good link text:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html example-good notranslate"><code><p> Whales are really awesome creatures. <a href="whales.html">Find out more about whales</a>. </p> </code></pre> </div> <p>but this is bad link text:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html example-bad notranslate"><code><p> Whales are really awesome creatures. To find out more about whales, <a href="whales.html">click here</a>. </p> </code></pre> </div> <div class="notecard note"> <p><strong>Note:</strong> You can find a lot more about link implementation and best practices in our <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Creating hyperlinks</a> article. You can also see some good and bad examples at <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/accessibility/html/good-links.html" class="external" target="_blank">good-links.html</a> and <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/accessibility/html/bad-links.html" class="external" target="_blank">bad-links.html</a>.</p> </div> <p>Form labels are also important for giving you a clue about what you need to enter into each form input. The following seems like a reasonable enough example:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html example-bad notranslate"><code>Fill in your name: <input type="text" id="name" name="name" /> </code></pre> </div> <p>However, this is not so useful for disabled users. There is nothing in the above example to associate the label unambiguously with the form input and make it clear how to fill it in if you cannot see it. If you access this with some screen readers, you may only be given a description along the lines of "edit text."</p> <p>The following is a much better example:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html example-good notranslate"><code><div> <label for="name">Fill in your name:</label> <input type="text" id="name" name="name" /> </div> </code></pre> </div> <p>With code like this, the label will be clearly associated with the input; the description will be more like "Fill in your name: edit text."</p> <p><img src="/en-US/docs/Learn/Accessibility/HTML/voiceover-good-form-label.png" alt="A good form label that reads 'Fill in your name' is given to a text input form control. " width="257" height="32" loading="lazy"></p> <p>As an added bonus, in most browsers associating a label with a form input means that you can click the label to select or activate the form element. This gives the input a bigger hit area, making it easier to select.</p> <div class="notecard note"> <p><strong>Note:</strong> You can see some good and bad form examples in <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/accessibility/html/good-form.html" class="external" target="_blank">good-form.html</a> and <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/accessibility/html/bad-form.html" class="external" target="_blank">bad-form.html</a>.</p> </div> <p>You can find a nice explanation of the importance of proper text labels, and how to investigate text label issues using the <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html" class="external" target="_blank">Firefox Accessibility Inspector</a>, in the following video:</p><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/YhlAVlfH0rQ" title="YouTube video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen loading="lazy"></iframe> </div> </section> <section aria-labelledby="accessible_data_tables"> <h2 id="accessible_data_tables"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#accessible_data_tables">Accessible data tables</a></h2> <div class="section-content"> <p>A basic data table can be written with very simple markup, for example:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><table> <tr> <td>Name</td> <td>Age</td> <td>Pronouns</td> </tr> <tr> <td>Gabriel</td> <td>13</td> <td>he/him</td> </tr> <tr> <td>Elva</td> <td>8</td> <td>she/her</td> </tr> <tr> <td>Freida</td> <td>5</td> <td>she/her</td> </tr> </table> </code></pre> </div> <p>But this has problems — there is no way for a screen reader user to associate rows or columns together as groupings of data. To do this, you need to know what the header rows are and if they are heading up rows, columns, etc. This can only be done visually for the above table (see <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/accessibility/html/bad-table.html" class="external" target="_blank">bad-table.html</a> and try the example out yourself).</p> <p>Now have a look at our <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-complete.html" class="external" target="_blank">punk bands table example</a> — you can see a few accessibility aids at work here:</p> <ul> <li>Table headers are defined using <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/th?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><th></code></a> elements — you can also specify if they are headers for rows or columns using the <code>scope</code> attribute. This gives you complete groups of data that can be consumed by screen readers as single units.</li> <li>The <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/caption?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><caption></code></a> element and the <code><table></code> element's <code>summary</code> attribute both do similar jobs — they act as alt text for a table, giving a screen reader user a useful quick summary of the table's contents. The <code><caption></code> element is generally preferred as it makes it's content accessible to sighted users too, who might also find it useful. You don't really need both.</li> </ul> <div class="notecard note"> <p><strong>Note:</strong> See our <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Tables/Advanced?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">HTML table advanced features and accessibility</a> article for more details about accessible data tables.</p> </div> </div> </section> <section aria-labelledby="text_alternatives"> <h2 id="text_alternatives"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#text_alternatives">Text alternatives</a></h2> <div class="section-content"> <p>Whereas textual content is inherently accessible, the same cannot necessarily be said for multimedia content — image and video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people. We cover video and audio content in detail in the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/Multimedia?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Accessible multimedia</a>, but for this article we'll look at accessibility for the humble <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/img?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><img></code></a> element.</p> <p>We have a simple example written up, <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mdn.github.io/learning-area/accessibility/html/accessible-image.html" class="external" target="_blank">accessible-image.html</a>, which features four copies of the same image:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><img src="dinosaur.png" /> <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." /> <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth." title="The Mozilla red dinosaur" /> <img src="dinosaur.png" aria-labelledby="dino-label" /> <p id="dino-label"> The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth. </p> </code></pre> </div> <p>The first image, when viewed by a screen reader, doesn't really offer the user much help — VoiceOver for example reads out "/dinosaur.png, image". It reads out the filename to try to provide some help. In this example the user will at least know it is a dinosaur of some kind, but often files may be uploaded with machine-generated file names (e.g. from a digital camera) and these file names would likely provide no context to the image's content.</p> <div class="notecard note"> <p><strong>Note:</strong> This is why you should never include text content inside an image — screen readers can't access it. There are other disadvantages too — you can't select it and copy/paste it. Just don't do it!</p> </div> <p>When a screen reader encounters the second image, it reads out the full alt attribute — "A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.".</p> <p>This highlights the importance of not only using meaningful file names in case so-called <strong>alt text</strong> is not available, but also making sure that alt text is provided in <code>alt</code> attributes wherever possible.</p> <p>Note that the contents of the <code>alt</code> attribute should always provide a direct representation of the image and what it conveys visually. The alt should be brief and concise and include all the information conveyed in the image that is not duplicated in the surrounding text.</p> <p>The content of the <code>alt</code> attribute for a single image differs based on the context. For example, if the photo of Fluffy is an avatar next to a review for Yuckymeat dog food, <code>alt="Fluffy"</code> is appropriate. If the photo is part of Fluffy's adoption page for the animal rescue society, information conveyed in the image that is relevant for a prospective dog parent that is not duplicated in the surrounding text should be included. A longer description, such as <code>alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth."</code> is appropriate. As the surrounding text likely has Fluffy's size and breed, that is not included in the <code>alt</code>. However, as the dog's biography likely doesn't include hair length, colors, or toy preferences, which the potential parent needs to know, it is included. Is the image outdoors, or does Fluffy have a red collar with a blue leash? Not important in terms of adopting the pet and therefore not included. All information image conveys that a sited user can access and is relevant to the context is what needs to be conveyed; nothing more. Keep it short, precise, and useful.</p> <p>Any personal knowledge or extra description shouldn't be included here, as it is not useful for people who have not seen the image before. If the ball is Fluffy's favorite toy or if the sited user can't know that from the image, then don't include it.</p> <p>One thing to consider is whether your images have meaning inside your content, or whether they are purely for visual decoration, and thus have no meaning. If they are decorative, it is better to write an empty text as a value for <code>alt</code> attribute (see <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#empty_alt_attributes">Empty alt attributes</a>) or to just include them in the page as CSS background images.</p> <div class="notecard note"> <p><strong>Note:</strong> Read <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Images in HTML</a> and <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Responsive images</a> for more information about image implementation and best practices. You can also check <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.w3.org/WAI/tutorials/images/decision-tree/" class="external" target="_blank">An alt Decision Tree</a> to learn how to use an alt attribute for images in various situations.</p> </div> <p>If you do want to provide extra contextual information, you should put it in the text surrounding the image, or inside a <code>title</code> attribute, as shown above. In this case, most screen readers will read out the alt text, the title attribute, and the filename. In addition, browsers display title text as tooltips when moused over.</p> <p><img src="/en-US/docs/Learn/Accessibility/HTML/title-attribute.png" alt="Screenshot of a red Tyrannosaurus Rex with the text "The mozilla red dinosaur" displayed as tooltip on mouseover." width="352" height="234" loading="lazy"></p> <p>Let's have another quick look at the fourth method:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><img src="dinosaur.png" aria-labelledby="dino-label" /> <p id="dino-label">The Mozilla red Tyrannosaurus…</p> </code></pre> </div> <p>In this case, we are not using the <code>alt</code> attribute at all — instead, we have presented our description of the image as a regular text paragraph, given it an <code>id</code>, and then used the <code>aria-labelledby</code> attribute to refer to that <code>id</code>, which causes screen readers to use that paragraph as the alt text/label for that image. This is especially useful if you want to use the same text as a label for multiple images — something that isn't possible with <code>alt</code>.</p> <div class="notecard note"> <p><strong>Note:</strong> <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>aria-labelledby</code></a> is part of the <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.w3.org/TR/wai-aria-1.1/" class="external" target="_blank">WAI-ARIA</a> spec, which allows developers to add in extra semantics to their markup to improve screen reader accessibility where needed. To learn more about how it works, read our <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/WAI-ARIA_basics?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">WAI-ARIA Basics</a> article.</p> </div> </div> </section> <section aria-labelledby="figures_and_figure_captions"> <h3 id="figures_and_figure_captions"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#figures_and_figure_captions">Figures and figure captions</a></h3> <div class="section-content"> <p>HTML includes two elements — <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/figure?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><figure></code></a> and <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/figcaption?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><figcaption></code></a> — which associate a figure of some kind (it could be anything, not necessarily an image) with a figure caption:</p> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><figure> <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus" aria-describedby="dinodescr" /> <figcaption id="dinodescr"> A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth. </figcaption> </figure> </code></pre> </div> <p>While there is mixed screen reader support of associating figure captions with their figures, including <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>aria-labelledby</code></a> or <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>aria-describedby</code></a> creates the association if none is present. That said, the element structure is useful for CSS styling, plus it provides a way to place a description of the image next to it in the source.</p> </div> </section> <section aria-labelledby="empty_alt_attributes"> <h3 id="empty_alt_attributes"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#empty_alt_attributes">Empty alt attributes</a></h3> <div class="section-content"> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><h3> <img src="article-icon.png" alt="" /> Tyrannosaurus Rex: the king of the dinosaurs </h3> </code></pre> </div> <p>There may be times where an image is included in a page's design, but its primary purpose is for visual decoration. You'll notice in the code example above that the image's <code>alt</code> attribute is empty — this is to make screen readers recognize the image, but not attempt to describe the image (instead they'd just say "image", or similar).</p> <p>The reason to use an empty <code>alt</code> instead of not including it is because many screen readers announce the whole image URL if no <code>alt</code> is provided. In the above example, the image is acting as a visual decoration to the heading it's associated with. In cases like this, and in cases where an image is only decoration and has no content value, you should include an empty <code>alt</code> in your <code>img</code> elements. Another alternative is to use the aria <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/Accessibility/ARIA/Roles?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>role</code></a> attribute <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>role="presentation"</code></a> as this also stops screen readers from reading out alternative text.</p> <div class="notecard note"> <p><strong>Note:</strong> If possible you should use CSS to display images that are only decorative.</p> </div> </div> </section> <section aria-labelledby="more_on_links"> <h2 id="more_on_links"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#more_on_links">More on links</a></h2> <div class="section-content"> <p>Links (the <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/a?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><a></code></a> element with an <code>href</code> attribute), depending on how they are used, can help or harm accessibility. By default, links are accessible in appearance. They can improve accessibility by helping a user quickly navigate to different sections of a document. They can also harm accessibility if their accessible styling is removed or if JavaScript causes them to behave in unexpected ways.</p> </div> </section> <section aria-labelledby="link_styling"> <h3 id="link_styling"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#link_styling">Link styling</a></h3> <div class="section-content"> <p>By default, links are visually different from other text in both color and <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/CSS/text-decoration?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">text-decoration</a>, with links being blue and underlined by default, purple and underlined if visited, and with a <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/CSS/:focus?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">focus-ring</a> when they receive keyboard focus.</p> <p>Color should not be used as the sole method of distinguishing links from non-linking content. Link text color, like all text, has to be significantly different from the background color (<a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">a 4.5:1 contrast</a>). In addition, links should visually be significantly different from non-linking text, with a minimum contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a 4.5:1 contrast between all those state colors and the background color.</p> </div> </section> <section aria-labelledby="onclick_events"> <h3 id="onclick_events"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#onclick_events"><code>onclick</code> events</a></h3> <div class="section-content"> <p>Anchor tags are often abused with the <code>onclick</code> event to create pseudo-buttons by setting <strong>href</strong> to <code>"#"</code> or <code>"javascript:void(0)"</code> to prevent the page from refreshing.</p> <p>These values cause unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (e.g., screen readers). In these cases, it is recommended to use a <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/button?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><button></code></a> instead. In general you should only use an anchor for navigation using a proper URL.</p> </div> </section> <section aria-labelledby="external_links_and_linking_to_non-html_resources"> <h3 id="external_links_and_linking_to_non-html_resources"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#external_links_and_linking_to_non-html_resources">External links and linking to non-HTML resources</a></h3> <div class="section-content"> <p>Links that open in a new tab or window via the <code>target="_blank"</code> declaration and links to whose <code>href</code> value points to a file resource should include an indicator about the behavior that will occur when the link is activated.</p> <p>People experiencing low vision conditions, who are navigating with the aid of screen reading technology, or who have cognitive concerns may become confused when the new tab, window, or application is opened unexpectedly. Older versions of screen reading software may not even announce the behavior.</p> <h4 id="link_that_opens_a_new_tab_or_window">Link that opens a new tab or window</h4> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><a target="_blank" href="https://www.wikipedia.org/" >Wikipedia (opens in a new window)</a > </code></pre> </div> <h4 id="link_to_a_non-html_resource">Link to a non-HTML resource</h4> <div class="code-example"> <div class="example-header"> <span class="language-name">html</span> </div> <pre class="brush: html notranslate"><code><a target="_blank" href="2017-annual-report.ppt" >2017 Annual Report (PowerPoint)</a > </code></pre> </div> <p>If an icon is used in place of text to signify this kind of links behavior, make sure it includes an <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/img?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#alt">alternate description</a>.</p> <ul> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://webaim.org/techniques/hypertext/hypertext_links" class="external" target="_blank">WebAIM: Links and Hypertext - Hypertext Links</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#guideline_3.2_—_predictable_make_web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.2 explanations</a></li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.w3.org/TR/WCAG20-TECHS/G200.html" class="external" target="_blank">G200: Opening new windows and tabs from a link only when necessary | W3C Techniques for WCAG 2.0</a></li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.w3.org/TR/WCAG20-TECHS/G201.html" class="external" target="_blank">G201: Giving users advanced warning when opening a new window | W3C Techniques for WCAG 2.0</a></li> </ul> </div> </section> <section aria-labelledby="skip_links"> <h3 id="skip_links"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#skip_links">Skip links</a></h3> <div class="section-content"> <p>A skip link, also known as skipnav, is an <code>a</code> element placed as close as possible to the opening <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/HTML/Element/body?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code><body></code></a> element that links to the beginning of the page's main content. This link allows people to bypass content repeated throughout multiple pages on a website, such as a website's header and primary navigation.</p> <p>Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be a laborious task.</p> <ul> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://webaim.org/techniques/skipnav/" class="external" target="_blank">WebAIM: "Skip Navigation" Links</a></li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.a11yproject.com/posts/skip-nav-links/" class="external" target="_blank">How–to: Use Skip Navigation links - The A11Y Project</a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#guideline_2.4_%e2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html" class="external" target="_blank">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li> </ul> </div> </section> <section aria-labelledby="proximity"> <h3 id="proximity"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#proximity">Proximity</a></h3> <div class="section-content"> <p>Large amounts of interactive content—including anchors—placed in close visual proximity to each other should have space inserted to separate them. This spacing is beneficial for people who suffer from fine motor control issues and may accidentally activate the wrong interactive content while navigating.</p> <p>Spacing may be created using CSS properties such as <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Web/CSS/margin?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><code>margin</code></a>.</p> <ul> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://axesslab.com/hand-tremors/" class="external" target="_blank">Hand tremors and the giant-button-problem - Axess Lab</a></li> </ul> </div> </section> <section aria-labelledby="test_your_skills!"> <h2 id="test_your_skills!"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#test_your_skills!">Test your skills!</a></h2> <div class="section-content"> <p>You've reached the end of this article, but can you remember the most important information? See <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/Test_your_skills:_HTML_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Test your skills: HTML Accessibility</a> to verify that you've retained this information before you move on.</p> </div> </section> <section aria-labelledby="summary"> <h2 id="summary"><a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB#summary">Summary</a></h2> <div class="section-content"> <p>You should now be well-versed in writing accessible HTML for most occasions. Our WAI-ARIA basics article will help to fill gaps in this knowledge, but this article has taken care of the basics. Next up we'll explore CSS and JavaScript, and how accessibility is affected by their good or bad use.</p> <ul class="prev-next"> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/What_is_accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Previous </span></a></li> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Overview: Accessibility</span></a></li> <li><a class="button secondary" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/CSS_and_JavaScript?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB"><span class="button-wrap"> Next </span></a></li> </ul> </div> </section> </article> <aside class="article-footer"> <div class="article-footer-inner"> <div class="svg-container"> <svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewbox="0 0 162 162" fill="none" role="none"> <mask id="b" fill="#fff"> <path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path> </mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"> <path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path> </g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"> <path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path> </g><defs> <clippath id="c"> <path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path> </clippath> <clippath id="d"> <path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path> </clippath> <lineargradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientunits="userSpaceOnUse"> <stop stop-color="#086DFC"></stop> <stop offset="0.246" stop-color="#2C81FA"></stop> <stop offset="0.516" stop-color="#5497F8"></stop> <stop offset="0.821" stop-color="#80B0F6"></stop> <stop offset="1" stop-color="#9ABFF5"></stop> </lineargradient> </defs> </svg> </div> <h2>Help improve MDN</h2> <fieldset class="feedback"> <label>Was this page helpful to you?</label> <div class="button-container"> <button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Yes</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>No</span></button> </div> </fieldset><a class="contribute" href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/content/blob/main/CONTRIBUTING.md" title="This will take you to our contribution guidelines on GitHub." target="_blank" rel="noopener noreferrer">Learn how to contribute</a>. <p class="last-modified-date">This page was last modified on <time datetime="2024-11-14T09:31:36.000Z">Nov 14, 2024</time> by <a href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn/Accessibility/HTML/contributors.txt?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" rel="nofollow">MDN contributors</a>.</p> <div id="on-github" class="on-github"> <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/content/blob/main/files/en-us/learn/accessibility/html/index.md?plain%3D1" title="Folder: en-us/learn/accessibility/html (Opens in a new tab)" target="_blank" rel="noopener noreferrer">View this page on GitHub</a> • <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/content/issues/new?template%3Dpage-report.yml%26mdn-url%3Dhttps%253A%252F%252Fdeveloper.mozilla.org%252Fen-US%252Fdocs%252FLearn%252FAccessibility%252FHTML%26metadata%3D%253C%2521--%2BDo%2Bnot%2Bmake%2Bchanges%2Bbelow%2Bthis%2Bline%2B--%253E%250A%253Cdetails%253E%250A%253Csummary%253EPage%2Breport%2Bdetails%253C%252Fsummary%253E%250A%250A*%2BFolder%253A%2B%2560en-us%252Flearn%252Faccessibility%252Fhtml%2560%250A*%2BMDN%2BURL%253A%2Bhttps%253A%252F%252Fdeveloper.mozilla.org%252Fen-US%252Fdocs%252FLearn%252FAccessibility%252FHTML%250A*%2BGitHub%2BURL%253A%2Bhttps%253A%252F%252Fgithub.com%252Fmdn%252Fcontent%252Fblob%252Fmain%252Ffiles%252Fen-us%252Flearn%252Faccessibility%252Fhtml%252Findex.md%250A*%2BLast%2Bcommit%253A%2Bhttps%253A%252F%252Fgithub.com%252Fmdn%252Fcontent%252Fcommit%252Facb4e05fe7ea33a7b20fa03fdeb26a93511624e0%250A*%2BDocument%2Blast%2Bmodified%253A%2B2024-11-14T09%253A31%253A36.000Z%250A%250A%253C%252Fdetails%253E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Report a problem with this content</a> </div> </div> </aside> </main> </div> </div> <footer id="nav-footer" class="page-footer"> <div class="page-footer-grid"> <div class="page-footer-logo-col"> <a href="https://developer-mozilla-org.translate.goog/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" class="mdn-footer-logo" aria-label="MDN homepage"> <svg width="48" height="17" viewbox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"> <title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path> </svg></a> <p>Your blueprint for a better internet.</p> <ul class="social-icons"> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li> <li><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li> <li><a href="https://developer-mozilla-org.translate.goog/en-US/blog/rss.xml?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li> </ul> </div> <div class="page-footer-nav-col-1"> <h2 class="footer-nav-heading">MDN</h2> <ul class="footer-nav-list"> <li class="footer-nav-item"><a href="https://developer-mozilla-org.translate.goog/en-US/about?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">About</a></li> <li class="footer-nav-item"><a href="https://developer-mozilla-org.translate.goog/en-US/blog/?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Blog</a></li> <li class="footer-nav-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/en-US/careers/listings/?team%3DProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li> <li class="footer-nav-item"><a href="https://developer-mozilla-org.translate.goog/en-US/advertising?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Advertise with us</a></li> </ul> </div> <div class="page-footer-nav-col-2"> <h2 class="footer-nav-heading">Support</h2> <ul class="footer-nav-list"> <li class="footer-nav-item"><a class="footer-nav-link" href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://support.mozilla.org/products/mdn-plus">Product help</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/MDN/Community/Issues?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Report an issue</a></li> </ul> </div> <div class="page-footer-nav-col-3"> <h2 class="footer-nav-heading">Our communities</h2> <ul class="footer-nav-list"> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/community?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">MDN Community</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/discord?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB" target="_blank" rel="noopener noreferrer">MDN Chat</a></li> </ul> </div> <div class="page-footer-nav-col-4"> <h2 class="footer-nav-heading">Developers</h2> <ul class="footer-nav-list"> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Web?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Web Technologies</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/docs/Learn?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">Learn Web Development</a></li> <li class="footer-nav-item"><a class="footer-nav-link" href="https://developer-mozilla-org.translate.goog/en-US/plus?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">MDN Plus</a></li> <li class="footer-nav-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li> </ul> </div> <div class="page-footer-moz"> <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"> <svg width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"> <title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></path> </svg></a> <ul class="footer-moz-list"> <li class="footer-moz-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li> <li class="footer-moz-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/privacy/websites/%23cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li> <li class="footer-moz-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li> <li class="footer-moz-item"><a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li> </ul> </div> <div class="page-footer-legal"> <p id="license" class="page-footer-legal-text">Visit <a href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://translate.google.com/website?sl=pl&tl=fr&hl=en-GB&u=https://foundation.mozilla.org/">Mozilla Foundation</a>.<br> Portions of this content are ©1998–2024 by individual mozilla.org contributors. Content available under <a href="https://developer-mozilla-org.translate.goog/en-US/docs/MDN/Writing_guidelines/Attrib_copyright_license?_x_tr_sl=pl&_x_tr_tl=fr&_x_tr_hl=en-GB">a Creative Commons license</a>.</p> </div> </div> </footer> </div> <script type="application/json" id="hydration">{"url":"/en-US/docs/Learn/Accessibility/HTML","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/en-US/docs/Learn/Accessibility/What_is_accessibility\"><span class=\"button-wrap\"> Previous </span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn/Accessibility\"><span class=\"button-wrap\"> Overview: Accessibility</span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn/Accessibility/CSS_and_JavaScript\"><span class=\"button-wrap\"> Next </span></a></li></ul>\n<p>A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Prerequisites:</th>\n <td>\n A basic understanding of HTML (see\n <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a>), and an understanding of\n <a href=\"/en-US/docs/Learn/Accessibility/What_is_accessibility\">what accessibility is</a>.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Objective:</th>\n <td>\n To gain familiarity with the features of HTML that have accessibility\n benefits and how to use them appropriately in your web documents.\n </td>\n </tr>\n </tbody>\n</table></figure>"}},{"type":"prose","value":{"id":"html_and_accessibility","title":"HTML and accessibility","isH3":false,"content":"<p>As you learn more about HTML — read more resources, look at more examples, etc. — you'll keep seeing a common theme: the importance of using semantic HTML (sometimes called POSH, or Plain Old Semantic HTML). This means using the correct HTML elements for their intended purpose as much as possible.</p>\n<p>You might wonder why this is so important. After all, you can use a combination of CSS and JavaScript to make just about any HTML element behave in whatever way you want. For example, a control button to play a video on your site could be marked up like this:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div>Play video</div>\n</code></pre></div>\n<p>But as you'll see in greater detail later on, it makes sense to use the correct element for the job:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><button>Play video</button>\n</code></pre></div>\n<p>Not only do HTML <code><button></code>s have some suitable styling applied by default (which you will probably want to override), they also have built-in keyboard accessibility — users can navigate between buttons using the <kbd>Tab</kbd> key and activate their selection using <kbd>Space</kbd>, <kbd>Return</kbd> or <kbd>Enter</kbd>.</p>\n<p>Semantic HTML doesn't take any longer to write than non-semantic (bad) markup if you do it consistently from the start of your project. Even better, semantic markup has other benefits beyond accessibility:</p>\n<ol>\n<li><strong>Easier to develop with</strong> — as mentioned above, you get some functionality for free, plus it is arguably easier to understand.</li>\n<li><strong>Better on mobile</strong> — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.</li>\n<li><strong>Good for SEO</strong> — search engines give more importance to keywords inside headings, links, etc. than keywords included in non-semantic <code><div></code>s, etc., so your documents will be more findable by customers.</li>\n</ol>\n<p>Let's get on and look at accessible HTML in more detail.</p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nIt is a good idea to have a screen reader set up on your local computer so that you can do some testing of the examples shown below. See our <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#screen_readers\">Screen readers guide</a> for more details.</p>\n</div>"}},{"type":"prose","value":{"id":"good_semantics","title":"Good semantics","isH3":false,"content":"<p>We've already talked about the importance of proper semantics, and why we should use the right HTML element for the job. This cannot be ignored, as it is one of the main places that accessibility is badly broken if not handled properly.</p>\n<p>Out there on the web, the truth is that people do some very strange things with HTML markup. Some abuses of HTML are due to legacy practices that have not been completely forgotten, and some are just plain ignorance. Whatever the case, you should replace such bad code.</p>\n<p>Sometimes you are not in the position to get rid of lousy markup — your pages might be generated by some kind of server-side framework over which you don't have full control, or you might have third party content on your page (such as ad banners) over which you have no control.</p>\n<p>The goal isn't \"all or nothing\"; every improvement you can make will help the cause of accessibility.</p>"}},{"type":"prose","value":{"id":"text_content","title":"Text content","isH3":true,"content":"<p>One of the best accessibility aids a screen reader user can have is an excellent content structure with headings, paragraphs, lists, etc. An excellent semantic example might look something like the following:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html example-good notranslate\"><code><h1>My heading</h1>\n\n<p>This is the first section of my document.</p>\n\n<p>I'll add another paragraph here too.</p>\n\n<ol>\n <li>Here is</li>\n <li>a list for</li>\n <li>you to read</li>\n</ol>\n\n<h2>My subheading</h2>\n\n<p>\n This is the first subsection of my document. I'd love people to be able to\n find this content!\n</p>\n\n<h2>My 2nd subheading</h2>\n\n<p>\n This is the second subsection of my content, which I think is more interesting\n than the last one.\n</p>\n</code></pre></div>\n<p>We've prepared a version with longer text for you to try out with a screen reader (see <a href=\"https://mdn.github.io/learning-area/accessibility/html/good-semantics.html\" class=\"external\" target=\"_blank\">good-semantics.html</a>). If you try navigating through this, you'll see that this is pretty easy to navigate:</p>\n<ol>\n<li>The screen reader reads each header out as you progress through the content, notifying you what a heading is, what is a paragraph, etc.</li>\n<li>It stops after each element, letting you go at whatever pace is comfortable for you.</li>\n<li>You can jump to the next/previous heading in many screen readers.</li>\n<li>You can also bring up a list of all headings in many screen readers, allowing you to use them as a handy table of contents to find specific content.</li>\n</ol>\n<p>People sometimes write headings, paragraphs, etc. using line breaks and adding HTML elements purely for styling, something like the following:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html example-bad notranslate\"><code><span style=\"font-size: 3em\">My heading</span> <br /><br />\nThis is the first section of my document.\n<br /><br />\nI'll add another paragraph here too.\n<br /><br />\n1. Here is\n<br /><br />\n2. a list for\n<br /><br />\n3. you to read\n<br /><br />\n<span style=\"font-size: 2.5em\">My subheading</span>\n<br /><br />\nThis is the first subsection of my document. I'd love people to be able to find\nthis content!\n<br /><br />\n<span style=\"font-size: 2.5em\">My 2nd subheading</span>\n<br /><br />\nThis is the second subsection of my content. I think is more interesting than\nthe last one.\n</code></pre></div>\n<p>If you try our longer version out with a screen reader (see <a href=\"https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html\" class=\"external\" target=\"_blank\">bad-semantics.html</a>), you'll not have a very good experience — the screen reader hasn't got anything to use as signposts, so you can't retrieve a useful table of contents, and the whole page is seen as a single giant block, so it is just read out in one go, all at once.</p>\n<p>There are other issues too beyond accessibility — it is harder to style the content using CSS, or manipulate it with JavaScript, for example, because there are no elements to use as selectors.</p>\n<h4 id=\"using_clear_language\">Using clear language</h4>\n<p>The language you use can also affect accessibility. In general, you should use clear language that is not overly complex and doesn't use unnecessary jargon or slang terms. This not only benefits people with cognitive or other disabilities; it benefits readers for whom the text is not written in their first language, younger people…, everyone, in fact! Apart from this, you should try to avoid using language and characters that don't get read out clearly by the screen reader. For example:</p>\n<ul>\n<li>Don't use dashes if you can avoid it. Instead of writing 5–7, write 5 to 7.</li>\n<li>Expand abbreviations — instead of writing Jan, write January.</li>\n<li>Expand acronyms, at least once or twice, then use the <a href=\"/en-US/docs/Web/HTML/Element/abbr\"><code><abbr></code></a> tag to describe them.</li>\n</ul>"}},{"type":"prose","value":{"id":"page_layouts","title":"Page layouts","isH3":true,"content":"<p>In the bad old days, people used to create page layouts using HTML tables — using different table cells to contain the header, footer, sidebar, main content column, etc. This is not a good idea because a screen reader will likely give out confusing readouts, especially if the layout is complex and has many nested tables.</p>\n<p>Try our example <a href=\"https://mdn.github.io/learning-area/accessibility/html/table-layout.html\" class=\"external\" target=\"_blank\">table-layout.html</a> example, which looks something like this:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><table width=\"1200\">\n \n <tr id=\"heading\">\n <td colspan=\"6\">\n <h1 align=\"center\">Header</h1>\n </td>\n </tr>\n \n <tr id=\"nav\" bgcolor=\"#ffffff\">\n <td width=\"200\">\n <a href=\"#\" align=\"center\">Home</a>\n </td>\n <td width=\"200\">\n <a href=\"#\" align=\"center\">Our team</a>\n </td>\n <td width=\"200\">\n <a href=\"#\" align=\"center\">Projects</a>\n </td>\n <td width=\"200\">\n <a href=\"#\" align=\"center\">Contact</a>\n </td>\n <td width=\"300\">\n <form width=\"300\">\n <label\n >Search\n <input\n type=\"search\"\n name=\"q\"\n placeholder=\"Search query\"\n width=\"300\" />\n </label>\n </form>\n </td>\n <td width=\"100\">\n <button width=\"100\">Go!</button>\n </td>\n </tr>\n \n <tr id=\"spacer\" height=\"10\">\n <td></td>\n </tr>\n \n <tr id=\"main\">\n <td id=\"content\" colspan=\"4\">\n \n </td>\n <td id=\"aside\" colspan=\"2\" valign=\"top\">\n <h2>Related</h2>\n\n \n </td>\n </tr>\n \n <tr id=\"spacer\" height=\"10\">\n <td></td>\n </tr>\n \n <tr id=\"footer\">\n <td colspan=\"6\">\n <p>©Copyright 1996 by nobody. All rights reversed.</p>\n </td>\n </tr>\n</table>\n</code></pre></div>\n<p>If you try to navigate this using a screen reader, it will probably tell you that there's a table to be looked at (although some screen readers can guess the difference between table layouts and data tables). You'll then likely (depending on which screen reader you're using) have to go down into the table as an object and look at its features separately, then get out of the table again to carry on navigating the content.</p>\n<p>Table layouts are a relic of the past — they made sense back when CSS support was not widespread in browsers, but now they just create confusion for screen reader users. Additionally, their source code requires more markup, which makes them less flexible and more difficult to maintain. You can verify these claims by comparing your previous experience with a <a href=\"https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/\" class=\"external\" target=\"_blank\">more modern website structure example</a>, which could look something like this:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><header>\n <h1>Header</h1>\n</header>\n\n<nav>\n \n</nav>\n\n\n<main>\n \n <article>\n <h2>Article heading</h2>\n\n \n </article>\n\n <aside>\n <h2>Related</h2>\n\n \n </aside>\n</main>\n\n\n\n<footer>\n \n</footer>\n</code></pre></div>\n<p>If you try our more modern structure example with a screen reader, you'll notice that the layout markup no longer interferes with or causes confusion in the content readout. It is also much leaner and smaller in terms of code size, which means the code is easier to maintain and requires less bandwidth for users to download, making it particularly beneficial for those on slow connections.</p>\n<p>Another consideration when creating layouts is using HTML semantic elements as seen in the above example (see <a href=\"/en-US/docs/Web/HTML/Element#content_sectioning\">content sectioning</a>) — you can create a layout using only nested <a href=\"/en-US/docs/Web/HTML/Element/div\"><code><div></code></a> elements, but it is better to use appropriate sectioning elements to wrap your main navigation (<a href=\"/en-US/docs/Web/HTML/Element/nav\"><code><nav></code></a>), footer (<a href=\"/en-US/docs/Web/HTML/Element/footer\"><code><footer></code></a>), repeating content units (<a href=\"/en-US/docs/Web/HTML/Element/article\"><code><article></code></a>), etc. These provide extra semantics for screen readers (and other tools) to give users extra clues about the content they are navigating (see <a href=\"https://www.accessibilityoz.com/2020/02/html5-sectioning-elements-and-screen-readers/\" class=\"external\" target=\"_blank\">Screen Reader Support for new HTML5 Section Elements</a> for an idea of what screen reader support is like).</p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nIn addition to having good semantics and an attractive layout, your content should make logical sense in its source order — you can always place it where you want using CSS later on, but you should get the source order right to start with, so what screen reader users get read out to them will make sense.</p>\n</div>"}},{"type":"prose","value":{"id":"ui_controls","title":"UI controls","isH3":true,"content":"<p>By UI controls, we mean the main parts of web documents that users interact with — most commonly buttons, links, and form controls. In this section, we'll look at the basic accessibility concerns to be aware of when creating such controls. Later articles on WAI-ARIA and multimedia will look at other aspects of UI accessibility.</p>\n<p>One key aspect of the accessibility of UI controls is that by default, browsers allow them to be manipulated by the keyboard. You can try this out using our <a href=\"https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html\" class=\"external\" target=\"_blank\">native-keyboard-accessibility.html</a> example (see the <a href=\"https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html\" class=\"external\" target=\"_blank\">source code</a>). Open this in a new tab, and try pressing the tab key; after a few presses, you should see the tab focus start to move through the different focusable elements. The focused elements are given a highlighted default style in every browser (it differs slightly between different browsers) so that you can tell what element is focused.</p>\n<p><img src=\"/en-US/docs/Learn/Accessibility/HTML/button-focused-unfocused.png\" alt=\"Three buttons with the text "Click me!", "Click me too!", and "And me!" inside them respectively. The third button has a blue outline around it to indicate current tab focus.\" width=\"288\" height=\"39\" loading=\"lazy\"></p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nYou can enable an overlay that shows the page tabbing order in your developer tools. For more information see: <a href=\"https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html#show-web-page-tabbing-order\" class=\"external\" target=\"_blank\">Accessibility Inspector > Show web page tabbing order</a>.</p>\n</div>\n<p>You can then press Enter/Return to follow a focused link or press a button (we've included some JavaScript to make the buttons alert a message), or start typing to enter text in a text input. Other form elements have different controls; for example, the <a href=\"/en-US/docs/Web/HTML/Element/select\"><code><select></code></a> element can have its options displayed and cycled between using the up and down arrow keys.</p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nDifferent browsers may have different keyboard control options available. See <a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#using_native_keyboard_accessibility\">Using native keyboard accessibility</a> for more details.</p>\n</div>\n<p>You essentially get this behavior for free, just by using the appropriate elements, e.g.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html example-good notranslate\"><code><h1>Links</h1>\n\n<p>This is a link to <a href=\"https://www.mozilla.org\">Mozilla</a>.</p>\n\n<p>\n Another link, to the\n <a href=\"https://developer.mozilla.org\">Mozilla Developer Network</a>.\n</p>\n\n<h2>Buttons</h2>\n\n<p>\n <button data-message=\"This is from the first button\">Click me!</button>\n <button data-message=\"This is from the second button\">Click me too!</button>\n <button data-message=\"This is from the third button\">And me!</button>\n</p>\n\n<h2>Form</h2>\n\n<form>\n <div>\n <label for=\"name\">Fill in your name:</label>\n <input type=\"text\" id=\"name\" name=\"name\" />\n </div>\n <div>\n <label for=\"age\">Enter your age:</label>\n <input type=\"text\" id=\"age\" name=\"age\" />\n </div>\n <div>\n <label for=\"mood\">Choose your mood:</label>\n <select id=\"mood\" name=\"mood\">\n <option>Happy</option>\n <option>Sad</option>\n <option>Angry</option>\n <option>Worried</option>\n </select>\n </div>\n</form>\n</code></pre></div>\n<p>This means using links, buttons, form elements, and labels appropriately (including the <a href=\"/en-US/docs/Web/HTML/Element/label\"><code><label></code></a> element for form controls).</p>\n<p>However, it is again the case that people sometimes do strange things with HTML. For example, you sometimes see buttons marked up using <a href=\"/en-US/docs/Web/HTML/Element/div\"><code><div></code></a>s, for example:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html example-bad notranslate\"><code><div data-message=\"This is from the first button\">Click me!</div>\n<div data-message=\"This is from the second button\">Click me too!</div>\n<div data-message=\"This is from the third button\">And me!</div>\n</code></pre></div>\n<p>But using such code is not advised — you immediately lose the native keyboard accessibility you would have had if you'd just used <a href=\"/en-US/docs/Web/HTML/Element/button\"><code><button></code></a> elements, plus you don't get any of the default CSS styling that buttons get. In the rare to non-existent case when you need to use a non-button element for a button, use the <a href=\"/en-US/docs/Web/Accessibility/ARIA/Roles/button_role\"><code>button</code> role</a> and implement all the default button behaviors, including keyboard and mouse button support.</p>\n<h4 id=\"building_keyboard_accessibility_back_in\">Building keyboard accessibility back in</h4>\n<p>Adding such advantages back in takes a bit of work (you can see an example in our <a href=\"https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html\" class=\"external\" target=\"_blank\">fake-div-buttons.html</a> example — also see the <a href=\"https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html\" class=\"external\" target=\"_blank\">source code</a>). Here we've given our fake <code><div></code> buttons the ability to be focused (including via tab) by giving each one the attribute <code>tabindex=\"0\"</code>. We also include <code>role=\"button\"</code> so screen reader users know they can focus on and interact with the element:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><div data-message=\"This is from the first button\" tabindex=\"0\" role=\"button\">\n Click me!\n</div>\n<div data-message=\"This is from the second button\" tabindex=\"0\" role=\"button\">\n Click me too!\n</div>\n<div data-message=\"This is from the third button\" tabindex=\"0\" role=\"button\">\n And me!\n</div>\n</code></pre></div>\n<p>Basically, the <a href=\"/en-US/docs/Web/HTML/Global_attributes/tabindex\"><code>tabindex</code></a> attribute is primarily intended to allow tabbable elements to have a custom tab order (specified in positive numerical order), instead of just being tabbed through in their default source order. This is nearly always a bad idea, as it can cause major confusion. Use it only if you really need to, for example, if the layout shows things in a very different visual order to the source code, and you want to make things work more logically. There are two other options for <code>tabindex</code>:</p>\n<ul>\n<li><code>tabindex=\"0\"</code> — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of <code>tabindex</code>.</li>\n<li><code>tabindex=\"-1\"</code> — this allows not normally tabbable elements to receive focus programmatically, e.g., via JavaScript, or as the target of links.</li>\n</ul>\n<p>While the above addition allows us to tab to the buttons, it does not allow us to activate them via the <kbd>Enter</kbd>/<kbd>Return</kbd> key. To do that, we had to add the following bit of JavaScript trickery:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>document.onkeydown = (e) => {\n // The Enter/Return key\n if (e.key === \"Enter\") {\n document.activeElement.click();\n }\n};\n</code></pre></div>\n<p>Here we add a listener to the <code>document</code> object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's <a href=\"/en-US/docs/Web/API/KeyboardEvent/key\"><code>key</code></a> property; if the key pressed is <kbd>Enter</kbd>/<kbd>Return</kbd>, we run the function stored in the button's <code>onclick</code> handler using <code>document.activeElement.click()</code>. <a href=\"/en-US/docs/Web/API/Document/activeElement\"><code>activeElement</code></a> which gives us the element that is currently focused on the page.</p>\n<p>This is a lot of extra hassle to build the functionality back in. And there's bound to be other problems with it. <strong>Better to just use the right element for the right job in the first place.</strong></p>\n<h4 id=\"meaningful_text_labels\">Meaningful text labels</h4>\n<p>UI control text labels are very useful to all users, but getting them right is particularly important to users with disabilities.</p>\n<p>You should make sure that your button and link text labels are understandable and distinctive. Don't just use \"Click here\" for your labels, as screen reader users sometimes get up a list of buttons and form controls. The following screenshot shows our controls being listed by VoiceOver on Mac.</p>\n<p><img src=\"/en-US/docs/Learn/Accessibility/HTML/voiceover-formcontrols.png\" alt=\"List of form input labels being listed by VoiceOver software on Mac. This list contains meaningless labels like 'happy menu button` given to various form controls like button, textfield and link\" width=\"802\" height=\"604\" loading=\"lazy\"></p>\n<p>Make sure your labels make sense out of context, read on their own, as well as in the context of the paragraph they are in. For example, the following shows an example of good link text:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html example-good notranslate\"><code><p>\n Whales are really awesome creatures.\n <a href=\"whales.html\">Find out more about whales</a>.\n</p>\n</code></pre></div>\n<p>but this is bad link text:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html example-bad notranslate\"><code><p>\n Whales are really awesome creatures. To find out more about whales,\n <a href=\"whales.html\">click here</a>.\n</p>\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nYou can find a lot more about link implementation and best practices in our <a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">Creating hyperlinks</a> article. You can also see some good and bad examples at <a href=\"https://mdn.github.io/learning-area/accessibility/html/good-links.html\" class=\"external\" target=\"_blank\">good-links.html</a> and <a href=\"https://mdn.github.io/learning-area/accessibility/html/bad-links.html\" class=\"external\" target=\"_blank\">bad-links.html</a>.</p>\n</div>\n<p>Form labels are also important for giving you a clue about what you need to enter into each form input. The following seems like a reasonable enough example:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html example-bad notranslate\"><code>Fill in your name: <input type=\"text\" id=\"name\" name=\"name\" />\n</code></pre></div>\n<p>However, this is not so useful for disabled users. There is nothing in the above example to associate the label unambiguously with the form input and make it clear how to fill it in if you cannot see it. If you access this with some screen readers, you may only be given a description along the lines of \"edit text.\"</p>\n<p>The following is a much better example:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html example-good notranslate\"><code><div>\n <label for=\"name\">Fill in your name:</label>\n <input type=\"text\" id=\"name\" name=\"name\" />\n</div>\n</code></pre></div>\n<p>With code like this, the label will be clearly associated with the input; the description will be more like \"Fill in your name: edit text.\"</p>\n<p><img src=\"/en-US/docs/Learn/Accessibility/HTML/voiceover-good-form-label.png\" alt=\"A good form label that reads 'Fill in your name' is given to a text input form control. \" width=\"257\" height=\"32\" loading=\"lazy\"></p>\n<p>As an added bonus, in most browsers associating a label with a form input means that you can click the label to select or activate the form element. This gives the input a bigger hit area, making it easier to select.</p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nYou can see some good and bad form examples in <a href=\"https://mdn.github.io/learning-area/accessibility/html/good-form.html\" class=\"external\" target=\"_blank\">good-form.html</a> and <a href=\"https://mdn.github.io/learning-area/accessibility/html/bad-form.html\" class=\"external\" target=\"_blank\">bad-form.html</a>.</p>\n</div>\n<p>You can find a nice explanation of the importance of proper text labels, and how to investigate text label issues using the <a href=\"https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html\" class=\"external\" target=\"_blank\">Firefox Accessibility Inspector</a>, in the following video:</p>\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/YhlAVlfH0rQ\" title=\"YouTube video\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\" loading=\"lazy\"></iframe>"}},{"type":"prose","value":{"id":"accessible_data_tables","title":"Accessible data tables","isH3":false,"content":"<p>A basic data table can be written with very simple markup, for example:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><table>\n <tr>\n <td>Name</td>\n <td>Age</td>\n <td>Pronouns</td>\n </tr>\n <tr>\n <td>Gabriel</td>\n <td>13</td>\n <td>he/him</td>\n </tr>\n <tr>\n <td>Elva</td>\n <td>8</td>\n <td>she/her</td>\n </tr>\n <tr>\n <td>Freida</td>\n <td>5</td>\n <td>she/her</td>\n </tr>\n</table>\n</code></pre></div>\n<p>But this has problems — there is no way for a screen reader user to associate rows or columns together as groupings of data. To do this, you need to know what the header rows are and if they are heading up rows, columns, etc. This can only be done visually for the above table (see <a href=\"https://mdn.github.io/learning-area/accessibility/html/bad-table.html\" class=\"external\" target=\"_blank\">bad-table.html</a> and try the example out yourself).</p>\n<p>Now have a look at our <a href=\"https://github.com/mdn/learning-area/blob/main/css/styling-boxes/styling-tables/punk-bands-complete.html\" class=\"external\" target=\"_blank\">punk bands table example</a> — you can see a few accessibility aids at work here:</p>\n<ul>\n<li>Table headers are defined using <a href=\"/en-US/docs/Web/HTML/Element/th\"><code><th></code></a> elements — you can also specify if they are headers for rows or columns using the <code>scope</code> attribute. This gives you complete groups of data that can be consumed by screen readers as single units.</li>\n<li>The <a href=\"/en-US/docs/Web/HTML/Element/caption\"><code><caption></code></a> element and the <code><table></code> element's <code>summary</code> attribute both do similar jobs — they act as alt text for a table, giving a screen reader user a useful quick summary of the table's contents. The <code><caption></code> element is generally preferred as it makes it's content accessible to sighted users too, who might also find it useful. You don't really need both.</li>\n</ul>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nSee our <a href=\"/en-US/docs/Learn/HTML/Tables/Advanced\">HTML table advanced features and accessibility</a> article for more details about accessible data tables.</p>\n</div>"}},{"type":"prose","value":{"id":"text_alternatives","title":"Text alternatives","isH3":false,"content":"<p>Whereas textual content is inherently accessible, the same cannot necessarily be said for multimedia content — image and video content cannot be seen by visually-impaired people, and audio content cannot be heard by hearing-impaired people. We cover video and audio content in detail in the <a href=\"/en-US/docs/Learn/Accessibility/Multimedia\">Accessible multimedia</a>, but for this article we'll look at accessibility for the humble <a href=\"/en-US/docs/Web/HTML/Element/img\"><code><img></code></a> element.</p>\n<p>We have a simple example written up, <a href=\"https://mdn.github.io/learning-area/accessibility/html/accessible-image.html\" class=\"external\" target=\"_blank\">accessible-image.html</a>, which features four copies of the same image:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><img src=\"dinosaur.png\" />\n\n<img\n src=\"dinosaur.png\"\n alt=\"A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.\" />\n\n<img\n src=\"dinosaur.png\"\n alt=\"A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.\"\n title=\"The Mozilla red dinosaur\" />\n\n<img src=\"dinosaur.png\" aria-labelledby=\"dino-label\" />\n\n<p id=\"dino-label\">\n The Mozilla red Tyrannosaurus Rex: A two legged dinosaur standing upright like\n a human, with small arms, and a large head with lots of sharp teeth.\n</p>\n</code></pre></div>\n<p>The first image, when viewed by a screen reader, doesn't really offer the user much help — VoiceOver for example reads out \"/dinosaur.png, image\". It reads out the filename to try to provide some help. In this example the user will at least know it is a dinosaur of some kind, but often files may be uploaded with machine-generated file names (e.g. from a digital camera) and these file names would likely provide no context to the image's content.</p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nThis is why you should never include text content inside an image — screen readers can't access it. There are other disadvantages too — you can't select it and copy/paste it. Just don't do it!</p>\n</div>\n<p>When a screen reader encounters the second image, it reads out the full alt attribute — \"A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.\".</p>\n<p>This highlights the importance of not only using meaningful file names in case so-called <strong>alt text</strong> is not available, but also making sure that alt text is provided in <code>alt</code> attributes wherever possible.</p>\n<p>Note that the contents of the <code>alt</code> attribute should always provide a direct representation of the image and what it conveys visually. The alt should be brief and concise and include all the information conveyed in the image that is not duplicated in the surrounding text.</p>\n<p>The content of the <code>alt</code> attribute for a single image differs based on the context. For example, if the photo of Fluffy is an avatar next to a review for Yuckymeat dog food, <code>alt=\"Fluffy\"</code> is appropriate. If the photo is part of Fluffy's adoption page for the animal rescue society, information conveyed in the image that is relevant for a prospective dog parent that is not duplicated in the surrounding text should be included. A longer description, such as <code>alt=\"Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth.\"</code> is appropriate. As the surrounding text likely has Fluffy's size and breed, that is not included in the <code>alt</code>. However, as the dog's biography likely doesn't include hair length, colors, or toy preferences, which the potential parent needs to know, it is included. Is the image outdoors, or does Fluffy have a red collar with a blue leash? Not important in terms of adopting the pet and therefore not included. All information image conveys that a sited user can access and is relevant to the context is what needs to be conveyed; nothing more. Keep it short, precise, and useful.</p>\n<p>Any personal knowledge or extra description shouldn't be included here, as it is not useful for people who have not seen the image before. If the ball is Fluffy's favorite toy or if the sited user can't know that from the image, then don't include it.</p>\n<p>One thing to consider is whether your images have meaning inside your content, or whether they are purely for visual decoration, and thus have no meaning. If they are decorative, it is better to write an empty text as a value for <code>alt</code> attribute (see <a href=\"#empty_alt_attributes\">Empty alt attributes</a>) or to just include them in the page as CSS background images.</p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nRead <a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">Images in HTML</a> and <a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\">Responsive images</a> for more information about image implementation and best practices.\nYou can also check <a href=\"https://www.w3.org/WAI/tutorials/images/decision-tree/\" class=\"external\" target=\"_blank\">An alt Decision Tree</a> to learn how to use an alt attribute for images in various situations.</p>\n</div>\n<p>If you do want to provide extra contextual information, you should put it in the text surrounding the image, or inside a <code>title</code> attribute, as shown above. In this case, most screen readers will read out the alt text, the title attribute, and the filename. In addition, browsers display title text as tooltips when moused over.</p>\n<p><img src=\"/en-US/docs/Learn/Accessibility/HTML/title-attribute.png\" alt=\"Screenshot of a red Tyrannosaurus Rex with the text "The mozilla red dinosaur" displayed as tooltip on mouseover.\" width=\"352\" height=\"234\" loading=\"lazy\"></p>\n<p>Let's have another quick look at the fourth method:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><img src=\"dinosaur.png\" aria-labelledby=\"dino-label\" />\n\n<p id=\"dino-label\">The Mozilla red Tyrannosaurus…</p>\n</code></pre></div>\n<p>In this case, we are not using the <code>alt</code> attribute at all — instead, we have presented our description of the image as a regular text paragraph, given it an <code>id</code>, and then used the <code>aria-labelledby</code> attribute to refer to that <code>id</code>, which causes screen readers to use that paragraph as the alt text/label for that image. This is especially useful if you want to use the same text as a label for multiple images — something that isn't possible with <code>alt</code>.</p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong> <a href=\"/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby\"><code>aria-labelledby</code></a> is part of the <a href=\"https://www.w3.org/TR/wai-aria-1.1/\" class=\"external\" target=\"_blank\">WAI-ARIA</a> spec, which allows developers to add in extra semantics to their markup to improve screen reader accessibility where needed. To learn more about how it works, read our <a href=\"/en-US/docs/Learn/Accessibility/WAI-ARIA_basics\">WAI-ARIA Basics</a> article.</p>\n</div>"}},{"type":"prose","value":{"id":"figures_and_figure_captions","title":"Figures and figure captions","isH3":true,"content":"<p>HTML includes two elements — <a href=\"/en-US/docs/Web/HTML/Element/figure\"><code><figure></code></a> and <a href=\"/en-US/docs/Web/HTML/Element/figcaption\"><code><figcaption></code></a> — which associate a figure of some kind (it could be anything, not necessarily an image) with a figure caption:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><figure>\n <img\n src=\"dinosaur.png\"\n alt=\"The Mozilla Tyrannosaurus\"\n aria-describedby=\"dinodescr\" />\n <figcaption id=\"dinodescr\">\n A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a\n human, with small arms, and a large head with lots of sharp teeth.\n </figcaption>\n</figure>\n</code></pre></div>\n<p>While there is mixed screen reader support of associating figure captions with their figures, including <a href=\"/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby\"><code>aria-labelledby</code></a> or <a href=\"/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby\"><code>aria-describedby</code></a> creates the association if none is present. That said, the element structure is useful for CSS styling, plus it provides a way to place a description of the image next to it in the source.</p>"}},{"type":"prose","value":{"id":"empty_alt_attributes","title":"Empty alt attributes","isH3":true,"content":"<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><h3>\n <img src=\"article-icon.png\" alt=\"\" />\n Tyrannosaurus Rex: the king of the dinosaurs\n</h3>\n</code></pre></div>\n<p>There may be times where an image is included in a page's design, but its primary purpose is for visual decoration. You'll notice in the code example above that the image's <code>alt</code> attribute is empty — this is to make screen readers recognize the image, but not attempt to describe the image (instead they'd just say \"image\", or similar).</p>\n<p>The reason to use an empty <code>alt</code> instead of not including it is because many screen readers announce the whole image URL if no <code>alt</code> is provided. In the above example, the image is acting as a visual decoration to the heading it's associated with. In cases like this, and in cases where an image is only decoration and has no content value, you should include an empty <code>alt</code> in your <code>img</code> elements. Another alternative is to use the aria <a href=\"/en-US/docs/Web/Accessibility/ARIA/Roles\"><code>role</code></a> attribute <a href=\"/en-US/docs/Web/Accessibility/ARIA/Roles/presentation_role\"><code>role=\"presentation\"</code></a> as this also stops screen readers from reading out alternative text.</p>\n<div class=\"notecard note\">\n<p><strong>Note:</strong>\nIf possible you should use CSS to display images that are only decorative.</p>\n</div>"}},{"type":"prose","value":{"id":"more_on_links","title":"More on links","isH3":false,"content":"<p>Links (the <a href=\"/en-US/docs/Web/HTML/Element/a\"><code><a></code></a> element with an <code>href</code> attribute), depending on how they are used, can help or harm accessibility. By default, links are accessible in appearance. They can improve accessibility by helping a user quickly navigate to different sections of a document. They can also harm accessibility if their accessible styling is removed or if JavaScript causes them to behave in unexpected ways.</p>"}},{"type":"prose","value":{"id":"link_styling","title":"Link styling","isH3":true,"content":"<p>By default, links are visually different from other text in both color and <a href=\"/en-US/docs/Web/CSS/text-decoration\">text-decoration</a>, with links being blue and underlined by default, purple and underlined if visited, and with a <a href=\"/en-US/docs/Web/CSS/:focus\">focus-ring</a> when they receive keyboard focus.</p>\n<p>Color should not be used as the sole method of distinguishing links from non-linking content. Link text color, like all text, has to be significantly different from the background color (<a href=\"/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast\">a 4.5:1 contrast</a>). In addition, links should visually be significantly different from non-linking text, with a minimum contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a 4.5:1 contrast between all those state colors and the background color.</p>"}},{"type":"prose","value":{"id":"onclick_events","title":"<code>onclick</code> events","isH3":true,"content":"<p>Anchor tags are often abused with the <code>onclick</code> event to create pseudo-buttons by setting <strong>href</strong> to <code>\"#\"</code> or <code>\"javascript:void(0)\"</code> to prevent the page from refreshing.</p>\n<p>These values cause unexpected behavior when copying or dragging links, opening links in a new tab or window, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (e.g., screen readers). In these cases, it is recommended to use a <a href=\"/en-US/docs/Web/HTML/Element/button\"><code><button></code></a> instead. In general you should only use an anchor for navigation using a proper URL.</p>"}},{"type":"prose","value":{"id":"external_links_and_linking_to_non-html_resources","title":"External links and linking to non-HTML resources","isH3":true,"content":"<p>Links that open in a new tab or window via the <code>target=\"_blank\"</code> declaration and links to whose <code>href</code> value points to a file resource should include an indicator about the behavior that will occur when the link is activated.</p>\n<p>People experiencing low vision conditions, who are navigating with the aid of screen reading technology, or who have cognitive concerns may become confused when the new tab, window, or application is opened unexpectedly. Older versions of screen reading software may not even announce the behavior.</p>\n<h4 id=\"link_that_opens_a_new_tab_or_window\">Link that opens a new tab or window</h4>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><a target=\"_blank\" href=\"https://www.wikipedia.org/\"\n >Wikipedia (opens in a new window)</a\n>\n</code></pre></div>\n<h4 id=\"link_to_a_non-html_resource\">Link to a non-HTML resource</h4>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><a target=\"_blank\" href=\"2017-annual-report.ppt\"\n >2017 Annual Report (PowerPoint)</a\n>\n</code></pre></div>\n<p>If an icon is used in place of text to signify this kind of links behavior, make sure it includes an <a href=\"/en-US/docs/Web/HTML/Element/img#alt\">alternate description</a>.</p>\n<ul>\n<li><a href=\"https://webaim.org/techniques/hypertext/hypertext_links\" class=\"external\" target=\"_blank\">WebAIM: Links and Hypertext - Hypertext Links</a></li>\n<li><a href=\"/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.2_—_predictable_make_web_pages_appear_and_operate_in_predictable_ways\">MDN Understanding WCAG, Guideline 3.2 explanations</a></li>\n<li><a href=\"https://www.w3.org/TR/WCAG20-TECHS/G200.html\" class=\"external\" target=\"_blank\">G200: Opening new windows and tabs from a link only when necessary | W3C Techniques for WCAG 2.0</a></li>\n<li><a href=\"https://www.w3.org/TR/WCAG20-TECHS/G201.html\" class=\"external\" target=\"_blank\">G201: Giving users advanced warning when opening a new window | W3C Techniques for WCAG 2.0</a></li>\n</ul>"}},{"type":"prose","value":{"id":"skip_links","title":"Skip links","isH3":true,"content":"<p>A skip link, also known as skipnav, is an <code>a</code> element placed as close as possible to the opening <a href=\"/en-US/docs/Web/HTML/Element/body\"><code><body></code></a> element that links to the beginning of the page's main content. This link allows people to bypass content repeated throughout multiple pages on a website, such as a website's header and primary navigation.</p>\n<p>Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be a laborious task.</p>\n<ul>\n<li><a href=\"https://webaim.org/techniques/skipnav/\" class=\"external\" target=\"_blank\">WebAIM: \"Skip Navigation\" Links</a></li>\n<li><a href=\"https://www.a11yproject.com/posts/skip-nav-links/\" class=\"external\" target=\"_blank\">How–to: Use Skip Navigation links - The A11Y Project</a></li>\n<li><a href=\"/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#guideline_2.4_%e2%80%94_navigable_provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are\">MDN Understanding WCAG, Guideline 2.4 explanations</a></li>\n<li><a href=\"https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html\" class=\"external\" target=\"_blank\">Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0</a></li>\n</ul>"}},{"type":"prose","value":{"id":"proximity","title":"Proximity","isH3":true,"content":"<p>Large amounts of interactive content—including anchors—placed in close visual proximity to each other should have space inserted to separate them. This spacing is beneficial for people who suffer from fine motor control issues and may accidentally activate the wrong interactive content while navigating.</p>\n<p>Spacing may be created using CSS properties such as <a href=\"/en-US/docs/Web/CSS/margin\"><code>margin</code></a>.</p>\n<ul>\n<li><a href=\"https://axesslab.com/hand-tremors/\" class=\"external\" target=\"_blank\">Hand tremors and the giant-button-problem - Axess Lab</a></li>\n</ul>"}},{"type":"prose","value":{"id":"test_your_skills!","title":"Test your skills!","isH3":false,"content":"<p>You've reached the end of this article, but can you remember the most important information? See <a href=\"/en-US/docs/Learn/Accessibility/Test_your_skills:_HTML_accessibility\">Test your skills: HTML Accessibility</a> to verify that you've retained this information before you move on.</p>"}},{"type":"prose","value":{"id":"summary","title":"Summary","isH3":false,"content":"<p>You should now be well-versed in writing accessible HTML for most occasions. Our WAI-ARIA basics article will help to fill gaps in this knowledge, but this article has taken care of the basics. Next up we'll explore CSS and JavaScript, and how accessibility is affected by their good or bad use.</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/en-US/docs/Learn/Accessibility/What_is_accessibility\"><span class=\"button-wrap\"> Previous </span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn/Accessibility\"><span class=\"button-wrap\"> Overview: Accessibility</span></a></li><li><a class=\"button secondary\" href=\"/en-US/docs/Learn/Accessibility/CSS_and_JavaScript\"><span class=\"button-wrap\"> Next </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":false,"locale":"en-US","mdn_url":"/en-US/docs/Learn/Accessibility/HTML","modified":"2024-11-14T09:31:36.000Z","native":"English (US)","noIndexing":false,"other_translations":[{"locale":"de","title":"HTML: Eine gute Grundlage für Barrierefreiheit","native":"Deutsch"},{"locale":"es","title":"HTML: Una buena base para la accesibilidad","native":"Español"},{"locale":"fr","title":"HTML : une bonne base pour l'accessibilité","native":"Français"},{"locale":"ja","title":"HTML: アクセシビリティの良き基本","native":"日本語"},{"locale":"ko","title":"HTML: 접근성의 좋은 기반","native":"한국어"},{"locale":"pt-BR","title":"HTML: Boas práticas em acessibilidade","native":"Português (do Brasil)"},{"locale":"ru","title":"HTML: Хорошая основа для доступности","native":"Русский"},{"locale":"zh-CN","title":"HTML：无障碍的良好基础","native":"中文 (简体)"}],"pageTitle":"HTML: A good basis for accessibility - Learn web development | MDN","parents":[{"uri":"/en-US/docs/Learn","title":"Guides"},{"uri":"/en-US/docs/Learn/Accessibility","title":"Accessibility"},{"uri":"/en-US/docs/Learn/Accessibility/HTML","title":"HTML: A good basis for accessibility"}],"popularity":null,"short_title":"HTML: A good basis for accessibility","sidebarHTML":"<ol><li class=\"section\"><a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">Complete beginners start here!</a></li><li class=\"toggle\"><details><summary>Getting started with the web</summary><ol><li><a href=\"/en-US/docs/Learn/Getting_started_with_the_web\">Getting started with the web</a></li><li><a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software\">Installing basic software</a></li><li><a href=\"/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like\">What will your website look like?</a><abbr class=\"icon icon-deprecated\" title=\"Deprecated. Not for use in new websites.\">\n<span class=\"visually-hidden\">Deprecated</span>\n</abbr></li><li><a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files\">Dealing with files</a></li><li><a href=\"/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics\">HTML basics</a></li><li><a href=\"/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics\">CSS basics</a></li><li><a href=\"/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics\">JavaScript basics</a></li><li><a href=\"/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website\">Publishing your website</a></li><li><a href=\"/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works\">How the web works</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn/HTML\">HTML — Structuring the web</a></li><li class=\"toggle\"><details><summary>Introduction to HTML</summary><ol><li><a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML\">Introduction to HTML</a></li><li><a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started\">Getting started with HTML</a></li><li><a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML\">What's in the head? Metadata in HTML</a></li><li><a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals\">HTML text fundamentals</a></li><li><a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks\">Creating hyperlinks</a></li><li><a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting\">Advanced text formatting</a></li><li><a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure\">Document and website structure</a></li><li><a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML\">Debugging HTML</a></li><li><a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter\">Marking up a letter</a></li><li><a href=\"/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content\">Structuring a page of content</a></li></ol></details></li><li class=\"toggle\"><details><summary>Multimedia and embedding</summary><ol><li><a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding\">Multimedia and embedding</a></li><li><a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML\">Images in HTML</a></li><li><a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content\">Video and audio content</a></li><li><a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies\">From object to iframe — other embedding technologies</a></li><li><a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web\">Adding vector graphics to the web</a></li><li><a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images\">Responsive images</a></li><li><a href=\"/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page\">Mozilla splash page</a></li></ol></details></li><li class=\"toggle\"><details><summary>HTML tables</summary><ol><li><a href=\"/en-US/docs/Learn/HTML/Tables\">HTML tables</a></li><li><a href=\"/en-US/docs/Learn/HTML/Tables/Basics\">HTML table basics</a></li><li><a href=\"/en-US/docs/Learn/HTML/Tables/Advanced\">HTML table advanced features and accessibility</a></li><li><a href=\"/en-US/docs/Learn/HTML/Tables/Structuring_planet_data\">Structuring planet data</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn/CSS\">CSS — Styling the web</a></li><li class=\"toggle\"><details><summary>CSS first steps</summary><ol><li><a href=\"/en-US/docs/Learn/CSS/First_steps\">CSS first steps</a></li><li><a href=\"/en-US/docs/Learn/CSS/First_steps/What_is_CSS\">What is CSS?</a></li><li><a href=\"/en-US/docs/Learn/CSS/First_steps/Getting_started\">Getting started with CSS</a></li><li><a href=\"/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured\">How CSS is structured</a></li><li><a href=\"/en-US/docs/Learn/CSS/First_steps/How_CSS_works\">How CSS works</a></li><li><a href=\"/en-US/docs/Learn/CSS/First_steps/Styling_a_biography_page\">Styling a biography page</a></li></ol></details></li><li class=\"toggle\"><details><summary>CSS building blocks</summary><ol><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks\">CSS building blocks</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Selectors\">CSS selectors</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors\">Type, class, and ID selectors</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors\">Attribute selectors</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements\">Pseudo-classes and pseudo-elements</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators\">Combinators</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance\">Cascade, specificity, and inheritance</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers\">Cascade layers</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/The_box_model\">The box model</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders\">Backgrounds and borders</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions\">Handling different text directions</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content\">Overflowing content</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Values_and_units\">CSS values and units</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS\">Sizing items in CSS</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements\">Images, media, and form elements</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Styling_tables\">Styling tables</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects\">Advanced styling effects</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Organizing\">Organizing your CSS</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension\">Fundamental CSS comprehension</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper\">Creating fancy letterheaded paper</a></li><li><a href=\"/en-US/docs/Learn/CSS/Building_blocks/A_cool_looking_box\">A cool-looking box</a></li></ol></details></li><li class=\"toggle\"><details><summary>Styling text</summary><ol><li><a href=\"/en-US/docs/Learn/CSS/Styling_text\">CSS styling text</a></li><li><a href=\"/en-US/docs/Learn/CSS/Styling_text/Fundamentals\">Fundamental text and font styling</a></li><li><a href=\"/en-US/docs/Learn/CSS/Styling_text/Styling_lists\">Styling lists</a></li><li><a href=\"/en-US/docs/Learn/CSS/Styling_text/Styling_links\">Styling links</a></li><li><a href=\"/en-US/docs/Learn/CSS/Styling_text/Web_fonts\">Web fonts</a></li><li><a href=\"/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage\">Typesetting a community school homepage</a></li></ol></details></li><li class=\"toggle\"><details><summary>CSS layout</summary><ol><li><a href=\"/en-US/docs/Learn/CSS/CSS_layout\">CSS layout</a></li><li><a href=\"/en-US/docs/Learn/CSS/CSS_layout/Introduction\">Introduction to CSS layout</a></li><li><a href=\"/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow\">Normal Flow</a></li><li><a href=\"/en-US/docs/Learn/CSS/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/en-US/docs/Learn/CSS/CSS_layout/Grids\">Grids</a></li><li><a href=\"/en-US/docs/Learn/CSS/CSS_layout/Floats\">Floats</a></li><li><a href=\"/en-US/docs/Learn/CSS/CSS_layout/Positioning\">Positioning</a></li><li><a href=\"/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout\">Multiple-column layout</a></li><li><a href=\"/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design\">Responsive design</a></li><li><a href=\"/en-US/docs/Learn/CSS/CSS_layout/Media_queries\">Beginner's guide to media queries</a></li><li><a href=\"/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods\">Legacy layout methods</a></li><li><a href=\"/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers\">Supporting older browsers</a></li><li><a href=\"/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension\">Fundamental layout comprehension</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn/JavaScript\">JavaScript — Dynamic client-side scripting</a></li><li class=\"toggle\"><details><summary>JavaScript first steps</summary><ol><li><a href=\"/en-US/docs/Learn/JavaScript/First_steps\">JavaScript first steps</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript\">What is JavaScript?</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/First_steps/A_first_splash\">A first splash into JavaScript</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong\">What went wrong? Troubleshooting JavaScript</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/First_steps/Variables\">Storing the information you need — Variables</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/First_steps/Math\">Basic math in JavaScript — numbers and operators</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/First_steps/Strings\">Handling text — strings in JavaScript</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods\">Useful string methods</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/First_steps/Arrays\">Arrays</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator\">Silly story generator</a></li></ol></details></li><li class=\"toggle\"><details><summary>JavaScript building blocks</summary><ol><li><a href=\"/en-US/docs/Learn/JavaScript/Building_blocks\">JavaScript building blocks</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Building_blocks/conditionals\">Making decisions in your code — conditionals</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code\">Looping code</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Building_blocks/Functions\">Functions — reusable blocks of code</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function\">Build your own function</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Building_blocks/Return_values\">Function return values</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Building_blocks/Events\">Introduction to events</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Building_blocks/Event_bubbling\">Event bubbling</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery\">Image gallery</a></li></ol></details></li><li class=\"toggle\"><details><summary>Introducing JavaScript objects</summary><ol><li><a href=\"/en-US/docs/Learn/JavaScript/Objects\">Introducing JavaScript objects</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Objects/Basics\">JavaScript object basics</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Objects/Object_prototypes\">Object prototypes</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Objects/Object-oriented_programming\">Object-oriented programming</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Objects/Classes_in_JavaScript\">Classes in JavaScript</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Objects/JSON\">Working with JSON</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Objects/Object_building_practice\">Object building practice</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features\">Adding features to our bouncing balls demo</a></li></ol></details></li><li class=\"toggle\"><details><summary>Asynchronous JavaScript</summary><ol><li><a href=\"/en-US/docs/Learn/JavaScript/Asynchronous\">Asynchronous JavaScript</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Asynchronous/Introducing\">Introducing asynchronous JavaScript</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Asynchronous/Promises\">How to use promises</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Asynchronous/Implementing_a_promise-based_API\">How to implement a promise-based API</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Asynchronous/Introducing_workers\">Introducing workers</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Asynchronous/Sequencing_animations\">Sequencing animations</a></li></ol></details></li><li class=\"toggle\"><details><summary>Client-side web APIs</summary><ol><li><a href=\"/en-US/docs/Learn/JavaScript/Client-side_web_APIs\">Client-side web APIs</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction\">Introduction to web APIs</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents\">Manipulating documents</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data\">Fetching data from the server</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs\">Third-party APIs</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics\">Drawing graphics</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs\">Video and Audio APIs</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage\">Client-side storage</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn/Forms\">Web forms — Working with user data</a></li><li class=\"toggle\"><details><summary>Web form building blocks</summary><ol><li><a href=\"/en-US/docs/Learn/Forms\">Web form building blocks</a></li><li><a href=\"/en-US/docs/Learn/Forms/Your_first_form\">Your first form</a></li><li><a href=\"/en-US/docs/Learn/Forms/How_to_structure_a_web_form\">How to structure a web form</a></li><li><a href=\"/en-US/docs/Learn/Forms/Basic_native_form_controls\">Basic native form controls</a></li><li><a href=\"/en-US/docs/Learn/Forms/HTML5_input_types\">The HTML5 input types</a></li><li><a href=\"/en-US/docs/Learn/Forms/Other_form_controls\">Other form controls</a></li><li><a href=\"/en-US/docs/Learn/Forms/Styling_web_forms\">Styling web forms</a></li><li><a href=\"/en-US/docs/Learn/Forms/Advanced_form_styling\">Advanced form styling</a></li><li><a href=\"/en-US/docs/Learn/Forms/UI_pseudo-classes\">UI pseudo-classes</a></li><li><a href=\"/en-US/docs/Learn/Forms/Form_validation\">Client-side form validation</a></li><li><a href=\"/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data\">Sending form data</a></li></ol></details></li><li class=\"toggle\"><details><summary>Advanced web form techniques</summary><ol><li><a href=\"/en-US/docs/Learn/Forms/How_to_build_custom_form_controls\">How to build custom form controls</a></li><li><a href=\"/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript\">Sending forms through JavaScript</a></li><li><a href=\"/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls\">CSS property compatibility table for form controls</a></li><li><a href=\"/en-US/docs/Learn/Forms/HTML_forms_in_legacy_browsers\">HTML forms in legacy browsers</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn/Accessibility\">Accessibility — Make the web usable by everyone</a></li><li class=\"toggle\"><details open=\"\"><summary>Accessibility guides</summary><ol><li><a href=\"/en-US/docs/Learn/Accessibility\">Accessibility</a></li><li><a href=\"/en-US/docs/Learn/Accessibility/What_is_accessibility\">What is accessibility?</a></li><li><em><a href=\"/en-US/docs/Learn/Accessibility/HTML\" aria-current=\"page\">HTML: A good basis for accessibility</a></em></li><li><a href=\"/en-US/docs/Learn/Accessibility/CSS_and_JavaScript\">CSS and JavaScript accessibility best practices</a></li><li><a href=\"/en-US/docs/Learn/Accessibility/WAI-ARIA_basics\">WAI-ARIA basics</a></li><li><a href=\"/en-US/docs/Learn/Accessibility/Multimedia\">Accessible multimedia</a></li><li><a href=\"/en-US/docs/Learn/Accessibility/Mobile\">Mobile accessibility</a></li><li><a href=\"/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting\">Assessment: Accessibility troubleshooting</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn/Performance\">Performance — Making websites fast and responsive</a></li><li class=\"toggle\"><details><summary>Performance guides</summary><ol><li><a href=\"/en-US/docs/Learn/Performance\">Web performance</a></li><li><a href=\"/en-US/docs/Learn/Performance/why_web_performance\">The \"why\" of web performance</a></li><li><a href=\"/en-US/docs/Learn/Performance/What_is_web_performance\">What is web performance?</a></li><li><a href=\"/en-US/docs/Learn/Performance/Perceived_performance\">Perceived performance</a></li><li><a href=\"/en-US/docs/Learn/Performance/Measuring_performance\">Measuring performance</a></li><li><a href=\"/en-US/docs/Learn/Performance/Multimedia\">Multimedia: Images</a></li><li><a href=\"/en-US/docs/Learn/Performance/video\">Multimedia: video</a></li><li><a href=\"/en-US/docs/Learn/Performance/JavaScript\">JavaScript performance optimization</a></li><li><a href=\"/en-US/docs/Learn/Performance/HTML\">HTML performance optimization</a></li><li><a href=\"/en-US/docs/Learn/Performance/CSS\">CSS performance optimization</a></li><li><a href=\"/en-US/docs/Learn/Performance/business_case_for_performance\">The business case for web performance</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn/MathML\">MathML — Writing mathematics with MathML</a></li><li class=\"toggle\"><details><summary>MathML first steps</summary><ol><li><a href=\"/en-US/docs/Learn/MathML/First_steps\">MathML first steps</a></li><li><a href=\"/en-US/docs/Learn/MathML/First_steps/Getting_started\">Getting started with MathML</a></li><li><a href=\"/en-US/docs/Learn/MathML/First_steps/Text_containers\">MathML Text Containers</a></li><li><a href=\"/en-US/docs/Learn/MathML/First_steps/Fractions_and_roots\">MathML fractions and roots</a></li><li><a href=\"/en-US/docs/Learn/MathML/First_steps/Scripts\">MathML scripted elements</a></li><li><a href=\"/en-US/docs/Learn/MathML/First_steps/Tables\">MathML tables</a></li><li><a href=\"/en-US/docs/Learn/MathML/First_steps/Three_famous_mathematical_formulas\">Three famous mathematical formulas</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Games\">Games — Developing games for the web</a></li><li class=\"toggle\"><details><summary>Guides and tutorials</summary><ol><li><a href=\"/en-US/docs/Games/Introduction\">Introduction to game development for the Web</a></li><li><a href=\"/en-US/docs/Games/Techniques\">Techniques for game development</a></li><li><a href=\"/en-US/docs/Games/Tutorials\">Tutorials</a></li><li><a href=\"/en-US/docs/Games/Publishing_games\">Publishing games</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn/Tools_and_testing\">Tools and testing</a></li><li class=\"toggle\"><details><summary>Client-side web development tools</summary><ol><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools\">Understanding client-side web development tools</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview\">Client-side tooling overview</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line\">Command line crash course</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management\">Package management basics</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain\">Introducing a complete toolchain</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment\">Deploying our app</a></li></ol></details></li><li class=\"toggle\"><details><summary>Introduction to client-side frameworks</summary><ol><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction\">Introduction to client-side frameworks</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features\">Framework main features</a></li></ol></details></li><li class=\"toggle\"><details><summary>React</summary><ol><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started\">Getting started with React</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning\">Beginning our React todo list</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components\">Componentizing our React app</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state\">React interactivity: Events and state</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering\">React interactivity: Editing, filtering, conditional rendering</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility\">Accessibility in React</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources\">React resources</a></li></ol></details></li><li class=\"toggle\"><details><summary>Ember</summary><ol><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started\">Getting started with Ember</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization\">Ember app structure and componentization</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state\">Ember interactivity: Events, classes and state</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer\">Ember Interactivity: Footer functionality, conditional rendering</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing\">Routing in Ember</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources\">Ember resources and troubleshooting</a></li></ol></details></li><li class=\"toggle\"><details><summary>Vue</summary><ol><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started\">Getting started with Vue</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component\">Creating our first Vue component</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists\">Rendering a list of Vue components</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models\">Adding a new todo form: Vue events, methods, and models</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling\">Styling Vue components with CSS</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties\">Using Vue computed properties</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering\">Vue conditional rendering: editing existing todos</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management\">Vue refs and lifecycle methods for focus management</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources\">Vue resources</a></li></ol></details></li><li class=\"toggle\"><details><summary>Svelte</summary><ol><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started\">Getting started with Svelte</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning\">Starting our Svelte to-do list app</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props\">Dynamic behavior in Svelte: working with variables and props</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components\">Componentizing our Svelte app</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility\">Advanced Svelte: Reactivity, lifecycle, accessibility</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores\">Working with Svelte stores</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript\">TypeScript support in Svelte</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next\">Deployment and next steps</a></li></ol></details></li><li class=\"toggle\"><details><summary>Angular</summary><ol><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started\">Getting started with Angular</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning\">Beginning our Angular todo list app</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling\">Styling our Angular app</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component\">Creating an item component</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering\">Filtering our to-do items</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building\">Building Angular applications and further resources</a></li></ol></details></li><li class=\"toggle\"><details><summary>Git and GitHub</summary><ol><li><a href=\"/en-US/docs/Learn/Tools_and_testing/GitHub\">Git and GitHub</a></li></ol></details></li><li class=\"toggle\"><details><summary>Cross browser testing</summary><ol><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing\">Cross browser testing</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction\">Introduction to cross-browser testing</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies\">Strategies for carrying out testing</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS\">Handling common HTML and CSS problems</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript\">Handling common JavaScript problems</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility\">Handling common accessibility problems</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection\">Implementing feature detection</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing\">Introduction to automated testing</a></li><li><a href=\"/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment\">Setting up your own test automation environment</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn/Server-side\">Server-side website programming</a></li><li class=\"toggle\"><details><summary>First steps</summary><ol><li><a href=\"/en-US/docs/Learn/Server-side/First_steps\">Server-side website programming first steps</a></li><li><a href=\"/en-US/docs/Learn/Server-side/First_steps/Introduction\">Introduction to the server side</a></li><li><a href=\"/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview\">Client-Server Overview</a></li><li><a href=\"/en-US/docs/Learn/Server-side/First_steps/Web_frameworks\">Server-side web frameworks</a></li><li><a href=\"/en-US/docs/Learn/Server-side/First_steps/Website_security\">Website security</a></li></ol></details></li><li class=\"toggle\"><details><summary>Django web framework (Python)</summary><ol><li><a href=\"/en-US/docs/Learn/Server-side/Django\">Django Web Framework (Python)</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/Introduction\">Django introduction</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/development_environment\">Setting up a Django development environment</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: The Local Library website</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/skeleton_website\">Django Tutorial Part 2: Creating a skeleton website</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/Models\">Django Tutorial Part 3: Using models</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/Admin_site\">Django Tutorial Part 4: Django admin site</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/Home_page\">Django Tutorial Part 5: Creating our home page</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/Generic_views\">Django Tutorial Part 6: Generic list and detail views</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/Sessions\">Django Tutorial Part 7: Sessions framework</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/Authentication\">Django Tutorial Part 8: User authentication and permissions</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/Forms\">Django Tutorial Part 9: Working with forms</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/Testing\">Django Tutorial Part 10: Testing a Django web application</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/Deployment\">Django Tutorial Part 11: Deploying Django to production</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/web_application_security\">Django web application security</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Django/django_assessment_blog\">Assessment: DIY Django mini blog</a></li></ol></details></li><li class=\"toggle\"><details><summary>Express Web Framework (Node.js/JavaScript)</summary><ol><li><a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs\">Express web framework (Node.js/JavaScript)</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction\">Express/Node introduction</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment\">Setting up a Node development environment</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express Tutorial: The Local Library website</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website\">Express Tutorial Part 2: Creating a skeleton website</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose\">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/routes\">Express Tutorial Part 4: Routes and controllers</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Part 5: Displaying library data</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/forms\">Express Tutorial Part 6: Working with forms</a></li><li><a href=\"/en-US/docs/Learn/Server-side/Express_Nodejs/deployment\">Express Tutorial Part 7: Deploying to production</a></li></ol></details></li><li class=\"section\"><a href=\"/en-US/docs/Learn/Common_questions\">Further resources</a></li><li class=\"toggle\"><details><summary>Common questions</summary><ol><li><a href=\"/en-US/docs/Learn/Common_questions\">Common questions</a></li><li><a href=\"/en-US/docs/Learn/HTML/Howto\">Use HTML to solve common problems</a></li><li><a href=\"/en-US/docs/Learn/CSS/Howto\">Use CSS to solve common problems</a></li><li><a href=\"/en-US/docs/Learn/JavaScript/Howto\">Solve common problems in your JavaScript code</a></li><li><a href=\"/en-US/docs/Learn/Common_questions/Web_mechanics\">Web mechanics</a></li><li><a href=\"/en-US/docs/Learn/Common_questions/Tools_and_setup\">Tools and setup</a></li><li><a href=\"/en-US/docs/Learn/Common_questions/Design_and_accessibility\">Design and accessibility</a></li></ol></details></li></ol>","source":{"folder":"en-us/learn/accessibility/html","github_url":"https://github.com/mdn/content/blob/main/files/en-us/learn/accessibility/html/index.md","last_commit_url":"https://github.com/mdn/content/commit/acb4e05fe7ea33a7b20fa03fdeb26a93511624e0","filename":"index.md"},"summary":"A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.","title":"HTML: A good basis for accessibility","toc":[{"text":"HTML and accessibility","id":"html_and_accessibility"},{"text":"Good semantics","id":"good_semantics"},{"text":"Accessible data tables","id":"accessible_data_tables"},{"text":"Text alternatives","id":"text_alternatives"},{"text":"More on links","id":"more_on_links"},{"text":"Test your skills!","id":"test_your_skills!"},{"text":"Summary","id":"summary"}],"pageType":"learn-module-chapter"}}</script> <script>function gtElInit() {var lib = new google.translate.TranslateService();lib.translatePage('pl', 'fr', function () {});}</script> <script src="https://translate.google.com/translate_a/element.js?cb=gtElInit&hl=en-GB&client=wt" type="text/javascript"></script> </body> </html>