diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx
index eaa3f40354ae6245a9a840c2edb71860c75068b0..51d374bb7b235f571fcd0d353ee7a2e3a993210f 100644
--- a/bigbluebutton-html5/imports/ui/components/app/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx
@@ -122,12 +122,12 @@ class App extends Component {
     });
 
     return (
-      <nav
+      <div
         className={cx(styles.userList, userListStyle)}
         aria-label={intl.formatMessage(intlMessages.userListLabel)}
       >
         {userList}
-      </nav>
+      </div>
     );
   }
 
@@ -184,13 +184,13 @@ class App extends Component {
       <main className={styles.main}>
         <NotificationsBarContainer />
         <section className={styles.wrapper}>
-          {this.renderUserList()}
-          {this.renderChat()}
           <div className={styles.content}>
             {this.renderNavBar()}
             {this.renderMedia()}
             {this.renderActionsBar()}
           </div>
+          {this.renderUserList()}
+          {this.renderChat()}
           {this.renderSidebar()}
         </section>
         <ModalContainer />
diff --git a/bigbluebutton-html5/imports/ui/components/app/styles.scss b/bigbluebutton-html5/imports/ui/components/app/styles.scss
index eef6b56a7d959abba45b2437d38ff012080de642..9c913f13e7508ae44839083dda90c2325de34af6 100644
--- a/bigbluebutton-html5/imports/ui/components/app/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/app/styles.scss
@@ -54,6 +54,7 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
 .content {
   @extend %full-page;
 
+  order: 3;
   padding: 0 .25%;
 
   &:before,
@@ -99,6 +100,8 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
   z-index: 2;
   overflow: visible;
 
+  order: 1;
+
   @include mq($small-only) {
     padding-top: $navbar-height;
   }
@@ -120,6 +123,8 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
 .chat {
   @extend %full-page;
 
+  order: 2;
+
   @include mq($small-only) {
     z-index: 3;
     padding-top: $navbar-height;
diff --git a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
index aebf5e62adf64ed0f14d498aba93db1461a797fd..68c2c3a6d1668aa61d588a21855e4a67387dc670 100644
--- a/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/nav-bar/component.jsx
@@ -2,10 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
 import cx from 'classnames';
-import { styles } from './styles.scss';
-import Button from '../button/component';
-import RecordingIndicator from './recording-indicator/component';
-import SettingsDropdownContainer from './settings-dropdown/container';
 import Icon from '/imports/ui/components/icon/component';
 import BreakoutJoinConfirmation from '/imports/ui/components/breakout-join-confirmation/component';
 import Dropdown from '/imports/ui/components/dropdown/component';
@@ -15,12 +11,20 @@ import DropdownList from '/imports/ui/components/dropdown/list/component';
 import DropdownListItem from '/imports/ui/components/dropdown/list/item/component';
 import { withModalMounter } from '/imports/ui/components/modal/service';
 import { defineMessages, injectIntl } from 'react-intl';
+import { styles } from './styles.scss';
+import Button from '../button/component';
+import RecordingIndicator from './recording-indicator/component';
+import SettingsDropdownContainer from './settings-dropdown/container';
 
 const intlMessages = defineMessages({
   toggleUserListLabel: {
     id: 'app.navBar.userListToggleBtnLabel',
     description: 'Toggle button label',
   },
+  toggleUserListAria: {
+    id: 'app.navBar.toggleUserList.ariaLabel',
+    description: 'description of the lists inside the userlist',
+  },
   newMessages: {
     id: 'app.navBar.toggleUserList.newMessages',
     description: 'label for toggleUserList btn when showing red notification',
@@ -175,7 +179,8 @@ class NavBar extends Component {
             circle
             hideLabel
             label={intl.formatMessage(intlMessages.toggleUserListLabel)}
-            icon={'user'}
+            aria-label={intl.formatMessage(intlMessages.toggleUserListAria)}
+            icon="user"
             className={cx(toggleBtnClasses)}
             aria-expanded={isExpanded}
             aria-describedby="newMessage"
@@ -185,7 +190,7 @@ class NavBar extends Component {
             aria-label={hasUnreadMessages ? intl.formatMessage(intlMessages.newMessages) : null}
           />
         </div>
-        <div className={styles.center} role="banner">
+        <div className={styles.center}>
           {this.renderPresentationTitle()}
           <RecordingIndicator beingRecorded={beingRecorded} />
         </div>
diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx
index 36ef122909d97279c61fce51df117662523cab75..451a5c20989d0d835e7db7935d48e7e5be155d5c 100644
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/application/component.jsx
@@ -67,6 +67,8 @@ class ApplicationMenu extends BaseMenu {
     this.state = {
       settingsName: 'application',
       settings: props.settings,
+      isLargestFontSize: false,
+      isSmallestFontSize: false,
     };
   }
 
@@ -95,6 +97,8 @@ class ApplicationMenu extends BaseMenu {
     const canIncreaseFontSize = availableFontSizes.indexOf(currentFontSize) < MAX_FONTSIZE;
     const fs = canIncreaseFontSize ? availableFontSizes.indexOf(currentFontSize) + 1 : MAX_FONTSIZE;
     this.changeFontSize(availableFontSizes[fs]);
+    if (fs === MAX_FONTSIZE) this.setState({ isLargestFontSize: true });
+    this.setState({ isSmallestFontSize: false });
   }
 
   handleDecreaseFontSize() {
@@ -103,6 +107,8 @@ class ApplicationMenu extends BaseMenu {
     const canDecreaseFontSize = availableFontSizes.indexOf(currentFontSize) > MIN_FONTSIZE;
     const fs = canDecreaseFontSize ? availableFontSizes.indexOf(currentFontSize) - 1 : MIN_FONTSIZE;
     this.changeFontSize(availableFontSizes[fs]);
+    if (fs === MIN_FONTSIZE) this.setState({ isSmallestFontSize: true });
+    this.setState({ isLargestFontSize: false });
   }
 
   handleSelectChange(fieldname, options, e) {
@@ -121,6 +127,7 @@ class ApplicationMenu extends BaseMenu {
 
   render() {
     const { availableLocales, intl } = this.props;
+    const { isLargestFontSize, isSmallestFontSize } = this.state;
 
     return (
       <div className={styles.tabContent}>
@@ -144,7 +151,6 @@ class ApplicationMenu extends BaseMenu {
                   icons={false}
                   defaultChecked={this.state.settings.chatAudioNotifications}
                   onChange={() => this.handleToggle('chatAudioNotifications')}
-                  ariaLabelledBy="audioNotify"
                   ariaLabel={intl.formatMessage(intlMessages.audioNotifyLabel)}
                 />
               </div>
@@ -152,7 +158,7 @@ class ApplicationMenu extends BaseMenu {
           </div>
 
           <div className={styles.row}>
-            <div className={styles.col}>
+            <div className={styles.col} aria-hidden="true">
               <div className={styles.formElement}>
                 <label className={styles.label}>
                   {intl.formatMessage(intlMessages.pushNotifyLabel)}
@@ -165,14 +171,13 @@ class ApplicationMenu extends BaseMenu {
                   icons={false}
                   defaultChecked={this.state.settings.chatPushNotifications}
                   onChange={() => this.handleToggle('chatPushNotifications')}
-                  ariaLabelledBy="pushNotify"
                   ariaLabel={intl.formatMessage(intlMessages.pushNotifyLabel)}
                 />
               </div>
             </div>
           </div>
           <div className={styles.row}>
-            <div className={styles.col}>
+            <div className={styles.col} aria-hidden="true">
               <div className={styles.formElement}>
                 <label className={styles.label}>
                   {intl.formatMessage(intlMessages.languageLabel)}
@@ -232,6 +237,7 @@ class ApplicationMenu extends BaseMenu {
                       circle
                       hideLabel
                       label={intl.formatMessage(intlMessages.increaseFontBtnLabel)}
+                      disabled={isLargestFontSize}
                     />
                   </div>
                   <div className={styles.col}>
@@ -242,6 +248,7 @@ class ApplicationMenu extends BaseMenu {
                       circle
                       hideLabel
                       label={intl.formatMessage(intlMessages.decreaseFontBtnLabel)}
+                      disabled={isSmallestFontSize}
                     />
                   </div>
                 </div>
diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/closed-captions/component.jsx b/bigbluebutton-html5/imports/ui/components/settings/submenus/closed-captions/component.jsx
index 50a7e11f3ca06b3d192c0634663fb5a9a657aeeb..faaec2072d02fbe0a445c42ca06831edeee63474 100644
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/closed-captions/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/closed-captions/component.jsx
@@ -137,7 +137,7 @@ class ClosedCaptionsMenu extends BaseMenu {
         </div>
         <div className={styles.form}>
           <div className={styles.row}>
-            <div className={styles.col}>
+            <div className={styles.col} aria-hidden="true">
               <div className={styles.formElement}>
                 <label className={styles.label}>
                   {intl.formatMessage(intlMessages.closedCaptionsLabel)}
@@ -150,7 +150,7 @@ class ClosedCaptionsMenu extends BaseMenu {
                   icons={false}
                   defaultChecked={this.state.settings.enabled}
                   onChange={() => this.handleToggle('enabled')}
-                  ariaLabelledBy={'closedCaptions'}
+                  ariaLabelledBy="closedCaptions"
                   ariaLabel={intl.formatMessage(intlMessages.closedCaptionsLabel)}
                 />
               </div>
@@ -172,7 +172,7 @@ class ClosedCaptionsMenu extends BaseMenu {
                       <Checkbox
                         onChange={() => this.handleToggle('takeOwnership')}
                         checked={this.state.settings.takeOwnership}
-                        ariaLabelledBy={'takeOwnership'}
+                        ariaLabelledBy="takeOwnership"
                         ariaLabel={intl.formatMessage(intlMessages.takeOwnershipLabel)}
                       />
                     </div>
@@ -206,8 +206,7 @@ class ClosedCaptionsMenu extends BaseMenu {
                       {this.props.locales ? this.props.locales.map((locale, index) =>
                         (<option key={index} value={index}>
                           {locale}
-                        </option>),
-                      ) : null }
+                        </option>)) : null }
                     </select>
                   </label>
                 </div>
@@ -238,8 +237,7 @@ class ClosedCaptionsMenu extends BaseMenu {
                         FONT_FAMILIES.map((family, index) =>
                           (<option key={index} value={index}>
                             {family}
-                          </option>),
-                        )
+                          </option>))
                       }
                     </select>
                   </label>
@@ -271,8 +269,7 @@ class ClosedCaptionsMenu extends BaseMenu {
                           FONT_SIZES.map((size, index) =>
                             (<option key={index} value={index}>
                               {size}
-                            </option>),
-                          )
+                            </option>))
                         }
                     </select>
                   </label>
@@ -314,8 +311,8 @@ class ClosedCaptionsMenu extends BaseMenu {
                           onChange={this.handleColorChange.bind(this, 'backgroundColor')}
                           color={this.state.settings.backgroundColor}
                           colors={COLORS}
-                          width={'140px'}
-                          triangle={'top-right'}
+                          width="140px"
+                          triangle="top-right"
                         />
                       </div>
                     : null }
@@ -356,8 +353,8 @@ class ClosedCaptionsMenu extends BaseMenu {
                           onChange={this.handleColorChange.bind(this, 'fontColor')}
                           color={this.state.settings.fontColor}
                           colors={COLORS}
-                          width={'140px'}
-                          triangle={'top-right'}
+                          width="140px"
+                          triangle="top-right"
                         />
                       </div>
                     : null }
diff --git a/bigbluebutton-html5/imports/ui/components/settings/submenus/data-saving/component.jsx b/bigbluebutton-html5/imports/ui/components/settings/submenus/data-saving/component.jsx
index eee6e84327b8c75a9e7afe2be034634e9711d57a..6d3615cdde363dc39f0a221b142d630d105030e7 100644
--- a/bigbluebutton-html5/imports/ui/components/settings/submenus/data-saving/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/settings/submenus/data-saving/component.jsx
@@ -80,7 +80,7 @@ class DataSaving extends BaseMenu {
                   defaultChecked={!viewScreenshare}
                   onChange={() => this.handleToggle('viewScreenshare')}
                   ariaLabelledBy="screenShare"
-                  ariaLabel="screenShare"
+                  ariaLabel={intl.formatMessage(intlMessages.screenShareLabel)}
                 />
               </div>
             </div>
diff --git a/bigbluebutton-html5/imports/ui/components/switch/component.jsx b/bigbluebutton-html5/imports/ui/components/switch/component.jsx
index 6cc7e3a4182e41cc380657ac3e5c3365fbc8b34f..d5862c9fe301b81b709f0fc43b41c4aee54ea613 100644
--- a/bigbluebutton-html5/imports/ui/components/switch/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/switch/component.jsx
@@ -26,7 +26,7 @@ export default class Switch extends Toggle {
         onTouchStart={this.handleTouchStart}
         onTouchMove={this.handleTouchMove}
         onTouchEnd={this.handleTouchEnd}>
-        <div className='react-toggle-track'>
+        <div className='react-toggle-track' aria-hidden="true">
           <div className='react-toggle-track-check'>
             ON
           </div>
@@ -44,9 +44,8 @@ export default class Switch extends Toggle {
           className='react-toggle-screenreader-only'
           type='checkbox'
           tabIndex='0'
-          aria-labelledby={ariaLabelledBy}
+          aria-label={ariaLabel}
           aria-describedby={ariaDescribedBy}/>
-          <div id={ariaLabelledBy} hidden>{ariaLabel}</div>
           <div id={ariaDescribedBy} hidden>{ariaDesc}</div>
       </div>
     );
diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
index d81b50b1cbcef2daa7307b0d150b094fe4361831..3db4cf1e280ddb0a9261d3fe0c3391b6f7689337 100644
--- a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
@@ -39,6 +39,7 @@ const UserAvatar = ({
   className,
 }) => (
   <div
+    aria-hidden="true"
     data-test="userAvatar"
     className={cx(styles.avatar, {
       [styles.moderator]: moderator,
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/component.jsx
index 5f52a01f23bfe7195acb6c78504da595ab54f876..74025e823c8a1c37b385f0cc03fe2be20d3e8bd8 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/component.jsx
@@ -40,6 +40,7 @@ class UserContent extends Component {
       <div
         data-test="userListContent"
         className={styles.content}
+        role="complementary"
       >
         <UserMessages
           isPublicChat={this.props.isPublicChat}
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/component.jsx
index d71b6270cface4869da5c74fe5dc260a732460e3..ca2b28c5a42a10f28fa48003d7750a937186a38d 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-messages/component.jsx
@@ -132,9 +132,9 @@ class UserMessages extends Component {
       <div className={styles.messages}>
         {
           !compact ?
-            <div className={styles.smallTitle} role="banner">
+            <h2 className={styles.smallTitle}>
               {intl.formatMessage(intlMessages.messagesTitle)}
-            </div> : <hr className={styles.separator} />
+            </h2> : <hr className={styles.separator} />
         }
         <div
           role="tabpanel"
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx
index 83434a1da091f4f395504c73f94fac454aac285c..5eaa767db058da255cf164fcd53b17750d367ebb 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/component.jsx
@@ -242,10 +242,10 @@ class UserParticipants extends Component {
       <div className={styles.participants}>
         {
           !compact ?
-            <div className={styles.smallTitle} role="banner">
+            <h2 className={styles.smallTitle}>
               {intl.formatMessage(intlMessages.usersTitle)}
               &nbsp;({users.length})
-            </div> : <hr className={styles.separator} />
+            </h2> : <hr className={styles.separator} />
         }
         <div
           className={styles.scrollableList}
diff --git a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-list-content/component.jsx b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-list-content/component.jsx
index 5fed67c2ea2d7421ce12b34c995dcdbd1b099ff0..fbb4ab9ced7a1cd199bce5502d7896abdaf39ab6 100644
--- a/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-list-content/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-list-item/user-list-content/component.jsx
@@ -218,9 +218,8 @@ class UserListContent extends Component {
     const contents = (
       <div
         className={!actions.length ? cx(styles.userListItem, userItemContentsStyle) : null}
-        aria-label={userAriaLabel}
       >
-        <div className={styles.userItemContents} aria-hidden="true">
+        <div className={styles.userItemContents}>
           <div className={styles.userAvatar}>
             <UserAvatar
               moderator={user.isModerator}
diff --git a/bigbluebutton-html5/private/locales/en.json b/bigbluebutton-html5/private/locales/en.json
index 60deaf6428c2f6e6c66ad80f59b92addf3dd072d..5d85cfec962133a87032ca0f1ac27baa96d6103d 100755
--- a/bigbluebutton-html5/private/locales/en.json
+++ b/bigbluebutton-html5/private/locales/en.json
@@ -91,6 +91,7 @@
     "app.navBar.settingsDropdown.leaveSessionDesc": "Leave the meeting",
     "app.navBar.settingsDropdown.exitFullscreenDesc": "Exit fullscreen mode",
     "app.navBar.userListToggleBtnLabel": "User List Toggle",
+    "app.navBar.toggleUserList.ariaLabel": "Users / Conversations Toggle",
     "app.navBar.toggleUserList.newMessages": "with new message notification",
     "app.leaveConfirmation.title": "Leave Session",
     "app.leaveConfirmation.message": "Do you want to leave this meeting?",