CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Accessibility guide for developers - MediaWiki</title> <script>(function(){var className="client-js vector-feature-language-in-header-disabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )mediawikiwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"eb1391ff-a798-4866-9ad2-d400610ae5ce","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Accessibility_guide_for_developers","wgTitle":"Accessibility guide for developers","wgCurRevisionId":6413982,"wgRevisionId":6413982,"wgArticleId":95292,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Development guidelines","Accessibility","MediaWiki development"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Accessibility_guide_for_developers","wgRelevantArticleId":95292,"wgIsProbablyEditable":true,"wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"mediawiki","wgCiteReferencePreviewsActive":true, "wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":30000,"wgInternalRedirectTargetUrl":"/wiki/Accessibility_guide_for_developers","wgTranslatePageTranslation":"source","wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgDiscussionToolsFeaturesEnabled":{"replytool":true,"newtopictool":true,"sourcemodetoolbar":true,"topicsubscription":false,"autotopicsub":false,"visualenhancements":false,"visualenhancements_reply":false,"visualenhancements_pageframe":false},"wgDiscussionToolsFallbackEditMode":"visual","wgULSPosition":"personal","wgULSisCompactLinksEnabled":true,"wgVector2022LanguageInHeader":false,"wgULSisLanguageSelectorEmpty":false,"wgCheckUserClientHintsHeadersJsApi":["brands","architecture", "bitness","fullVersionList","mobile","model","platform","platformVersion"]};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.translate.tag.languages":"ready","ext.cite.styles":"ready","ext.discussionTools.init.styles":"ready","oojs-ui-core.styles":"ready","oojs-ui.styles.indicators":"ready","mediawiki.widgets.styles":"ready","oojs-ui-core.icons":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.translate.edit.documentation.styles":"ready","ext.translate":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.pt":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["mediawiki.action.view.redirect","ext.cite.ux-enhancements","site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP", "ext.centralNotice.startUp","ext.translate.pagetranslation.uls","ext.urlShortener.toolbar","ext.centralauth.centralautologin","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.discussionTools.init","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.compactlinks","ext.uls.interface","ext.checkUser.clientHints"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.discussionTools.init.styles%7Cext.translate%2CwikimediaBadges%7Cext.translate.edit.documentation.styles%7Cext.translate.tag.languages%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediamessages.styles%7Cmediawiki.widgets.styles%7Coojs-ui-core.icons%2Cstyles%7Coojs-ui.styles.indicators%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:site_name" content="MediaWiki"> <meta property="og:title" content="Accessibility guide for developers - MediaWiki"> <meta property="og:type" content="website"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//m.mediawiki.org/wiki/Accessibility_guide_for_developers"> <link rel="alternate" type="application/x-wiki" title="Edit" href="/w/index.php?title=Accessibility_guide_for_developers&action=edit"> <link rel="apple-touch-icon" href="/static/apple-touch/mediawiki.png"> <link rel="icon" href="/static/favicon/mediawiki.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="MediaWiki (en)"> <link rel="EditURI" type="application/rsd+xml" href="//www.mediawiki.org/w/api.php?action=rsd"> <link rel="canonical" href="https://www.mediawiki.org/wiki/Accessibility_guide_for_developers"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/"> <link rel="alternate" type="application/atom+xml" title="MediaWiki Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="ext-discussiontools-replytool-enabled ext-discussiontools-newtopictool-enabled ext-discussiontools-sourcemodetoolbar-enabled skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-Accessibility_guide_for_developers rootpage-Accessibility_guide_for_developers skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/MediaWiki" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-mw-download" class="mw-list-item"><a href="/wiki/Download"><span>Get MediaWiki</span></a></li><li id="n-mw-extensions" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Category:Extensions"><span>Get extensions</span></a></li><li id="n-blog-text" class="mw-list-item"><a href="https://techblog.wikimedia.org/"><span>Tech blog</span></a></li><li id="n-mw-contribute" class="mw-list-item"><a href="/wiki/Special:MyLanguage/How_to_contribute"><span>Contribute</span></a></li> </ul> </div> </div> <div id="p-support" class="vector-menu mw-portlet mw-portlet-support" > <div class="vector-menu-heading"> Support </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Help:Contents" title="The place to find out"><span>User help</span></a></li><li id="n-mw-faq" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:FAQ"><span>FAQ</span></a></li><li id="n-mw-manual" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Manual:Contents"><span>Technical manual</span></a></li><li id="n-mw-supportdesk" class="mw-list-item"><a href="/wiki/Project:Support_desk"><span>Support desk</span></a></li><li id="n-mw-communication" class="mw-list-item"><a href="/wiki/Special:MyLanguage/Communication"><span>Communication</span></a></li> </ul> </div> </div> <div id="p-development" class="vector-menu mw-portlet mw-portlet-development" > <div class="vector-menu-heading"> Development </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mw-developerportal" class="mw-list-item"><a href="https://developer.wikimedia.org/"><span>Developer portal</span></a></li><li id="n-svn-statistics" class="mw-list-item"><a href="/wiki/Development_statistics"><span>Code statistics</span></a></li> </ul> </div> </div> <div id="p-mediawiki.org" class="vector-menu mw-portlet mw-portlet-mediawiki_org" > <div class="vector-menu-heading"> mediawiki.org </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-portal" class="mw-list-item"><a href="/wiki/Project:Help" title="About the project, what you can do, where to find things"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes in the wiki [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-mw-translate" class="mw-list-item"><a href="/wiki/Special:LanguageStats"><span>Translate content</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Load a random page [x]" accesskey="x"><span>Random page</span></a></li><li id="n-mw-discussion" class="mw-list-item"><a href="/wiki/Project:Village_Pump"><span>Village pump</span></a></li><li id="n-Sandboxlink-portlet-label" class="mw-list-item"><a href="/wiki/Project:Sandbox"><span>Sandbox</span></a></li> </ul> </div> </div> <div id="p-lang" class="vector-menu mw-portlet mw-portlet-lang" > <div class="vector-menu-heading"> In other languages </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-add wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:NewItem?site=mediawikiwiki&page=Accessibility+guide+for+developers" title="Add interlanguage links" class="wbc-editpage">Add links</a></span></div> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/MediaWiki" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/mediawikiwiki.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="MediaWiki" src="/static/images/mobile/copyright/mediawikiwiki-wordmark.svg" style="width: 7.5em; height: 1.125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search MediaWiki [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search MediaWiki" aria-label="Search MediaWiki" autocapitalize="sentences" title="Search MediaWiki [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-uls" class="mw-list-item active user-links-collapsible-item"><a data-mw="interface" href="#" class="uls-trigger cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet"><span class="vector-icon mw-ui-icon-wikimedia-language mw-ui-icon-wikimedia-wikimedia-language"></span> <span>English</span></a> </li> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/?utm_source=donate&utm_medium=sidebar&utm_campaign=spontaneous&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Accessibility+guide+for+developers" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Accessibility+guide+for+developers" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="More options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/?utm_source=donate&utm_medium=sidebar&utm_campaign=spontaneous&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Accessibility+guide+for+developers" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Accessibility+guide+for+developers" title="You are encouraged to log in; however, it is not mandatory [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Beginning</div> </a> </li> <li id="toc-How_to_be_accessible" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#How_to_be_accessible"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>How to be accessible</span> </div> </a> <button aria-controls="toc-How_to_be_accessible-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle How to be accessible subsection</span> </button> <ul id="toc-How_to_be_accessible-sublist" class="vector-toc-list"> <li id="toc-Accessibility_measurements_in_many_forms" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Accessibility_measurements_in_many_forms"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1</span> <span>Accessibility measurements in many forms</span> </div> </a> <ul id="toc-Accessibility_measurements_in_many_forms-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Keyboard_navigation" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Keyboard_navigation"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2</span> <span>Keyboard navigation</span> </div> </a> <ul id="toc-Keyboard_navigation-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Screen_reader" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Screen_reader"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.3</span> <span>Screen reader</span> </div> </a> <ul id="toc-Screen_reader-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Development_guidelines" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#Development_guidelines"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Development guidelines</span> </div> </a> <button aria-controls="toc-Development_guidelines-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Development guidelines subsection</span> </button> <ul id="toc-Development_guidelines-sublist" class="vector-toc-list"> <li id="toc-Do_use_or_provide_always" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Do_use_or_provide_always"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span> <span>Do use or provide always</span> </div> </a> <ul id="toc-Do_use_or_provide_always-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Don't" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Don't"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.2</span> <span>Don't</span> </div> </a> <ul id="toc-Don't-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Avoid" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Avoid"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.3</span> <span>Avoid</span> </div> </a> <ul id="toc-Avoid-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Consider" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Consider"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.4</span> <span>Consider</span> </div> </a> <ul id="toc-Consider-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>See also</span> </div> </a> <ul id="toc-See_also-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-References" class="vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>References</span> </div> </a> <ul id="toc-References-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Accessibility guide for developers</span></h1> <div class="mw-indicators"> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Accessibility_guide_for_developers" title="View the content page [c]" accesskey="c"><span>Page</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:Accessibility_guide_for_developers" rel="discussion" title="Discussion about the content page [t]" accesskey="t"><span>Discussion</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Accessibility_guide_for_developers"><span>Read</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Accessibility_guide_for_developers&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Accessibility_guide_for_developers&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Accessibility_guide_for_developers"><span>Read</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Accessibility_guide_for_developers&action=edit" title="Edit the source code of this page [e]" accesskey="e"><span>Edit</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Accessibility_guide_for_developers&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Accessibility_guide_for_developers" title="A list of all wiki pages that link here [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Accessibility_guide_for_developers" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="//commons.wikimedia.org/wiki/Special:UploadWizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Accessibility_guide_for_developers&oldid=6413982" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Accessibility_guide_for_developers&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Accessibility_guide_for_developers&id=6413982&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FAccessibility_guide_for_developers"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fwww.mediawiki.org%2Fwiki%2FAccessibility_guide_for_developers"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=Special:Book&bookcmd=book_creator&referer=Accessibility+guide+for+developers"><span>Create a book</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Accessibility_guide_for_developers&action=show-download-screen"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Accessibility_guide_for_developers&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects emptyPortlet" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div id="siteSub" class="noprint">From mediawiki.org</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-pt-translate-header noprint nomobile" dir="ltr" lang="en"><a href="/w/index.php?title=Special:Translate&group=page-Accessibility+guide+for+developers&action=page&filter=&action_source=translate_page" title="Special:Translate">Translate this page</a></div><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="mw-pt-languages noprint navigation-not-searchable" lang="en" dir="ltr"><div class="mw-pt-languages-label">Languages:</div><ul class="mw-pt-languages-list"><li><a href="/wiki/Accessibility_guide_for_developers/id" class="mw-pt-progress mw-pt-progress--low" title="Panduan aksesibilitas untuk pengembang (4% translated)" lang="id" dir="ltr">Bahasa Indonesia</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/de" class="mw-pt-progress mw-pt-progress--med" title="Leitfaden zur Barrierefreiheit für Entwickler (36% translated)" lang="de" dir="ltr">Deutsch</a></li> <li><span class="mw-pt-languages-ui mw-pt-languages-selected mw-pt-progress mw-pt-progress--complete" lang="en" dir="ltr">English</span></li> <li><a href="/wiki/Accessibility_guide_for_developers/haw" class="mw-pt-progress mw-pt-progress--low" title="Accessibility guide for developers/haw (0% translated)" lang="haw" dir="ltr">Hawaiʻi</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/nl" class="mw-pt-progress mw-pt-progress--complete" title="Aandachtspunt voor ontwikkelaars: Toegankelijkheid (100% translated)" lang="nl" dir="ltr">Nederlands</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/vi" class="mw-pt-progress mw-pt-progress--low" title="Accessibility guide for developers/vi (0% translated)" lang="vi" dir="ltr">Tiếng Việt</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/tr" class="mw-pt-progress mw-pt-progress--med" title="Geliştiriciler için erişilebilirlik kılavuzu (19% translated)" lang="tr" dir="ltr">Türkçe</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/diq" class="mw-pt-progress mw-pt-progress--low" title="Accessibility guide for developers/diq (2% translated)" lang="diq" dir="ltr">Zazaki</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/es" class="mw-pt-progress mw-pt-progress--med" title="Guía de accesibilidad para desarrolladores (66% translated)" lang="es" dir="ltr">español</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/fr" class="mw-pt-progress mw-pt-progress--high" title="Guide d'accessibilité pour les développeurs (70% translated)" lang="fr" dir="ltr">français</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/gl" class="mw-pt-progress mw-pt-progress--low" title="Guía de accesibilidade para desenvolvedores (2% translated)" lang="gl" dir="ltr">galego</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/it" class="mw-pt-progress mw-pt-progress--med" title="Guida di accessibilità per sviluppatori (35% translated)" lang="it" dir="ltr">italiano</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/hu" class="mw-pt-progress mw-pt-progress--med" title="Akadálymentesítési útmutató fejlesztők számára (24% translated)" lang="hu" dir="ltr">magyar</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/pl" class="mw-pt-progress mw-pt-progress--low" title="Accessibility guide for developers/pl (2% translated)" lang="pl" dir="ltr">polski</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/pt" class="mw-pt-progress mw-pt-progress--low" title="Guia de acessibilidade para os programadores (10% translated)" lang="pt" dir="ltr">português</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/pt-br" class="mw-pt-progress mw-pt-progress--med" title="Guia de acessibilidade para desenvolvedores (20% translated)" lang="pt-BR" dir="ltr">português do Brasil</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/cs" class="mw-pt-progress mw-pt-progress--complete" title="Průvodce přístupností pro vývojáře (100% translated)" lang="cs" dir="ltr">čeština</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/ru" class="mw-pt-progress mw-pt-progress--med" title="Руководство специальных возможностей для разработчиков (20% translated)" lang="ru" dir="ltr">русский</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/uk" class="mw-pt-progress mw-pt-progress--med" title="Посібник із спеціальних можливостей для розробників (19% translated)" lang="uk" dir="ltr">українська</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/ar" class="mw-pt-progress mw-pt-progress--med" title="إرشادات تيسير الوصول التي يتعين على مطوري البرمجيات اتباعها (54% translated)" lang="ar" dir="rtl">العربية</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/fa" class="mw-pt-progress mw-pt-progress--low" title="راهنمای دسترسی برای توسعه‌دهندگان (4% translated)" lang="fa" dir="rtl">فارسی</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/arz" class="mw-pt-progress mw-pt-progress--low" title="Accessibility guide for developers/arz (1% translated)" lang="arz" dir="rtl">مصرى</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/hi" class="mw-pt-progress mw-pt-progress--med" title="विकासकों के लिए सरल उपयोग की गाइड (34% translated)" lang="hi" dir="ltr">हिन्दी</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/bn" class="mw-pt-progress mw-pt-progress--low" title="ডেভেলপারদের জন্য প্রবেশ্যতা গাইড (1% translated)" lang="bn" dir="ltr">বাংলা</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/zh" class="mw-pt-progress mw-pt-progress--med" title="开发人员的无障碍功能指南 (19% translated)" lang="zh" dir="ltr">中文</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/ja" class="mw-pt-progress mw-pt-progress--med" title="開発者向けアクセシビリティガイド (15% translated)" lang="ja" dir="ltr">日本語</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/yue" class="mw-pt-progress mw-pt-progress--low" title="編程人員專用嘅無障礙指南 (9% translated)" lang="yue" dir="ltr">粵語</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/nan" class="mw-pt-progress mw-pt-progress--low" title="Accessibility guide for developers/nan (2% translated)" lang="nan" dir="ltr">閩南語 / Bân-lâm-gú</a></li> <li><a href="/wiki/Accessibility_guide_for_developers/ko" class="mw-pt-progress mw-pt-progress--low" title="Accessibility guide for developers/ko (3% translated)" lang="ko" dir="ltr">한국어</a></li></ul></div> <div style="clear: right; margin-bottom: .5em; float: right; margin-left:2em; width: auto;"><meta property="mw:PageProp/toc"/></div> <p>Accessibility is important for our users and we can improve it if we take into account a few basic ideas and rules. Accessibility is difficult insofar as there are no fixed and universally accepted technical standards that actually work consistently and for all users. This page does not list or discuss specific accessibility problems in MediaWiki. It attempts to focus on technology choices and Dos and Don'ts to prevent accessibility problems. </p><p>In terms of development, I think this should be our rule book: </p> <ul><li>Try to enable our users (and that means all of them)</li> <li>Try to work around issues of accessibility if that is possible, but not at all costs</li> <li>We should use an approach of <a href="https://en.wikipedia.org/wiki/Progressive_enhancement" class="extiw" title="w:Progressive enhancement">Progressive enhancement</a> over that of <a href="https://en.wikipedia.org/wiki/Graceful_degradation" class="extiw" title="w:Graceful degradation">Graceful degradation</a>.</li> <li>Implement things that are technologically sound</li></ul> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="How_to_be_accessible" data-mw-thread-id="h-How_to_be_accessible"><span data-mw-comment-start="" id="h-How_to_be_accessible"></span>How to be accessible<span data-mw-comment-end="h-How_to_be_accessible"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Accessibility_guide_for_developers&action=edit&section=1" title="Edit section: How to be accessible"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Some important concepts that you should keep in mind. </p> <div class="mw-heading mw-heading3"><h3 id="Accessibility_measurements_in_many_forms" data-mw-thread-id="h-Accessibility_measurements_in_many_forms-How_to_be_accessible"><span data-mw-comment-start="" id="h-Accessibility_measurements_in_many_forms-How_to_be_accessible"></span>Accessibility measurements in many forms<span data-mw-comment-end="h-Accessibility_measurements_in_many_forms-How_to_be_accessible"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Accessibility_guide_for_developers&action=edit&section=2" title="Edit section: Accessibility measurements in many forms"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Accessibility is about a variety of things, please consider the following: </p> <ul><li>Something should be understandable: that means textually, visually, logically and in complexity.</li> <li>Some users need a screen reader to interact, but just as, if not more common are: a loupe, higher contrast, a text to speech engine, custom CSS settings, or a special type of keyboard/input device.</li> <li>It needs to be reachable; responsiveness, affordability, location, language, hardware, etc.</li></ul> <p>In summary, accessibility is <i>not only</i> keyboard accessibility <i>or only</i> screen reader accessibility. We often focus on these two because they traditionally are easily overlooked. But these issues are also solvable and often provide the basis for any other sort of improvements to be possible. </p><p>Some accessibility problems tend to be problems with product design, strategic choices, target audience etc. As these areas are more difficult to capture in written down rules that apply universally to the MediaWiki ecosystem, they are outside of the scope of this document. </p> <div class="mw-heading mw-heading3"><h3 id="Keyboard_navigation" data-mw-thread-id="h-Keyboard_navigation-How_to_be_accessible"><span data-mw-comment-start="" id="h-Keyboard_navigation-How_to_be_accessible"></span>Keyboard navigation<span data-mw-comment-end="h-Keyboard_navigation-How_to_be_accessible"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Accessibility_guide_for_developers&action=edit&section=3" title="Edit section: Keyboard navigation"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>We call this keyboard navigation, but what it really means is: Don't rely on a pointer device (touch, mouse). </p> <ul><li>Keyboard navigation is about manipulating the focus and executing actions with your keyboard.</li> <li>Elements that are tab-able are focus-able, but not everything that is focus-able is tab-able.</li> <li>Everything you are able to do with a mouse should be possible to do with a keyboard.</li> <li>Keyboard navigation information can be used by screen readers to enhance their experience.</li></ul> <div class="mw-heading mw-heading3"><h3 id="Screen_reader" data-mw-thread-id="h-Screen_reader-How_to_be_accessible"><span data-mw-comment-start="" id="h-Screen_reader-How_to_be_accessible"></span>Screen reader<span data-mw-comment-end="h-Screen_reader-How_to_be_accessible"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Accessibility_guide_for_developers&action=edit&section=4" title="Edit section: Screen reader"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>A screen reader uses a different 'cursor', which usually walks the logical structure of the <a href="https://en.wikipedia.org/wiki/Document_Object_Model" class="extiw" title="w:Document Object Model">DOM</a>.</li> <li>The focus tends to follow the screen reader cursor and vice versa, but they are not the same <ul><li>You can keep track of the focused element by setting a live expression in Chrome <a rel="nofollow" class="external autonumber" href="https://developer.chrome.com/docs/devtools/accessibility/focus/">[1]</a></li></ul></li> <li>A screen reader uses the 'accessibility' APIs, which you could consider to be an input/output 'view' on top of the normal DOM.</li> <li><a href="https://en.wikipedia.org/wiki/WAI-ARIA" class="extiw" title="w:WAI-ARIA">ARIA</a> are DOM annotations that enhance or manipulate how the DOM logic is transformed into the accessibility APIs. It is not an alternative to writing proper HTML and JavaScript. Keyboard navigation is simply achieved by logical DOM orderǃ For more on ARIA see <a rel="nofollow" class="external text" href="http://www.w3.org/TR/aria-in-html/">w3.org explanation</a> and <a href="https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ" class="extiw" title="devmo:Web/Accessibility/ARIA/Web applications and ARIA FAQ">MDN explanation</a>.</li> <li>A screen reader is not limited to navigating by the logical DOM structure, it's just the default. <ul><li>A screen reader can read what is under the mouse pointer for instance</li> <li>VoiceOver for iOS uses a screen cursor that is manipulated by thumb positioning and gestures on the touch screen.</li> <li>Most screen reader software has additional navigation modes, where you can list and navigate by landmark areas, an auto-generated Table of Contents, or even user defined 'bookmarks' inside a page.</li></ul></li> <li>From the above point of multiple navigation methods, follows: There is a beginning and an end, but also left, right, top and bottom. You should not rely on these in your communication too much, but you don't need to fully deny their existence either. Do not confuse the visual capabilities of the user with spatial awareness that the screen reader might be able to convey to the user. Example: <ol><li>a long sentence [image] the above image shows... <span style="color:#14866d" dir="ltr">Still acceptable</span></li> <li>a long sentence [image][image] the left image shows, the right image shows... <span style="color:#14866d" dir="ltr">Still acceptable</span></li> <li>a long sentence [image][image] the right image shows, the left image shows... <span style="color:#d73333" dir="ltr">Not acceptable</span></li> <li>a long sentence [image][image] the above image shows... <span style="color:#d73333" dir="ltr">Not acceptable</span></li> <li>a long sentence [image][image][image] the left image shows, the right image shows... <span style="color:#d73333" dir="ltr">Not acceptable</span></li> <li>a long sentence [image][image] something totally different. the left image shows, the right image shows... <span style="color:#d73333" dir="ltr">Definitely not acceptable</span></li></ol></li></ul> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="Development_guidelines" data-mw-thread-id="h-Development_guidelines"><span data-mw-comment-start="" id="h-Development_guidelines"></span>Development guidelines<span data-mw-comment-end="h-Development_guidelines"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Accessibility_guide_for_developers&action=edit&section=5" title="Edit section: Development guidelines"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>There are several standards around accessibility and honestly, almost all of them, although sound on identifying issues, still have significant problems when it comes to technical solutions (They have a high ratio of 'ugly workarounds'). This has been cause of much controversy in the communities. As such, we should identify uncontroversial stuff that we should simply always (or never) do and why. It's much easier to reach certain goals if we separate the uncontroversial stuff from the controversial stuff. </p> <div class="mw-heading mw-heading3"><h3 id="Do_use_or_provide_always" data-mw-thread-id="h-Do_use_or_provide_always-Development_guidelines"><span data-mw-comment-start="" id="h-Do_use_or_provide_always-Development_guidelines"></span>Do use or provide always<span data-mw-comment-end="h-Do_use_or_provide_always-Development_guidelines"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Accessibility_guide_for_developers&action=edit&section=6" title="Edit section: Do use or provide always"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <dl><dt>Proper semantic HTML element</dt> <dd>Use HTML elements for their intended purpose. For example: <ul><li>Use <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">button</span><span class="p">></span></code> and not <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">div</span><span class="p">></span></code> or <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">span</span><span class="p">></span></code> or <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">a</span><span class="p">></span></code> with a click handler</li> <li>If you feel the need to bold something, consider if it is not more appropriate to use a header or a <code>strong</code> element</li></ul></dd></dl> <dl><dt>Logical heading structure</dt> <dd>All pages should always have a logical and consistent heading structure. Headings are one of the primary navigation tools used by screen reader users. <ol><li>There should be no gaps in the nesting of the heading levels. (So no H2->H4.)</li> <li>Headings should be descriptive</li> <li>Headings should be unique within their own level. (There should not be two H3s with the same content under the same H2 section)</li> <li>There should be separation between navigation and content</li></ol></dd></dl> <dl><dt><code>alt</code> attribute for images with meaningful values</dt> <dd>If an image is decorative, use an explicit empty value for the alt attribute; even better, turn it into a CSS background image.</dd> <dd>the image alt usually takes precedence over the title attribute of images and even over the title attribute of links that wrap an image.</dd></dl> <dl><dt><code>title</code> attribute for links</dt> <dd>These are usually shown as the tooltips</dd> <dd>Only use titles if they differ from the link text.</dd> <dd>Most link titles are not actually spoken by screen readers, unless the reader has been explicitly configured this way.</dd></dl> <dl><dt><code>lang</code>, <code>dir</code> and <code>hreflang</code> attributes</dt> <dd>Using <code>lang</code> and <code>hreflang</code> enables selecting a proper voice in screen readers, picks the right spelling correction in browsers etc.</dd></dl> <dl><dt>Sufficient contrast</dt> <dd><a rel="nofollow" class="external text" href="https://webaim.org/resources/contrastchecker/">Always check your colors for sufficient contrast</a>. For text, a higher contrast is needed for smaller text (due to anti-aliasing).</dd></dl> <dl><dt>Focus for keyboard navigation</dt> <dd>Do <a rel="nofollow" class="external text" href="http://tjvantoll.com/2013/01/28/stop-messing-with-the-browsers-default-focus-outline/"><b>not</b></a> <a rel="nofollow" class="external text" href="https://webaim.org/blog/plague-of-outline-0/">remove outline</a> from focusable elements unless you define your own outline for the <code>:focus</code> state. <ul><li>Don't use <code>outline: 0</code> otherwise.</li> <li>If you define any pseudo class, like <code>:hover</code> or <code>:active</code>, please also define a <code>:focus</code> style.</li></ul></dd></dl> <dl><dt>Keyboard navigation</dt> <dd>Interactive elements of a page should be navigable by keyboard. Please make sure tab key navigation is enabled in your browser and allows you to control each interactive element without making use of a pointing device. <ol><li>Use <code>tabIndex: 0</code> to make elements keyboard accessible, which are not keyboard accessible implicitly (Anything but <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">a</span><span class="p">></span></code>, <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">area</span><span class="p">></span></code>, <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">button</span><span class="p">></span></code>, <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">input</span><span class="p">></span></code>, <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">object</span><span class="p">></span></code>, <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">select</span><span class="p">></span></code>, <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">textarea</span><span class="p">></span></code>). <ol><li>In this case also add a keydown handler responding to Enter (keyCode 13) and space (keyCode 32).</li></ol></li> <li>Use <code>tabindex: -1</code> to remove elements from accessibility. (use this on links that are labels for the action inside an <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">li</span><span class="p">></span>...<span class="p">‎</</span><span class="nt">li</span><span class="p">></span></code> for instance)</li> <li>Elements that are implicitly keyboard accessible will forward enter/space keydown to the click handler</li></ol></dd></dl> <dl><dt>Dialogs etc.</dt></dl> <p>When not taking good care of accessibility, dialogs are some of the most inaccessible elements for screen reader and keyboard users. <em>Spend some time on this.</em> </p> <ul><li>The element that opens the dialog should have <code>aria-haspopup</code></li> <li>The dialog itself should have <code>role=[dialog | alertdialog | tooltip]</code></li> <li>The dialog should be inserted in DOM order,<sup id="cite_ref-1" class="reference"><a href="#cite_note-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> or aria owns/controls needs to specify this relation between opening element and dialog</li> <li>When opening the dialog, remember last focused element and shift focus to the first <del>focusable</del> tabbable element inside the dialog</li> <li>When the dialog is modal, make it impossible to interact with the rest of the page <ul><li>Capture clicks outside the dialog and ignore them or let them dismiss the dialog</li> <li>Make sure you cannot tab to links or input elements outside of dialog</li> <li>Make elements outside of the dialog unreachable for screen reader, by using aria-hidden</li></ul></li> <li>Make sure there is a close mode (Esc key and a focusable close button with a descriptive title)</li> <li>Closing should return the (keyboard) focus to the original focus point that you stored when you opened the dialog. For screen readers to return to the same point, be sure to specify the right <a rel="nofollow" class="external text" href="http://www.w3.org/WAI/PF/aria/states_and_properties#aria-owns">owner</a> of the dialog, if you have not inserted the dialog in DOM order.</li> <li>Read up: <a rel="nofollow" class="external text" href="http://www.w3.org/TR/wai-aria-practices/#modal_dialog">Aria modals</a>, <a rel="nofollow" class="external text" href="http://www.w3.org/TR/wai-aria-practices/#dialog_modal">Aria modal dialog</a>, <a rel="nofollow" class="external text" href="http://www.w3.org/TR/wai-aria-practices/#dialog_nonmodal">ARIA nonmodal dialog</a>, <a rel="nofollow" class="external text" href="http://www.w3.org/TR/wai-aria-practices/#dialog_tooltip">ARIA tooltips</a>.</li></ul> <dl><dt><a rel="nofollow" class="external text" href="http://www.w3.org/TR/WCAG21">WCAG 2.1 guidelines</a></dt> <dd>Follow wherever possible</dd> <dd>And its accompanying documents: <ul><li><a rel="nofollow" class="external text" href="https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/">A guide to understanding and implementing Web Content Accessibility Guidelines 2.0</a> <ul><li><a rel="nofollow" class="external text" href="https://www.w3.org/WAI/WCAG21/Understanding/">WCAG 2.1 supplement</a></li></ul></li> <li><a rel="nofollow" class="external text" href="https://www.w3.org/WAI/GL/WCAG20-TECHS/">Techniques and Failures for Web Content Accessibility Guidelines 2.0</a> <ul><li><a rel="nofollow" class="external text" href="https://www.w3.org/WAI/WCAG21/Techniques/">WCAG 2.1 supplement</a></li></ul></li></ul></dd></dl> <div class="mw-heading mw-heading3"><h3 id="Don't" data-mw-thread-id="h-Don't-Development_guidelines"><span id="Don.27t"></span><span data-mw-comment-start="" id="h-Don't-Development_guidelines"></span>Don't<span data-mw-comment-end="h-Don't-Development_guidelines"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Accessibility_guide_for_developers&action=edit&section=7" title="Edit section: Don't"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>There is common advice to use <code>left: -1000px</code> to push something (often the labels of icon buttons) out of the viewport for visual users and still have it in the accessibility DOM. <code>text-indent: -9999px</code> is variant of this. This is BAD advice. <ul><li>This breaks our RTL rendering in several browsers. Specifically in rtl mode it creates a large canvas left of the viewport and scrollbars, much as +1000px would create in ltr mode. (If needed, <code>top: -1000px</code> is preferred over <code>left: -1000px</code> to avoid this).</li> <li>VoiceOver on mobile is unable to use this text as a fallback, since it is a 'positional' screen reader. You cannot move your finger over this text and thus the text will not be read either. (aria-label is often the better choice).</li> <li>Lastly, this enlarges the render surface needed to calculate the final webpage and this can impact performance <a rel="nofollow" class="external autonumber" href="http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/">[2]</a> on mobile devices.</li> <li>Insightful overview of 'hide text offscreen' tricks are given by <a rel="nofollow" class="external text" href="http://snook.ca/archives/html_and_css/hiding-content-for-accessibility">Jonathan Snook</a>.</li></ul></li> <li>Things should not be repeated often. If you have a 100 links on a page that can open a dialog, then don't add 100 labels to those 100 links telling the user that it can be used to open a dialog. Telling a user how to use/what to do with the interface is a good thing, doing it consistently is simply annoying. Find a different way to explain it once (an <code>aria-live=polite</code> might be an idea in this case ?).</li> <li><code><a href="#">Hide</a></code> with an onclick handler. VO reads such JS as "internal link Hide". Use a proper button, or <code><a role="button" tabindex="0">Hide</a></code>, with 'Space' and 'Enter' key handlers in the onclick. But no href attribute.</li> <li>Do not nest interactive functionality inside another interactive element (links or buttons inside links). This confuses screen readers.</li></ul> <div class="mw-heading mw-heading3"><h3 id="Avoid" data-mw-thread-id="h-Avoid-Development_guidelines"><span data-mw-comment-start="" id="h-Avoid-Development_guidelines"></span>Avoid<span data-mw-comment-end="h-Avoid-Development_guidelines"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Accessibility_guide_for_developers&action=edit&section=8" title="Edit section: Avoid"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <dl><dt>Unicode symbols</dt> <dd>Most assistive technologies are not good with symbols. Therefore, try to avoid characters such as ↑, →‎ or more complex characters, because many screen reader won't understand them. If they are required, try to wrap with a span element with the title attribute, so that the title attribute can communicate the implicit meaning within the context to the reader.</dd> <dt>Small fonts</dt> <dd>Legibility is preferred. If you make something so small that it is hard to read, do you even need it to begin with? Also avoid small fonts with low or mediocre contrast values (even if they fall inside the WCAG guidelines, small sizes require more explicit contrast then large sizes, especially with anti aliasing enabled).</dd> <dt>Unusually large fonts</dt> <dd>If you make text much larger than normal, it can become similarly hard to read (unless it's very short). This applies mostly to body text, or anything that takes up more than a couple lines. But the larger the text is, the more lines it will take up.</dd> <dt>tabIndex > 0</dt> <dd>DOM order is preferred wherever possible. DOM order provides context for the actions.</dd> <dt>Workaround</dt> <dd>Traditionally, accomplishing 'full' accessibility has required a lot of workarounds for html itself, the browsers and even specific screenreader software. However these workarounds often come with side effects, make use of bugs or unspecified behavior and inevitably create technical debt.</dd> <dd>MediaWiki, because of the users it seeks to serve, the amount of code, it's (lack) of funding, etc tends to prefer future proof code over code that easily breaks. As such it generally avoids workarounds even if that might sometimes limit the accessibility we can deliver. Decisions on this are often influenced by the relative audience of the feature in MediaWiki. If something is ubiquitous for all users a workaround is more warrented than if the feature affected is only used by a tiny part of the audience (for instance, reading a page vs modifying the configuration of the installation).</dd></dl> <div class="mw-heading mw-heading3"><h3 id="Consider" data-mw-thread-id="h-Consider-Development_guidelines"><span data-mw-comment-start="" id="h-Consider-Development_guidelines"></span>Consider<span data-mw-comment-end="h-Consider-Development_guidelines"></span></h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Accessibility_guide_for_developers&action=edit&section=9" title="Edit section: Consider"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li>ARIA Roles <ul><li>If a div or span behaves like an actual button use <code>role="button"</code>. also <code>role="dialog"</code> and <code>role="alert"</code></li> <li>Be careful with roles. For instance, don't add <code>role="button"</code> to a <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">th</span><span class="p">></span></code> element, since the <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">th</span><span class="p">></span></code> element has an implicit <code>role="columnheader"</code>, which will be overwritten. Instead use nested elements. Similarly for <code class="mw-highlight" style="white-space:nowrap"><span class="p">‎<</span><span class="nt">li</span><span class="p">></span></code> which has an implicit <code>role="listitem"</code></li> <li>If a button creates a popupdialog, use <code>aria-haspopup</code>.</li> <li>Use <code>aria-labelled-by</code> for contexts where this is not fully logical by itself (so everywhere except for labels in forms and headers in tables).</li></ul></li> <li>Avoid tables for layout purposes and test on smaller screen widths.</li> <li>hide stuff: <a rel="nofollow" class="external free" href="https://www.tpgi.com/html5-accessibility-chops-hidden-and-aria-hidden/">https://www.tpgi.com/html5-accessibility-chops-hidden-and-aria-hidden/</a></li> <li><a rel="nofollow" class="external text" href="https://rpress.io/articles/accessibility-skip-links-2021">skip/jump to links</a></li></ul> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="See_also" data-mw-thread-id="h-See_also"><span data-mw-comment-start="" id="h-See_also"></span>See also<span data-mw-comment-end="h-See_also"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Accessibility_guide_for_developers&action=edit&section=10" title="Edit section: See also"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a class="external text" href="https://design.wikimedia.org/style-guide/design-principles_accessibility.html">Wikimedia Design Style Guide: Accessibility principles</a></li> <li><a href="https://phabricator.wikimedia.org/maniphest/query/8NmpeEbYMSWm/#R" class="extiw" title="phab:maniphest/query/8NmpeEbYMSWm/">Open bugs and feature requests related to the accessibility</a> in MediaWiki and other Wikimedia software</li> <li><a rel="nofollow" class="external text" href="https://www.w3.org/WAI/tips/">W3C Web Accessibility Initiative: Tips for Getting Started</a></li> <li><a rel="nofollow" class="external text" href="https://www.w3.org/WAI/ER/tools/">W3C Web Accessibility Initiative: Web Accessibility Evaluation Tools List</a></li> <li><a rel="nofollow" class="external text" href="https://developer.mozilla.org/docs/Tools/Accessibility_inspector">Firefox Developer Tools: Accessibility Inspector</a></li> <li><a rel="nofollow" class="external text" href="https://developer.chrome.com/docs/devtools/accessibility/reference/">Chrome Developer Tools: Accessibility features</a></li> <li><a href="/wiki/Accessibility_and_usability_cleanup" title="Accessibility and usability cleanup">Accessibility and usability cleanup</a></li> <li>Blogposts <ul><li><a rel="nofollow" class="external text" href="https://thombergs.wordpress.com/2013/08/04/accessible-web-forms/">Steps Towards an Accessible Web Form</a></li> <li><a rel="nofollow" class="external text" href="https://www.karlgroves.com/2013/05/20/understanding-wcag-level/">Understanding WCAG Level</a></li></ul></li> <li>Software <ul><li><a rel="nofollow" class="external text" href="https://wave.webaim.org/">WAVE</a>, a Web accessibility evaluation tool</li> <li><a rel="nofollow" class="external text" href="https://github.com/werdnum/AccessibilitySimulation/">Accessibility simulation</a> on MediaWiki. Experience a page as a color blind person would experience it.</li> <li><a rel="nofollow" class="external free" href="https://www.deque.com/axe/">https://www.deque.com/axe/</a> browser extension for accessibility auditing a page</li> <li><a rel="nofollow" class="external free" href="https://www.powermapper.com/products/sortsite/checks/accessibility-checks/">https://www.powermapper.com/products/sortsite/checks/accessibility-checks/</a> webapp for accessibility auditing. See also <a rel="nofollow" class="external free" href="https://www.powermapper.com/tests/">https://www.powermapper.com/tests/</a></li> <li><a rel="nofollow" class="external text" href="http://www.inclusivedesigntoolkit.com/betterdesign2/simsoftware/simsoftware.html">University of Cambridge - Impairment simulator software</a> (Microsoft Windows only)</li></ul></li> <li>Guides by 3rd parties <ul><li><a rel="nofollow" class="external text" href="https://ukhomeoffice.github.io/accessibility-posters/">Designing accessible services</a> by UK Home Office</li> <li><a rel="nofollow" class="external text" href="https://www.microsoft.com/design/inclusive/">Inclusive Design</a> by Microsoft</li></ul></li></ul> <div class="mw-heading mw-heading2 ext-discussiontools-init-section"><h2 id="References" data-mw-thread-id="h-References"><span data-mw-comment-start="" id="h-References"></span>References<span data-mw-comment-end="h-References"></span></h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=Accessibility_guide_for_developers&action=edit&section=11" title="Edit section: References"><span>edit</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-references-wrap"><ol class="references"> <li id="cite_note-1"><span class="mw-cite-backlink"><a href="#cite_ref-1">↑</a></span> <span class="reference-text">See <a rel="nofollow" class="external text" href="http://www.w3.org/TR/WCAG20-TECHS/C27.html">DOM order at w3.org</a> and <a rel="nofollow" class="external text" href="https://www.w3schools.com/jsref/prop_style_order.asp">Style order Property at w3schools.org</a></span> </li> </ol></div> <div class="navbox-styles nomobile"><style data-mw-deduplicate="TemplateStyles:r6230902">.mw-parser-output .navbox{border:1px solid #aaa;box-sizing:border-box;width:100%;margin:auto;clear:both;font-size:88%;text-align:center;padding:1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox th,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{text-align:center;padding-left:1em;padding-right:1em}.mw-parser-output th.navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background:#fdfdfd}.mw-parser-output .navbox-list{border-color:#fdfdfd}.mw-parser-output .navbox th,.mw-parser-output .navbox-title{background:#eaeeff}.mw-parser-output .navbox-abovebelow,.mw-parser-output th.navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background:#ddddff}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background:#e6e6ff}.mw-parser-output .navbox-even{background:#f7f7f7}.mw-parser-output .navbox-odd{background:transparent}.mw-parser-output th.navbox-title1{border-left:2px solid #fdfdfd;width:100%}.mw-parser-output td.navbox-list1{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .hlist dd,.mw-parser-output .navbox .hlist dt,.mw-parser-output .navbox .hlist li{white-space:nowrap}.mw-parser-output .navbox .hlist dd dl,.mw-parser-output .navbox .hlist dt dl,.mw-parser-output .navbox .hlist li ol,.mw-parser-output .navbox .hlist li ul{white-space:normal}.mw-parser-output ol+.navbox-styles+.navbox,.mw-parser-output ul+.navbox-styles+.navbox{margin-top:0.5em}</style></div><div role="navigation" class="navbox" aria-labelledby="Development_guidelines" style="border: 1px solid #aaa; padding: 3px;;padding:3px"><table class="nowraplinks hlist navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><style data-mw-deduplicate="TemplateStyles:r6387430">.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li,.mw-parser-output .hlist .mw-empty-elt{display:none}.mw-parser-output .hlist dt:after{content:": "}.mw-parser-output .hlist dd:after,.mw-parser-output .hlist li:after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child:after,.mw-parser-output .hlist dt:last-child:after,.mw-parser-output .hlist li:last-child:after{content:none}.mw-parser-output .hlist dd dd:first-child:before,.mw-parser-output .hlist dd dt:first-child:before,.mw-parser-output .hlist dd li:first-child:before,.mw-parser-output .hlist dt dd:first-child:before,.mw-parser-output .hlist dt dt:first-child:before,.mw-parser-output .hlist dt li:first-child:before,.mw-parser-output .hlist li dd:first-child:before,.mw-parser-output .hlist li dt:first-child:before,.mw-parser-output .hlist li li:first-child:before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child:after,.mw-parser-output .hlist dd dt:last-child:after,.mw-parser-output .hlist dd li:last-child:after,.mw-parser-output .hlist dt dd:last-child:after,.mw-parser-output .hlist dt dt:last-child:after,.mw-parser-output .hlist dt li:last-child:after,.mw-parser-output .hlist li dd:last-child:after,.mw-parser-output .hlist li dt:last-child:after,.mw-parser-output .hlist li li:last-child:after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li:before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child:before,.mw-parser-output .hlist dt ol>li:first-child:before,.mw-parser-output .hlist li ol>li:first-child:before{content:" ("counter(listitem)"\a0 "}</style><style data-mw-deduplicate="TemplateStyles:r4692751">.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar ul{display:inline;white-space:nowrap}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em;width:6em}</style><div class="plainlinks hlist navbar mini"><ul><li class="nv-view"><a href="/wiki/Template:Development_guidelines_navigation" title="Template:Development guidelines navigation"><abbr title="View this template" style=";;background:none transparent;border:none;box-shadow:none; padding:0;">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:Development_guidelines_navigation" title="Template talk:Development guidelines navigation"><abbr title="Discuss this template" style=";;background:none transparent;border:none;box-shadow:none; padding:0;">t</abbr></a></li><li class="nv-edit"><a class="external text" href="https://www.mediawiki.org/w/index.php?title=Template:Development_guidelines_navigation&action=edit"><abbr title="Edit this template" style=";;background:none transparent;border:none;box-shadow:none; padding:0;">e</abbr></a></li></ul></div><div id="Development_guidelines" style="font-size:114%;margin:0 4em"><a href="/wiki/Special:MyLanguage/Development_guidelines" title="Special:MyLanguage/Development guidelines"><span style="font-weight: bold;">Development guidelines</span></a><span style="display:none"><a href="/wiki/Development_guidelines" title="Development guidelines"> </a></span></div></th></tr><tr><th scope="row" class="navbox-group" style="width:1%">Policies</th><td class="navbox-list1 navbox-list navbox-odd" style="width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><a href="/wiki/Special:MyLanguage/Development_policy" title="Special:MyLanguage/Development policy">Development policy</a><span style="display:none"><a href="/wiki/Development_policy" title="Development policy"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Wikimedia_Engineering_Architecture_Principles" title="Special:MyLanguage/Wikimedia Engineering Architecture Principles">Architecture principles</a><span style="display:none"><a href="/wiki/Wikimedia_Engineering_Architecture_Principles" title="Wikimedia Engineering Architecture Principles"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Wikimedia_services_policy" title="Special:MyLanguage/Wikimedia services policy">Services policy</a><span style="display:none"><a href="/wiki/Wikimedia_services_policy" title="Wikimedia services policy"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Support_policy_for_PHP" title="Special:MyLanguage/Support policy for PHP">Support policy for PHP</a><span style="display:none"><a href="/wiki/Support_policy_for_PHP" title="Support policy for PHP"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Gerrit/Privilege_policy" title="Special:MyLanguage/Gerrit/Privilege policy">Gerrit/Privilege policy</a><span style="display:none"><a href="/wiki/Gerrit/Privilege_policy" title="Gerrit/Privilege policy"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Stable_interface_policy" title="Special:MyLanguage/Stable interface policy">Stable interface policy</a><span style="display:none"><a href="/wiki/Stable_interface_policy" title="Stable interface policy"> </a></span> <ul><li><a href="/wiki/Special:MyLanguage/Stable_interface_policy/Frontend" title="Special:MyLanguage/Stable interface policy/Frontend">Frontend</a><span style="display:none"><a href="/wiki/Stable_interface_policy/Frontend" title="Stable interface policy/Frontend"> </a></span></li></ul></li> <li><a href="/wiki/Special:MyLanguage/MediaWiki_database_policy" title="Special:MyLanguage/MediaWiki database policy">MediaWiki database policy</a><span style="display:none"><a href="/wiki/MediaWiki_database_policy" title="MediaWiki database policy"> </a></span></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">General guidelines</th><td class="navbox-list1 navbox-list navbox-even" style="width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><a href="/wiki/Special:MyLanguage/Security_for_developers" title="Special:MyLanguage/Security for developers">Security for developers</a><span style="display:none"><a href="/wiki/Security_for_developers" title="Security for developers"> </a></span></li> <li><a href="https://wikitech.wikimedia.org/wiki/Performance/Guides/Backend_performance_practices" class="extiw" title="wikitech:Performance/Guides/Backend performance practices">Performance guidelines</a></li> <li><a href="/wiki/Special:MyLanguage/Gerrit/Commit_message_guidelines" title="Special:MyLanguage/Gerrit/Commit message guidelines">Commit message guidelines</a><span style="display:none"><a href="/wiki/Gerrit/Commit_message_guidelines" title="Gerrit/Commit message guidelines"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Security_checklist_for_developers" title="Special:MyLanguage/Security checklist for developers">Security checklist for developers</a><span style="display:none"><a href="/wiki/Security_checklist_for_developers" title="Security checklist for developers"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Localisation" title="Special:MyLanguage/Localisation">Localisation</a><span style="display:none"><a href="/wiki/Localisation" title="Localisation"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Design/Living_style_guide" title="Special:MyLanguage/Design/Living style guide">Design style guide</a><span style="display:none"><a href="/wiki/Design/Living_style_guide" title="Design/Living style guide"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Documentation/Style_guide" title="Special:MyLanguage/Documentation/Style guide">Documentation/Style guide</a><span style="display:none"><a href="/wiki/Documentation/Style_guide" title="Documentation/Style guide"> </a></span></li> <li><b><a href="/wiki/Special:MyLanguage/Accessibility_guide_for_developers" title="Special:MyLanguage/Accessibility guide for developers">Accessibility guide for developers</a></b><span style="display:none"><a class="mw-selflink selflink"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Inclusive_language" title="Special:MyLanguage/Inclusive language">Inclusive language</a><span style="display:none"><a href="/wiki/Inclusive_language" title="Inclusive language"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Guidelines_for_a_healthy_code_review_culture" title="Special:MyLanguage/Guidelines for a healthy code review culture">Guidelines for a healthy code review culture</a><span style="display:none"><a href="/wiki/Guidelines_for_a_healthy_code_review_culture" title="Guidelines for a healthy code review culture"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Collaborative_programming" title="Special:MyLanguage/Collaborative programming">Collaborative programming</a><span style="display:none"><a href="/wiki/Collaborative_programming" title="Collaborative programming"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Best_practices_for_extensions" title="Special:MyLanguage/Best practices for extensions">Best practices for extensions</a><span style="display:none"><a href="/wiki/Best_practices_for_extensions" title="Best practices for extensions"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Pre-commit_checklist" title="Special:MyLanguage/Manual:Pre-commit checklist">Pre-commit checklist</a><span style="display:none"><a href="/wiki/Manual:Pre-commit_checklist" title="Manual:Pre-commit checklist"> </a></span></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Code conventions</th><td class="navbox-list1 navbox-list navbox-odd" style="width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions#Code_structure" title="Special:MyLanguage/Manual:Coding conventions">All languages</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions#Code_structure" title="Manual:Coding conventions"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/PHP" title="Special:MyLanguage/Manual:Coding conventions/PHP">PHP</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/PHP" title="Manual:Coding conventions/PHP"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:PHP_unit_testing/Writing_unit_tests#Test_conventions" title="Special:MyLanguage/Manual:PHP unit testing/Writing unit tests">PHPUnit</a><span style="display:none"><a href="/wiki/Manual:PHP_unit_testing/Writing_unit_tests#Test_conventions" title="Manual:PHP unit testing/Writing unit tests"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/JavaScript" title="Special:MyLanguage/Manual:Coding conventions/JavaScript">JavaScript</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/JavaScript" title="Manual:Coding conventions/JavaScript"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/CSS" title="Special:MyLanguage/Manual:Coding conventions/CSS">CSS</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/CSS" title="Manual:Coding conventions/CSS"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/Selenium" title="Special:MyLanguage/Manual:Coding conventions/Selenium">Selenium</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/Selenium" title="Manual:Coding conventions/Selenium"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/Lua" title="Special:MyLanguage/Manual:Coding conventions/Lua">Lua</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/Lua" title="Manual:Coding conventions/Lua"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/Python" title="Special:MyLanguage/Manual:Coding conventions/Python">Python</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/Python" title="Manual:Coding conventions/Python"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/Java" title="Special:MyLanguage/Manual:Coding conventions/Java">Java</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/Java" title="Manual:Coding conventions/Java"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/SVG" title="Special:MyLanguage/Manual:Coding conventions/SVG">SVG</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/SVG" title="Manual:Coding conventions/SVG"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/Vue" title="Special:MyLanguage/Manual:Coding conventions/Vue">Vue</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/Vue" title="Manual:Coding conventions/Vue"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/Database" title="Special:MyLanguage/Manual:Coding conventions/Database">Database schemas</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/Database" title="Manual:Coding conventions/Database"> </a></span></li> <li><a href="/wiki/Special:MyLanguage/Product_Analytics/Style_guide" title="Special:MyLanguage/Product Analytics/Style guide">Analytics (Python, R, SQL)</a><span style="display:none"><a href="/wiki/Product_Analytics/Style_guide" title="Product Analytics/Style guide"> </a></span></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">API client code</th><td class="navbox-list1 navbox-list navbox-even" style="width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><a href="/wiki/Special:MyLanguage/API:Client_code/Gold_standard" title="Special:MyLanguage/API:Client code/Gold standard">Standards for API client libraries</a><span style="display:none"><a href="/wiki/API:Client_code/Gold_standard" title="API:Client code/Gold standard"> </a></span></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Drafts</th><td class="navbox-list1 navbox-list navbox-odd" style="width:100%;padding:0px"><div style="padding:0em 0.25em"> <ul><li><i><a href="/wiki/Special:MyLanguage/Manual:Coding_conventions/Documentation" title="Special:MyLanguage/Manual:Coding conventions/Documentation">Code documentation</a><span style="display:none"><a href="/wiki/Manual:Coding_conventions/Documentation" title="Manual:Coding conventions/Documentation"> </a></span></i></li></ul> </div></td></tr></tbody></table></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://www.mediawiki.org/w/index.php?title=Accessibility_guide_for_developers&oldid=6413982">https://www.mediawiki.org/w/index.php?title=Accessibility_guide_for_developers&oldid=6413982</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Special:Categories" title="Special:Categories">Categories</a>: <ul><li><a href="/wiki/Category:Development_guidelines" title="Category:Development guidelines">Development guidelines</a></li><li><a href="/wiki/Category:Accessibility" title="Category:Accessibility">Accessibility</a></li><li><a href="/wiki/Category:MediaWiki_development" title="Category:MediaWiki development">MediaWiki development</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 14 March 2024, at 21:57.</li> <li id="footer-info-copyright">Text is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en">Creative Commons Attribution-ShareAlike License</a>; additional terms may apply. Text in <a class="external text" href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents">the Help: namespace</a> is available under the <a rel="nofollow" class="external text" href="https://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC0 License</a>. By using this site, you agree to the <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use">Terms of Use</a> and <a class="external text" href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy Policy</a>.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Project:About">About mediawiki.org</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Project:General_disclaimer">Disclaimers</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/www.mediawiki.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//m.mediawiki.org/w/index.php?title=Accessibility_guide_for_developers&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-f69cdc8f6-rgbsb","wgBackendResponseTime":158,"wgDiscussionToolsPageThreads":[{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-How_to_be_accessible","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Accessibility_measurements_in_many_forms-How_to_be_accessible","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Keyboard_navigation-How_to_be_accessible","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Screen_reader-How_to_be_accessible","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-Development_guidelines","replies":[{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Do_use_or_provide_always-Development_guidelines","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Don't-Development_guidelines","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Avoid-Development_guidelines","replies":[]},{"headingLevel":3,"name":"h-","type":"heading","level":0,"id":"h-Consider-Development_guidelines","replies":[]}]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-See_also","replies":[]},{"headingLevel":2,"name":"h-","type":"heading","level":0,"id":"h-References","replies":[]}],"wgPageParseReport":{"discussiontools":{"limitreport-timeusage":"0.024"},"limitreport":{"cputime":"0.433","walltime":"0.617","ppvisitednodes":{"value":3878,"limit":1000000},"postexpandincludesize":{"value":50843,"limit":2097152},"templateargumentsize":{"value":10216,"limit":2097152},"expansiondepth":{"value":16,"limit":100},"expensivefunctioncount":{"value":39,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":11911,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 322.255 1 -total"," 82.86% 267.016 1 Template:Conventions_navigation"," 80.76% 260.237 1 Template:Navbox"," 57.93% 186.691 36 Template:Ll"," 26.66% 85.925 42 Template:Pagelang"," 23.29% 75.060 72 Template:Translatable"," 9.02% 29.058 13 Template:TNTN"," 8.78% 28.294 8 Template:Dir"," 6.84% 22.038 2 Template:Green"," 2.64% 8.514 4 Template:Red"]},"scribunto":{"limitreport-timeusage":{"value":"0.127","limit":"10.000"},"limitreport-memusage":{"value":1429240,"limit":52428800}},"cachereport":{"origin":"mw-web.eqiad.main-7c479b968-lbvqt","timestamp":"20241116133445","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>