CINXE.COM
All WCAG 2.2 Techniques | WAI | W3C
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>All WCAG 2.2 Techniques | WAI | W3C</title> <link rel="stylesheet" href="https://w3.org/WAI/assets/css/style.css"> <link rel="stylesheet" type="text/css" href="base.css"> </head> <body dir="ltr"> <a href="#main" class="button button--skip-link">Skip to content</a> <div class="minimal-header-container default-grid"> <header class="minimal-header" id="site-header"> <div class="minimal-header-name"> <a href="https://www.w3.org/WAI/WCAG22/Techniques/">WCAG 2.2 Techniques</a> </div> <div class="minimal-header-subtitle">Examples of ways to meet WCAG; not required</div> <a class="minimal-header-link" href="https://www.w3.org/WAI/WCAG22/Techniques/about">About WCAG Techniques</a> <div class="minimal-header-logo"> <a href="http://w3.org/" aria-label="W3C"> <svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 91.968 44"> <g fill-rule="evenodd" fill="none"> <path fill="#015a9c" d="M-.231-.21h92.917v44.659H-.23z"></path> <g fill-rule="nonzero" fill="#fff"> <path d="M21.752 0l7.789 26.78L37.329 0H58.444v2.662l-7.95 13.852c2.792.907 4.905 2.555 6.337 4.944 1.432 2.391 2.149 5.196 2.149 8.419 0 3.985-1.048 7.335-3.143 10.05C53.742 42.642 51.029 44 47.7 44c-2.507 0-4.691-.806-6.552-2.417-1.862-1.611-3.24-3.793-4.136-6.546l4.403-1.846c.646 1.666 1.496 2.979 2.552 3.938 1.056.96 2.3 1.438 3.733 1.438 1.504 0 2.775-.85 3.813-2.552 1.039-1.703 1.558-3.747 1.558-6.14 0-2.643-.556-4.69-1.664-6.138-1.29-1.701-3.314-2.554-6.071-2.554h-2.148v-2.606l7.52-13.147H41.63l-.516.889-11.04 37.678h-.536L21.48 16.73l-8.056 27.268h-.537L0 0h5.64l7.787 26.78 5.264-18.033L16.113 0zM87.958 0c-1.077 0-2.044.388-2.777 1.133-.777.79-1.21 1.81-1.21 2.866s.412 2.034 1.167 2.8C85.905 7.579 86.892 8 87.959 8c1.043 0 2.055-.422 2.843-1.188.755-.733 1.166-1.711 1.166-2.811a3.997 3.997 0 00-1.155-2.811A3.946 3.946 0 0087.958 0zm3.476 4.034a3.32 3.32 0 01-1.01 2.41c-.69.668-1.544 1.023-2.489 1.023a3.405 3.405 0 01-2.42-1.033c-.655-.667-1.022-1.523-1.022-2.433 0-.911.378-1.8 1.055-2.489.633-.645 1.488-.988 2.42-.988.955 0 1.81.356 2.477 1.033.645.643.99 1.51.99 2.477zm-3.366-2.378h-1.71v4.533h.855V4.256h.845l.922 1.933h.955l-1.012-2.066c.655-.134 1.033-.578 1.033-1.223 0-.822-.621-1.244-1.888-1.244zm-.155.555c.8 0 1.165.222 1.165.778 0 .533-.365.722-1.144.722h-.722v-1.5zM82.109 0l.862 5.914-3.05 6.588s-1.172-2.795-3.118-4.342c-1.64-1.303-2.708-1.586-4.378-1.198-2.145.5-4.577 3.394-5.638 6.963-1.27 4.27-1.283 6.336-1.328 8.234-.071 3.042.354 4.841.354 4.841s-1.853-3.868-1.835-9.533c.012-4.043.576-7.71 2.233-11.328 1.459-3.181 3.626-5.09 5.55-5.315 1.99-.232 3.562.85 4.777 2.02 1.276 1.23 2.565 3.918 2.565 3.918zM82.202 31.824s-1.338 2.567-2.171 3.556c-.834.99-2.326 2.732-4.167 3.603-1.842.872-2.808 1.036-4.628.849-1.82-.188-3.51-1.319-4.102-1.79-.592-.472-2.106-1.861-2.962-3.156C63.317 33.59 61.98 31 61.98 31s.745 2.596 1.212 3.698c.269.635 1.094 2.574 2.265 4.262 1.092 1.576 3.214 4.287 6.438 4.899 3.224.613 5.44-.942 5.987-1.319.549-.376 1.704-1.416 2.436-2.256.763-.877 1.486-1.995 1.886-2.666.292-.49.768-1.485.768-1.485z"></path> </g> </g> </svg> </a> <a href="http://w3.org/WAI/" aria-label="Web Accessibility Initiative"> <svg xmlns="http://www.w3.org/2000/svg" height="2em" viewBox="0 0 162.5 45.9"> <g fill="none" fill-rule="evenodd"> <path d="M0 0h162.5v45.9H0z" fill="#015a9c"></path> <path d="M1.2 24.5h160" stroke="#eed009" stroke-linecap="square" stroke-width="2"></path> <g fill="#fff" fill-rule="nonzero"> <path d="M15.741 15.5h-1.816L11.14 6.145c-.41-1.394-.65-2.334-.722-2.823-.104.749-.332 1.71-.684 2.881L7.04 15.5H5.223L1.444 1.223H3.32l2.217 8.72c.3 1.14.527 2.272.684 3.399.143-1.068.397-2.237.761-3.506l2.52-8.613h1.855l2.627 8.681c.339 1.127.6 2.272.781 3.438.105-.899.336-2.038.694-3.418l2.207-8.701h1.875zm10.127.195c-1.608 0-2.87-.486-3.784-1.46-.915-.973-1.372-2.312-1.372-4.018 0-1.719.426-3.088 1.279-4.107.853-1.019 2.005-1.528 3.457-1.528 1.348 0 2.422.435 3.223 1.304.8.869 1.2 2.046 1.2 3.53v1.064h-7.343c.033 1.218.342 2.142.928 2.774.586.631 1.416.947 2.49.947a8.46 8.46 0 001.631-.151c.514-.101 1.116-.298 1.807-.591v1.543a8.506 8.506 0 01-1.67.537c-.521.104-1.136.156-1.846.156zm-.44-9.677c-.84 0-1.503.27-1.992.81-.488.54-.778 1.292-.869 2.256h5.46c-.014-1.003-.245-1.764-.694-2.285-.45-.521-1.084-.781-1.904-.781zm12.237-1.416c1.413 0 2.503.486 3.271 1.46.769.973 1.153 2.332 1.153 4.077 0 1.77-.39 3.14-1.172 4.106-.781.967-1.865 1.45-3.252 1.45-.723 0-1.367-.13-1.934-.39a3.384 3.384 0 01-1.386-1.162h-.137a48.165 48.165 0 01-.362 1.357h-1.26V.305h1.759v3.691c0 .736-.033 1.471-.098 2.207h.098c.722-1.068 1.829-1.601 3.32-1.601zm-.293 1.455c-1.08 0-1.856.306-2.324.918-.47.612-.703 1.647-.703 3.105v.078c0 1.465.239 2.512.717 3.14.479.628 1.262.942 2.349.942.963 0 1.681-.353 2.153-1.06.472-.706.708-1.726.708-3.06 0-1.355-.237-2.37-.713-3.048-.475-.677-1.204-1.015-2.187-1.015zM59.286 15.5l-1.719-4.424h-5.664l-1.7 4.424h-1.816l5.577-14.336h1.62L61.152 15.5zM57.03 9.484L55.43 5.158l-.684-2.138c-.195.78-.4 1.494-.615 2.138l-1.621 4.326zm10.137 6.211c-1.543 0-2.744-.473-3.604-1.42-.86-.948-1.289-2.307-1.289-4.078 0-1.797.435-3.182 1.304-4.155.87-.973 2.108-1.46 3.716-1.46.52 0 1.037.054 1.548.161.51.108.932.246 1.264.415l-.537 1.465c-.905-.338-1.676-.508-2.314-.508-1.081 0-1.879.34-2.393 1.02-.514.681-.771 1.695-.771 3.043 0 1.295.257 2.287.771 2.973.514.687 1.276 1.03 2.285 1.03.944 0 1.872-.208 2.783-.624v1.562c-.742.384-1.663.576-2.763.576zm9.6 0c-1.544 0-2.745-.473-3.604-1.42-.86-.948-1.29-2.307-1.29-4.078 0-1.797.435-3.182 1.305-4.155.869-.973 2.107-1.46 3.715-1.46.521 0 1.037.054 1.548.161.511.108.933.246 1.265.415l-.537 1.465c-.905-.338-1.677-.508-2.315-.508-1.08 0-1.878.34-2.392 1.02-.515.681-.772 1.695-.772 3.043 0 1.295.257 2.287.772 2.973.514.687 1.276 1.03 2.285 1.03.944 0 1.872-.208 2.783-.624v1.562c-.742.384-1.663.576-2.764.576zm9.863 0c-1.608 0-2.87-.486-3.784-1.46-.915-.973-1.373-2.312-1.373-4.018 0-1.719.427-3.088 1.28-4.107.853-1.019 2.005-1.528 3.457-1.528 1.347 0 2.422.435 3.222 1.304.801.869 1.202 2.046 1.202 3.53v1.064H83.29c.032 1.218.342 2.142.928 2.774.586.631 1.416.947 2.49.947a8.46 8.46 0 001.63-.151c.515-.101 1.117-.298 1.807-.591v1.543a8.506 8.506 0 01-1.67.537c-.52.104-1.136.156-1.845.156zm-.44-9.677c-.84 0-1.504.27-1.992.81s-.778 1.292-.87 2.256h5.46c-.013-1.003-.244-1.764-.693-2.285-.45-.521-1.084-.781-1.905-.781zm14.14 6.523c0 1.003-.373 1.779-1.122 2.33-.749.55-1.8.824-3.154.824-1.413 0-2.536-.224-3.37-.674V13.42c1.179.573 2.315.86 3.409.86.885 0 1.53-.144 1.933-.43.404-.287.606-.671.606-1.153 0-.423-.194-.781-.581-1.074-.388-.293-1.076-.628-2.066-1.006-1.009-.39-1.719-.724-2.129-1-.41-.277-.711-.588-.903-.933-.192-.345-.288-.765-.288-1.26 0-.88.358-1.572 1.074-2.08.716-.508 1.7-.762 2.95-.762a8.17 8.17 0 013.417.723L99.511 6.7c-1.088-.456-2.068-.683-2.94-.683-.73 0-1.282.115-1.66.346-.378.231-.566.549-.566.952 0 .391.162.715.488.972.325.257 1.084.614 2.275 1.07.892.331 1.551.64 1.978.927.426.287.74.609.942.967.202.358.303.788.303 1.289zm9.58 0c0 1.003-.373 1.779-1.122 2.33-.749.55-1.8.824-3.154.824-1.413 0-2.536-.224-3.37-.674V13.42c1.179.573 2.315.86 3.409.86.885 0 1.53-.144 1.933-.43.404-.287.606-.671.606-1.153 0-.423-.194-.781-.581-1.074-.388-.293-1.076-.628-2.066-1.006-1.009-.39-1.719-.724-2.129-1-.41-.277-.71-.588-.903-.933-.192-.345-.288-.765-.288-1.26 0-.88.358-1.572 1.074-2.08.716-.508 1.7-.762 2.95-.762a8.17 8.17 0 013.417.723l-.595 1.396c-1.088-.456-2.067-.683-2.94-.683-.729 0-1.282.115-1.66.346-.378.231-.566.549-.566.952 0 .391.162.715.488.972.325.257 1.084.614 2.275 1.07.892.331 1.551.64 1.978.927.426.287.74.609.942.967.202.358.303.788.303 1.289zm4.356 2.959h-1.757V4.777h1.757zm-1.894-13.623c0-.39.1-.674.298-.85.198-.175.444-.263.737-.263.273 0 .513.088.718.263.205.176.307.46.307.85 0 .384-.102.667-.307.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zm10.371 2.725c1.413 0 2.503.486 3.271 1.46.769.973 1.153 2.332 1.153 4.077 0 1.77-.39 3.14-1.172 4.106-.781.967-1.865 1.45-3.252 1.45-.723 0-1.367-.13-1.934-.39a3.384 3.384 0 01-1.386-1.162h-.137a48.244 48.244 0 01-.361 1.357h-1.26V.305h1.758v3.691c0 .736-.033 1.471-.098 2.207h.098c.722-1.068 1.83-1.601 3.32-1.601zm-.293 1.455c-1.08 0-1.855.306-2.324.918-.469.612-.703 1.647-.703 3.105v.078c0 1.465.239 2.512.717 3.14.479.628 1.262.942 2.35.942.963 0 1.68-.353 2.152-1.06.472-.706.708-1.726.708-3.06 0-1.355-.237-2.37-.713-3.048-.475-.677-1.204-1.015-2.187-1.015zm9.277 9.443h-1.757V4.777h1.757zm-1.894-13.623c0-.39.1-.674.298-.85.198-.175.444-.263.737-.263.273 0 .513.088.718.263.205.176.307.46.307.85 0 .384-.102.667-.307.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zm7.05 13.623h-1.757V.305h1.758zm5.157 0h-1.758V4.777h1.758zm-1.895-13.623c0-.39.1-.674.298-.85.199-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.308.46.308.85 0 .384-.103.667-.308.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.198-.183-.298-.466-.298-.85zm8.877 12.383c.228 0 .495-.023.801-.069.306-.045.537-.097.693-.156v1.348c-.162.071-.415.141-.756.21a5.29 5.29 0 01-1.04.102c-2.097 0-3.145-1.103-3.145-3.31v-6.24h-1.514v-.84l1.534-.703.703-2.286h1.045v2.461h3.095v1.368h-3.095v6.19c0 .62.148 1.095.444 1.427.296.332.708.498 1.235.498zm1.953-9.483h1.885l2.315 6.104c.488 1.328.787 2.301.898 2.92h.078c.059-.241.192-.692.4-1.353.209-.66.385-1.19.528-1.587l2.178-6.084h1.894l-4.619 12.207c-.45 1.185-.983 2.035-1.602 2.55-.618.514-1.383.77-2.294.77-.489 0-.974-.055-1.456-.165v-1.397c.326.078.717.117 1.172.117.56 0 1.035-.154 1.426-.463.39-.31.71-.787.957-1.431l.557-1.426zM7.157 45.5H2.001v-1.035l1.68-.381V32.658l-1.68-.4v-1.035h5.156v1.035l-1.68.4v11.426l1.68.38zm9.824 0v-6.855c0-.873-.193-1.522-.58-1.949-.388-.426-.995-.64-1.822-.64-1.1 0-1.9.305-2.398.914-.498.608-.747 1.6-.747 2.973V45.5H9.677V34.777h1.416l.263 1.465h.098a3.31 3.31 0 011.396-1.225 4.492 4.492 0 011.983-.435c1.315 0 2.292.319 2.93.957.638.638.957 1.63.957 2.979V45.5zm6.817 0H22.04V34.777h1.758zm-1.895-13.623c0-.39.1-.674.298-.85.199-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.308.46.308.85 0 .384-.103.667-.308.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zM30.78 44.26c.228 0 .495-.023.8-.069.307-.045.538-.097.694-.156v1.348c-.163.071-.415.141-.757.21a5.29 5.29 0 01-1.04.102c-2.096 0-3.144-1.103-3.144-3.31v-6.24h-1.514v-.84l1.533-.703.703-2.286H29.1v2.461h3.096v1.368H29.1v6.19c0 .62.149 1.095.445 1.427.296.332.708.498 1.235.498zm5.39 1.24h-1.757V34.777h1.758zm-1.894-13.623c0-.39.1-.674.298-.85.199-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.308.46.308.85 0 .384-.103.667-.308.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zM46.19 45.5l-.342-1.523h-.078c-.534.67-1.066 1.124-1.596 1.362-.53.237-1.2.356-2.007.356-1.055 0-1.882-.276-2.48-.83-.6-.553-.9-1.334-.9-2.344 0-2.174 1.716-3.313 5.147-3.417l1.817-.069V38.4c0-.813-.176-1.414-.528-1.801-.351-.388-.914-.581-1.689-.581-.566 0-1.102.084-1.606.253-.505.17-.979.359-1.421.567l-.537-1.318a7.958 7.958 0 011.767-.674 7.642 7.642 0 011.895-.244c1.295 0 2.259.286 2.89.859.632.573.948 1.484.948 2.734V45.5zm-3.623-1.22c.983 0 1.756-.266 2.32-.797.563-.53.844-1.284.844-2.26v-.967l-1.582.068c-1.23.046-2.127.241-2.69.586-.563.345-.845.889-.845 1.631 0 .56.171.99.513 1.29.342.299.822.448 1.44.448zm11.807-.02c.228 0 .495-.023.8-.069.307-.045.538-.097.694-.156v1.348c-.163.071-.415.141-.757.21a5.29 5.29 0 01-1.04.102c-2.096 0-3.144-1.103-3.144-3.31v-6.24h-1.514v-.84l1.533-.703.703-2.286h1.045v2.461h3.096v1.368h-3.096v6.19c0 .62.148 1.095.444 1.427.297.332.708.498 1.236.498zm5.39 1.24h-1.757V34.777h1.757zM57.87 31.877c0-.39.1-.674.298-.85.198-.175.444-.263.737-.263.274 0 .513.088.718.263.205.176.307.46.307.85 0 .384-.102.667-.307.85a1.047 1.047 0 01-.718.273 1.05 1.05 0 01-.737-.273c-.199-.183-.298-.466-.298-.85zM65.526 45.5l-4.062-10.723h1.884l2.276 6.319c.45 1.27.736 2.216.86 2.842h.077a11.495 11.495 0 01.176-.64c.04-.127.28-.861.723-2.202l2.285-6.319h1.875L67.548 45.5zm12.354.195c-1.608 0-2.87-.486-3.784-1.46-.915-.973-1.373-2.312-1.373-4.018 0-1.719.427-3.088 1.28-4.107.853-1.019 2.005-1.528 3.457-1.528 1.347 0 2.422.435 3.222 1.304.801.869 1.202 2.046 1.202 3.53v1.064H74.54c.032 1.218.342 2.142.928 2.774.586.631 1.416.947 2.49.947a8.46 8.46 0 001.63-.151c.515-.101 1.117-.298 1.807-.591v1.543a8.506 8.506 0 01-1.67.537c-.52.104-1.136.156-1.845.156zm-.44-9.677c-.84 0-1.504.27-1.992.81s-.778 1.292-.87 2.256h5.46c-.013-1.003-.244-1.764-.693-2.285-.45-.521-1.084-.781-1.905-.781zM137.741 45.5h-1.816l-2.784-9.355c-.41-1.394-.65-2.334-.722-2.823-.104.749-.332 1.71-.684 2.881L129.04 45.5h-1.817l-3.779-14.277h1.875l2.217 8.72c.3 1.14.527 2.272.684 3.399.143-1.068.397-2.237.761-3.506l2.52-8.613h1.855l2.627 8.681c.339 1.127.6 2.272.781 3.438.105-.899.336-2.038.694-3.418l2.207-8.701h1.875zm14.57 0l-1.718-4.424h-5.664l-1.7 4.424h-1.816l5.576-14.336h1.621l5.567 14.336zm-2.256-6.016l-1.601-4.326-.684-2.138c-.195.78-.4 1.494-.615 2.138l-1.621 4.326zm10.098 6.016h-5.156v-1.035l1.68-.381V32.658l-1.68-.4v-1.035h5.156v1.035l-1.68.4v11.426l1.68.38z"></path> </g> </g> </svg> </a> </div> </header> </div> <div class="default-grid with-gap leftcol"> <aside class="box nav-hack sidebar standalone-resource__sidebar "> <header class="box-h ">Page Contents</header> <div class="box-i"> <nav aria-label="page contents" class="navtoc"> <ul> <li><a href="#aria">ARIA Techniques</a></li> <li><a href="#client-side-script">Client-Side Script Techniques</a></li> <li><a href="#css">CSS Techniques</a></li> <li><a href="#failures">Common Failures</a></li> <li><a href="#general">General Techniques</a></li> <li><a href="#html">HTML Techniques</a></li> <li><a href="#pdf">PDF Techniques</a></li> <li><a href="#server-side-script">Server-Side Script Techniques</a></li> <li><a href="#smil">SMIL Techniques</a></li> <li><a href="#text">Plain-Text Techniques</a></li> <li><a href="#changelog">Change Log</a></li> </ul> </nav> </div> </aside> <main id="main" class="main-content standalone-resource__main"> <h1 id="title" class="title p-name">Techniques for WCAG 2.2</h1> <aside class="box"> <header class="box-h ">Summary</header> <div class="box-i"> <p><em>Techniques</em> are examples of ways to meet Web Content Accessibility Guidelines (WCAG). They are not required to meet WCAG. For information, see <a href="about">About WCAG Techniques</a>.</p> </div> </aside> <h2 id="aria">ARIA Techniques<span class="permalink"><a href="#aria" aria-label="Permalink for ARIA Techniques" title="Permalink for ARIA Techniques"><span>§</span></a></span></h2> <ul class="toc-wcag-docs"> <li><a href="aria/ARIA1">ARIA1: Using the aria-describedby property to provide a descriptive label for user interface controls</a></li> <li><a href="aria/ARIA2">ARIA2: Identifying a required field with the aria-required property</a></li> <li><a href="aria/ARIA4">ARIA4: Using a WAI-ARIA role to expose the role of a user interface component</a></li> <li><a href="aria/ARIA5">ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component</a></li> <li><a href="aria/ARIA6">ARIA6: Using aria-label to provide labels for objects</a></li> <li><a href="aria/ARIA7">ARIA7: Using aria-labelledby for link purpose</a></li> <li><a href="aria/ARIA8">ARIA8: Using aria-label for link purpose</a></li> <li><a href="aria/ARIA9">ARIA9: Using aria-labelledby to concatenate a label from several text nodes</a></li> <li><a href="aria/ARIA10">ARIA10: Using aria-labelledby to provide a text alternative for non-text content</a></li> <li><a href="aria/ARIA11">ARIA11: Using ARIA landmarks to identify regions of a page</a></li> <li><a href="aria/ARIA12">ARIA12: Using role=heading to identify headings</a></li> <li><a href="aria/ARIA13">ARIA13: Using aria-labelledby to name regions and landmarks</a></li> <li><a href="aria/ARIA14">ARIA14: Using aria-label to provide an invisible label where a visible label cannot be used</a></li> <li><a href="aria/ARIA15">ARIA15: Using aria-describedby to provide descriptions of images</a></li> <li><a href="aria/ARIA16">ARIA16: Using aria-labelledby to provide a name for user interface controls</a></li> <li><a href="aria/ARIA17">ARIA17: Using grouping roles to identify related form controls</a></li> <li><a href="aria/ARIA18">ARIA18: Using aria-alertdialog to Identify Errors</a></li> <li><a href="aria/ARIA19">ARIA19: Using ARIA role=alert or Live Regions to Identify Errors</a></li> <li><a href="aria/ARIA20">ARIA20: Using the region role to identify a region of the page</a></li> <li><a href="aria/ARIA21">ARIA21: Using aria-invalid to Indicate An Error Field</a></li> <li><a href="aria/ARIA22">ARIA22: Using role=status to present status messages</a></li> <li><a href="aria/ARIA23">ARIA23: Using role=log to identify sequential information updates</a></li> <li><a href="aria/ARIA24">ARIA24: Semantically identifying a font icon with role="img"</a></li> </ul> <h2 id="client-side-script">Client-Side Script Techniques<span class="permalink"><a href="#client-side-script" aria-label="Permalink for Client-Side Script Techniques" title="Permalink for Client-Side Script Techniques"><span>§</span></a></span></h2> <ul class="toc-wcag-docs"> <li><a href="client-side-script/SCR1">SCR1: Allowing the user to extend the default time limit</a></li> <li><a href="client-side-script/SCR2">SCR2: Using redundant keyboard and mouse event handlers</a></li> <li><a href="client-side-script/SCR14">SCR14: Using scripts to make nonessential alerts optional</a></li> <li><a href="client-side-script/SCR16">SCR16: Providing a script that warns the user a time limit is about to expire</a></li> <li><a href="client-side-script/SCR18">SCR18: Providing client-side validation and alert</a></li> <li><a href="client-side-script/SCR19">SCR19: Using an onchange event on a select element without causing a change of context</a></li> <li><a href="client-side-script/SCR20">SCR20: Using both keyboard and other device-specific functions</a></li> <li><a href="client-side-script/SCR22">SCR22: Using scripts to control blinking and stop it in five seconds or less</a></li> <li><a href="client-side-script/SCR24">SCR24: Using progressive enhancement to open new windows on user request</a></li> <li><a href="client-side-script/SCR26">SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element</a></li> <li><a href="client-side-script/SCR27">SCR27: Reordering page sections using the Document Object Model</a></li> <li><a href="client-side-script/SCR28">SCR28: Using an expandable and collapsible menu to bypass block of content</a></li> <li><a href="client-side-script/SCR29">SCR29: Adding keyboard-accessible actions to static HTML elements</a></li> <li><a href="client-side-script/SCR30">SCR30: Using scripts to change the link text</a></li> <li><a href="client-side-script/SCR31">SCR31: Using script to change the background color or border of the element with focus</a></li> <li><a href="client-side-script/SCR32">SCR32: Providing client-side validation and adding error text via the DOM</a></li> <li><a href="client-side-script/SCR33">SCR33: Using script to scroll content, and providing a mechanism to pause it</a></li> <li><a href="client-side-script/SCR34">SCR34: Calculating size and position in a way that scales with text size</a></li> <li><a href="client-side-script/SCR35">SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons</a></li> <li><a href="client-side-script/SCR36">SCR36: Providing a mechanism to allow users to display moving, scrolling, or auto-updating text in a static window or area</a></li> <li><a href="client-side-script/SCR38">SCR38: Creating a conforming alternate version for a web page designed with progressive enhancement</a></li> <li><a href="client-side-script/SCR39">SCR39: Making content on focus or hover hoverable, dismissible, and persistent</a></li> </ul> <h2 id="css">CSS Techniques<span class="permalink"><a href="#css" aria-label="Permalink for CSS Techniques" title="Permalink for CSS Techniques"><span>§</span></a></span></h2> <ul class="toc-wcag-docs"> <li><a href="css/C6">C6: Positioning content based on structural markup</a></li> <li><a href="css/C7">C7: Using CSS to hide a portion of the link text</a></li> <li><a href="css/C8">C8: Using CSS letter-spacing to control spacing within a word</a></li> <li><a href="css/C9">C9: Using CSS to include decorative images</a></li> <li><a href="css/C12">C12: Using percent for font sizes</a></li> <li><a href="css/C13">C13: Using named font sizes</a></li> <li><a href="css/C14">C14: Using em units for font sizes</a></li> <li><a href="css/C15">C15: Using CSS to change the presentation of a user interface component when it receives focus</a></li> <li><a href="css/C17">C17: Scaling form elements which contain text</a></li> <li><a href="css/C18">C18: Using CSS margin and padding rules instead of spacer images for layout design</a></li> <li><a href="css/C19">C19: Specifying alignment either to the left or right in CSS</a></li> <li><a href="css/C20">C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized</a></li> <li><a href="css/C21">C21: Specifying line spacing in CSS</a></li> <li><a href="css/C22">C22: Using CSS to control visual presentation of text</a></li> <li><a href="css/C23">C23: Specifying text and background colors of secondary content such as banners, features and navigation in CSS while not specifying text and background colors of the main content</a></li> <li><a href="css/C24">C24: Using percentage values in CSS for container sizes</a></li> <li><a href="css/C25">C25: Specifying borders and layout in CSS to delineate areas of a Web page while not specifying text and text-background colors</a></li> <li><a href="css/C27">C27: Making the DOM order match the visual order</a></li> <li><a href="css/C28">C28: Specifying the size of text containers using em units</a></li> <li><a href="css/C29">C29: Using a style switcher to provide a conforming alternate version</a></li> <li><a href="css/C30">C30: Using CSS to replace text with images of text and providing user interface controls to switch</a></li> <li><a href="css/C31">C31: Using CSS Flexbox to reflow content</a></li> <li><a href="css/C32">C32: Using media queries and grid CSS to reflow columns</a></li> <li><a href="css/C33">C33: Allowing for Reflow with Long URLs and Strings of Text</a></li> <li><a href="css/C34">C34: Using media queries to un-fixing sticky headers / footers</a></li> <li><a href="css/C35">C35: Allowing for text spacing without wrapping</a></li> <li><a href="css/C36">C36: Allowing for text spacing override</a></li> <li><a href="css/C37">C37: Using CSS max-width and height to fit images</a></li> <li><a href="css/C38">C38: Using CSS width, max-width and flexbox to fit labels and inputs</a></li> <li><a href="css/C39">C39: Using the CSS reduce-motion query to prevent motion</a></li> <li><a href="css/C40">C40: Creating a two-color focus indicator to ensure sufficient contrast with all components</a></li> <li><a href="css/C41">C41: Creating a strong focus indicator within the component</a></li> <li><a href="css/C42">C42: Using min-height and min-width to ensure sufficient target spacing</a></li> <li><a href="css/C43">C43: Using CSS scroll-padding to un-obscure content</a></li> <li><a href="css/C45">C45: Using CSS :focus-visible to provide keyboard focus indication</a></li> </ul> <h2 id="failures">Common Failures<span class="permalink"><a href="#failures" aria-label="Permalink for Common Failures" title="Permalink for Common Failures"><span>§</span></a></span></h2> <ul class="toc-wcag-docs"> <li><a href="failures/F1">F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS</a></li> <li><a href="failures/F2">F2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text</a></li> <li><a href="failures/F3">F3: Failure of Success Criterion 1.1.1 due to using CSS to include images that convey important information</a></li> <li><a href="failures/F4">F4: Failure of Success Criterion 2.2.2 due to using text-decoration:blink without a mechanism to stop it in less than five seconds</a></li> <li><a href="failures/F7">F7: Failure of Success Criterion 2.2.2 due to an object or applet … for more than five seconds</a></li> <li><a href="failures/F8">F8: Failure of Success Criterion 1.2.2 due to captions omitting some dialogue or important sound effects</a></li> <li><a href="failures/F9">F9: Failure of Success Criterion 3.2.5 due to changing the context when the user removes focus from a form element</a></li> <li><a href="failures/F10">F10: Failure of Success Criterion 2.1.2 and Conformance Requirement 5 due to combining multiple content formats in a way that traps users inside one format type</a></li> <li><a href="failures/F12">F12: Failure of Success Criterion 2.2.5 due to having a session time limit without a mechanism … re-authentication</a></li> <li><a href="failures/F13">F13: Failure of Success Criterion 1.1.1 and 1.4.1 due to having a text alternative that does not include information that is conveyed by color differences in the image</a></li> <li><a href="failures/F14">F14: Failure of Success Criterion 1.3.3 due to identifying content only by its shape or location</a></li> <li><a href="failures/F15">F15: Failure of Success Criterion 4.1.2 due to implementing custom controls that do not use an accessibility API for the technology, or do so incompletely</a></li> <li><a href="failures/F16">F16: Failure of Success Criterion 2.2.2 due to including scrolling content where movement is not essential to the activity without also including a mechanism to pause and restart the content</a></li> <li><a href="failures/F19">F19: Failure of Conformance Requirement 1 due to not providing a method for the user to find the alternative conforming version of a non-conforming Web page</a></li> <li><a href="failures/F20">F20: Failure of Success Criterion 1.1.1 and 4.1.2 due to not updating text alternatives when changes to non-text content occur</a></li> <li><a href="failures/F22">F22: Failure of Success Criterion 3.2.5 due to opening windows that are not requested by the user</a></li> <li><a href="failures/F23">F23: Failure of 1.4.2 due to playing a sound longer than 3 seconds where there is no mechanism to turn it off</a></li> <li><a href="failures/F24">F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa</a></li> <li><a href="failures/F25">F25: Failure of Success Criterion 2.4.2 due to the title of a Web page not identifying the contents</a></li> <li><a href="failures/F26">F26: Failure of Success Criterion 1.3.3 due to using a graphical symbol alone to convey information</a></li> <li><a href="failures/F30">F30: Failure of Success Criterion 1.1.1 and 1.2.1 due to using text alternatives that are not alternatives (e.g., filenames or placeholder text)</a></li> <li><a href="failures/F31">F31: Failure of Success Criterion 3.2.4 due to using two different labels for the same function on different Web pages within a set of Web pages </a></li> <li><a href="failures/F32">F32: Failure of Success Criterion 1.3.2 due to using white space characters to control spacing within a word</a></li> <li><a href="failures/F33">F33: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to create multiple columns in plain text content</a></li> <li><a href="failures/F34">F34: Failure of Success Criterion 1.3.1 and 1.3.2 due to using white space characters to format tables in plain text content</a></li> <li><a href="failures/F36">F36: Failure of Success Criterion 3.2.2 due to automatically submitting a form and … given a value</a></li> <li><a href="failures/F37">F37: Failure of Success Criterion 3.2.2 due to launching a new window without prior warning when the selection of a radio button, check box or select list is changed</a></li> <li><a href="failures/F38">F38: Failure of Success Criterion 1.1.1 due to not marking up decorative images in HTML in a way that allows assistive technology to ignore them</a></li> <li><a href="failures/F39">F39: Failure of Success Criterion 1.1.1 due to providing a text alternative that is not null (e.g., alt="spacer" or alt="image") for images that should be ignored by assistive technology</a></li> <li><a href="failures/F40">F40: Failure due to using meta redirect with a time limit </a></li> <li><a href="failures/F41">F41: Failure of Success Criterion 2.2.1, 2.2.4, and 3.2.5 due to using meta refresh to reload the page</a></li> <li><a href="failures/F42">F42: Failure of Success Criteria 1.3.1, 2.1.1, 2.1.3, or 4.1.2 when emulating links</a></li> <li><a href="failures/F43">F43: Failure of Success Criterion 1.3.1 due to using structural markup in a way that does not represent relationships in the content</a></li> <li><a href="failures/F44">F44: Failure of Success Criterion 2.4.3 due to using tabindex to create a tab order that does not preserve meaning and operability</a></li> <li><a href="failures/F46">F46: Failure of Success Criterion 1.3.1 due to using th elements, … layout tables</a></li> <li><a href="failures/F47">F47: Failure of Success Criterion 2.2.2 due to using the blink element</a></li> <li><a href="failures/F48">F48: Failure of Success Criterion 1.3.1 due to using the pre element to markup tabular information</a></li> <li><a href="failures/F49">F49: Failure of Success Criterion 1.3.2 due to using an HTML layout table that does not make sense when linearized </a></li> <li><a href="failures/F50">F50: Failure of Success Criterion 2.2.2 due to a script that causes a blink effect without a mechanism to stop the blinking at 5 seconds or less</a></li> <li><a href="failures/F52">F52: Failure of Success Criterion 3.2.5 due to opening a new window as soon as a new page is loaded</a></li> <li><a href="failures/F54">F54: Failure of Success Criterion 2.1.1 due to using only pointing-device-specific event handlers (including gesture) for a function</a></li> <li><a href="failures/F55">F55: Failure of Success Criteria 2.1.1, 2.4.7, 2.4.13, and 3.2.1 due to using script to remove focus when focus is received</a></li> <li><a href="failures/F58">F58: Failure of Success Criterion 2.2.1 due to using server-side techniques to automatically redirect pages after a time-out</a></li> <li><a href="failures/F59">F59: Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control</a></li> <li><a href="failures/F60">F60: Failure of Success Criterion 3.2.5 due to launching a new window when a user enters text into an input field</a></li> <li><a href="failures/F61">F61: Failure of Success Criterion 3.2.5 due to complete change of main content through an automatic update that the user cannot disable from within the content</a></li> <li><a href="failures/F63">F63: Failure of Success Criterion 2.4.4 due to providing link context only in content that is not related to the link</a></li> <li><a href="failures/F65">F65: Failure of Success Criterion 1.1.1 due to omitting the alt attribute or text alternative on img elements, area elements, and input elements of type "image"</a></li> <li><a href="failures/F66">F66: Failure of Success Criterion 3.2.3 due to presenting navigation links in a different relative order on different pages</a></li> <li><a href="failures/F67">F67: Failure of Success Criterion 1.1.1 and 1.2.1 due to providing long descriptions for non-text content that does not serve the same purpose or does not present the same information</a></li> <li><a href="failures/F68">F68: Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name </a></li> <li><a href="failures/F69">F69: Failure of Success Criterion 1.4.4 when resizing visually rendered text up to 200 percent causes the text, image or controls to be clipped, truncated or obscured</a></li> <li><a href="failures/F71">F71: Failure of Success Criterion 1.1.1 due to using text look-alikes to represent text without providing a text alternative</a></li> <li><a href="failures/F72">F72: Failure of Success Criterion 1.1.1 due to using ASCII art without providing a text alternative</a></li> <li><a href="failures/F73">F73: Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision</a></li> <li><a href="failures/F74">F74: Failure of Success Criterion 1.2.2 and 1.2.8 due to not labeling a synchronized media alternative to text as an alternative</a></li> <li><a href="failures/F75">F75: Failure of Success Criterion 1.2.2 by providing synchronized media without captions when the synchronized media presents more information than is presented on the page</a></li> <li><a href="failures/F78">F78: Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator</a></li> <li><a href="failures/F79">F79: Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available</a></li> <li><a href="failures/F80">F80: Failure of Success Criterion 1.4.4 when text-based form controls do not resize when visually rendered text is resized up to 200%</a></li> <li><a href="failures/F81">F81: Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only</a></li> <li><a href="failures/F82">F82: Failure of Success Criterion 3.3.2 by visually formatting a set of phone number fields but not including a text label</a></li> <li><a href="failures/F83">F83: Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)</a></li> <li><a href="failures/F84">F84: Failure of Success Criterion 2.4.9 due to using a non-specific link such as "click here" or "more" without a mechanism to change the link text to specific text.</a></li> <li><a href="failures/F85">F85: Failure of Success Criterion 2.4.3 due to using dialogs or menus that are not adjacent to their trigger control in the sequential navigation order</a></li> <li><a href="failures/F86">F86: Failure of Success Criterion 4.1.2 due to not providing names for each part of a multi-part form field, such as a US telephone number</a></li> <li><a href="failures/F88">F88: Failure of Success Criterion 1.4.8 due to using text that is justified (aligned to both the left and the right margins)</a></li> <li><a href="failures/F89">F89: Failure of Success Criteria 2.4.4, 2.4.9 and 4.1.2 due to not providing an accessible name for an image which is the only content in a link</a></li> <li><a href="failures/F90">F90: Failure of Success Criterion 1.3.1 for incorrectly associating table headers and content via the headers and id attributes</a></li> <li><a href="failures/F91">F91: Failure of Success Criterion 1.3.1 for not correctly marking up table headers</a></li> <li><a href="failures/F92">F92: Failure of Success Criterion 1.3.1 due to the use of role presentation on content which conveys semantic information</a></li> <li><a href="failures/F93">F93: Failure of Success Criterion 1.4.2 for absence of a way to pause or stop an HTML5 media element that autoplays</a></li> <li><a href="failures/F94">F94: Failure of Success Criterion 1.4.4 due to incorrect use of viewport units to resize text</a></li> <li><a href="failures/F95">F95: Failure of Success Criterion 1.4.13 due to content shown on hover not being hoverable</a></li> <li><a href="failures/F96">F96: Failure due to the accessible name not containing the visible label text</a></li> <li><a href="failures/F97">F97: Failure due to locking the orientation to landscape or portrait view</a></li> <li><a href="failures/F98">F98: Failure due to interactions being limited to touch-only on touchscreen devices</a></li> <li><a href="failures/F99">F99: Failure of Success Criterion 2.1.4 due to implementing character key shortcuts that cannot be turned off or remapped</a></li> <li><a href="failures/F100">F100: Failure of Success Criterion 1.3.4 due to showing a message asking to reorient device</a></li> <li><a href="failures/F101">F101: Failure of Success Criterion 2.5.2 due to activating a control on the down-event</a></li> <li><a href="failures/F102">F102: Failure of Success Criterion 1.4.10 due to content disappearing and not being available when content has reflowed</a></li> <li><a href="failures/F103">F103: Failure of Success Criterion 4.1.3 due to providing status messages that cannot be programmatically determined through role or properties</a></li> <li><a href="failures/F104">F104: Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text spacing is adjusted</a></li> <li><a href="failures/F105">F105: Failure of Success Criterion 2.5.1 due to providing functionality via a path-based gesture without simple pointer alternative</a></li> <li><a href="failures/F106">F106: Failure due to inability to deactivate motion actuation</a></li> <li><a href="failures/F107">F107: Failure of Success Criterion 1.3.5 due to incorrect autocomplete attribute values</a></li> <li><a href="failures/F108">F108: Failure of Success Criterion 2.5.7 Dragging Movements due to not providing a single pointer method for the user to operate a function that does not require a dragging movement</a></li> <li><a href="failures/F109">F109: Failure of Success Criterion 3.3.8 and 3.3.9 due to preventing password or code re-entry in the same format</a></li> <li><a href="failures/F110">F110: Failure of Success Criterion 2.4.11 Focus Not Obscured (Minimum) due to a sticky footer or header completely hiding focused elements</a></li> <li><a href="failures/F111">F111: Failure of Success Criteria 1.3.1, 2.5.3, and 4.1.2 due to a control with visible label text but no accessible name</a></li> </ul> <h2 id="general">General Techniques<span class="permalink"><a href="#general" aria-label="Permalink for General Techniques" title="Permalink for General Techniques"><span>§</span></a></span></h2> <ul class="toc-wcag-docs"> <li><a href="general/G1">G1: Adding a link at the top of each page that goes directly to the main content area</a></li> <li><a href="general/G4">G4: Allowing the content to be paused and restarted from where it was paused</a></li> <li><a href="general/G5">G5: Allowing users to complete an activity without any time limit</a></li> <li><a href="general/G8">G8: Providing a movie with extended audio descriptions</a></li> <li><a href="general/G9">G9: Creating captions for live synchronized media</a></li> <li><a href="general/G10">G10: Creating components using a technology that supports the accessibility … notification of changes</a></li> <li><a href="general/G11">G11: Creating content that blinks for less than 5 seconds</a></li> <li><a href="general/G13">G13: Describing what will happen before a change to a form control that causes a change of context to occur is made</a></li> <li><a href="general/G14">G14: Ensuring that information conveyed by color differences is also available in text</a></li> <li><a href="general/G15">G15: Using a tool to ensure that content does not violate the general flash threshold or red flash threshold</a></li> <li><a href="general/G17">G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text</a></li> <li><a href="general/G18">G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text</a></li> <li><a href="general/G19">G19: Ensuring that no component of the content flashes more than three times in any 1-second period</a></li> <li><a href="general/G21">G21: Ensuring that users are not trapped in content</a></li> <li><a href="general/G53">G53: Identifying the purpose of a link using link text combined with the text of the enclosing sentence</a></li> <li><a href="general/G54">G54: Including a sign language interpreter in the video stream</a></li> <li><a href="general/G55">G55: Linking to definitions</a></li> <li><a href="general/G56">G56: Mixing audio files so that non-speech sounds are at least 20 decibels lower than the speech audio content</a></li> <li><a href="general/G57">G57: Ordering the content in a meaningful sequence</a></li> <li><a href="general/G58">G58: Placing a link to the alternative for time-based media immediately next to the non-text content</a></li> <li><a href="general/G59">G59: Placing the interactive elements in an order that follows sequences and relationships within the content</a></li> <li><a href="general/G60">G60: Playing a sound that turns off automatically within three seconds</a></li> <li><a href="general/G61">G61: Presenting repeated components in the same relative order each time they appear</a></li> <li><a href="general/G62">G62: Providing a glossary</a></li> <li><a href="general/G63">G63: Providing a site map</a></li> <li><a href="general/G64">G64: Providing a Table of Contents</a></li> <li><a href="general/G65">G65: Providing a breadcrumb trail</a></li> <li><a href="general/G68">G68: Providing a short text alternative that describes the purpose of live audio-only and live video-only content</a></li> <li><a href="general/G69">G69: Providing an alternative for time based media</a></li> <li><a href="general/G70">G70: Providing a function to search an online dictionary</a></li> <li><a href="general/G71">G71: Providing a help link on every Web page</a></li> <li><a href="general/G73">G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content</a></li> <li><a href="general/G74">G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description</a></li> <li><a href="general/G75">G75: Providing a mechanism to postpone any updating of content</a></li> <li><a href="general/G76">G76: Providing a mechanism to request an update of the content instead of updating automatically</a></li> <li><a href="general/G78">G78: Providing a second, user-selectable, audio track that includes audio descriptions</a></li> <li><a href="general/G79">G79: Providing a spoken version of the text</a></li> <li><a href="general/G80">G80: Providing a submit button to initiate a change of context</a></li> <li><a href="general/G81">G81: Providing a synchronized video of the sign language interpreter that can be displayed in a different viewport or overlaid on the image by the player</a></li> <li><a href="general/G82">G82: Providing a text alternative that identifies the purpose of the non-text content</a></li> <li><a href="general/G83">G83: Providing text descriptions to identify required fields that were not completed</a></li> <li><a href="general/G84">G84: Providing a text description when the user provides information that is not in the list of allowed values</a></li> <li><a href="general/G85">G85: Providing a text description when user input falls outside the required format or values</a></li> <li><a href="general/G86">G86: Providing a text summary that can be understood by people with lower secondary education level reading ability</a></li> <li><a href="general/G87">G87: Providing closed captions</a></li> <li><a href="general/G88">G88: Providing descriptive titles for Web pages</a></li> <li><a href="general/G89">G89: Providing expected data format and example</a></li> <li><a href="general/G90">G90: Providing keyboard-triggered event handlers</a></li> <li><a href="general/G91">G91: Providing link text that describes the purpose of a link</a></li> <li><a href="general/G92">G92: Providing long description for non-text content that serves the same purpose and presents the same information</a></li> <li><a href="general/G93">G93: Providing open (always visible) captions</a></li> <li><a href="general/G94">G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content</a></li> <li><a href="general/G95">G95: Providing short text alternatives that provide a brief description of the non-text content</a></li> <li><a href="general/G96">G96: Providing textual identification of items that otherwise rely only on sensory information to be understood</a></li> <li><a href="general/G97">G97: Providing the first use of an abbreviation immediately before or after the expanded form</a></li> <li><a href="general/G98">G98: Providing the ability for the user to review and correct answers before submitting</a></li> <li><a href="general/G99">G99: Providing the ability to recover deleted information</a></li> <li><a href="general/G100">G100: Providing a short text alternative which is the accepted name or a descriptive name of the non-text content</a></li> <li><a href="general/G101">G101: Providing the definition of a word or phrase used in an unusual or restricted way</a></li> <li><a href="general/G102">G102: Providing the expansion or explanation of an abbreviation</a></li> <li><a href="general/G103">G103: Providing visual illustrations, pictures, and symbols to help explain ideas, events, and processes</a></li> <li><a href="general/G105">G105: Saving data so that it can be used after a user re-authenticates</a></li> <li><a href="general/G107">G107: Using "activate" rather than "focus" as a trigger for changes of context</a></li> <li><a href="general/G108">G108: Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes</a></li> <li><a href="general/G110">G110: Using an instant client-side redirect</a></li> <li><a href="general/G111">G111: Using color and pattern</a></li> <li><a href="general/G112">G112: Using inline definitions</a></li> <li><a href="general/G115">G115: Using semantic elements to mark up structure</a></li> <li><a href="general/G117">G117: Using text to convey information that is conveyed by variations in presentation of text</a></li> <li><a href="general/G120">G120: Providing the pronunciation immediately following the word</a></li> <li><a href="general/G121">G121: Linking to pronunciations</a></li> <li><a href="general/G123">G123: Adding a link at the beginning of a block of repeated content to go to the end of the block</a></li> <li><a href="general/G124">G124: Adding links at the top of the page to each area of the content</a></li> <li><a href="general/G125">G125: Providing links to navigate to related Web pages</a></li> <li><a href="general/G126">G126: Providing a list of links to all other Web pages</a></li> <li><a href="general/G127">G127: Identifying a Web page's relationship to a larger collection of Web pages</a></li> <li><a href="general/G128">G128: Indicating current location within navigation bars</a></li> <li><a href="general/G130">G130: Providing descriptive headings</a></li> <li><a href="general/G131">G131: Providing descriptive labels</a></li> <li><a href="general/G133">G133: Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit</a></li> <li><a href="general/G135">G135: Using the accessibility API features of a technology to expose names and … notification of changes</a></li> <li><a href="general/G136">G136: Providing a link at the beginning of a nonconforming Web page that points to a conforming alternate version</a></li> <li><a href="general/G138">G138: Using semantic markup whenever color cues are used</a></li> <li><a href="general/G139">G139: Creating a mechanism that allows users to jump to errors</a></li> <li><a href="general/G140">G140: Separating information and structure from presentation to enable different presentations</a></li> <li><a href="general/G141">G141: Organizing a page using headings</a></li> <li><a href="general/G142">G142: Using a technology that has commonly-available user agents that support zoom</a></li> <li><a href="general/G143">G143: Providing a text alternative that describes the purpose of the CAPTCHA</a></li> <li><a href="general/G144">G144: Ensuring that the Web Page contains another CAPTCHA serving the same purpose using a different modality</a></li> <li><a href="general/G145">G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text</a></li> <li><a href="general/G146">G146: Using liquid layout</a></li> <li><a href="general/G148">G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults</a></li> <li><a href="general/G149">G149: Using user interface components that are highlighted by the user agent when they receive focus</a></li> <li><a href="general/G150">G150: Providing text based alternatives for live audio-only content</a></li> <li><a href="general/G151">G151: Providing a link to a text transcript of a prepared statement or script if the script is followed</a></li> <li><a href="general/G152">G152: Setting animated gif images to stop blinking after n cycles (within 5 seconds)</a></li> <li><a href="general/G153">G153: Making the text easier to read</a></li> <li><a href="general/G155">G155: Providing a checkbox in addition to a submit button</a></li> <li><a href="general/G156">G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text</a></li> <li><a href="general/G157">G157: Incorporating a live audio captioning service into a Web page</a></li> <li><a href="general/G158">G158: Providing an alternative for time-based media for audio-only content</a></li> <li><a href="general/G159">G159: Providing an alternative for time-based media for video-only content</a></li> <li><a href="general/G160">G160: Providing sign language versions of information, ideas, and processes that must be understood in order to use the content</a></li> <li><a href="general/G161">G161: Providing a search function to help users find content</a></li> <li><a href="general/G162">G162: Positioning labels to maximize predictability of relationships</a></li> <li><a href="general/G163">G163: Using standard diacritical marks that can be turned off</a></li> <li><a href="general/G164">G164: Providing a stated time within which an online request (or transaction) may be amended or canceled by the user after making the request</a></li> <li><a href="general/G165">G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over</a></li> <li><a href="general/G166">G166: Providing audio that describes the important video content and describing it as such</a></li> <li><a href="general/G167">G167: Using an adjacent button to label the purpose of a field</a></li> <li><a href="general/G168">G168: Requesting confirmation to continue with selected action</a></li> <li><a href="general/G169">G169: Aligning text on only one side</a></li> <li><a href="general/G170">G170: Providing a control near the beginning of the Web page that turns off sounds that play automatically</a></li> <li><a href="general/G171">G171: Playing sounds only on user request</a></li> <li><a href="general/G172">G172: Providing a mechanism to remove full justification of text</a></li> <li><a href="general/G173">G173: Providing a version of a movie with audio descriptions</a></li> <li><a href="general/G174">G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast</a></li> <li><a href="general/G175">G175: Providing a multi color selection tool on the page for foreground and background colors</a></li> <li><a href="general/G176">G176: Keeping the flashing area small enough</a></li> <li><a href="general/G177">G177: Providing suggested correction text</a></li> <li><a href="general/G178">G178: Providing controls on the Web page that allow users to incrementally change the size of all text on the page up to 200 percent</a></li> <li><a href="general/G179">G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width</a></li> <li><a href="general/G180">G180: Providing the user with a means to set the time limit to 10 times the default time limit</a></li> <li><a href="general/G181">G181: Encoding user data as hidden or encrypted data in a re-authorization page</a></li> <li><a href="general/G182">G182: Ensuring that additional visual cues are available when text color differences are used to convey information</a></li> <li><a href="general/G183">G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them</a></li> <li><a href="general/G184">G184: Providing text instructions at the beginning of a form or set of fields that describes the necessary input</a></li> <li><a href="general/G185">G185: Linking to all of the pages on the site from the home page</a></li> <li><a href="general/G186">G186: Using a control in the Web page that stops moving, blinking, or auto-updating content</a></li> <li><a href="general/G188">G188: Providing a button on the page to increase line spaces and paragraph spaces</a></li> <li><a href="general/G189">G189: Providing a control near the beginning of the Web page that changes the link text</a></li> <li><a href="general/G190">G190: Providing a link adjacent to or associated with a non-conforming object that links to a conforming alternate version</a></li> <li><a href="general/G191">G191: Providing a link, button, or other mechanism that reloads the page without any blinking content</a></li> <li><a href="general/G193">G193: Providing help by an assistant in the Web page</a></li> <li><a href="general/G194">G194: Providing spell checking and suggestions for text input</a></li> <li><a href="general/G195">G195: Using an author-supplied, visible focus indicator</a></li> <li><a href="general/G196">G196: Using a text alternative on one item within a group of images that describes all items in the group</a></li> <li><a href="general/G197">G197: Using labels, names, and text alternatives consistently for content that has the same functionality</a></li> <li><a href="general/G198">G198: Providing a way for the user to turn the time limit off</a></li> <li><a href="general/G199">G199: Providing success feedback when data is submitted successfully</a></li> <li><a href="general/G200">G200: Opening new windows and tabs from a link only when necessary</a></li> <li><a href="general/G201">G201: Giving users advanced warning when opening a new window</a></li> <li><a href="general/G202">G202: Ensuring keyboard control for all functionality</a></li> <li><a href="general/G203">G203: Using a static text alternative to describe a talking head video</a></li> <li><a href="general/G204">G204: Not interfering with the user agent's reflow of text as the viewing window is narrowed</a></li> <li><a href="general/G205">G205: Including a text cue for colored form control labels</a></li> <li><a href="general/G206">G206: Providing options within the content to switch to a layout that does not require the user to scroll horizontally to read a line of text</a></li> <li><a href="general/G207">G207: Ensuring that a contrast ratio of 3:1 is provided for icons</a></li> <li><a href="general/G208">G208: Including the text of the visible label as part of the accessible name</a></li> <li><a href="general/G209">G209: Provide sufficient contrast at the boundaries between adjoining colors</a></li> <li><a href="general/G210">G210: Ensuring that drag-and-drop actions can be cancelled</a></li> <li><a href="general/G211">G211: Matching the accessible name to the visible label</a></li> <li><a href="general/G212">G212: Using native controls to ensure functionality is triggered on the up-event.</a></li> <li><a href="general/G213">G213: Provide conventional controls and an application setting for motion activated input</a></li> <li><a href="general/G214">G214: Using a control to allow access to content in different orientations which is otherwise restricted</a></li> <li><a href="general/G215">G215: Providing controls to achieve the same result as path based or multipoint gestures</a></li> <li><a href="general/G216">G216: Providing single point activation for a control slider</a></li> <li><a href="general/G217">G217: Providing a mechanism to allow users to remap or turn off character key shortcuts</a></li> <li><a href="general/G218">G218: Email link authentication</a></li> <li><a href="general/G219">G219: Ensuring that an alternative is available for dragging movements that operate on content</a></li> <li><a href="general/G220">G220: Provide a contact-us link in a consistent location</a></li> <li><a href="general/G221">G221: Provide data from a previous step in a process</a></li> <li><a href="general/G223">G223: Using an author-supplied, highly visible focus indicator</a></li> </ul> <h2 id="html">HTML Techniques<span class="permalink"><a href="#html" aria-label="Permalink for HTML Techniques" title="Permalink for HTML Techniques"><span>§</span></a></span></h2> <ul class="toc-wcag-docs"> <li><a href="html/H2">H2: Combining adjacent image and text links for the same resource</a></li> <li><a href="html/H24">H24: Providing text alternatives for the area elements of image maps</a></li> <li><a href="html/H25">H25: Providing a title using the title element</a></li> <li><a href="html/H28">H28: Providing definitions for abbreviations by using the abbr element</a></li> <li><a href="html/H30">H30: Providing link text that describes the purpose of a link for anchor elements</a></li> <li><a href="html/H32">H32: Providing submit buttons</a></li> <li><a href="html/H33">H33: Supplementing link text with the title attribute</a></li> <li><a href="html/H34">H34: Using a Unicode right-to-left mark (RLM) or left-to-right mark (LRM) to mix text direction inline</a></li> <li><a href="html/H36">H36: Using alt attributes on images used as submit buttons</a></li> <li><a href="html/H37">H37: Using alt attributes on img elements</a></li> <li><a href="html/H39">H39: Using caption elements to associate data table captions with data tables</a></li> <li><a href="html/H40">H40: Using description lists</a></li> <li><a href="html/H42">H42: Using h1-h6 to identify headings</a></li> <li><a href="html/H43">H43: Using id and headers attributes to associate data cells with header cells in data tables</a></li> <li><a href="html/H44">H44: Using label elements to associate text labels with form controls</a></li> <li><a href="html/H48">H48: Using ol, ul and dl for lists or groups of links</a></li> <li><a href="html/H49">H49: Using semantic markup to mark emphasized or special text</a></li> <li><a href="html/H51">H51: Using table markup to present tabular information</a></li> <li><a href="html/H53">H53: Using the body of the object element</a></li> <li><a href="html/H54">H54: Using the dfn element to identify the defining instance of a word</a></li> <li><a href="html/H56">H56: Using the dir attribute on an inline element to resolve problems with nested directional runs</a></li> <li><a href="html/H57">H57: Using the language attribute on the HTML element</a></li> <li><a href="html/H58">H58: Using language attributes to identify changes in the human language</a></li> <li><a href="html/H62">H62: Using the ruby element</a></li> <li><a href="html/H63">H63: Using the scope attribute to associate header cells with data cells in data tables</a></li> <li><a href="html/H64">H64: Using the title attribute of the iframe element</a></li> <li><a href="html/H65">H65: Using the title attribute to identify form controls when the label element cannot be used</a></li> <li><a href="html/H67">H67: Using null alt text and no title attribute on img elements for images that assistive technology should ignore</a></li> <li><a href="html/H69">H69: Providing heading elements at the beginning of each section of content</a></li> <li><a href="html/H71">H71: Providing a description for groups of form controls using fieldset and legend elements</a></li> <li><a href="html/H76">H76: Using meta refresh to create an instant client-side redirect</a></li> <li><a href="html/H77">H77: Identifying the purpose of a link using link text combined with its enclosing list item</a></li> <li><a href="html/H78">H78: Identifying the purpose of a link using link text combined with its enclosing paragraph</a></li> <li><a href="html/H79">H79: Identifying the purpose of a link in a data table using the link text combined with its enclosing table cell and associated table header cells</a></li> <li><a href="html/H80">H80: Identifying the purpose of a link using link text combined with the preceding heading element</a></li> <li><a href="html/H81">H81: Identifying the purpose of a link in a nested list using link text combined with the parent list item under which the list is nested</a></li> <li><a href="html/H83">H83: Using the target attribute to open a new window on user request and indicating this in link text</a></li> <li><a href="html/H84">H84: Using a button with a select element to perform an action</a></li> <li><a href="html/H85">H85: Using optgroup to group option elements inside a select</a></li> <li><a href="html/H86">H86: Providing text alternatives for emojis, emoticons, ASCII art, and leetspeak</a></li> <li><a href="html/H88">H88: Using HTML according to spec</a></li> <li><a href="html/H89">H89: Using the title attribute to provide context-sensitive help</a></li> <li><a href="html/H90">H90: Indicating required form controls using label or legend</a></li> <li><a href="html/H91">H91: Using HTML form controls and links</a></li> <li><a href="html/H95">H95: Using the track element to provide captions</a></li> <li><a href="html/H96">H96: Using the track element to provide audio descriptions</a></li> <li><a href="html/H97">H97: Grouping related links using the nav element</a></li> <li><a href="html/H98">H98: Using HTML 5.2 autocomplete attributes</a></li> <li><a href="html/H99">H99: Provide a page-selection mechanism</a></li> <li><a href="html/H100">H100: Providing properly marked up email and password inputs</a></li> <li><a href="html/H101">H101: Using semantic HTML elements to identify regions of a page</a></li> <li><a href="html/H102">H102: Creating modal dialogs with the HTML dialog element</a></li> </ul> <h2 id="pdf">PDF Techniques<span class="permalink"><a href="#pdf" aria-label="Permalink for PDF Techniques" title="Permalink for PDF Techniques"><span>§</span></a></span></h2> <ul class="toc-wcag-docs"> <li><a href="pdf/PDF1">PDF1: Applying text alternatives to images with the Alt entry in PDF documents</a></li> <li><a href="pdf/PDF2">PDF2: Creating bookmarks in PDF documents</a></li> <li><a href="pdf/PDF3">PDF3: Ensuring correct tab and reading order in PDF documents</a></li> <li><a href="pdf/PDF4">PDF4: Hiding decorative images with the Artifact tag in PDF documents</a></li> <li><a href="pdf/PDF5">PDF5: Indicating required form controls in PDF forms</a></li> <li><a href="pdf/PDF6">PDF6: Using table elements for table markup in PDF Documents</a></li> <li><a href="pdf/PDF7">PDF7: Performing OCR on a scanned PDF document to provide actual text</a></li> <li><a href="pdf/PDF8">PDF8: Providing definitions for abbreviations via an E entry for a structure element</a></li> <li><a href="pdf/PDF9">PDF9: Providing headings by marking content with heading tags in PDF documents</a></li> <li><a href="pdf/PDF10">PDF10: Providing labels for interactive form controls in PDF documents</a></li> <li><a href="pdf/PDF11">PDF11: Providing links and link text using the Link annotation and the /Link structure element in PDF documents</a></li> <li><a href="pdf/PDF12">PDF12: Providing name, role, value information for form fields in PDF documents</a></li> <li><a href="pdf/PDF13">PDF13: Providing replacement text using the /Alt entry for links in PDF documents</a></li> <li><a href="pdf/PDF14">PDF14: Providing running headers and footers in PDF documents</a></li> <li><a href="pdf/PDF15">PDF15: Providing submit buttons with the submit-form action in PDF forms</a></li> <li><a href="pdf/PDF16">PDF16: Setting the default language using the /Lang entry in the document catalog of a PDF document</a></li> <li><a href="pdf/PDF17">PDF17: Specifying consistent page numbering for PDF documents</a></li> <li><a href="pdf/PDF18">PDF18: Specifying the document title using the Title entry in the document information dictionary of a PDF document</a></li> <li><a href="pdf/PDF19">PDF19: Specifying the language for a passage or phrase with the Lang entry in PDF documents</a></li> <li><a href="pdf/PDF20">PDF20: Using Adobe Acrobat Pro's Table Editor to repair mistagged tables</a></li> <li><a href="pdf/PDF21">PDF21: Using List tags for lists in PDF documents</a></li> <li><a href="pdf/PDF22">PDF22: Indicating when user input falls outside the required format or values in PDF forms</a></li> <li><a href="pdf/PDF23">PDF23: Providing interactive form controls in PDF documents</a></li> </ul> <h2 id="server-side-script">Server-Side Script Techniques<span class="permalink"><a href="#server-side-script" aria-label="Permalink for Server-Side Script Techniques" title="Permalink for Server-Side Script Techniques"><span>§</span></a></span></h2> <ul class="toc-wcag-docs"> <li><a href="server-side-script/SVR1">SVR1: Implementing automatic redirects on the server side instead of on the client side</a></li> <li><a href="server-side-script/SVR2">SVR2: Using .htaccess to ensure that the only way to access non-conforming content is from conforming content</a></li> <li><a href="server-side-script/SVR3">SVR3: Using HTTP referer to ensure that the only way to access non-conforming content is from conforming content</a></li> <li><a href="server-side-script/SVR4">SVR4: Allowing users to provide preferences for the display of conforming alternate versions</a></li> <li><a href="server-side-script/SVR5">SVR5: Specifying the default language in the HTTP header</a></li> </ul> <h2 id="smil">SMIL Techniques<span class="permalink"><a href="#smil" aria-label="Permalink for SMIL Techniques" title="Permalink for SMIL Techniques"><span>§</span></a></span></h2> <ul class="toc-wcag-docs"> <li><a href="smil/SM1">SM1: Adding extended audio description in SMIL 1.0</a></li> <li><a href="smil/SM2">SM2: Adding extended audio description in SMIL 2.0</a></li> <li><a href="smil/SM6">SM6: Providing audio description in SMIL 1.0</a></li> <li><a href="smil/SM7">SM7: Providing audio description in SMIL 2.0</a></li> <li><a href="smil/SM11">SM11: Providing captions through synchronized text streams in SMIL 1.0</a></li> <li><a href="smil/SM12">SM12: Providing captions through synchronized text streams in SMIL 2.0</a></li> <li><a href="smil/SM13">SM13: Providing sign language interpretation through synchronized video streams in SMIL 1.0</a></li> <li><a href="smil/SM14">SM14: Providing sign language interpretation through synchronized video streams in SMIL 2.0</a></li> </ul> <h2 id="text">Plain-Text Techniques<span class="permalink"><a href="#text" aria-label="Permalink for Plain-Text Techniques" title="Permalink for Plain-Text Techniques"><span>§</span></a></span></h2> <ul class="toc-wcag-docs"> <li><a href="text/T1">T1: Using standard text formatting conventions for paragraphs</a></li> <li><a href="text/T2">T2: Using standard text formatting conventions for lists</a></li> <li><a href="text/T3">T3: Using standard text formatting conventions for headings</a></li> </ul> <section id="changelog"> <h2>Change Log</h2> <p>A list of new, removed or significantly updated techniques:</p> <ol> <li><time datetime="2024-05-04">4 May 2024</time>: Removed F87 Failure of Success Criterion 1.3.1 due to inserting non-decorative content by using :before and :after pseudo-elements and the 'content' property in CSS</li> <li><time datetime="2020-07-15">15 July 2020</time>: Removed Flash techniques.</li> <li><time datetime="2019-09-12">12 Sept 2019</time>: Added <a href="failures/F105">F105: Failure of Success Criterion 2.5.1 due to providing functionality via a path-based gesture without simple pointer alternative</a></li> <li><time datetime="2019-09-12">12 Sept 2019</time>: Added <a href="failures/F106">F106: Failure due to inability to deactivate motion actuation</a></li> <li><time datetime="2019-09-03">3 Sept 2019</time>: Added <a href="failures/F104">F104: Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text spacing is adjusted</a></li> <li><time datetime="2019-09-03">3 Sept 2019</time>: Added <a href="failures/F103">F103: Failure of Success Criterion 4.1.3 due to providing status messages that cannot be programmatically determined through role or properties</a></li> <li><time datetime="2019-08-06">6 Aug 2019</time>: Added <a href="failures/F102">F102: Failure of Success Criterion 1.4.10 due to content disappearing and not being available when content has reflowed</a></li> <li><time datetime="2019-07-16">16 Jul 2019</time>: Added <a href="general/G216">G216: Providing single point activation for a control slider</a></li> <li><time datetime="2019-07-16">16 Jul 2019</time>: Added <a href="general/G215">G215: Providing controls to achieve the same result as path based or multipoint gestures</a></li> <li><time datetime="2019-07-16">16 Jul 2019</time>: Added <a href="failures/F100">F100: Failure of Success Criterion 1.3.4 due to showing a message asking to reorient device</a></li> <li><time datetime="2019-07-16">16 Jul 2019</time>: Added <a href="general/G214">G214: Using a control to allow access to content in different orientations which is otherwise restricted</a></li> <li><time datetime="2019-07-10">10 Jul 2019</time>: Added <a href="css/C40">C40: Creating a two-color focus indicator to ensure sufficient contrast with all components</a></li> <li><time datetime="2019-07-10">10 Jul 2019</time>: Added <a href="failures/F99">F99: Failure of Success Criterion 2.1.4 due to implementing character key shortcuts that cannot be turned off or remapped</a></li> <li><time datetime="2019-07-10">10 Jul 2019</time>: Added <a href="client-side-script/SCR39">SCR39: Making content on focus or hover hoverable, dismissible, and persistent</a></li> <li><time datetime="2019-06-18">18 Jun 2019</time>: Added <a href="general/G212">G212: Using native controls to ensure functionality is triggered on the up-event.</a></li> <li><time datetime="2019-06-11">Jun 11 2019</time>: Added <a href="failures/F98">F98: Failure due to interactions being limited to touch-only on touchscreen devices</a></li> <li><time datetime="2019-06-18">18 Jun 2019</time>: Added <a href="general/G213">G213: Provide conventional controls and an application setting for motion activated input</a></li> <li><time datetime="2019-05-25">25 May 2019</time>: Added <a href="aria/ARIA24">ARIA24: Semantically identifying a font icon with role="img"</a></li> <li><time datetime="2019-04-20">26 Apr 2019</time>: Added <a href="failures/F97">F97: Failure due to locking the orientation to landscape or portrait view</a></li> <li><time datetime="2019-02-26">26 Feb 2019</time>: Removed <a href="failures/F52">F52: Failure of Success Criterion 3.2.5 due to opening a new window as soon as a new page is loaded</a> from SC 3.2.1 (still attached to SC 3.2.5)</li> <li><time datetime="2019-02-26">26 Feb 2019</time>: Added <a href="general/G209">G209: Provide sufficient contrast at the boundaries between adjoining colors</a></li> <li><time datetime="2019-01-10">10 Jan 2019</time>: Added <a href="css/C39">C39: Using the CSS reduce-motion query to prevent motion</a></li> <li><time datetime="2018-12-14">14 Dec 2018</time>: Added <a href="general/G207">G207: Ensuring that a contrast ratio of 3:1 is provided for icons</a></li> <li><time datetime="2018-11-13">30 Nov 2018</time>: Added <a href="css/C38">C38: Using CSS width, max-width and flexbox to fit labels and inputs</a></li> <li><time datetime="2018-11-30">30 Nov 2018</time>: Added <a href="failures/F95">F95: Failure of Success Criterion 1.4.13 due to content shown on hover not being hoverable</a></li> <li><time datetime="2018-11-13">13 Nov 2018</time>: Added <a href="css/C34">C34: Using media queries to un-fixing sticky headers / footers</a></li> <li><time datetime="2018-11-13">13 Nov 2018</time>: Added <a href="css/C36">C36: Allowing for text spacing override</a></li> <li><time datetime="2018-11-13">13 Nov 2018</time>: Added <a href="css/C37">C37: Using CSS max-width and height to fit images</a></li> <li><time datetime="2018-11-30">30 Nov 2018</time>: Added <a href="general/G207">G207: Ensuring that a contrast ratio of 3:1 is provided for icons</a></li> <li><time datetime="2018-11-30">30 Nov 2018</time>: Added <a href="failures/F95">F95: Failure of Success Criterion 1.4.13 due to content shown on hover not being hoverable</a></li> <li><time datetime="2018-11-30">30 Nov 2018</time>: Added <a href="failures/F96">F96: Failure due to the accessible name not containing the visible label text</a></li> <li><time datetime="2018-11-30">30 Nov 2018</time>: Added <a href="css/C38">C38: Using CSS width, max-width and flexbox to fit labels and inputs</a></li> <li><time datetime="2018-12-14">14 Dec 2018</time>: Added <a href="general/G207">G207: Ensuring that a contrast ratio of 3:1 is provided for icons</a></li> </ol> <p>For a more detailed view of recent changes to the informative documents see the <a href="https://github.com/w3c/wcag/commits/master">github updates</a>.</p> </section> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up " viewBox="0 0 26 28"> <path d="M25.172 15.172c0 0.531-0.219 1.031-0.578 1.406l-1.172 1.172c-0.375 0.375-0.891 0.594-1.422 0.594s-1.047-0.219-1.406-0.594l-4.594-4.578v11c0 1.125-0.938 1.828-2 1.828h-2c-1.062 0-2-0.703-2-1.828v-11l-4.594 4.578c-0.359 0.375-0.875 0.594-1.406 0.594s-1.047-0.219-1.406-0.594l-1.172-1.172c-0.375-0.375-0.594-0.875-0.594-1.406s0.219-1.047 0.594-1.422l10.172-10.172c0.359-0.375 0.875-0.578 1.406-0.578s1.047 0.203 1.422 0.578l10.172 10.172c0.359 0.375 0.578 0.891 0.578 1.422z"></path></svg> Back to Top </span></a> </main> </div> <script> var translationStrings = {}; /* fix WAI JS */ </script> <script src="https://www.w3.org/WAI/assets/scripts/main.js"></script> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner" style="grid-column: 2 / 8"> <p><strong>Date:</strong> Updated 12 June 2024.</p> <p><strong>Developed by</strong> <a href="https://www.w3.org/groups/wg/ag/participants">Accessibility Guidelines Working Group (AG WG) Participants</a> (Co-Chairs: Alastair Campbell, Charles Adams, Rachael Bradley Montgomery. W3C Staff Contact: Kevin White). </p> <p>The content was developed as part of the <a href="https://www.w3.org/WAI/about/projects/#us">WAI-Core projects</a> funded by U.S. Federal funds. The user interface was designed by the Education and Outreach Working Group (<a href="https://www.w3.org/groups/wg/eowg/participants">EOWG</a>) with contributions from Shadi Abou-Zahra, Steve Lee, and Shawn Lawton Henry as part of the <a href="https://www.w3.org/WAI/about/projects/wai-guide/">WAI-Guide</a> project, co-funded by the European Commission. </p> </div> </footer> <footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" dir="auto" translate="no" lang="en">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" dir="auto" translate="no" lang="en"> <ul> <li><a href="https://twitter.com/w3c_wai"><svg focusable="false" aria-hidden="true" class="icon-twitter " viewBox="0 0 32 32"><path d="M31.939 6.092c-1.18 0.519-2.44 0.872-3.767 1.033 1.352-0.815 2.392-2.099 2.884-3.631-1.268 0.74-2.673 1.279-4.169 1.579-1.195-1.279-2.897-2.079-4.788-2.079-3.623 0-6.56 2.937-6.56 6.556 0 0.52 0.060 1.020 0.169 1.499-5.453-0.257-10.287-2.876-13.521-6.835-0.569 0.963-0.888 2.081-0.888 3.3 0 2.28 1.16 4.284 2.917 5.461-1.076-0.035-2.088-0.331-2.971-0.821v0.081c0 3.18 2.257 5.832 5.261 6.436-0.551 0.148-1.132 0.228-1.728 0.228-0.419 0-0.82-0.040-1.221-0.115 0.841 2.604 3.26 4.503 6.139 4.556-2.24 1.759-5.079 2.807-8.136 2.807-0.52 0-1.039-0.031-1.56-0.089 2.919 1.859 6.357 2.945 10.076 2.945 12.072 0 18.665-9.995 18.665-18.648 0-0.279 0-0.56-0.020-0.84 1.281-0.919 2.4-2.080 3.28-3.397l-0.063-0.027z"></path></svg> Twitter</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss " viewBox="0 0 32 32"><path d="M25.599 32c0-14.044-11.555-25.6-25.599-25.6v-6.4c17.553 0 32 14.447 32 32h-6.401zM4.388 23.22c2.419 0 4.391 1.972 4.391 4.393 0 2.417-1.98 4.387-4.401 4.387-2.417 0-4.377-1.965-4.377-4.387s1.967-4.392 4.388-4.393zM21.212 32h-6.22c0-8.225-6.767-14.993-14.992-14.993v-6.22c11.636 0 21.212 9.579 21.212 21.213z"></path></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlistsv"><svg focusable="false" aria-hidden="true" class="icon-youtube " viewBox="0 0 32 32"><path d="M31.327 8.273c-0.386-1.353-1.431-2.398-2.756-2.777l-0.028-0.007c-2.493-0.668-12.528-0.668-12.528-0.668s-10.009-0.013-12.528 0.668c-1.353 0.386-2.398 1.431-2.777 2.756l-0.007 0.028c-0.443 2.281-0.696 4.903-0.696 7.585 0 0.054 0 0.109 0 0.163l-0-0.008c-0 0.037-0 0.082-0 0.126 0 2.682 0.253 5.304 0.737 7.845l-0.041-0.26c0.386 1.353 1.431 2.398 2.756 2.777l0.028 0.007c2.491 0.669 12.528 0.669 12.528 0.669s10.008 0 12.528-0.669c1.353-0.386 2.398-1.431 2.777-2.756l0.007-0.028c0.425-2.233 0.668-4.803 0.668-7.429 0-0.099-0-0.198-0.001-0.297l0 0.015c0.001-0.092 0.001-0.201 0.001-0.31 0-2.626-0.243-5.196-0.708-7.687l0.040 0.258zM12.812 20.801v-9.591l8.352 4.803z"></path></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div dir="auto" translate="no" lang="en"> <p>Copyright © 2024 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div dir="auto" translate="no" class="q4-start q4-end" lang="en"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> </body></html>