CINXE.COM
<!doctype html> <html lang="en" dir="ltr" class="docs-wrapper plugin-docs plugin-id-default docs-version-2.7 docs-doc-page docs-doc-id-accessiblity" data-has-hydrated="false"> <head> <meta charset="UTF-8"> <meta name="generator" content="Docusaurus v3.3.2"> <title data-rh="true">Accessibility | BigBlueButton</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://docs.bigbluebutton.org/accessiblity/"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docusaurus_version" content="2.7"><meta data-rh="true" name="docusaurus_tag" content="docs-default-2.7"><meta data-rh="true" name="docsearch:version" content="2.7"><meta data-rh="true" name="docsearch:docusaurus_tag" content="docs-default-2.7"><meta data-rh="true" property="og:title" content="Accessibility | BigBlueButton"><meta data-rh="true" name="description" content="The BigBlueButton HTML5 client is WCAG 2.0 AA accessible (with exceptions) and Section 508 compliant. See our official accessibility statement."><meta data-rh="true" property="og:description" content="The BigBlueButton HTML5 client is WCAG 2.0 AA accessible (with exceptions) and Section 508 compliant. See our official accessibility statement."><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://docs.bigbluebutton.org/accessiblity/"><link data-rh="true" rel="alternate" href="https://docs.bigbluebutton.org/accessiblity/" hreflang="en"><link data-rh="true" rel="alternate" href="https://docs.bigbluebutton.org/accessiblity/" hreflang="x-default"><script src="https://cdn.baycloud.com/cl.js?cid=9be233bfe3004dc49e742fd0fa98642c&hN=docs.bigbluebutton.org"></script><link rel="stylesheet" href="/assets/css/styles.47ff481a.css"> <script src="/assets/js/runtime~main.9ffe08b2.js" defer="defer"></script> <script src="/assets/js/main.ed84793a.js" defer="defer"></script> </head> <body class="navigation-with-keyboard"> <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_fXgn" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="BigBlueButton Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"><img src="/img/logo.svg" alt="BigBlueButton Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"></div><b class="navbar__title text--truncate">BigBlueButton</b></a><a href="https://bigbluebutton.org/teachers/tutorials/" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Teaching</a><a class="navbar__item navbar__link" href="/development/guide/">Development</a><a class="navbar__item navbar__link" href="/administration/install/">Administration</a><a class="navbar__item navbar__link" href="/greenlight/v3/install/">Greenlight</a><a class="navbar__item navbar__link" href="/new-features/">New Features</a><a class="navbar__item navbar__link" href="/support/getting-help/">Support</a></div><div class="navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a class="navbar__link" aria-haspopup="true" aria-expanded="false" role="button" href="/accessiblity/">2.7</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/3.0/accessibility/">3.0</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/accessiblity/">2.7</a></li><li><a class="dropdown__link" href="/2.6/accessiblity/">2.6</a></li><li><a class="dropdown__link" href="/2.5-legacy/accessiblity/">2.5-legacy</a></li></ul></div><a href="https://github.com/bigbluebutton/bigbluebutton/tree/v3.0.x-release/docs" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type="button" disabled="" title="Switch between dark and light mode (currently light mode)" aria-label="Switch between dark and light mode (currently light mode)" aria-live="polite"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_pyhR"><path fill="currentColor" d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_wfgR"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="navbarSearchContainer_Bca1"><div class="navbar__search searchBarContainer_NW3z"><input placeholder="Search" aria-label="Search" class="navbar__search-input"><div class="loadingRing_RJI3 searchBarLoadingRing_YnHq"><div></div><div></div><div></div><div></div></div></div></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_z2l0"><div class="docsWrapper_hBAB"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type="button"></button><div class="docRoot_UBD9"><main class="docMainContainer_TBSr docMainContainerEnhanced_lQrH"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_VOVn"><div class="docItemContainer_Djhp"><article><span class="theme-doc-version-badge badge badge--secondary">Version: 2.7</span><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type="button" class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><header><h1>Accessibility</h1></header><p>The BigBlueButton HTML5 client is WCAG 2.0 AA accessible (with exceptions) and Section 508 compliant. See our <a href="https://bigbluebutton.org/accessibility/" target="_blank" rel="noopener noreferrer">official accessibility statement</a>.</p> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="overview">Overview<a href="#overview" class="hash-link" aria-label="Direct link to Overview" title="Direct link to Overview"></a></h2> <p>Based on the scope of the project, focus has been placed on disabilities related to visual, auditory and motor impairments. We have designed the BigBlueButton HTML5 client to be accessible to as many users as possible regardless of any underlying disability.</p> <p>The client follows the WCAG 2.0 color contrast guidelines for all visual elements, in addition to an aesthetically pleasing inclusive design. Keyboard and screen reader support has been improved, in particular for the open source NVDA screen reader. JAWS, the markets leading paid screen reader software is also compatible with the client.</p> <p><strong><em>Note: There are a few minor controls within the client that are not fully accessible, The colour picker in the closed caption settings for example.</em></strong></p> <h2 class="anchor anchorWithStickyNavbar_LWe7" id="accessibility">Accessibility<a href="#accessibility" class="hash-link" aria-label="Direct link to Accessibility" title="Direct link to Accessibility"></a></h2> <p>When dealing with web accessibility there are a few key factors we must keep in mind while developing</p> <ol> <li>Tab Order</li> <li>Color Contrast</li> <li>Focus</li> <li>Semantics</li> <li>Testing</li> </ol> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="tab-order">Tab Order<a href="#tab-order" class="hash-link" aria-label="Direct link to Tab Order" title="Direct link to Tab Order"></a></h3> <p>The goal when implementing the tab order is ensuring the elements in the tab sequence are logical and simple.</p> <p>When a user presses the tab key focus should move to the next interactable element. If the user continues to press the tab key, focus should move in a logical order through all the interactable elements on the page. The tab focus should be visually identified, currently the HTML5 client adds a thin border to the field, when tab is pressed focus is seen to visibly move.</p> <p><strong><em>Note: A number of users including the following.</em></strong></p> <ul> <li><strong><em>Those with visual impairments, who rely on screen readers or screen magnifiers.</em></strong></li> <li><strong><em>Those with limited dexterity, who depend on the use of the keyboard to using a mouse.</em></strong></li> <li><strong><em>Those who can only utilize a single switch to control a computer.</em></strong></li> </ul> <p><strong><em>will all navigate through a page by using the tab button.</em></strong></p> <p>The order of elements in the DOM determine their place in the tab order, for elements that should receive focus. Elements that don’t natively receive focus can be inserted into the tab order by adding a tabindex=”0” property.</p> <p><strong><em>Caution:</em></strong> <strong><em>When using the tabindex property, positive values should generally be avoided because it places elements outside of the natural tab order, this can present issues for screen reader users who rely on navigating the DOM through a linear manner.</em></strong></p> <p>The following extension gives a visual representation of the tab order of a current web document.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="chromelens">ChromeLens<a href="#chromelens" class="hash-link" aria-label="Direct link to ChromeLens" title="Direct link to ChromeLens"></a></h4> <p>offered by ngzhian</p> <p><img decoding="async" loading="lazy" alt="Screenshot of ChromeLens a browser extension to aid in website accessibility testing" src="/assets/images/accessibility_chromelense-7617dd22bf6c9190c9b4f16e41a5c0c2.jpg" width="2254" height="1287" class="img_ev3q"></p> <p><a href="https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd?hl=en" target="_blank" rel="noopener noreferrer">https://chrome.google.com/webstore/detail/chromelens/idikgljglpfilbhaboonnpnnincjhjkd?hl=en</a></p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="focus">Focus<a href="#focus" class="hash-link" aria-label="Direct link to Focus" title="Direct link to Focus"></a></h3> <p>Determines where keyboard events go on the page at any given moment. It is represented visually by a ring around the focused element and important for users to distinguish what element on the screen they currently have selected. The interactive elements in the html5 client UI have a custom focus ring applied to them.</p> <p><img decoding="async" loading="lazy" alt="Image showing an icon with focus and an icon without focus" src="data:image/jpeg;base64,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" width="227" height="123" class="img_ev3q"></p> <p>HTML5 by default uses the <code>outline</code> attribute to visually indicate focus. Due to it's limitations the outline is set to transparent so it is only becomes visible in window high contrast themes (for those with visual impairments related to color).</p> <p><img decoding="async" loading="lazy" alt="Image showing join audio aria label over the join audio icon" src="data:image/jpeg;base64,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" width="606" height="215" class="img_ev3q"></p> <p>Aria labels are important to focus when navigating with a screen reader, these labels have been used extensivley through out the client to provide audible announcments for selected elements.</p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="keyboard-navigation">Keyboard Navigation<a href="#keyboard-navigation" class="hash-link" aria-label="Direct link to Keyboard Navigation" title="Direct link to Keyboard Navigation"></a></h4> <p>The HTML5 Client has made several improvements to the default keyboard navigation. The most notable addition being breakout room managment, assigning users to various rooms is now possible.</p> <p><img decoding="async" loading="lazy" alt="Animated image showing assignment of users to different rooms" src="/assets/images/accessibility-br-manage-1f47c7a7ce6ea12310508d9892890712.gif" width="2231" height="1281" class="img_ev3q"></p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="keyboard-shortcuts">Keyboard Shortcuts<a href="#keyboard-shortcuts" class="hash-link" aria-label="Direct link to Keyboard Shortcuts" title="Direct link to Keyboard Shortcuts"></a></h4> <p>There are a number of provided keyboard shortcuts which have been set up using HTML5's <code>accessKey</code> property.</p> <table><thead><tr><th style="text-align:center">Combination</th><th style="text-align:left">Function</th></tr></thead><tbody><tr><td style="text-align:center">Shift + Alt + O</td><td style="text-align:left">Open Options</td></tr><tr><td style="text-align:center">Shift + Alt + U</td><td style="text-align:left">Toggle UserList</td></tr><tr><td style="text-align:center">Shift + Alt + M</td><td style="text-align:left">Mute/Unmute</td></tr><tr><td style="text-align:center">Shift + Alt + J</td><td style="text-align:left">Join Audio</td></tr><tr><td style="text-align:center">Shift + Alt + L</td><td style="text-align:left">Leave Audio</td></tr><tr><td style="text-align:center">Shift + Alt + P</td><td style="text-align:left">Toggle Public Chat (User list must be open)</td></tr><tr><td style="text-align:center">Shift + Alt + H</td><td style="text-align:left">Hide Private Chat</td></tr><tr><td style="text-align:center">Shift + Alt + G</td><td style="text-align:left">Close private chat</td></tr><tr><td style="text-align:center">Shift + Alt + R</td><td style="text-align:left">Toggle Raise Hand</td></tr><tr><td style="text-align:center">Shift + Alt + A</td><td style="text-align:left">Open actions menu</td></tr><tr><td style="text-align:center">Shift + Alt + K</td><td style="text-align:left">Open debug window</td></tr><tr><td style="text-align:center">Spacebar</td><td style="text-align:left">Activate Pan tool (Presenter)</td></tr><tr><td style="text-align:center">Enter</td><td style="text-align:left">Toggle Full-screen (Presenter)</td></tr><tr><td style="text-align:center">Right Arrow</td><td style="text-align:left">Next slide (Presenter)</td></tr><tr><td style="text-align:center">Left Arrow</td><td style="text-align:left">Previous slide (Presenter)</td></tr></tbody></table> <p><strong><em>Note: the accessKey attribute has certain limitation like not being able to set the modifier key to activate the shortcut.</em></strong></p> <p><strong><em>The benefit is the visibility it provides for screen readers about available shortcuts.</em></strong></p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="color-contrast">Color Contrast<a href="#color-contrast" class="hash-link" aria-label="Direct link to Color Contrast" title="Direct link to Color Contrast"></a></h3> <p>When dealing with color contrast we are talking about finding colors for a scheme that not only implement maximum contrast, but gives the appropriate contrast between the content and its background for those who experience low visual impairments, color deficiencies or the loss of contrast typically accompanied by aging.</p> <p>The HTML5 client ensures that all visual designs meet the minimum color-contrast ratio for both normal as well as large text on a background, described by the WCAG 2.0 AA standards. “Contrast (Minimum): Understanding Success Criterion 1.4.3.”</p> <p>To make sure that we have met these guidelines, there are numerous tools available online which allow the comparison of foreground and background colors using hex values, to see if they fall within the appropriate contrast ratio.</p> <p><img decoding="async" loading="lazy" alt="Image showing contrast ratio calculator" src="/assets/images/accessibility_colorchecker-d2e8ab3a4c114c6a008d9cefff2b6844.jpg" width="742" height="281" class="img_ev3q"></p> <p><a href="https://webaim.org/resources/contrastchecker/" target="_blank" rel="noopener noreferrer">https://webaim.org/resources/contrastchecker/</a></p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="currently-implemented-colors">Currently implemented colors:<a href="#currently-implemented-colors" class="hash-link" aria-label="Direct link to Currently implemented colors:" title="Direct link to Currently implemented colors:"></a></h4> <p><img decoding="async" loading="lazy" alt="Image showing currently implemented element colors" src="/assets/images/accessibility_colors1-4e4bbbc8e65138f1766f4a13378a04ed.jpg" width="633" height="206" class="img_ev3q"> <img decoding="async" loading="lazy" alt="Image showing currently implemented typography colors" src="data:image/jpeg;base64,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" width="278" height="207" class="img_ev3q"></p> <ul> <li>Blue - primary color - action buttons</li> <li>Red - closing audio, indicators and error alerts</li> <li>Green - audio indicator, success alert, check marks</li> <li>Orange - warning alerts</li> <li>Dark Blue - Headings</li> <li>Grey - base typography color</li> </ul> <p><strong><em>Note:</em></strong> <strong><em>The ChromeLens extension also provides the ability to view your browser using different personas of users who may view web content with various different visual impairments. This is particularly useful when deciding on appropriate color schemes to best suit a wider range of users.</em></strong></p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="semantics">Semantics<a href="#semantics" class="hash-link" aria-label="Direct link to Semantics" title="Direct link to Semantics"></a></h3> <p>Users with visual disabilities can miss out on visual affordances. We need to make sure the information we are trying to express, is expressed in a way that flexible enough so assistive technology can pick up on it; creating an alternative interface for our users. we refer to this as expressing the semantics of an element.</p> <p>The HTML5 client uses the WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) to provide access to screen readers. The following list of commonly used aria attributes:</p> <ul> <li>aria-role</li> <li>aria-label</li> <li>aria-labelledby</li> <li>aria-describedby</li> <li>aria-hidden</li> <li>aria-live</li> <li>aria-expanded</li> <li>aria-haspopup</li> </ul> <h5 class="anchor anchorWithStickyNavbar_LWe7" id="links">Links<a href="#links" class="hash-link" aria-label="Direct link to Links" title="Direct link to Links"></a></h5> <p>HTML5 ARIA spec - <a href="https://www.w3.org/TR/aria-in-html/" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/aria-in-html/</a></p> <p>ARIA spec - <a href="https://www.w3.org/WAI/PF/aria/" target="_blank" rel="noopener noreferrer">https://www.w3.org/WAI/PF/aria/</a></p> <p>Roles - <a href="https://www.w3.org/TR/2023/WD-dpub-aria-1.1-20230515/#role_definitions" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/2023/WD-dpub-aria-1.1-20230515/#role_definitions</a></p> <p>States and Properties - <a href="https://www.w3.org/TR/wai-aria-1.0/states_and_properties" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/wai-aria-1.0/states_and_properties</a></p> <p>Design Patterns - <a href="https://www.w3.org/TR/wai-aria-practices/#aria_ex" target="_blank" rel="noopener noreferrer">https://www.w3.org/TR/wai-aria-practices/#aria_ex</a></p> <h4 class="anchor anchorWithStickyNavbar_LWe7" id="testing">Testing<a href="#testing" class="hash-link" aria-label="Direct link to Testing" title="Direct link to Testing"></a></h4> <p>Testing for accessibility can be a somewhat painful process, if you try to manually find and fix all the issues. While it is good practice to go through a checklist and ensure all elements in the HTML5 client meet their accessibility requirements, this process can be very slow and time consuming. For this reason it is suggested to use an automated accessibility auditor first.</p> <h5 class="anchor anchorWithStickyNavbar_LWe7" id="axe">aXe<a href="#axe" class="hash-link" aria-label="Direct link to aXe" title="Direct link to aXe"></a></h5> <p>Offered by Deque Systems</p> <p><img decoding="async" loading="lazy" alt="Image of aXe browser extension accessibility checker" src="/assets/images/accessibility_axe-f1a849d9d9bb5e6b7542c33001a490f0.jpg" width="606" height="376" class="img_ev3q"></p> <p><a href="https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd" target="_blank" rel="noopener noreferrer">https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd</a></p> <h5 class="anchor anchorWithStickyNavbar_LWe7" id="accessibility-developer-tools">Accessibility Developer Tools<a href="#accessibility-developer-tools" class="hash-link" aria-label="Direct link to Accessibility Developer Tools" title="Direct link to Accessibility Developer Tools"></a></h5> <p>offered by Google Accessibility</p> <p><img decoding="async" loading="lazy" alt="Image of Google browser extension accessibility developer tools" src="/assets/images/accessibility_audit-804a11868c36cc5c2d6a2b74a56f86c6.jpg" width="794" height="252" class="img_ev3q"></p> <p><a href="https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb" target="_blank" rel="noopener noreferrer">https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb</a></p> <p>Both of these extensions provide the ability to scan the DOM and report on any accessibility issues based on levels which can be set, weather AA or AAA standards. For the purposes of the HTML5 client we follow the AA guidelines. Any reported errors also come with a listing of potential fixes.</p> <p><strong><em>Note:</em></strong> <strong><em>Once these extensions are installed to the browser they must be run from inside the console.</em></strong></p> <h3 class="anchor anchorWithStickyNavbar_LWe7" id="training">Training<a href="#training" class="hash-link" aria-label="Direct link to Training" title="Direct link to Training"></a></h3> <p>We recommend checking out this <a href="https://www.udacity.com/course/web-accessibility--ud891" target="_blank" rel="noopener noreferrer">free online accessibility course</a> which can provide a very good understanding of the basics of dealing with web accessibility for both developers and designers.</p> <p>In the event you do not need to take the course but would still like access to the information as reference, the course is also found in <a href="https://developers.google.com/web/fundamentals/accessibility" target="_blank" rel="noopener noreferrer">full document form</a> . It is a live document which is updated by the developers over at Google.</p></div></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages"></nav></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#overview" class="table-of-contents__link toc-highlight">Overview</a></li><li><a href="#accessibility" class="table-of-contents__link toc-highlight">Accessibility</a><ul><li><a href="#tab-order" class="table-of-contents__link toc-highlight">Tab Order</a><ul><li><a href="#chromelens" class="table-of-contents__link toc-highlight">ChromeLens</a></li></ul></li><li><a href="#focus" class="table-of-contents__link toc-highlight">Focus</a><ul><li><a href="#keyboard-navigation" class="table-of-contents__link toc-highlight">Keyboard Navigation</a></li><li><a href="#keyboard-shortcuts" class="table-of-contents__link toc-highlight">Keyboard Shortcuts</a></li></ul></li><li><a href="#color-contrast" class="table-of-contents__link toc-highlight">Color Contrast</a><ul><li><a href="#currently-implemented-colors" class="table-of-contents__link toc-highlight">Currently implemented colors:</a></li></ul></li><li><a href="#semantics" class="table-of-contents__link toc-highlight">Semantics</a><ul><li><a href="#testing" class="table-of-contents__link toc-highlight">Testing</a></li></ul></li><li><a href="#training" class="table-of-contents__link toc-highlight">Training</a></li></ul></li></ul></div></div></div></div></main></div></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">BigBlueButton</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/bigbluebutton" target="_blank" rel="noopener noreferrer" class="footer__link-item">Github<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://groups.google.com/forum/#!forum/bigbluebutton-setup" target="_blank" rel="noopener noreferrer" class="footer__link-item">Setup Forums<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://groups.google.com/forum/#!forum/bigbluebutton-users" target="_blank" rel="noopener noreferrer" class="footer__link-item">Users Forums<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://groups.google.com/forum/#!forum/bigbluebutton-dev" target="_blank" rel="noopener noreferrer" class="footer__link-item">Developers Forums<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">Support</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/support/road-map/">Road Map</a></li><li class="footer__item"><a class="footer__link-item" href="/support/faq/">FAQ</a></li><li class="footer__item"><a class="footer__link-item" href="/support/getting-help/">Getting help</a></li><li class="footer__item"><a class="footer__link-item" href="/support/troubleshooting/">Troubleshooting</a></li></ul></div><div class="col footer__col"><div class="footer__title">Resources</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://support.bigbluebutton.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Knowledge Base<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://bigbluebutton.org/teachers/tutorials/" target="_blank" rel="noopener noreferrer" class="footer__link-item">Tutorial Videos<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div><div class="col footer__col"><div class="footer__title">Social</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://www.facebook.com/bigbluebutton" target="_blank" rel="noopener noreferrer" class="footer__link-item">Facebook<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://twitter.com/bigbluebutton" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li><li class="footer__item"><a href="https://www.youtube.com/channel/UCYj1_2Q3HTWCAImvI6eZ0SA" target="_blank" rel="noopener noreferrer" class="footer__link-item">Youtube<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2025 BigBlueButton Inc., Built with Docusaurus.</div></div></div></footer></div> </body> </html>