diff --git a/ui/src/components/badge/QBadge.js b/ui/src/components/badge/QBadge.js
index 6e77d760f5e..35dfc5ba14c 100644
--- a/ui/src/components/badge/QBadge.js
+++ b/ui/src/components/badge/QBadge.js
@@ -53,7 +53,7 @@ export default createComponent({
     return () => h('div', {
       class: classes.value,
       style: style.value,
-      role: 'alert',
+      role: 'status',
       'aria-label': props.label
     }, hMergeSlot(slots.default, props.label !== void 0 ? [ props.label ] : []))
   }
diff --git a/ui/src/components/checkbox/use-checkbox.js b/ui/src/components/checkbox/use-checkbox.js
index 74cbcdcffa0..58cd12e68ab 100644
--- a/ui/src/components/checkbox/use-checkbox.js
+++ b/ui/src/components/checkbox/use-checkbox.js
@@ -127,7 +127,7 @@ export default function (type, getInner) {
   const attributes = computed(() => {
     const attrs = {
       tabindex: tabindex.value,
-      role: 'checkbox',
+      role: type === 'toggle' ? 'switch' : 'checkbox',
       'aria-label': props.label,
       'aria-checked': isIndeterminate.value === true
         ? 'mixed'
diff --git a/ui/src/components/dialog-bottom-sheet/BottomSheet.js b/ui/src/components/dialog-bottom-sheet/BottomSheet.js
index cddb1e74106..6cc4c66228c 100644
--- a/ui/src/components/dialog-bottom-sheet/BottomSheet.js
+++ b/ui/src/components/dialog-bottom-sheet/BottomSheet.js
@@ -70,6 +70,7 @@ export default createComponent({
               action.class
             ],
             tabindex: 0,
+            role: 'listitem',
             onClick () { onOk(action) },
             onKeyup (e) { e.keyCode === 13 && onOk(action) }
           }, [
@@ -145,9 +146,12 @@ export default createComponent({
       child.push(
         props.grid === true
           ? h('div', {
-            class: 'row items-stretch justify-start'
+            class: 'row items-stretch justify-start',
+            role: 'list'
           }, getGrid())
-          : h('div', getList())
+          : h('div', {
+            role: 'list'
+          }, getList())
       )
 
       return child
diff --git a/ui/src/components/dialog/QDialog.js b/ui/src/components/dialog/QDialog.js
index 1366e154a35..3ca7a452cb2 100644
--- a/ui/src/components/dialog/QDialog.js
+++ b/ui/src/components/dialog/QDialog.js
@@ -376,7 +376,8 @@ export default createComponent({
 
     function renderPortalContent () {
       return h('div', {
-        'aria-modal': 'true',
+        role: 'dialog',
+        'aria-modal': useBackdrop.value === true ? 'true' : 'false',
         ...attrs,
         class: rootClasses.value
       }, [
diff --git a/ui/src/components/item/QItem.js b/ui/src/components/item/QItem.js
index 226fa2a3f88..520963cf901 100644
--- a/ui/src/components/item/QItem.js
+++ b/ui/src/components/item/QItem.js
@@ -136,6 +136,7 @@ export default createComponent({
         ref: rootRef,
         class: classes.value,
         style: style.value,
+        role: 'listitem',
         onClick,
         onKeyup
       }
diff --git a/ui/src/components/item/QList.js b/ui/src/components/item/QList.js
index fbd68dc34ed..9e191e782e9 100644
--- a/ui/src/components/item/QList.js
+++ b/ui/src/components/item/QList.js
@@ -29,6 +29,6 @@ export default createComponent({
       + (props.padding === true ? ' q-list--padding' : '')
     )
 
-    return () => h('div', { class: classes.value }, hSlot(slots.default))
+    return () => h('div', { class: classes.value, role: 'list' }, hSlot(slots.default))
   }
 })
diff --git a/ui/src/components/option-group/QOptionGroup.js b/ui/src/components/option-group/QOptionGroup.js
index 4aad56d1b0b..4a5a7468c84 100644
--- a/ui/src/components/option-group/QOptionGroup.js
+++ b/ui/src/components/option-group/QOptionGroup.js
@@ -74,7 +74,7 @@ export default createComponent({
     )
 
     const attrs = computed(() => {
-      const attrs = {}
+      const attrs = { role: 'group' }
 
       if (props.type === 'radio') {
         attrs.role = 'radiogroup'
diff --git a/ui/src/components/pagination/QPagination.js b/ui/src/components/pagination/QPagination.js
index f0d4cdb99cf..27aa2eda2f5 100644
--- a/ui/src/components/pagination/QPagination.js
+++ b/ui/src/components/pagination/QPagination.js
@@ -148,11 +148,10 @@ export default createComponent({
       return $q.lang.rtl === true ? ico.reverse() : ico
     })
 
-    const attrs = computed(() => (
-      props.disable === true
-        ? { 'aria-disabled': 'true' }
-        : {}
-    ))
+    const attrs = computed(() => ({
+      'aria-disabled': props.disable === true ? 'true' : 'false',
+      role: 'navigation'
+    }))
 
     const btnProps = computed(() => ({
       round: props.round,
@@ -193,8 +192,13 @@ export default createComponent({
       newPage.value = null
     }
 
-    function getBtn (cfg, page) {
-      const data = { ...btnProps.value, ...cfg }
+    function getBtn (cfg, page, active) {
+      const data = {
+        'aria-label': page,
+        'aria-current': active === true ? 'true' : 'false',
+        ...btnProps.value,
+        ...cfg
+      }
 
       if (page !== void 0) {
         if (props.toFn !== void 0) {
@@ -311,7 +315,7 @@ export default createComponent({
             flat: !active,
             label: props.min,
             ...(active ? activeBtnProps.value : {})
-          }, props.min))
+          }, props.min, active))
         }
         if (boundaryEnd) {
           const active = props.max === props.modelValue
@@ -322,7 +326,7 @@ export default createComponent({
             flat: !active,
             label: props.max,
             ...(active ? activeBtnProps.value : {})
-          }, props.max))
+          }, props.max, active))
         }
         if (ellipsesStart) {
           contentStart.push(getBtn({
@@ -352,7 +356,7 @@ export default createComponent({
           if (i === props.modelValue) {
             Object.assign(btn, activeBtnProps.value)
           }
-          contentMiddle.push(getBtn(btn, i))
+          contentMiddle.push(getBtn(btn, i, i === props.modelValue))
         }
       }
 
diff --git a/ui/src/components/stepper/QStep.js b/ui/src/components/stepper/QStep.js
index 13952fb9bf1..62d793c055d 100644
--- a/ui/src/components/stepper/QStep.js
+++ b/ui/src/components/stepper/QStep.js
@@ -121,7 +121,7 @@ export default createComponent({
 
     return () => h(
       'div',
-      { ref: rootRef, class: 'q-stepper__step', ...scrollEvent.value },
+      { ref: rootRef, class: 'q-stepper__step', role: 'tabpanel', ...scrollEvent.value },
       $stepper.value.vertical === true
         ? [
             h(StepHeader, {
diff --git a/ui/src/components/tab-panels/QTabPanel.js b/ui/src/components/tab-panels/QTabPanel.js
index 8fc0a43d3bb..3dde9254ce1 100644
--- a/ui/src/components/tab-panels/QTabPanel.js
+++ b/ui/src/components/tab-panels/QTabPanel.js
@@ -11,6 +11,6 @@ export default createComponent({
   props: usePanelChildProps,
 
   setup (_, { slots }) {
-    return () => h('div', { class: 'q-tab-panel' }, hSlot(slots.default))
+    return () => h('div', { class: 'q-tab-panel', role: 'tabpanel' }, hSlot(slots.default))
   }
 })
diff --git a/ui/src/components/toolbar/QToolbar.js b/ui/src/components/toolbar/QToolbar.js
index bdfbd231366..ed029570945 100644
--- a/ui/src/components/toolbar/QToolbar.js
+++ b/ui/src/components/toolbar/QToolbar.js
@@ -16,6 +16,6 @@ export default createComponent({
       + (props.inset === true ? ' q-toolbar--inset' : '')
     )
 
-    return () => h('div', { class: classes.value }, hSlot(slots.default))
+    return () => h('div', { class: classes.value, role: 'toolbar' }, hSlot(slots.default))
   }
 })
diff --git a/ui/src/components/tooltip/QTooltip.js b/ui/src/components/tooltip/QTooltip.js
index 20b21f005ca..48735faa2f1 100644
--- a/ui/src/components/tooltip/QTooltip.js
+++ b/ui/src/components/tooltip/QTooltip.js
@@ -285,7 +285,7 @@ export default createComponent({
             attrs.style,
             transitionStyle.value
           ],
-          role: 'complementary'
+          role: 'tooltip'
         }, hSlot(slots.default))
         : null
     }