diff --git a/packages/super-editor/index.html b/packages/super-editor/index.html
index f17fc7505e..14096b05c4 100644
--- a/packages/super-editor/index.html
+++ b/packages/super-editor/index.html
@@ -6,7 +6,7 @@
     <title>Super Editor - Dev mode</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" role="application"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/packages/super-editor/src/components/SuperEditor.vue b/packages/super-editor/src/components/SuperEditor.vue
index d0b9760e01..b70b94d7b4 100644
--- a/packages/super-editor/src/components/SuperEditor.vue
+++ b/packages/super-editor/src/components/SuperEditor.vue
@@ -208,7 +208,7 @@ onBeforeUnmount(() => {
       @click="handleSuperEditorClick"
       @mousedown="handleMarginClick"
     >
-      <div ref="editorElem" class="editor-element super-editor__element"></div>
+      <div ref="editorElem" class="editor-element super-editor__element" role="presentation"></div>
     </div>
 
     <div class="placeholder-editor" v-if="!editorReady">
diff --git a/packages/super-editor/src/components/toolbar/AlignmentButtons.vue b/packages/super-editor/src/components/toolbar/AlignmentButtons.vue
index d28b58b911..d322790b1a 100644
--- a/packages/super-editor/src/components/toolbar/AlignmentButtons.vue
+++ b/packages/super-editor/src/components/toolbar/AlignmentButtons.vue
@@ -13,14 +13,42 @@ const select = (alignment) => {
 
 <template>
   <div class="alignment-buttons" :class="{ 'high-contrast': isHighContrastMode }">
-    <div class="button-icon" @click="select('left')" v-html="toolbarIcons.alignLeft" data-item="btn-textAlign-option">
+    <div 
+      class="button-icon" 
+      @click="select('left')" 
+      v-html="toolbarIcons.alignLeft" 
+      data-item="btn-textAlign-option"
+      role="menuitem"
+      aria-label="Align left"
+    >
     </div>
-    <div class="button-icon" @click="select('center')" v-html="toolbarIcons.alignCenter"
-      data-item="btn-textAlign-option"></div>
-    <div class="button-icon" @click="select('right')" v-html="toolbarIcons.alignRight" data-item="btn-textAlign-option">
+    <div 
+      class="button-icon"
+      @click="select('center')" 
+      v-html="toolbarIcons.alignCenter"
+      
+      data-item="btn-textAlign-option" 
+      role="menuitem"
+      aria-label="Align center"
+    ></div>
+    <div
+      class="button-icon" 
+      @click="select('right')" 
+      v-html="toolbarIcons.alignRight" 
+      data-item="btn-textAlign-option" 
+      role="menuitem"
+      aria-label="Align right"
+    >
     </div>
-    <div class="button-icon" @click="select('justify')" v-html="toolbarIcons.alignJustify"
-      data-item="btn-textAlign-option"></div>
+    <div 
+      class="button-icon" 
+      @click="select('justify')" 
+      v-html="toolbarIcons.alignJustify"
+      
+      data-item="btn-textAlign-option" 
+      role="menuitem"
+      aria-label="Justify"
+    ></div>
   </div>
 </template>
 
diff --git a/packages/super-editor/src/components/toolbar/ButtonGroup.vue b/packages/super-editor/src/components/toolbar/ButtonGroup.vue
index 49e041a5b5..e1df115f43 100644
--- a/packages/super-editor/src/components/toolbar/ButtonGroup.vue
+++ b/packages/super-editor/src/components/toolbar/ButtonGroup.vue
@@ -21,6 +21,10 @@ const props = defineProps({
     type: String,
     default: 'left',
   },
+  fromOverflow: {
+    type: Boolean,
+    default: false,
+  }
 });
 
 const currentItem = ref(null);
@@ -91,13 +95,24 @@ const dropdownOptions = (item) => {
   });
 };
 
+const getDropdownAttributes = (option, item) => {
+  return {
+    role: 'menuitem',
+    ariaLabel: `${item.attributes.value.ariaLabel} - ${option.label}`,
+  };
+};
+
 const handleClickOutside = (e) => {
   closeDropdowns();
 };
 </script>
 
 <template>
-  <div :style="getPositionStyle" class="button-group">
+  <div 
+    :style="getPositionStyle" 
+    class="button-group"
+    role="group"
+  >
     <div v-for="item in toolbarItems" :key="item.id.value" :class="{
         narrow: item.isNarrow.value,
         wide: item.isWide.value,
@@ -106,11 +121,23 @@ const handleClickOutside = (e) => {
       <ToolbarSeparator v-if="isSeparator(item)" style="width: 20px" />
 
       <!-- Toolbar button -->
-      <n-dropdown v-if="isDropdown(item) && item.nestedOptions?.value?.length" :options="dropdownOptions(item)"
-        :trigger="item.disabled.value ? null : 'click'" :show="item.expand.value" size="medium" placement="bottom-start"
-        class="toolbar-button toolbar-dropdown sd-editor-toolbar-dropdown" :class="{ 'high-contrast': isHighContrastMode }"
-        @select="(key, option) => handleSelect(item, option)" @clickoutside="handleClickOutside"
-        :style="item.dropdownStyles.value">
+      <n-dropdown
+        v-if="isDropdown(item) && item.nestedOptions?.value?.length"
+        :options="dropdownOptions(item)"
+        :trigger="item.disabled.value ? null : 'click'"
+        :show="item.expand.value"
+        size="medium"
+        placement="bottom-start"
+        class="toolbar-button toolbar-dropdown sd-editor-toolbar-dropdown"
+        :class="{ 'high-contrast': isHighContrastMode }"
+        @select="(key, option) => handleSelect(item, option)"
+        @clickoutside="handleClickOutside"
+        :style="item.dropdownStyles.value"
+        :menu-props="() => ({
+          role: 'menu'
+        })"
+        :node-props="(option) => getDropdownAttributes(option, item)"
+      >
         <n-tooltip trigger="hover" :disabled="!item.tooltip?.value">
           <template #trigger>
             <ToolbarButton :toolbar-item="item" @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
@@ -125,8 +152,12 @@ const handleClickOutside = (e) => {
 
       <n-tooltip trigger="hover" v-else-if="isButton(item)" class="sd-editor-toolbar-tooltip">
         <template #trigger>
-          <ToolbarButton :toolbar-item="item" @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
-            @buttonClick="handleToolbarButtonClick(item)" />
+          <ToolbarButton
+            :toolbar-item="item"
+            :is-overflow-item="fromOverflow"
+            @textSubmit="handleToolbarButtonTextSubmit(item, $event)"
+            @buttonClick="handleToolbarButtonClick(item)"
+          />
         </template>
         <div v-if="item.tooltip">
           {{ item.tooltip }}
diff --git a/packages/super-editor/src/components/toolbar/DocumentMode.vue b/packages/super-editor/src/components/toolbar/DocumentMode.vue
index 2b2373ea68..1a5e6166ed 100644
--- a/packages/super-editor/src/components/toolbar/DocumentMode.vue
+++ b/packages/super-editor/src/components/toolbar/DocumentMode.vue
@@ -19,8 +19,14 @@ const handleClick = (item) => {
 
 <template>
   <div class="document-mode" :class="{ 'high-contrast': isHighContrastMode }">
-    <div class="option-item" v-for="option in options" @click="handleClick(option)"
-      :class="{ disabled: option.disabled }" data-item="btn-documentMode-option">
+    <div
+      class="option-item"
+      v-for="option in options"
+      @click="handleClick(option)"
+      :class="{ disabled: option.disabled }"
+      data-item="btn-documentMode-option"
+      role="menuitem"
+    >
       <div class="document-mode-column icon-column">
         <div class="icon-column__icon" v-html="option.icon"></div>
       </div>
diff --git a/packages/super-editor/src/components/toolbar/IconGrid.vue b/packages/super-editor/src/components/toolbar/IconGrid.vue
index 7e9c313b85..01640334ba 100644
--- a/packages/super-editor/src/components/toolbar/IconGrid.vue
+++ b/packages/super-editor/src/components/toolbar/IconGrid.vue
@@ -33,6 +33,8 @@ const handleSelect = (option) => {
     <div 
       v-if="hasNoneIcon"
       class="none-option"
+      role="menuitem"
+      aria-label="Clear color selection"
       @click="handleSelect('none')"
     >
       <span 
diff --git a/packages/super-editor/src/components/toolbar/IconGridRow.vue b/packages/super-editor/src/components/toolbar/IconGridRow.vue
index ca2798ce0b..e22255390b 100644
--- a/packages/super-editor/src/components/toolbar/IconGridRow.vue
+++ b/packages/super-editor/src/components/toolbar/IconGridRow.vue
@@ -35,11 +35,18 @@ onMounted(() => {
 });
 </script>
 <template>
-  <div class="option-row" v-for="(row, rowIndex) in icons" :key="rowIndex">
+  <div 
+    class="option-row" 
+    v-for="(row, rowIndex) in icons" 
+    :key="rowIndex"
+    role="group"
+  >
     <div
       class="option"
       v-for="(option, optionIndex) in row"
       :key="optionIndex"
+      :aria-label="option.label"
+      role="menuitem"
       @click.stop.prevent="handleClick(option)"
     >
       <div
diff --git a/packages/super-editor/src/components/toolbar/LinkInput.vue b/packages/super-editor/src/components/toolbar/LinkInput.vue
index 5a60e4e9c1..dd62b13b3c 100644
--- a/packages/super-editor/src/components/toolbar/LinkInput.vue
+++ b/packages/super-editor/src/components/toolbar/LinkInput.vue
@@ -96,9 +96,15 @@ onMounted(() => {
     <div v-if="showInput && !isAnchor">
       <div class="input-row">
         <div class="input-icon" v-html="toolbarIcons.linkInput"></div>
-        <input type="text" placeholder="Type or paste a link"
-          :class="{ error: urlError }" v-model="rawUrl"
-          @keydown.enter.stop.prevent="handleSubmit" @keydown="urlError = false" />
+        <input
+          type="text"
+          name="link"
+          placeholder="Type or paste a link"
+          :class="{ error: urlError }"
+          v-model="rawUrl"
+          @keydown.enter.stop.prevent="handleSubmit"
+          @keydown="urlError = false"
+        />
 
         <div class="open-link-icon" :class="{ disabled: !validUrl }" v-html="toolbarIcons.openLink" @click="openLink"
           data-item="btn-link-open">
diff --git a/packages/super-editor/src/components/toolbar/OverflowMenu.vue b/packages/super-editor/src/components/toolbar/OverflowMenu.vue
index b58d32bc18..642b042bae 100644
--- a/packages/super-editor/src/components/toolbar/OverflowMenu.vue
+++ b/packages/super-editor/src/components/toolbar/OverflowMenu.vue
@@ -33,15 +33,22 @@ const handleCommand = ({ item, argument }) => {
 </script>
 
 <template>
-  <div class="overflow-menu">
+  <div 
+    class="overflow-menu"
+  >
     <div class="overflow-menu-trigger">
       <ToolbarButton 
         :toolbar-item="overflowToolbarItem"
         @buttonClick="toggleOverflowMenu" 
       />
     </div>
-    <div v-if="isDropdownOpened" class="overflow-menu_items">
-      <ButtonGroup :toolbar-items="overflowItems" @command="handleCommand" class="superdoc-toolbar-overflow" />
+    <div v-if="isDropdownOpened" class="overflow-menu_items" role="group">
+      <ButtonGroup
+        class="superdoc-toolbar-overflow"
+        :toolbar-items="overflowItems"
+        from-overflow
+        @command="handleCommand"  
+      />
     </div>
   </div>
 </template>
diff --git a/packages/super-editor/src/components/toolbar/TableActions.vue b/packages/super-editor/src/components/toolbar/TableActions.vue
index 95f357436a..0bf5618c76 100644
--- a/packages/super-editor/src/components/toolbar/TableActions.vue
+++ b/packages/super-editor/src/components/toolbar/TableActions.vue
@@ -19,7 +19,10 @@ const handleClick = (item) => {
       :class="{ 'toolbar-table-actions__item--border':  option.bottomBorder}"
       v-for="option in options"
       @click="handleClick(option)"
-      :data-item="option.props?.['data-item'] || ''">
+      :data-item="option.props?.['data-item'] || ''"
+      :ariaLabel="option.props?.ariaLabel"
+      role="menuitem"
+    >
       <div class="toolbar-table-actions__icon">
         <div class="toolbar-table-actions__icon-wrapper" v-html="option.icon"></div>
       </div>
diff --git a/packages/super-editor/src/components/toolbar/TableGrid.vue b/packages/super-editor/src/components/toolbar/TableGrid.vue
index b178d433dc..83df66581a 100644
--- a/packages/super-editor/src/components/toolbar/TableGrid.vue
+++ b/packages/super-editor/src/components/toolbar/TableGrid.vue
@@ -53,7 +53,10 @@ const handleClick = ({ cols, rows }) => {
       </template>
     </div>
 
-    <div class="toolbar-table-grid-value">
+    <div 
+      class="toolbar-table-grid-value"
+      :aria-valuetext="`${selectedRows} x ${selectedCols}`"
+    >
       {{ selectedRows }} x {{ selectedCols }}
     </div>
   </div>
diff --git a/packages/super-editor/src/components/toolbar/Toolbar.vue b/packages/super-editor/src/components/toolbar/Toolbar.vue
index 77d665aaf7..45d9646cfd 100644
--- a/packages/super-editor/src/components/toolbar/Toolbar.vue
+++ b/packages/super-editor/src/components/toolbar/Toolbar.vue
@@ -52,7 +52,12 @@ const handleCommand = ({ item, argument, option }) => {
 </script>
 
 <template>
-  <div class="superdoc-toolbar" :key="toolbarKey">
+  <div 
+    class="superdoc-toolbar" 
+    :key="toolbarKey"
+    role="toolbar"
+    aria-label="Toolbar"
+  >
     <ButtonGroup
       v-if="showLeftSide"
       :toolbar-items="getFilteredItems('left')"
diff --git a/packages/super-editor/src/components/toolbar/ToolbarButton.vue b/packages/super-editor/src/components/toolbar/ToolbarButton.vue
index c19ea874af..2b5c23e0f9 100644
--- a/packages/super-editor/src/components/toolbar/ToolbarButton.vue
+++ b/packages/super-editor/src/components/toolbar/ToolbarButton.vue
@@ -30,6 +30,10 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  isOverflowItem: {
+    type: Boolean,
+    default: false,
+  }
 });
 
 const {
@@ -83,12 +87,20 @@ const caretIcon = computed(() => {
 </script>
 
 <template>
-  <div :class="['toolbar-item', attributes.className]" :style="getStyle">
-    <div @click="handleClick" class="toolbar-button"
+  <div 
+    :class="['toolbar-item', attributes.className]" 
+    :style="getStyle"
+    :role="isOverflowItem ? 'menuitem' : ''"
+  >
+    <div
+      @click="handleClick"
+      class="toolbar-button"
       :class="{ active, disabled, narrow: isNarrow, wide: isWide, 'has-inline-text-input': hasInlineTextInput, 'high-contrast': isHighContrastMode }"
-      :data-item="`btn-${name || ''}`">
-      <ToolbarButtonIcon v-if="icon" :color="iconColor" class="toolbar-icon"
-        :class="{ 'high-contrast': isHighContrastMode }" :icon="icon" :name="name">
+      :data-item="`btn-${name || ''}`"
+      :aria-label="attributes.ariaLabel"
+      role="button"
+    >
+      <ToolbarButtonIcon v-if="icon" :color="iconColor" class="toolbar-icon" :icon="icon" :name="name">
       </ToolbarButtonIcon>
 
       <div class="button-label" v-if="label && !hideLabel && !inlineTextInputVisible">
diff --git a/packages/super-editor/src/components/toolbar/ToolbarSeparator.vue b/packages/super-editor/src/components/toolbar/ToolbarSeparator.vue
index 54cc24b8e5..8d0bb309cf 100644
--- a/packages/super-editor/src/components/toolbar/ToolbarSeparator.vue
+++ b/packages/super-editor/src/components/toolbar/ToolbarSeparator.vue
@@ -19,7 +19,11 @@ const getSeparatorColor = () => {
 </script>
 
 <template>
-  <div class="toolbar-separator">
+  <div 
+    class="toolbar-separator"
+    role="separator"
+    aria-label="Toolbar separator"
+  >
     <div class="separator-inner" :style="{ backgroundColor: getSeparatorColor() }"></div>
   </div>
 </template>
diff --git a/packages/super-editor/src/components/toolbar/color-dropdown-helpers.js b/packages/super-editor/src/components/toolbar/color-dropdown-helpers.js
index df2d7ebc7c..c7db66649d 100644
--- a/packages/super-editor/src/components/toolbar/color-dropdown-helpers.js
+++ b/packages/super-editor/src/components/toolbar/color-dropdown-helpers.js
@@ -40,83 +40,83 @@ export const renderColorOptions = (superToolbar, button, customIcons = [], hasNo
 
 const icons = [
   [
-    makeColorOption('#111111'),
-    makeColorOption('#333333'),
-    makeColorOption('#5C5C5C'),
-    makeColorOption('#858585'),
-    makeColorOption('#ADADAD'),
-    makeColorOption('#D6D6D6'),
-    makeColorOption('#FFFFFF'),
+    makeColorOption('#111111', 'black'),
+    makeColorOption('#333333', 'dark gray'),
+    makeColorOption('#5C5C5C', 'medium gray'),
+    makeColorOption('#858585', 'light gray'),
+    makeColorOption('#ADADAD', 'very light gray'),
+    makeColorOption('#D6D6D6', 'transparent gray'),
+    makeColorOption('#FFFFFF', 'white'),
   ],
 
   [
-    makeColorOption('#860028'),
-    makeColorOption('#D2003F'),
-    makeColorOption('#DB3365'),
-    makeColorOption('#E4668C'),
-    makeColorOption('#ED99B2'),
-    makeColorOption('#F6CCD9'),
-    makeColorOption('#FF004D'),
+    makeColorOption('#860028', 'dark red'),
+    makeColorOption('#D2003F', 'red'),
+    makeColorOption('#DB3365', 'coral red'),
+    makeColorOption('#E4668C', 'light red'),
+    makeColorOption('#ED99B2', 'pale pink'),
+    makeColorOption('#F6CCD9', 'transparent pink'),
+    makeColorOption('#FF004D', 'bright pink'),
   ],
 
   [
-    makeColorOption('#83015E'),
-    makeColorOption('#CD0194'),
-    makeColorOption('#D734A9'),
-    makeColorOption('#E167BF'),
-    makeColorOption('#EB99D4'),
-    makeColorOption('#F5CCEA'),
-    makeColorOption('#FF00A8'),
+    makeColorOption('#83015E', 'dark purple'),
+    makeColorOption('#CD0194', 'purple'),
+    makeColorOption('#D734A9', 'orchid'),
+    makeColorOption('#E167BF', 'light purple'),
+    makeColorOption('#EB99D4', 'lavender'),
+    makeColorOption('#F5CCEA', 'transparent pink'),
+    makeColorOption('#FF00A8', 'neon pink'),
   ],
 
   [
-    makeColorOption('#8E220A'),
-    makeColorOption('#DD340F'),
-    makeColorOption('#E45C3F'),
-    makeColorOption('#EB856F'),
-    makeColorOption('#F1AE9F'),
-    makeColorOption('#F8D6CF'),
-    makeColorOption('#FF7A00'),
+    makeColorOption('#8E220A', 'maroon'),
+    makeColorOption('#DD340F', 'red-orange'),
+    makeColorOption('#E45C3F', 'burnt orange'),
+    makeColorOption('#EB856F', 'peach'),
+    makeColorOption('#F1AE9F', 'pale peach'),
+    makeColorOption('#F8D6CF', 'transparent peach'),
+    makeColorOption('#FF7A00', 'orange'),
   ],
 
   [
-    makeColorOption('#947D02'),
-    makeColorOption('#E7C302'),
-    makeColorOption('#ECCF35'),
-    makeColorOption('#F1DB67'),
-    makeColorOption('#F5E79A'),
-    makeColorOption('#FAF3CC'),
-    makeColorOption('#FAFF09'),
+    makeColorOption('#947D02', 'olive'),
+    makeColorOption('#E7C302', 'mustard yellow'),
+    makeColorOption('#ECCF35', 'yellow'),
+    makeColorOption('#F1DB67', 'light yellow'),
+    makeColorOption('#F5E79A', 'very pale yellow'),
+    makeColorOption('#FAF3CC', 'transparent yellow'),
+    makeColorOption('#FAFF09', 'neon yellow'),
   ],
 
   [
-    makeColorOption('#055432'),
-    makeColorOption('#07834F'),
-    makeColorOption('#399C72'),
-    makeColorOption('#6AB595'),
-    makeColorOption('#9CCDB9'),
-    makeColorOption('#CDE6DC'),
-    makeColorOption('#05F38F'),
+    makeColorOption('#055432', 'forest green'),
+    makeColorOption('#07834F', 'green'),
+    makeColorOption('#399C72', 'medium green'),
+    makeColorOption('#6AB595', 'light green'),
+    makeColorOption('#9CCDB9', 'mint'),
+    makeColorOption('#CDE6DC', 'transparent mint'),
+    makeColorOption('#05F38F', 'bright teal'),
   ],
 
   [
-    makeColorOption('#063E7E'),
-    makeColorOption('#0A60C5'),
-    makeColorOption('#3B80D1'),
-    makeColorOption('#6CA0DC'),
-    makeColorOption('#9DBFE8'),
-    makeColorOption('#CEDFF3'),
-    makeColorOption('#21c8ce'),
+    makeColorOption('#063E7E', 'navy blue'),
+    makeColorOption('#0A60C5', 'blue'),
+    makeColorOption('#3B80D1', 'sky blue'),
+    makeColorOption('#6CA0DC', 'cornflower blue'),
+    makeColorOption('#9DBFE8', 'light blue'),
+    makeColorOption('#CEDFF3', 'very light blue'),
+    makeColorOption('#21c8ce', 'cyan'),
   ],
 
   [
-    makeColorOption('#3E027A'),
-    makeColorOption('#6103BF'),
-    makeColorOption('#8136CC'),
-    makeColorOption('#A068D9'),
-    makeColorOption('#C09AE6'),
-    makeColorOption('#DFCDF2'),
-    makeColorOption('#A91DFF'),
+    makeColorOption('#3E027A', 'deep purple'),
+    makeColorOption('#6103BF', 'indigo'),
+    makeColorOption('#8136CC', 'violet'),
+    makeColorOption('#A068D9', 'lavender pink'),
+    makeColorOption('#C09AE6', 'light lilac'),
+    makeColorOption('#DFCDF2', 'transparent lilac'),
+    makeColorOption('#A91DFF', 'neon purple'),
   ],
 ];
 
diff --git a/packages/super-editor/src/components/toolbar/defaultItems.js b/packages/super-editor/src/components/toolbar/defaultItems.js
index c135235a4f..d106bd440a 100644
--- a/packages/super-editor/src/components/toolbar/defaultItems.js
+++ b/packages/super-editor/src/components/toolbar/defaultItems.js
@@ -39,6 +39,9 @@ export const makeDefaultItems = ({
     command: 'toggleBold',
     icon: toolbarIcons.bold,
     tooltip: toolbarTexts.bold,
+    attributes: {
+      ariaLabel: 'Bold',
+    }
   });
 
   // font
@@ -55,6 +58,9 @@ export const makeDefaultItems = ({
     isWide: true,
     style: { width: '116px' },
     suppressActiveHighlight: true,
+    attributes: {
+      ariaLabel: 'Font family',
+    },
     options: [...(toolbarFonts ? toolbarFonts : TOOLBAR_FONTS)],
     onActivate: ({ fontFamily }) => {
       if (!fontFamily) return;
@@ -77,6 +83,9 @@ export const makeDefaultItems = ({
     hasCaret: false,
     isWide: true,
     suppressActiveHighlight: true,
+    attributes: {
+      ariaLabel: 'AI',
+    },
     options: [
       {
         type: 'render',
@@ -129,6 +138,9 @@ export const makeDefaultItems = ({
     suppressActiveHighlight: true,
     isWide: true,
     command: 'setFontSize',
+    attributes: {
+      ariaLabel: 'Font size',
+    },
     options: [
       { label: '8', key: '8pt', props: { 'data-item': 'btn-fontSize-option' } },
       { label: '9', key: '9pt', props: { 'data-item': 'btn-fontSize-option' } },
@@ -173,6 +185,9 @@ export const makeDefaultItems = ({
     icon: toolbarIcons.italic,
     active: false,
     tooltip: toolbarTexts.italic,
+    attributes: {
+      ariaLabel: 'Italic',
+    },
   });
 
   // underline
@@ -183,6 +198,9 @@ export const makeDefaultItems = ({
     icon: toolbarIcons.underline,
     active: false,
     tooltip: toolbarTexts.underline,
+    attributes: {
+      ariaLabel: 'Underline',
+    },
   });
   
   // highlight
@@ -198,6 +216,9 @@ export const makeDefaultItems = ({
     command: 'setHighlight',
     noArgumentCommand: 'unsetHighlight',
     suppressActiveHighlight: true,
+    attributes: {
+      ariaLabel: 'Highlight',
+    },
     options: [
       {
         key: 'color',
@@ -223,6 +244,9 @@ export const makeDefaultItems = ({
     tooltip: toolbarTexts.color,
     command: 'setColor',
     suppressActiveHighlight: true,
+    attributes: {
+      ariaLabel: 'Color',
+    },
     options: [
       {
         key: 'color',
@@ -246,6 +270,9 @@ export const makeDefaultItems = ({
     tooltip: toolbarTexts.search,
     group: 'right',
     inputRef: searchRef,
+    attributes: {
+      ariaLabel: 'Search'
+    },
     options: [
       {
         type: 'render',
@@ -277,6 +304,9 @@ export const makeDefaultItems = ({
     icon: toolbarIcons.link,
     active: false,
     tooltip: toolbarTexts.link,
+    attributes: {
+      ariaLabel: 'Link dropdown',
+    },
     options: [
       {
         type: 'render',
@@ -338,6 +368,9 @@ export const makeDefaultItems = ({
     active: false,
     tooltip: toolbarTexts.image,
     disabled: false,
+    attributes: {
+      ariaLabel: 'Image',
+    },
   });
 
   // table
@@ -351,6 +384,9 @@ export const makeDefaultItems = ({
     tooltip: toolbarTexts.table,
     command: 'insertTable',
     suppressActiveHighlight: true,
+    attributes: {
+      ariaLabel: 'Table',
+    },
     options: [
       {
         key: 'table',
@@ -381,6 +417,9 @@ export const makeDefaultItems = ({
     icon: toolbarIcons.tableActions,
     hideLabel: true,
     disabled: true,
+    attributes: {
+      ariaLabel: 'Table actions',
+    },
     options: [
       {
         type: 'render',
@@ -394,69 +433,102 @@ export const makeDefaultItems = ({
       label: toolbarTexts.addRowBefore,
       command: 'addRowBefore',
       icon: toolbarIcons.addRowBefore,
-      props: { 'data-item': 'btn-tableActions-option' }
+      props: { 
+        'data-item': 'btn-tableActions-option', 
+        ariaLabel: 'Add row before',
+      }
     },
     { 
       label: toolbarTexts.addRowAfter,
       command: 'addRowAfter',
       icon: toolbarIcons.addRowAfter,
-      props: { 'data-item': 'btn-tableActions-option' }
+      props: { 
+        'data-item': 'btn-tableActions-option',
+        ariaLabel: 'Add row after',
+      }
     },
     { 
       label: toolbarTexts.addColumnBefore,
       command: 'addColumnBefore',
       icon: toolbarIcons.addColumnBefore,
-      props: { 'data-item': 'btn-tableActions-option' }
+      props: { 
+        'data-item': 'btn-tableActions-option',
+        ariaLabel: 'Add column before',
+      }
     },
     { 
       label: toolbarTexts.addColumnAfter,
       command: 'addColumnAfter',
       icon: toolbarIcons.addColumnAfter,
       bottomBorder: true,
-      props: { 'data-item': 'btn-tableActions-option' }
+      props: { 
+        'data-item': 'btn-tableActions-option',
+        ariaLabel: 'Add column after',
+      }
     },
     { 
       label: toolbarTexts.deleteRow,
       command: 'deleteRow',
       icon: toolbarIcons.deleteRow,
-      props: { 'data-item': 'btn-tableActions-option' }
+      props: { 
+        'data-item': 'btn-tableActions-option',
+        ariaLabel: 'Delete row',
+      }
     },
     { 
       label: toolbarTexts.deleteColumn,
       command: 'deleteColumn',
       icon: toolbarIcons.deleteColumn,
-      props: { 'data-item': 'btn-tableActions-option' }
+      props: { 
+        'data-item': 'btn-tableActions-option',
+        ariaLabel: 'Delete column',
+      }
     },
     { 
       label: toolbarTexts.deleteTable,
       command: 'deleteTable',
       icon: toolbarIcons.deleteTable,
-      props: { 'data-item': 'btn-tableActions-option' }
+      props: { 
+        'data-item': 'btn-tableActions-option',
+        ariaLabel: 'Delete table',
+      }
     },
     { 
       label: toolbarTexts.transparentBorders,
       command: 'deleteCellAndTableBorders',
       icon: toolbarIcons.deleteBorders,
       bottomBorder: true,
-      props: { 'data-item': 'btn-tableActions-option' }
+      props: { 
+        'data-item': 'btn-tableActions-option',
+        ariaLabel: 'Delete cell and table borders',
+      }
     },
     { 
       label: toolbarTexts.mergeCells,
       command: 'mergeCells',
       icon: toolbarIcons.mergeCells,
-      props: { 'data-item': 'btn-tableActions-option' }
+      props: { 
+        'data-item': 'btn-tableActions-option',
+        ariaLabel: 'Merge cells',
+      }
     },
     { 
       label: toolbarTexts.splitCell,
       command: 'splitCell',
       icon: toolbarIcons.splitCell,
-      props: { 'data-item': 'btn-tableActions-option' }
+      props: {
+        'data-item': 'btn-tableActions-option',
+        ariaLabel: 'Split cells',
+      }
     },
     { 
       label: toolbarTexts.fixTables,
       command: 'fixTables',
       icon: toolbarIcons.fixTables,
-      props: { 'data-item': 'btn-tableActions-option' }
+      props: {
+        'data-item': 'btn-tableActions-option',
+        ariaLabel: 'Fix tables',
+      }
     },
   ];
 
@@ -469,7 +541,7 @@ export const makeDefaultItems = ({
         superToolbar.emitCommand({ item: tableActionsItem, argument: { command } });
       },
     });
-  };
+  }
 
   // alignment
   const alignment = useToolbarItem({
@@ -482,6 +554,9 @@ export const makeDefaultItems = ({
     markName: 'textAlign',
     labelAttr: 'textAlign',
     suppressActiveHighlight: true,
+    attributes: {
+      ariaLabel: 'Text align',
+    },
     options: [
       {
         type: 'render',
@@ -532,6 +607,9 @@ export const makeDefaultItems = ({
     icon: toolbarIcons.bulletList,
     active: false,
     tooltip: toolbarTexts.bulletList,
+    attributes: {
+      ariaLabel: 'Bullet list',
+    },
   });
 
   // number list
@@ -542,6 +620,9 @@ export const makeDefaultItems = ({
     icon: toolbarIcons.numberedList,
     active: false,
     tooltip: toolbarTexts.numberedList,
+    attributes: {
+      ariaLabel: 'Numbered list',
+    },
   });
 
   // indent left
@@ -553,6 +634,9 @@ export const makeDefaultItems = ({
     active: false,
     tooltip: toolbarTexts.indentLeft,
     disabled: false,
+    attributes: {
+      ariaLabel: 'Left indent',
+    },
   });
 
   // indent right
@@ -564,6 +648,9 @@ export const makeDefaultItems = ({
     active: false,
     tooltip: toolbarTexts.indentRight,
     disabled: false,
+    attributes: {
+      ariaLabel: 'Right indent',
+    },
   });
 
   // overflow
@@ -574,6 +661,9 @@ export const makeDefaultItems = ({
     icon: toolbarIcons.overflow,
     active: false,
     disabled: false,
+    attributes: {
+      ariaLabel: 'Overflow items',
+    },
   });
 
   // const overflowOptions = useToolbarItem({
@@ -597,6 +687,9 @@ export const makeDefaultItems = ({
     isWide: true,
     inlineTextInputVisible: false,
     hasInlineTextInput: true,
+    attributes: {
+      ariaLabel: 'Zoom',
+    },
     options: [
       { label: '50%', key: 0.5, props: { 'data-item': 'btn-zoom-option' } },
       { label: '75%', key: 0.75, props: { 'data-item': 'btn-zoom-option' } },
@@ -622,6 +715,9 @@ export const makeDefaultItems = ({
     command: 'undo',
     icon: toolbarIcons.undo,
     group: 'left',
+    attributes: {
+      ariaLabel: 'Undo',
+    },
     onDeactivate: () => {
       undo.disabled.value = !superToolbar.undoDepth;
     },
@@ -636,6 +732,9 @@ export const makeDefaultItems = ({
     command: 'redo',
     icon: toolbarIcons.redo,
     group: 'left',
+    attributes: {
+      ariaLabel: 'Redo',
+    },
     onDeactivate: () => {
       redo.disabled.value = !superToolbar.redoDepth;
     },
@@ -650,6 +749,9 @@ export const makeDefaultItems = ({
     command: 'toggleTrackChanges',
     icon: toolbarIcons.trackChanges,
     group: 'left',
+    attributes: {
+      ariaLabel: 'Track changes',
+    },
   });
 
   const acceptTrackedChangeBySelection = useToolbarItem({
@@ -660,6 +762,9 @@ export const makeDefaultItems = ({
     command: 'acceptTrackedChangeBySelection',
     icon: toolbarIcons.trackChangesAccept,
     group: 'left',
+    attributes: {
+      ariaLabel: 'Accept tracked changes',
+    }
   });
 
   const rejectTrackedChangeOnSelection = useToolbarItem({
@@ -670,6 +775,9 @@ export const makeDefaultItems = ({
     command: 'rejectTrackedChangeOnSelection',
     icon: toolbarIcons.trackChangesReject,
     group: 'left',
+    attributes: {
+      ariaLabel: 'Reject tracked changes',
+    }
   });
 
   const toggleTrackChangesOriginal = useToolbarItem({
@@ -680,6 +788,9 @@ export const makeDefaultItems = ({
     command: 'toggleTrackChangesShowOriginal',
     icon: toolbarIcons.trackChangesOriginal,
     group: 'left',
+    attributes: {
+      ariaLabel: 'Toggle tracked changes show original',
+    }
   });
 
   const toggleTrackChangesFinal = useToolbarItem({
@@ -690,6 +801,9 @@ export const makeDefaultItems = ({
     command: 'toggleTrackChangesShowFinal',
     icon: toolbarIcons.trackChangesFinal,
     group: 'left',
+    attributes: {
+      ariaLabel: 'Toggle tracked changes show final',
+    }
   });
 
   const clearFormatting = useToolbarItem({
@@ -698,6 +812,9 @@ export const makeDefaultItems = ({
     command: 'clearFormat',
     tooltip: toolbarTexts.clearFormatting,
     icon: toolbarIcons.clearFormatting,
+    attributes: {
+      ariaLabel: 'Clear formatting',
+    }
   });
 
   const toolbarItemsMobile = [
@@ -717,6 +834,9 @@ export const makeDefaultItems = ({
     icon: toolbarIcons.copyFormat,
     command: 'copyFormat',
     active: false,
+    attributes: {
+      ariaLabel: 'Copy formatting',
+    }
   });
 
   const getDocumentOptionsAfterRole = (role, documentOptions) => {
@@ -749,6 +869,7 @@ export const makeDefaultItems = ({
     attributes: {
       dropdownPosition: 'right',
       className: 'toolbar-item--doc-mode',
+      ariaLabel: 'Document mode',
     },
     options: [
       {
@@ -791,7 +912,7 @@ export const makeDefaultItems = ({
         superToolbar.emitCommand({ item: documentMode, argument: label });
       },
     });
-  };
+  }
 
   const pageBreakTool = useToolbarItem({
     type: 'button',
@@ -800,6 +921,9 @@ export const makeDefaultItems = ({
     icon: toolbarIcons.pageBreak,
     active: false,
     tooltip: toolbarTexts.pageBreak,
+    attributes: {
+      ariaLabel: 'Page break',
+    }
   });
 
   // define sizes to calculate toolbar overflow items
@@ -822,6 +946,9 @@ export const makeDefaultItems = ({
     icon: toolbarIcons.ruler,
     active: false,
     tooltip: toolbarTexts.ruler,
+    attributes: {
+      ariaLabel: 'Ruler',
+    }
   });
 
   const selectedLinkedStyle = ref(null);
@@ -839,6 +966,7 @@ export const makeDefaultItems = ({
     disabled: false,
     attributes: {
       className: 'toolbar-item--linked-styles',
+      ariaLabel: 'Linked styles',
     },
     options: [
       {
@@ -889,6 +1017,9 @@ export const makeDefaultItems = ({
     command: 'setLineHeight',
     dropdownValueKey: 'key',
     selectedValue: '1',
+    attributes: {
+      ariaLabel: 'Line height',
+    },
     options: [
       { label: '1,0', key: '1', icon: () => renderIcon('1', lineHeight.selectedValue), props: { 'data-item': 'btn-lineHeight-option' } },
       { label: '1,15', key: '1.15', icon: () => renderIcon('1.15', lineHeight.selectedValue), props: { 'data-item': 'btn-lineHeight-option' } },
diff --git a/packages/super-editor/src/core/Editor.js b/packages/super-editor/src/core/Editor.js
index f2c799a0bd..46b2a0e152 100644
--- a/packages/super-editor/src/core/Editor.js
+++ b/packages/super-editor/src/core/Editor.js
@@ -949,6 +949,7 @@ export class Editor extends EventEmitter {
           toggleHeaderFooterEditMode(this, null, false);
           const pm = document.querySelector('.ProseMirror');
           pm.classList.remove('header-footer-edit');
+          pm.setAttribute('aria-readonly', false);
         }
       }
     });
@@ -1015,6 +1016,11 @@ export class Editor extends EventEmitter {
     if (!proseMirror || !pageSize || !pageMargins) {
       return;
     }
+    
+    proseMirror.setAttribute('role', 'document');
+    proseMirror.setAttribute('aria-multiline', true);
+    proseMirror.setAttribute('aria-label', 'Main content area, start typing to enter text.');
+    proseMirror.setAttribute('aria-description', '');
 
     // Set fixed dimensions and padding that won't change with scaling
     element.style.width = pageSize.width + 'in';
diff --git a/packages/super-editor/src/extensions/ai/ai-nodes.js b/packages/super-editor/src/extensions/ai/ai-nodes.js
index 4460aa8e4a..da729c61ad 100644
--- a/packages/super-editor/src/extensions/ai/ai-nodes.js
+++ b/packages/super-editor/src/extensions/ai/ai-nodes.js
@@ -20,6 +20,7 @@ export const AiLoaderNode = Node.create({
       htmlAttributes: {
         class: 'sd-ai-loader',
         contentEditable: 'false',
+        'aria-label': 'AI loader node'
       }
     };
   },
diff --git a/packages/super-editor/src/extensions/bookmarks/bookmarks.js b/packages/super-editor/src/extensions/bookmarks/bookmarks.js
index 435986cce5..2ae3deda51 100644
--- a/packages/super-editor/src/extensions/bookmarks/bookmarks.js
+++ b/packages/super-editor/src/extensions/bookmarks/bookmarks.js
@@ -8,7 +8,11 @@ export const BookmarkStart = Node.create({
 
   addOptions() {
     return {
-      htmlAttributes: { style: 'height: 0; width: 0;' },
+      htmlAttributes: { 
+        style: 'height: 0; width: 0;' ,
+        'aria-label': 'Bookmark start node',
+        role: 'link'
+      },
     };
   },
 
diff --git a/packages/super-editor/src/extensions/bullet-list/bullet-list.js b/packages/super-editor/src/extensions/bullet-list/bullet-list.js
index f69a927631..c547a5cece 100644
--- a/packages/super-editor/src/extensions/bullet-list/bullet-list.js
+++ b/packages/super-editor/src/extensions/bullet-list/bullet-list.js
@@ -19,7 +19,9 @@ export const BulletList = Node.create({
   addOptions() {
     return {
       itemTypeName: 'listItem',
-      htmlAttributes: {},
+      htmlAttributes: {
+        'aria-label': 'Bullet list node'
+      },
       keepMarks: true,
       keepAttributes: false,
     };
diff --git a/packages/super-editor/src/extensions/comment/comment.js b/packages/super-editor/src/extensions/comment/comment.js
index 1f7b1e1dd6..9e1eef04f0 100644
--- a/packages/super-editor/src/extensions/comment/comment.js
+++ b/packages/super-editor/src/extensions/comment/comment.js
@@ -21,6 +21,7 @@ export const CommentRangeStart = Node.create({
     return {
       htmlAttributes: {
         contentEditable: 'false',
+        'aria-label': 'Comment range start node'
       }
     }
   },
@@ -59,6 +60,7 @@ export const CommentRangeEnd = Node.create({
     return {
       htmlAttributes: {
         contentEditable: 'false',
+        'aria-label': 'Comment range end node'
       }
     }
   },
@@ -97,6 +99,7 @@ export const CommentReference = Node.create({
     return {
       htmlAttributes: {
         contentEditable: 'false',
+        'aria-label': 'Comment reference node'
       }
     }
   },
diff --git a/packages/super-editor/src/extensions/document/document.js b/packages/super-editor/src/extensions/document/document.js
index 561e70e4d0..6e7c914f7c 100644
--- a/packages/super-editor/src/extensions/document/document.js
+++ b/packages/super-editor/src/extensions/document/document.js
@@ -19,6 +19,7 @@ export const Document = Node.create({
     return {
       attributes: {
         rendered: false,
+        'aria-label': 'Document node'
       },
     };
   },
diff --git a/packages/super-editor/src/extensions/field-annotation/field-annotation.js b/packages/super-editor/src/extensions/field-annotation/field-annotation.js
index 6af6b7a271..b99aa9a53b 100644
--- a/packages/super-editor/src/extensions/field-annotation/field-annotation.js
+++ b/packages/super-editor/src/extensions/field-annotation/field-annotation.js
@@ -27,6 +27,7 @@ export const FieldAnnotation = Node.create({
     return {
       htmlAttributes: {
         class: annotationClass,
+        'aria-label': 'Field annotation node'
       },
       annotationClass,
       annotationContentClass,
diff --git a/packages/super-editor/src/extensions/heading/heading.js b/packages/super-editor/src/extensions/heading/heading.js
index 3bb65d7890..8265e6851e 100644
--- a/packages/super-editor/src/extensions/heading/heading.js
+++ b/packages/super-editor/src/extensions/heading/heading.js
@@ -12,7 +12,9 @@ export const Heading = Node.create({
   addOptions() {
     return {
       levels: [1, 2, 3, 4, 5, 6],
-      htmlAttributes: {},
+      htmlAttributes: {
+        'aria-label': 'Heading node'
+      },
     };
   },
 
diff --git a/packages/super-editor/src/extensions/image/image.js b/packages/super-editor/src/extensions/image/image.js
index 2cc5c8190a..2c971366bc 100644
--- a/packages/super-editor/src/extensions/image/image.js
+++ b/packages/super-editor/src/extensions/image/image.js
@@ -16,6 +16,7 @@ export const Image = Node.create({
       allowBase64: true,
       htmlAttributes: {
         style: 'display: inline-block;',
+        'aria-label': 'Image node'
       },
     };
   },
diff --git a/packages/super-editor/src/extensions/line-break/line-break.js b/packages/super-editor/src/extensions/line-break/line-break.js
index 2dcdc6795e..84e591ca16 100644
--- a/packages/super-editor/src/extensions/line-break/line-break.js
+++ b/packages/super-editor/src/extensions/line-break/line-break.js
@@ -31,6 +31,8 @@ export const HardBreak = Node.create({
       htmlAttributes: {
         contentEditable: 'false',
         lineBreakType: 'page',
+        'aria-hidden': 'true',
+        'aria-label': 'Hard break node'
       },
     }
   },
@@ -55,4 +57,4 @@ export const HardBreak = Node.create({
   renderDOM({ htmlAttributes }) {
     return ['span', Attribute.mergeAttributes(this.options.htmlAttributes, htmlAttributes)];
   }
-});
\ No newline at end of file
+});
diff --git a/packages/super-editor/src/extensions/list-item/list-item.js b/packages/super-editor/src/extensions/list-item/list-item.js
index ebd8823c2e..efa6b0d2ab 100644
--- a/packages/super-editor/src/extensions/list-item/list-item.js
+++ b/packages/super-editor/src/extensions/list-item/list-item.js
@@ -14,7 +14,9 @@ export const ListItem = Node.create({
 
   addOptions() {
     return {
-      htmlAttributes: {},
+      htmlAttributes: {
+        'aria-label': 'List item node'
+      },
       bulletListTypeName: 'bulletList',
       orderedListTypeName: 'orderedList',
     };
diff --git a/packages/super-editor/src/extensions/mention/mention.js b/packages/super-editor/src/extensions/mention/mention.js
index a6ab226f11..11744065b0 100644
--- a/packages/super-editor/src/extensions/mention/mention.js
+++ b/packages/super-editor/src/extensions/mention/mention.js
@@ -15,6 +15,7 @@ export const Mention = Node.create({
     return {
       htmlAttributes: {
         class: 'sd-editor-mention',
+        'aria-label': 'Mention node'
       },
     };
   },
diff --git a/packages/super-editor/src/extensions/ordered-list/ordered-list.js b/packages/super-editor/src/extensions/ordered-list/ordered-list.js
index 1be7017a8f..f0ee9a09de 100644
--- a/packages/super-editor/src/extensions/ordered-list/ordered-list.js
+++ b/packages/super-editor/src/extensions/ordered-list/ordered-list.js
@@ -22,7 +22,9 @@ export const OrderedList = Node.create({
   addOptions() {
     return {
       itemTypeName: 'listItem',
-      htmlAttributes: {},
+      htmlAttributes: {
+        'aria-label': 'Ordered list node'
+      },
       keepMarks: true,
       keepAttributes: false,
       listStyleTypes: ['decimal', 'lowerAlpha', 'lowerRoman'],
diff --git a/packages/super-editor/src/extensions/page-number/page-number.js b/packages/super-editor/src/extensions/page-number/page-number.js
index 4ed99308e7..0e51bbf944 100644
--- a/packages/super-editor/src/extensions/page-number/page-number.js
+++ b/packages/super-editor/src/extensions/page-number/page-number.js
@@ -11,6 +11,7 @@ export const PageNumber = Node.create({
     return {
       htmlAttributes: {
         'data-id': 'auto-page-number',
+        'aria-label': 'Page number node'
       },
     }
   },
@@ -35,6 +36,7 @@ export const TotalPageCount = Node.create({
     return {
       htmlAttributes: {
         'data-id': 'auto-total-pages',
+        'aria-label': 'Total page count node'
       },
     }
   },
diff --git a/packages/super-editor/src/extensions/pagination/pagination-helpers.js b/packages/super-editor/src/extensions/pagination/pagination-helpers.js
index b42ca85bea..6bc07fa883 100644
--- a/packages/super-editor/src/extensions/pagination/pagination-helpers.js
+++ b/packages/super-editor/src/extensions/pagination/pagination-helpers.js
@@ -137,7 +137,11 @@ export const createHeaderFooterEditor = ({
   pm.style.minHeight = '100%';
   pm.style.outline = 'none';
   pm.style.border = 'none';
-
+  
+  pm.setAttribute('role', 'textbox');
+  pm.setAttribute('aria-multiline', true);
+  pm.setAttribute('aria-label', `${type} content area. Double click to start typing.`);
+  
   return headerFooterEditor;
 };
 
@@ -161,15 +165,18 @@ export const broadcastEditorEvents = (editor, sectionEditor) => {
 export const toggleHeaderFooterEditMode = (editor, focusedSectionEditor, isEditMode) => {
   editor.converter.headerEditors.forEach(item => {
     item.editor.setEditable(isEditMode, false);
+    item.editor.view.dom.setAttribute('aria-readonly', !isEditMode);
   });
   
   editor.converter.footerEditors.forEach(item => {
     item.editor.setEditable(isEditMode, false);
+    item.editor.view.dom.setAttribute('aria-readonly', !isEditMode);
   });
   
   if (isEditMode) {
     const pm = document.querySelector('.ProseMirror');
     pm.classList.add('header-footer-edit');
+    pm.setAttribute('aria-readonly', true);
   }
   
   if (focusedSectionEditor) {
diff --git a/packages/super-editor/src/extensions/run-item/run-item.js b/packages/super-editor/src/extensions/run-item/run-item.js
index 83ecb40a90..e772c92fd3 100644
--- a/packages/super-editor/src/extensions/run-item/run-item.js
+++ b/packages/super-editor/src/extensions/run-item/run-item.js
@@ -21,6 +21,7 @@ export const RunItem = Node.create({
     return {
       attributes: {
         rendered: false,
+        'aria-label': 'Run node'
       },
     };
   },
diff --git a/packages/super-editor/src/extensions/shape-container/shape-container.js b/packages/super-editor/src/extensions/shape-container/shape-container.js
index 1ffacfd3d5..4b7d5f1b55 100644
--- a/packages/super-editor/src/extensions/shape-container/shape-container.js
+++ b/packages/super-editor/src/extensions/shape-container/shape-container.js
@@ -13,6 +13,7 @@ export const ShapeContainer = Node.create({
     return {
       htmlAttributes: {
         class: 'sd-editor-shape-container',
+        'aria-label': 'Shape container node'
       },
     };
   },
diff --git a/packages/super-editor/src/extensions/shape-textbox/shape-textbox.js b/packages/super-editor/src/extensions/shape-textbox/shape-textbox.js
index 48f3220997..641b73d55b 100644
--- a/packages/super-editor/src/extensions/shape-textbox/shape-textbox.js
+++ b/packages/super-editor/src/extensions/shape-textbox/shape-textbox.js
@@ -13,6 +13,7 @@ export const ShapeTextbox = Node.create({
     return {
       htmlAttributes: {
         class: 'sd-editor-shape-textbox',
+        'aria-label': 'Shape textbox node'
       },
     };
   },
diff --git a/packages/super-editor/src/extensions/structured-content/structured-content.js b/packages/super-editor/src/extensions/structured-content/structured-content.js
index d51b21f40b..b93350a198 100644
--- a/packages/super-editor/src/extensions/structured-content/structured-content.js
+++ b/packages/super-editor/src/extensions/structured-content/structured-content.js
@@ -10,7 +10,9 @@ export const StructuredContent = Node.create({
   addOptions() {
     return {
       annotationClass: 'sd-structured-content-tag',
-      htmlAttributes: {},
+      htmlAttributes: {
+        'aria-label': 'Structured content node'
+      },
     }
   },
 
diff --git a/packages/super-editor/src/extensions/table-cell/table-cell.js b/packages/super-editor/src/extensions/table-cell/table-cell.js
index ba46585aa3..8df488c393 100644
--- a/packages/super-editor/src/extensions/table-cell/table-cell.js
+++ b/packages/super-editor/src/extensions/table-cell/table-cell.js
@@ -12,7 +12,9 @@ export const TableCell = Node.create({
 
   addOptions() {
     return {
-      htmlAttributes: {},
+      htmlAttributes: {
+        'aria-label': 'Table cell node'
+      },
     };
   },
 
diff --git a/packages/super-editor/src/extensions/table-header/table-header.js b/packages/super-editor/src/extensions/table-header/table-header.js
index ad4557fc76..3bf31c5a9f 100644
--- a/packages/super-editor/src/extensions/table-header/table-header.js
+++ b/packages/super-editor/src/extensions/table-header/table-header.js
@@ -11,7 +11,9 @@ export const TableHeader = Node.create({
 
   addOptions() {
     return {
-      htmlAttributes: {},
+      htmlAttributes: {
+        'aria-label': 'Table head node'
+      },
     };
   },
 
diff --git a/packages/super-editor/src/extensions/table-row/table-row.js b/packages/super-editor/src/extensions/table-row/table-row.js
index 1424f396e0..dd1ad99021 100644
--- a/packages/super-editor/src/extensions/table-row/table-row.js
+++ b/packages/super-editor/src/extensions/table-row/table-row.js
@@ -9,7 +9,9 @@ export const TableRow = Node.create({
 
   addOptions() {
     return {
-      htmlAttributes: {},
+      htmlAttributes: {
+        'aria-label': 'Table row node'
+      },
     };
   },
 
diff --git a/packages/super-editor/src/extensions/table/table.js b/packages/super-editor/src/extensions/table/table.js
index 96439cac7e..895af7687c 100644
--- a/packages/super-editor/src/extensions/table/table.js
+++ b/packages/super-editor/src/extensions/table/table.js
@@ -46,7 +46,9 @@ export const Table = Node.create({
 
   addOptions() {
     return {
-      htmlAttributes: {},
+      htmlAttributes: {
+        'aria-label': 'Table node'
+      },
       resizable: true,
       handleWidth: 5,
       cellMinWidth: 25,
diff --git a/packages/super-editor/src/tests/e2e/test-app/index.html b/packages/super-editor/src/tests/e2e/test-app/index.html
index 75b967aef3..38c398830d 100644
--- a/packages/super-editor/src/tests/e2e/test-app/index.html
+++ b/packages/super-editor/src/tests/e2e/test-app/index.html
@@ -7,7 +7,7 @@
     <title>SuperEditor test</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" role="application"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/packages/superdoc/index.html b/packages/superdoc/index.html
index 5517f2392e..24a3a6694e 100644
--- a/packages/superdoc/index.html
+++ b/packages/superdoc/index.html
@@ -14,7 +14,7 @@
     <title>SuperDoc</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div id="app" role="application"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/packages/superdoc/src/SuperDoc.vue b/packages/superdoc/src/SuperDoc.vue
index 8d2c15ff2e..3075cffab6 100644
--- a/packages/superdoc/src/SuperDoc.vue
+++ b/packages/superdoc/src/SuperDoc.vue
@@ -548,7 +548,7 @@ watch(getFloatingComments, () => {
 
 <template>
   <div class="superdoc" :class="{ 'superdoc--with-sidebar': showCommentsSidebar, 'high-contrast': isHighContrastMode }">
-    <div class="superdoc__layers layers" ref="layers">
+    <div class="superdoc__layers layers" ref="layers" role="group">
 
       <!-- Floating tools menu (shows up when user has text selection)-->
       <div v-if="showToolsFloatingMenu" class="superdoc__tools tools" :style="toolsMenuPosition">
diff --git a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
index 430f49dbfe..e27693cbe6 100644
--- a/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
+++ b/packages/superdoc/src/components/CommentsLayer/CommentDialog.vue
@@ -278,6 +278,7 @@ onMounted(() => {
     @click.stop.prevent="setFocus"
     :style="getSidebarCommentStyle"
     ref="commentDialogElement"
+    role="dialog"
   >
 
     <div v-if="shouldShowInternalExternal" class="existing-internal-input">
