CINXE.COM

<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr" prefix="og: http://ogp.me/ns#"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script> document.documentElement.className = document.documentElement.className.replace('no-js', 'has-js'); function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "/WAI/assets/scripts/main.js?1732321439590790613"; document.body.appendChild(element); } window.addEventListener("load", downloadJSAtOnload, false); </script> <link rel="stylesheet" href="/WAI/assets/css/style.css?1732321439590790613"> <title> Session 5: Accessibility Data Browser | Web Accessibility Initiative (WAI) | W3C</title> <meta name="generator" content="Jekyll v4.3.3" /> <meta property="og:title" content="Session 5: Accessibility Data Browser" /> <meta name="author" content="W3C Web Accessibility Initiative (WAI)" /> <meta property="og:locale" content="en" /> <meta name="description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <meta property="og:description" content="Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI)." /> <link rel="canonical" href="https://www.w3.org/WAI/about/projects/wai-tools/session5/" /> <meta property="og:url" content="https://www.w3.org/WAI/about/projects/wai-tools/session5/" /> <meta property="og:site_name" content="Web Accessibility Initiative (WAI)" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:title" content="Session 5: Accessibility Data Browser" /> <meta name="twitter:site" content="@w3c_wai" /> <meta name="twitter:creator" content="@W3C Web Accessibility Initiative (WAI)" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","author":{"@type":"Person","name":"W3C Web Accessibility Initiative (WAI)"},"description":"Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).","headline":"Session 5: Accessibility Data Browser","url":"https://www.w3.org/WAI/about/projects/wai-tools/session5/"}</script>  <meta name="twitter:image" property="og:image" content="https://www.w3.org/WAI/assets/images/social-sharing-default.jpg"> <link rel="alternate" type="application/rss+xml" href="/WAI/feed.xml"> </head> <body id="top" class="page-session-5-accessibility-data-browser "> <nav aria-label="Skip Link and Language Selector" id="controls" class="default-grid"> <ul> <li><a href="#main">Skip to Content</a></li> <li class="opt"> <a href="/WAI/meta/customize/">Change Text Size or Colors</a> </li> <li class="opt"> <a href="/WAI/translations/">All Translations <svg focusable="false" aria-hidden="true" class="icon-translations "><use xlink:href="/WAI/assets/images/icons.svg#icon-translations"></use></svg></a> </li> </ul></nav> <header id="site-header" class="default-grid with-gap"> <div class="logos"> <a lang="en" class="home w3c" href="https://www.w3.org/"> <svg role="img" aria-label="W3C" viewBox="0 0 68 34" xmlns="http://www.w3.org/2000/svg"><g><path d="m16.117 1.006 5.759 19.58 5.759-19.58h4.17 11.444v1.946l-5.879 10.128c2.065.663 3.627 1.868 4.686 3.615 1.059 1.748 1.589 3.799 1.589 6.155 0 2.914-.775 5.363-2.324 7.348s-3.555 2.978-6.017 2.978c-1.854 0-3.469-.589-4.845-1.767-1.377-1.178-2.396-2.773-3.058-4.786l3.256-1.35c.477 1.218 1.106 2.178 1.887 2.879.781.702 1.701 1.052 2.76 1.052 1.112 0 2.052-.622 2.82-1.866.768-1.245 1.152-2.74 1.152-4.489 0-1.933-.411-3.429-1.231-4.488-.954-1.244-2.45-1.867-4.489-1.867h-1.588v-1.906l5.56-9.612h-6.712l-.382.65-8.163 27.548h-.397l-5.958-19.937-5.957 19.937h-.397l-9.53-32.168h4.17l5.759 19.58 3.892-13.185-1.906-6.395z"/><path d="m64.92 1.006c-.819 0-1.554.295-2.111.861-.591.6-.92 1.376-.92 2.178s.313 1.545.887 2.128c.583.591 1.334.912 2.145.912.793 0 1.562-.321 2.161-.903.574-.557.887-1.3.887-2.136 0-.811-.321-1.57-.878-2.136-.584-.592-1.344-.904-2.171-.904zm2.643 3.065c0 .701-.271 1.351-.768 1.832-.524.507-1.174.777-1.892.777-.675 0-1.342-.278-1.84-.785s-.777-1.157-.777-1.849.287-1.368.802-1.891c.481-.49 1.131-.751 1.84-.751.726 0 1.376.271 1.883.785.49.489.752 1.147.752 1.882zm-2.559-1.807h-1.3v3.445h.65v-1.469h.642l.701 1.469h.726l-.769-1.57c.498-.102.785-.439.785-.929 0-.625-.472-.946-1.435-.946zm-.118.422c.608 0 .886.169.886.591 0 .405-.278.549-.87.549h-.549v-1.14z"/><path d="m59.807.825.676 4.107-2.391 4.575s-.918-1.941-2.443-3.015c-1.285-.905-2.122-1.102-3.431-.832-1.681.347-3.587 2.357-4.419 4.835-.995 2.965-1.005 4.4-1.04 5.718-.056 2.113.277 3.362.277 3.362s-1.452-2.686-1.438-6.62c.009-2.808.451-5.354 1.75-7.867 1.143-2.209 2.842-3.535 4.35-3.691 1.559-.161 2.791.59 3.743 1.403 1 .854 2.01 2.721 2.01 2.721z"/><path d="m60.102 24.063s-1.057 1.889-1.715 2.617c-.659.728-1.837 2.01-3.292 2.651s-2.218.762-3.656.624c-1.437-.138-2.772-.97-3.24-1.317s-1.664-1.369-2.34-2.322-1.733-2.859-1.733-2.859.589 1.91.958 2.721c.212.467.864 1.894 1.789 3.136.863 1.159 2.539 3.154 5.086 3.604 2.547.451 4.297-.693 4.73-.97s1.346-1.042 1.924-1.66c.603-.645 1.174-1.468 1.49-1.962.231-.36.607-1.092.607-1.092z"/></g></svg> </a> <a lang="en" class="home" href="/WAI/"> <span class="wai"><span class="wa">Web Accessibility</span> <span class="i"><span class="initieative">Initiative</span> <span>WAI</span></span></span> </a> <div class="claim"> <span>Strategies, standards, resources to make the Web accessible to people with disabilities</span> </div> <button class="button button-menu" aria-haspopup="true" aria-expanded="false" id="openmenu"><span><svg focusable="false" aria-hidden="true" class="icon-menu "><use xlink:href="/WAI/assets/images/icons.svg#icon-menu"></use></svg> Menu</span></button> </div> <div class="navigations"> <nav class="metanav" aria-label="Meta & Search" lang="en"> <ul> <li><a href="/WAI/about/participating/">Get Involved</a></li> <li><a href="/WAI/about/">About W3C WAI</a></li> <li> <form action="/WAI/search/" role="search"> <div> <label for="header-search"> <span class="visuallyhidden">Search:</span> <input id="header-search" type="search" name="q" placeholder="Search" aria-label="Search"> </label> <button class="button button-icon button-nobg button-noborder"><span><svg focusable="false" aria-label="Submit Search" class="icon-search "><use xlink:href="/WAI/assets/images/icons.svg#icon-search"></use></svg></span></button> </div> </form> </li> </ul> </nav> </div> </header><nav class="mainnav" aria-label="Main" lang="en"><ul><li><a lang="en" href="/WAI/fundamentals/"><span>Accessibility Fundamentals</span></a></li><li><a lang="en" href="/WAI/planning/"><span>Planning & Policies</span></a></li><li><a lang="en" href="/WAI/design-develop/"><span>Design & Develop</span></a></li><li><a lang="en" href="/WAI/test-evaluate/"><span>Test & Evaluate</span></a></li><li><a lang="en" href="/WAI/teach-advocate/"><span>Teach & Advocate</span></a></li><li><a lang="en" href="/WAI/standards-guidelines/"><span>Standards/<wbr>Guidelines</span></a></li></ul></nav><nav class="default-grid breadcrumb" aria-label="Breadcrumb" lang="en"> <ul style="align-self: center;"> <li><a href="/WAI/" lang="en">Home</a></li><li><a lang="en" href="/WAI/about/"><span>About W3C WAI</span></a></li><li><a lang="en" href="/WAI/about/projects/"><span>Projects</span></a></li><li><a lang="en" href="/WAI/about/projects/wai-tools/"><span>WAI-Tools</span></a></li><li><a lang="en" href="/WAI/about/projects/wai-tools/session5/" aria-current="page"><span>Video Recording 5</span></a></li></ul> </nav> <div class="default-grid with-gap leftcol"> <div class="sidenav"><nav class="sn-contents" aria-label="Secondary"> <ul class="sidenav--list"> <li> <a lang="en" href="/WAI/about/" class="page-link"><span>About WAI</span></a></li><li> <a lang="en" href="/WAI/update/" class="page-link"><span>What We're Working On</span></a></li><li> <a lang="en" href="/WAI/about/participating/" class="page-link"><span>Participating</span></a></li><li> <a lang="en" href="/WAI/about/groups/" class="page-link"><span>Groups</span></a><ul><li> <a lang="en" href="/WAI/about/groups/agwg/" class="page-link"><span>AGWG: Accessibility Guidelines <abbr title="Working Group">WG</abbr></span></a><ul><li> <a lang="en" href="https://www.w3.org/WAI/GL/charter" class="page-link"><span>Charter</span></a></li><li> <a lang="en" href="/WAI/about/groups/agwg/task-forces/" class="page-link"><span>Task Forces</span></a></li><li> <a lang="en" href="/WAI/about/groups/agwg/decision-policy/" class="page-link"><span>Decision Policy</span></a></li><li> <a lang="en" href="/WAI/about/groups/agwg/communication/" class="page-link"><span>Communication</span></a></li><li> <a lang="en" href="/WAI/about/groups/agwg/participate/" class="page-link"><span>How to Participate (Join)</span></a></li></ul></li><li> <a lang="en" href="/WAI/about/groups/apawg/" class="page-link"><span>APA: Accessible Platform <abbr title="Working Group">WG</abbr></span></a><ul><li> <a lang="en" href="https://www.w3.org/2023/07/apa-wg-charter" class="page-link"><span>Charter</span></a></li><li> <a lang="en" href="/WAI/about/groups/apawg/task-forces/" class="page-link"><span>Task Forces</span></a></li><li> <a lang="en" href="/WAI/about/groups/apawg/decision-policy/" class="page-link"><span>Decision Policy</span></a></li><li> <a lang="en" href="/WAI/about/groups/apawg/deliverables/" class="page-link"><span>Deliverables and Status</span></a></li><li> <a lang="en" href="/WAI/about/groups/apawg/video-examples/" class="page-link"><span>APA Video Examples</span></a></li><li> <a lang="en" href="/WAI/about/groups/apawg/communication/" class="page-link"><span>Communication</span></a></li><li> <a lang="en" href="/WAI/about/groups/apawg/contribute/" class="page-link"><span>How to Contribute</span></a></li><li> <a lang="en" href="/WAI/about/groups/apawg/participate/" class="page-link"><span>How to Participate (Join)</span></a></li></ul></li><li> <a lang="en" href="/WAI/about/groups/ariawg/" class="page-link"><span>ARIA: Accessible Rich Internet Applications <abbr title="Working Group">WG</abbr></span></a><ul><li> <a lang="en" href="https://www.w3.org/WAI/ARIA/charter" class="page-link"><span>Charter</span></a></li><li> <a lang="en" href="/WAI/about/groups/ariawg/task-forces/" class="page-link"><span>Task Forces</span></a></li><li> <a lang="en" href="/WAI/about/groups/ariawg/decision-policy/" class="page-link"><span>Decision Policy</span></a></li><li> <a lang="en" href="/WAI/about/groups/ariawg/workflow/" class="page-link"><span>Workflow</span></a></li><li> <a lang="en" href="/WAI/about/groups/ariawg/roadmap/" class="page-link"><span>Roadmap</span></a></li><li> <a lang="en" href="/WAI/about/groups/ariawg/planning/" class="page-link"><span>Deliverables and Status</span></a></li><li> <a lang="en" href="/WAI/about/groups/ariawg/communication/" class="page-link"><span>Communication</span></a></li><li> <a lang="en" href="/WAI/about/groups/ariawg/editors/" class="page-link"><span>Editors</span></a></li><li> <a lang="en" href="/WAI/about/groups/ariawg/contribute/" class="page-link"><span>How to Contribute</span></a></li><li> <a lang="en" href="/WAI/about/groups/ariawg/participate/" class="page-link"><span>How to Participate (Join)</span></a></li></ul></li><li> <a lang="en" href="/WAI/about/groups/waiig/" class="page-link"><span>WAI IG: WAI Interest Group</span></a></li><li> <a lang="en" href="/WAI/about/groups/task-forces/" class="page-link"><span>Group Task Forces</span></a><ul><li> <a lang="en" href="/WAI/about/groups/task-forces/conformance-testing/" class="page-link"><span>ACT: Accessibility Conformance Testing <abbr title="Task Force">TF</abbr></span></a></li><li> <a lang="en" href="/WAI/about/groups/task-forces/practices/" class="page-link"><span>APG: ARIA Authoring Practices <abbr title="Task Force">TF</abbr></span></a></li><li> <a lang="en" href="/WAI/about/groups/task-forces/coga/" class="page-link"><span>COGA: Cognitive and Learning Disabilities <abbr title="Task Force">TF</abbr></span></a></li><li> <a lang="en" href="/WAI/about/groups/task-forces/css-a11y/" class="page-link"><span>CSS A11Y: CSS Accessibility <abbr title="Task Force">TF</abbr></span></a></li><li> <a lang="en" href="/WAI/about/groups/task-forces/low-vision-a11y-tf/" class="page-link"><span>LVTF: Low Vision Accessibility <abbr title="Task Force">TF</abbr></span></a></li><li> <a lang="en" href="/WAI/about/groups/task-forces/matf/" class="page-link"><span>MATF: Mobile Accessibility <abbr title="Task Force">TF</abbr></span></a></li><li> <a lang="en" href="/WAI/about/groups/task-forces/maturity-model/" class="page-link"><span>MMTF: Maturity Model <abbr title="Task Force">TF</abbr></span></a></li><li> <a lang="en" href="/WAI/about/groups/task-forces/research-questions/" class="page-link"><span>RQTF: Research Question <abbr title="Task Force">TF</abbr></span></a></li><li> <a lang="en" href="/WAI/about/groups/task-forces/silver/" class="page-link"><span>Silver <abbr title="Task Force">TF</abbr></span></a></li><li> <a lang="en" href="/WAI/about/groups/task-forces/pronunciation/" class="page-link"><span>Spoken Presentation <abbr title="Task Force">TF</abbr></span></a></li><li> <a lang="en" href="/WAI/about/groups/task-forces/adapt/" class="page-link"><span>WAI-Adapt <abbr title="Task Force">TF</abbr></span></a></li><li> <a lang="en" href="/WAI/about/groups/task-forces/wcag2x-backlog/" class="page-link"><span>WCAG 2.x Backlog <abbr title="Task Force">TF</abbr></span></a></li><li> <a lang="en" href="/WAI/about/groups/task-forces/wcag2ict/" class="page-link"><span>WCAG2ICT <abbr title="Task Force">TF</abbr></span></a></li></ul></li></ul></li><li> <a lang="en" href="/WAI/about/translating/" class="page-link"><span>Translating</span></a><ul><li> <a lang="en" href="/WAI/about/translating/resources/" class="page-link"><span>Translating a WAI Resource</span></a><ul><li> <a lang="en" href="/WAI/about/translating/resources/technical-steps/" class="page-link"><span>Technical Steps</span></a></li><li> <a lang="en" href="/WAI/about/translating/resources/using-github/" class="page-link"><span>Using GitHub</span></a></li><li> <a lang="en" href="/WAI/about/translating/resources/subtitles/" class="page-link"><span>Subtitles/Descriptions</span></a></li><li> <a lang="en" href="/WAI/about/translating/resources/images/" class="page-link"><span>Images</span></a></li><li> <a lang="en" href="/WAI/about/translating/resources/resource-specific-instructions/" class="page-link"><span>Resource-Specific Instructions</span></a></li></ul></li><li> <a lang="en" href="/WAI/about/translating/reviewing/" class="page-link"><span>Reviewing a Translation</span></a></li><li> <a lang="en" href="/WAI/about/translating/wcag/" class="page-link"><span>Translating WCAG</span></a><ul><li> <a lang="en" href="/WAI/about/translating/wcag/wcag21-update/" class="page-link"><span>Updating WCAG 2.1 Translations</span></a></li></ul></li><li> <a lang="en" href="/WAI/about/translating/sitemaps/" class="page-link"><span>Translations Sitemaps</span></a><ul><li> <a lang="en" href="/WAI/about/translating/sitemaps/sitemap-ar/" class="page-link"><span>Arabic</span></a></li><li> <a lang="en" href="/WAI/about/translating/sitemaps/sitemap-zh-hans/" class="page-link"><span>Chinese (Simplified)</span></a></li><li> <a lang="en" href="/WAI/about/translating/sitemaps/sitemap-cs/" class="page-link"><span>Czech</span></a></li><li> <a lang="en" href="/WAI/about/translating/sitemaps/sitemap-fr/" class="page-link"><span>French</span></a></li><li> <a lang="en" href="/WAI/about/translating/sitemaps/sitemap-de/" class="page-link"><span>German</span></a></li><li> <a lang="en" href="/WAI/about/translating/sitemaps/sitemap-el/" class="page-link"><span>Greek</span></a></li><li> <a lang="en" href="/WAI/about/translating/sitemaps/sitemap-id/" class="page-link"><span>Indonesian</span></a></li><li> <a lang="en" href="/WAI/about/translating/sitemaps/sitemap-ja/" class="page-link"><span>Japanese</span></a></li><li> <a lang="en" href="/WAI/about/translating/sitemaps/sitemap-ko/" class="page-link"><span>Korean</span></a></li><li> <a lang="en" href="/WAI/about/translating/sitemaps/sitemap-pl/" class="page-link"><span>Polish</span></a></li><li> <a lang="en" href="/WAI/about/translating/sitemaps/sitemap-ru/" class="page-link"><span>Russian</span></a></li><li> <a lang="en" href="/WAI/about/translating/sitemaps/sitemap-es/" class="page-link"><span>Spanish</span></a></li></ul></li></ul></li><li> <a lang="en" href="/WAI/about/sponsoring/" class="page-link"><span>Sponsoring</span></a></li><li> <a lang="en" href="/WAI/about/contacting/" class="page-link"><span>Contacting</span></a></li><li> <a lang="en" href="/WAI/about/projects/" aria-current="location" class="page-link"><span>Projects</span></a><ul><li> <a lang="en" href="/WAI/about/projects/wai-coop/" class="page-link"><span>WAI-CooP</span></a><ul><li> <a lang="en" href="/WAI/about/projects/wai-coop/symposium1/" class="page-link"><span>Research Symposium 2021</span></a></li><li> <a lang="en" href="/WAI/about/projects/wai-coop/symposium2/" class="page-link"><span>Research Symposium AI</span></a></li><li> <a lang="en" href="/WAI/about/projects/wai-coop/symposium3/" class="page-link"><span>Research Symposium Evaluating Accessibility</span></a></li></ul></li><li> <a lang="en" href="/WAI/about/projects/wai-guide/" class="page-link"><span>WAI-Guide</span></a></li><li> <a lang="en" href="/WAI/about/projects/wai-tools/" aria-current="location" class="page-link"><span>WAI-Tools</span></a><ul><li> <a lang="en" href="/WAI/about/projects/wai-tools/final-open-meeting/" class="page-link"><span>Final Open Meeting</span></a></li><li> <a lang="en" href="/WAI/about/projects/wai-tools/session1/" class="page-link"><span>Video Recording 1</span></a></li><li> <a lang="en" href="/WAI/about/projects/wai-tools/session2/" class="page-link"><span>Video Recording 2</span></a></li><li> <a lang="en" href="/WAI/about/projects/wai-tools/session3/" class="page-link"><span>Video Recording 3</span></a></li><li> <a lang="en" href="/WAI/about/projects/wai-tools/session4/" class="page-link"><span>Video Recording 4</span></a></li> <li> <a lang="en" href="/WAI/about/projects/wai-tools/session5/" aria-current="page" class="page-link"><span>Video Recording 5</span></a></li><li> <a lang="en" href="/WAI/about/projects/wai-tools/third-open-meeting/" class="page-link"><span>Third Open Meeting</span></a></li><li> <a lang="en" href="/WAI/about/projects/wai-tools/second-open-meeting/" class="page-link"><span>Second Open Meeting</span></a></li><li> <a lang="en" href="/WAI/about/projects/wai-tools/symposium/" class="page-link"><span>Online Symposium</span></a></li><li> <a lang="en" href="/WAI/about/projects/wai-tools/first-open-meeting/" class="page-link"><span>First Open Meeting</span></a></li></ul></li><li> <a lang="en" href="/WAI/expand-access/" class="page-link"><span>WAI Expanding Access</span></a></li><li> <a lang="en" href="/WAI/about/projects/easy-reading/" class="page-link"><span>Easy Reading</span></a></li><li> <a lang="en" href="/WAI/about/projects/wai-core-2015/" class="page-link"><span>WAI-Core 2015, 2020</span></a></li><li> <a lang="en" href="/WAI/about/projects/wai-core-ford/" class="page-link"><span>WAI-Core Ford</span></a></li></ul></li><li> <a lang="en" href="/WAI/about/accessibility-statement/" class="page-link"><span>Accessibility Statement</span></a></li><li> <a lang="en" href="/WAI/about/using-wai-material/" class="page-link"><span>Using WAI Material</span></a></li></ul></nav> </div> <main id="main" lang="en"> <header> <h1> Session 5: Accessibility Data Browser </h1></header> <div class="video-container" data-video-type="" dir="ltr"> <video preload="metadata" data-youtube-id="iv1sHHjh3zo" data-youtube-nocookie="true" data-description-audible="false"><track src="/WAI/content-images/about/wai-tools/video5.vtt" label="English" kind="captions" srclang="en" default="" /></video> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script> <script src="/WAI/assets/ableplayer/build/ableplayer.min.js"></script> <script> var youTubeDataAPIKey = "AIzaSyBzq155tA3E3gaYlRdx2S9U9FM78U1-568"; var googleApiReady = false; function initGoogleClientApi() { googleApiReady = true; } </script> <script src="//apis.google.com/js/client.js?onload=initGoogleClientApi"></script> <script> (function () { 'use strict'; var player1 = new AblePlayer($('[data-video-type=""] video')); var player2 = new AblePlayer($('[data-video-type="audio-described"] video')); function addclass(el, className) { if (el.classList) { el.classList.add(className); } else { if(! hasclass(el, className)){ el.className += ' ' + className; } } } function removeclass(el, className) { if (el.classList) { el.classList.remove(className); } else { el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); } } function hasclass(el, className) { if (el.classList) { return el.classList.contains(className); } else { return new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); } } var audiodescribed = document.querySelectorAll('[data-video-type="audio-described"]'); if (audiodescribed) { Array.prototype.forEach.call(audiodescribed, function(el, i){ el.setAttribute('hidden', true); }); var adbutton = document.querySelector('#audio_description_button'); adbutton.addEventListener('click', function(e){ player1.pauseMedia(); player2.pauseMedia(); if (e.target.getAttribute('data-status') == "audio-described") { var videos = document.querySelectorAll('.video-container'); Array.prototype.forEach.call(videos, function(el, i){ el.removeAttribute("hidden"); }); var nonaudiodescribed = document.querySelectorAll('[data-video-type="audio-described"]'); Array.prototype.forEach.call(nonaudiodescribed, function(el, i){ el.setAttribute('hidden', true); }); e.target.setAttribute('data-status', 'non-audio-described'); e.target.querySelector('span').innerHTML = 'Enable Audio Description'; } else { var videos = document.querySelectorAll('.video-container'); Array.prototype.forEach.call(videos, function(el, i){ el.setAttribute('hidden', true); }); var nonaudiodescribed = document.querySelectorAll('[data-video-type="audio-described"]'); Array.prototype.forEach.call(nonaudiodescribed, function(el, i){ el.removeAttribute("hidden"); }); e.target.setAttribute('data-status', 'audio-described'); e.target.querySelector('span').innerHTML = 'Disable Audio Description'; } }); } }()); </script> <p>This video information is available:</p> <ul> <li>As a <strong><a href="#transcript">Text Transcript with Description of Visuals</a></strong> below</li> <li><a href="https://www.youtube.com/watch?v=iv1sHHjh3zo">On YouTube</a></li> <li>On a W3C server — <a href="http://media.w3.org/wai/wai-tools-project/x05%20WAI-Tools%20Data%20Browser.mp4">video (file format: MP4, file size: 71MB)</a>, <a href="http://media.w3.org/wai/wai-tools-project/x05%20WAI-Tools%20Data%20Browser.vtt">English captions file (VTT)</a></li> </ul> <h2 id="audio-description">Audio Description</h2> <p>This video does not include audio description because the visuals only support the audio and do not provide additional information. In this case, audio description would be more distracting than useful to most people, including people who cannot see the visuals. The Transcript with Description below includes descriptions of the supporting visuals.</p> <h2 id="transcript">Text Transcript with Description of Visuals</h2> <p>This is video is accompanied by <strong><a href="https://www.w3.org/WAI/Tools/slides/meeting4/05%20WAI-Tools%20Data%20Browser.pptx">slides 05 <svg focusable="false" aria-label="External Site" class="icon-external-link "><use xlink:href="/WAI/assets/images/icons.svg#icon-external-link"></use></svg></a></strong></p> <table> <thead> <tr> <th>Visual</th> <th width="65%">Audio</th> </tr> </thead> <tbody> <tr> <td>[Carlos speaking] <br /> Title Slide: Test Data Browser</td> <td>All right. So as Shadi mentioned, earlier in the project we tried to think of ways that we could use all the data that might come out of tools that implementation rules and other open data formats, and it was one of our goals to propose a prototype that could show how we could browse the large amounts of accessibility testing data that might become available in such a future.</td> </tr> <tr> <td>Slide 1: Objectives</td> <td>So for this, we tried to look at this from the perspective of someone that's responsible for monitoring efforts, and so we asked ourselves: How can we leverage the support of open data for those monitoring bodies? And we came up with this prototype, and we emphasize this. It is a prototype. It's not something that's production ready, but we developed this as a way to support future explorations of what can such a tool offer.</td> </tr> <tr> <td>Slide 1: Objectives</td> <td>So let me start by addressing what types of data did we consider for this prototype. So to begin with, we need to get data from somewhere, and we can see there are two sources. First, the accessibility evaluation reports that we have been listening to. So these evaluation reports are written using EARL so that we can import them. So something that's an output of an Axe evaluation and Alfa evaluation or a QualWeb evaluation, all tools that can output their evaluation reports in EARL we could import that to this browser. <br /> And, second, all the accessibility statements. We included statements that use the open format, both the one that Eric just presented and that was developed as part of the project, but also the one that we adapted to be used in Portugal. <br /> And from both of these sources, we collect an interesting variety of data. So we extract from these sources data on success criteria, on the elements that have been assessed on the ACT Rules that were used to check if the tool uses ACT Rules, the assertions that were made, and the outcomes of those assertions. And so that we can browse this, we have also added the five -- a set of metadata that can be used to categorize and support this evaluation data. So here we can see the continent, country, the category of the website or the mobile app owner. So if it's a private or a public entity, the sector where the entity operates in, and even what evaluation tool it was used to produce the report.</td> </tr> <tr> <td>Slide 2: Features</td> <td>And we in the tool designed a number of visualizations. So you will be able to see -- we'll do a short demo after the slide. So most data is presented using bar charts with -- that are grouped by the assertions or the success criteria. <br /> We -- besides the bar charts, we have a table. We provide access to a table with the equivalent data of the bar charts, but we made an effort so that all the charts are keyboard navigable, and we also include a timeline view so that it's easier to get this grasping of how the different metrics have evolved over time.</td> </tr> <tr> <td>Live demo of PLACM</td> <td>And I think it's best to illustrate the different ways that we can interact with the demo, with the data, by showing you a demo. So let me switch to new -- a new window. Okay. And so now this is the -- the initial page that you access when you enter this tool. <br /> Here we have -- let me start with a disclaimer. All the data that's being presented in this demo was randomly generated, including the name of websites and the evaluation tools, so everything has been randomly generated. And the volume of data that we have here is representative of the number of evaluations that a country the size of Portugal can expect to have in their monitoring process. <br /> So as I was saying, this is the initial visualization. You get a chart grouped by pages that have been evaluated over different continents. We start at the continent level. You can include information about the assertions, the passed assertions, the failed assertions, the ones that the tool can't tell if they have passed or failed, the inapplicable ones, and the untested ones. So similar to what Eric just showed previously. <br /> You can, instead of showing assertions, show the information based on success criteria. So passed, fail, can't tell, inapplicable, and untested criteria. And let me go back to assertions and move this Zoom window to another place and show you the data table that we have. Basically, the same data that you have in the bar charts can be presented in the tabular format. <br /> Okay. So if you want to see data grouped by country, you just pick that on that sidebar. And now that's -- instead of just seeing, okay, like, seeing everything on the sector page, I just want to know information about the two -- the testability of the private and public sectors in the British Indian Ocean territory. So I just select that bar, and I can drill down on sector information on the model window that shows up. And now I have the information about just the British Indian Ocean territory grouped by private sector and public sector, and I can compare that. <br /> So if I want to see all data about sectors, I can just press there. And I see, okay, I have over 4,000 pages on the private sector and over 3,000 pages on the public sector. <br /> And now let's say I want to compare data of the public sector onto specific countries. So instead of drilling down, I want to group by this -- a way to group this kind of data using another category and, say, okay, let me group this, for instance, France and Luxembourg. Okay. So I can now see the data on public sector bodies only. So we're comparing sector public grouped by two countries, France and Luxembourg. And in this visualization I can have them both at the same time. <br /> Let me move to another class. Let me see. We can see tags or categories. Here we have, once again, randomized data. Don't forget if I want to see how health how the health sector has been doing over time, I can just, once again, select this on the bar charts. Sorry. And then I can go and do -- and select the timeline option, which will show me for every month that I have collected data on this -- on websites or mobile apps that have been tagged as health, I can see the data here. <br /> Let me go back to tag and show you how I can compare, for instance, data on the health and the media sector. So here I can use the comparison and health, which is the one that I've selected it already. Previously selected. And now I can also select media, and the comparison page will show me, okay, the number of pages that have been evaluated and the passed assertions, failed assertions, can't tell assertions, inapplicable, and untested assertions for both sectors side by side so that I can compare them. <br /> Let me just present one more feature. If I go -- this is specific at this level. If I go to the application website and I change my visualization from the assertions to the success criteria, now I can have access to specific tests of each success criteria for one application. So we can see here for the front applications of the fair success criteria, and I'm going to select here this application or website, whatever. <br /> And I have this -- it's only in this view that I have this option here, the Details option. So if I go to the Details page, now I have -- okay, for this application or website, I know that passed the success criteria, and I can see the different tests that tell me that, and I see that it failed this success criteria. And, once again, I have access to the different tests where it fails. <br /> So we can, in fact, go all the way up from a grouping of the data by continent to specific assertions of one application. So this shows us the range that we can have just by visualizing data that's made available from this -- from these tools.</td> </tr> <tr> <td>Slide 3: Thank you</td> <td>So let me go back to the slides and just -- I've finished my presentation. <br /> So all of this is open source. You can play with this demo. It's available at www.qualweb.di.fc.ul.pt/placm/test. The source code will be really soon available at this rep. It's not there yet because we're moving this to a dedicated repository for this -- for these tools. So you will be able to find it at GitHub.com/carlosapaduarte. That's -- C-A-R-L-O-S-A-P-A-D-U-A-R-T-E /placm. Okay? <br /> And if you have any questions or any problems getting this to run, you can get in touch with me at caduarte@campus.ul.pt. <br /> And thank you. I think I've gone a little bit over my time. Sorry for that, Shadi.</td> </tr> <tr> <td>[Shadi speaking]</td> <td>No. You're spot on. Thank you, Carlos. <br /> And as I told folks earlier on, this is a bit more aspirational part. So just to recap, we looked at, you know, in the morning of these many, many small rules, right, that test very, very specific parts. And we looked at so called implementation reports for these. So how do we collect information from these different rules and the tools and the methodologies implemented? And then if we can aggregate that on a, say, monitoring body level or, you know, even more widely, can we collect all this data, all this information? <br /> I understand this seems a bit more futuristic, but, you know, why not think about that. Public websites are required to be public. The monitoring of their reports is required to happen. If we can provide this open data, we can look more -- and this is not about shaming people. This is about analyzing where are there issues, which particular sectors need more support, need more training and advocation, and, you know, Member States or countries or even organizations. It could be on an organization level could use that to improve their actions and what they're doing to make sure accessibility is implemented. <br /> So the key word here is EARL, the evaluation and report language. This is a format to write down test results, basically. I'll read out the GitHub URL for that, where you can go and see that syntax for writing such results. So it's github.com/w3c/earl, E A R L, Evaluation And Report Language. <br /> Okay. We had a question for you, Carlos. My master's student is studying the Portuguese public libraries website accessibility. He has full list of public libraries' addresses. Can he import the list to test data browser and do a summary analysis of all of them?</td> </tr> <tr> <td>[Carlos speaking]</td> <td>No. No. Because this, too, does not do the accessibility evaluation. If you have the accessibility evaluation of all of those libraries in EARL format, as Shadi was just mentioning, yes, then you can import those reports and use this tool to go over and do the -- what kind of analysis that you want to do.</td> </tr> </tbody> </table> <aside class="box box-icon box-space-above" id="helpimprove" aria-label="feedback"><header class="box-h box-h-icon box-h-space-above box-h-icon"> <svg focusable="false" aria-hidden="true" class="icon-comments "><use xlink:href="/WAI/assets/images/icons.svg#icon-comments"></use></svg> <h2> Help improve this page </h2></header><div class="box-i"><p>Please share your ideas, suggestions, or comments via e-mail to the publicly-archived list <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list.">wai@w3.org</a> or via GitHub.</p> <div class="button-group"> <a href="mailto:wai@w3.org?body=%5Binclude%20a%20relevant%20email%20Subject%5D%0A%0A%5Bput%20comment%20here...%5D%0A%0AI%20give%20permission%20to%20share%20this%20to%20a%20publicly-archived%20e-mail%20list." class="button"><span>E-mail</span></a><a href=" https://github.com/w3c/wai-website/edit/main/pages/about/projects/wai-tools/video5.md " class="button"><span>Fork & Edit on GitHub</span></a><a href="https://github.com/w3c/wai-website/issues/new?template=content-issue.yml&wai-resource-id=wai-projects&wai-url=https://www.w3.org/WAI/about/projects/wai-tools/session5/" class="button"><span>New GitHub Issue</span></a></div></div></aside> <a class="button button-backtotop" href="#top"><span><svg focusable="false" aria-hidden="true" class="icon-arrow-up "><use xlink:href="/WAI/assets/images/icons.svg#icon-arrow-up"></use></svg> Back to Top</span></a> </main> </div> <footer id="wai-site-footer" class="page-footer default-grid" aria-label="Page"> <div class="inner"><p><strong>Updated:</strong> 16 March 2021.</p></div> </footer> <footer class="site-footer grid-4q" aria-label="Site"> <div class="q1-start q3-end about"> <div> <p><a class="largelink" href="https://www.w3.org/WAI/" lang="en" dir="auto" translate="no">W3C Web Accessibility Initiative (WAI)</a></p> <p>Strategies, standards, and supporting resources to make the Web accessible to people with disabilities.</p> </div> <div class="social" lang="en" dir="auto" translate="no"> <ul> <li><a href="https://w3c.social/@wai"><svg focusable="false" aria-hidden="true" class="icon-mastodon "><use xlink:href="/WAI/assets/images/icons.svg#icon-mastodon"></use></svg> Mastodon</a></li> <li><a href="https://www.linkedin.com/company/w3c-wai/"><svg focusable="false" aria-hidden="true" class="icon-linkedin "><use xlink:href="/WAI/assets/images/icons.svg#icon-linkedin"></use></svg> LinkedIn</a></li> <li><a href="https://www.w3.org/WAI/feed.xml"><svg focusable="false" aria-hidden="true" class="icon-rss "><use xlink:href="/WAI/assets/images/icons.svg#icon-rss"></use></svg> Feed</a></li> <li><a href="https://www.youtube.com/channel/UCU6ljj3m1fglIPjSjs2DpRA/playlists/"><svg focusable="false" aria-hidden="true" class="icon-youtube "><use xlink:href="/WAI/assets/images/icons.svg#icon-youtube"></use></svg> YouTube</a></li> <li><a href="https://www.w3.org/WAI/news/subscribe/" class="button">Get News in Email</a></li> </ul> </div> <div lang="en" dir="auto" translate="no"> <p>Copyright © 2024 World Wide Web Consortium (<a href="https://www.w3.org/">W3C</a><sup>®</sup>). See <a href="/WAI/about/using-wai-material/">Permission to Use WAI Material</a>.</p> </div> </div> <div lang="en" dir="auto" translate="no" class="q4-start q4-end"> <ul style="margin-bottom:0"> <li><a href="/WAI/about/contacting/">Contact WAI</a></li> <li><a href="/WAI/sitemap/">Site Map</a></li> <li><a href="/WAI/news/">News</a></li> <li><a href="/WAI/sitemap/#archive">Archive</a></li> <li><a href="/WAI/about/accessibility-statement/">Accessibility Statement</a></li> <li><a href="/WAI/translations/"> Translations</a></li> <li><a href="/WAI/roles/">Resources for Roles</a></li> </ul> </div> </footer> <script src="/WAI/assets/scripts/details4everybody.js?1732321439590790613"></script>  <script src="/WAI/assets/scripts/svg4everybody.js?1732321439590790613"></script> <script> svg4everybody(); </script><script> var translationStrings = {}; </script> </body> </html>