diff --git a/.changeset/selfish-dots-look.md b/.changeset/selfish-dots-look.md
new file mode 100644
index 0000000000..28c1e38851
--- /dev/null
+++ b/.changeset/selfish-dots-look.md
@@ -0,0 +1,12 @@
+---
+'react-select': patch
+---
+
+The following improvements have been made for screen reader users:
+
+- NVDA now announces the context text when initially focused
+- Selected option/s (single and multi) are now announced when initially focused
+- VoiceOver now announces the context text when re-focusing
+- The clear action is now announced
+- Placeholder text is now announced
+- Mobile VoiceOver is now able to remove selected multi options
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 30e63fb994..93239cdf41 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -320,6 +320,7 @@ interface State<
   focusedValue: Option | null;
   selectValue: Options<Option>;
   clearFocusValueOnUpdate: boolean;
+  prevWasFocused: boolean;
   inputIsHiddenAfterUpdate: boolean | null | undefined;
   prevProps: Props<Option, IsMulti, Group> | void;
 }
@@ -583,6 +584,7 @@ export default class Select<
     isFocused: false,
     selectValue: [],
     clearFocusValueOnUpdate: false,
+    prevWasFocused: false,
     inputIsHiddenAfterUpdate: undefined,
     prevProps: undefined,
   };
@@ -629,13 +631,21 @@ export default class Select<
       'react-select-' + (this.props.instanceId || ++instanceId);
     this.state.selectValue = cleanValue(props.value);
   }
+
   static getDerivedStateFromProps(
     props: Props<OptionBase, boolean, GroupBase<OptionBase>>,
     state: State<OptionBase, boolean, GroupBase<OptionBase>>
   ) {
-    const { prevProps, clearFocusValueOnUpdate, inputIsHiddenAfterUpdate } =
-      state;
-    const { options, value, menuIsOpen, inputValue } = props;
+    const {
+      prevProps,
+      clearFocusValueOnUpdate,
+      inputIsHiddenAfterUpdate,
+      ariaSelection,
+      isFocused,
+      prevWasFocused,
+    } = state;
+    const { options, value, menuIsOpen, inputValue, isMulti } = props;
+    const selectValue = cleanValue(value);
     let newMenuOptionsState = {};
     if (
       prevProps &&
@@ -644,7 +654,6 @@ export default class Select<
         menuIsOpen !== prevProps.menuIsOpen ||
         inputValue !== prevProps.inputValue)
     ) {
-      const selectValue = cleanValue(value);
       const focusableOptions = menuIsOpen
         ? buildFocusableOptions(props, selectValue)
         : [];
@@ -667,10 +676,35 @@ export default class Select<
             inputIsHiddenAfterUpdate: undefined,
           }
         : {};
+
+    let newAriaSelection = ariaSelection;
+
+    let hasKeptFocus = isFocused && prevWasFocused;
+
+    if (isFocused && !hasKeptFocus) {
+      // If `value` or `defaultValue` props are not empty then announce them
+      // when the Select is initially focused
+      newAriaSelection = {
+        value: valueTernary(isMulti, selectValue, selectValue[0] || null),
+        options: selectValue,
+        action: 'initial-input-focus',
+      };
+
+      hasKeptFocus = !prevWasFocused;
+    }
+
+    // If the 'initial-input-focus' action has been set already
+    // then reset the ariaSelection to null
+    if (ariaSelection?.action === 'initial-input-focus') {
+      newAriaSelection = null;
+    }
+
     return {
       ...newMenuOptionsState,
       ...newInputIsHiddenState,
       prevProps: props,
+      ariaSelection: newAriaSelection,
+      prevWasFocused: hasKeptFocus,
     };
   }
   componentDidMount() {
@@ -1027,7 +1061,15 @@ export default class Select<
     const custom = this.props.styles[key];
     return custom ? custom(base, props as any) : base;
   };
-  getElementId = (element: 'group' | 'input' | 'listbox' | 'option') => {
+  getElementId = (
+    element:
+      | 'group'
+      | 'input'
+      | 'listbox'
+      | 'option'
+      | 'placeholder'
+      | 'live-region'
+  ) => {
     return `${this.instancePrefix}-${element}`;
   };
 
@@ -1178,6 +1220,7 @@ export default class Select<
       return;
     }
     this.clearValue();
+    event.preventDefault();
     event.stopPropagation();
     this.openAfterFocus = false;
     if (event.type === 'touchend') {
@@ -1504,7 +1547,7 @@ export default class Select<
       menuIsOpen,
     } = this.props;
     const { Input } = this.getComponents();
-    const { inputIsHidden } = this.state;
+    const { inputIsHidden, ariaSelection } = this.state;
     const { commonProps } = this;
 
     const id = inputId || this.getElementId('input');
@@ -1524,6 +1567,13 @@ export default class Select<
       ...(!isSearchable && {
         'aria-readonly': true,
       }),
+      ...(this.hasValue()
+        ? ariaSelection?.action === 'initial-input-focus' && {
+            'aria-describedby': this.getElementId('live-region'),
+          }
+        : {
+            'aria-describedby': this.getElementId('placeholder'),
+          }),
     };
 
     if (!isSearchable) {
@@ -1593,6 +1643,7 @@ export default class Select<
           key="placeholder"
           isDisabled={isDisabled}
           isFocused={isFocused}
+          innerProps={{ id: this.getElementId('placeholder') }}
         >
           {placeholder}
         </Placeholder>
@@ -1953,6 +2004,7 @@ export default class Select<
     return (
       <LiveRegion
         {...commonProps}
+        id={this.getElementId('live-region')}
         ariaSelection={ariaSelection}
         focusedOption={focusedOption}
         focusedValue={focusedValue}
diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 72d0360e2b..2029d9344b 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -2155,6 +2155,7 @@ test('accessibility > interacting with multi values options shows correct A11yTe
   let input = container.querySelector('.react-select__value-container input')!;
 
   fireEvent.focus(container.querySelector('input.react-select__input')!);
+
   expect(container.querySelector(liveRegionId)!.textContent).toMatch(
     ' Select is focused ,type to refine list, press Down to open the menu,  press left to focus selected values'
   );
@@ -2256,6 +2257,9 @@ test('accessibility > A11yTexts can be provided through ariaLiveMessages prop',
     />
   );
   const liveRegionEventId = '#aria-selection';
+
+  expect(container.querySelector(liveRegionEventId)!).toBeNull();
+
   fireEvent.focus(container.querySelector('input.react-select__input')!);
 
   let menu = container.querySelector('.react-select__menu')!;
@@ -2270,6 +2274,43 @@ test('accessibility > A11yTexts can be provided through ariaLiveMessages prop',
   );
 });
 
+test('accessibility > announces already selected values when focused', () => {
+  let { container } = render(
+    <Select {...BASIC_PROPS} options={OPTIONS} value={OPTIONS[0]} />
+  );
+  const liveRegionSelectionId = '#aria-selection';
+  const liveRegionContextId = '#aria-context';
+
+  // the live region should not be mounted yet
+  expect(container.querySelector(liveRegionSelectionId)!).toBeNull();
+
+  fireEvent.focus(container.querySelector('input.react-select__input')!);
+
+  expect(container.querySelector(liveRegionContextId)!.textContent).toMatch(
+    ' Select is focused ,type to refine list, press Down to open the menu, '
+  );
+  expect(container.querySelector(liveRegionSelectionId)!.textContent).toMatch(
+    'option 0, selected.'
+  );
+});
+
+test('accessibility > announces cleared values', () => {
+  let { container } = render(
+    <Select {...BASIC_PROPS} options={OPTIONS} value={OPTIONS[0]} isClearable />
+  );
+  const liveRegionSelectionId = '#aria-selection';
+  /**
+   * announce deselected value
+   */
+  fireEvent.focus(container.querySelector('input.react-select__input')!);
+  fireEvent.mouseDown(
+    container.querySelector('.react-select__clear-indicator')!
+  );
+  expect(container.querySelector(liveRegionSelectionId)!.textContent).toMatch(
+    'All selected options have been cleared.'
+  );
+});
+
 test('closeMenuOnSelect prop > when passed as false it should not call onMenuClose on selecting option', () => {
   let onMenuCloseSpy = jest.fn();
   let { container } = render(
diff --git a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
index 269fefe8d3..326248fe43 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`defaults - snapshot 1`] = `
   white-space: nowrap;
 }
 
-.emotion-2 {
+.emotion-3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -48,11 +48,11 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-2:hover {
+.emotion-3:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.emotion-3 {
+.emotion-4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -75,7 +75,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-4 {
+.emotion-5 {
   color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
@@ -88,7 +88,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5 {
+.emotion-6 {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 2px;
@@ -102,7 +102,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5:after {
+.emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: nowrap;
@@ -115,7 +115,7 @@ exports[`defaults - snapshot 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -133,7 +133,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-7 {
+.emotion-8 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -144,7 +144,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8 {
+.emotion-9 {
   color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
@@ -156,11 +156,11 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8:hover {
+.emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
-.emotion-9 {
+.emotion-10 {
   display: inline-block;
   fill: currentColor;
   line-height: 1;
@@ -172,6 +172,10 @@ exports[`defaults - snapshot 1`] = `
   <div
     class=" emotion-0"
   >
+    <span
+      class="emotion-1"
+      id="react-select-2-live-region"
+    />
     <span
       aria-atomic="false"
       aria-live="polite"
@@ -179,23 +183,25 @@ exports[`defaults - snapshot 1`] = `
       class="emotion-1"
     />
     <div
-      class=" emotion-2"
+      class=" emotion-3"
     >
       <div
-        class=" emotion-3"
+        class=" emotion-4"
       >
         <div
-          class=" emotion-4"
+          class=" emotion-5"
+          id="react-select-2-placeholder"
         >
           Select...
         </div>
         <div
-          class=" emotion-5"
+          class=" emotion-6"
           data-value=""
         >
           <input
             aria-autocomplete="list"
             aria-controls="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
@@ -214,18 +220,18 @@ exports[`defaults - snapshot 1`] = `
         </div>
       </div>
       <div
-        class=" emotion-6"
+        class=" emotion-7"
       >
         <span
-          class=" emotion-7"
+          class=" emotion-8"
         />
         <div
           aria-hidden="true"
-          class=" emotion-8"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"
-            class="emotion-9"
+            class="emotion-10"
             focusable="false"
             height="20"
             viewBox="0 0 20 20"
diff --git a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
index 269fefe8d3..326248fe43 100644
--- a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`defaults - snapshot 1`] = `
   white-space: nowrap;
 }
 
-.emotion-2 {
+.emotion-3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -48,11 +48,11 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-2:hover {
+.emotion-3:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.emotion-3 {
+.emotion-4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -75,7 +75,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-4 {
+.emotion-5 {
   color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
@@ -88,7 +88,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5 {
+.emotion-6 {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 2px;
@@ -102,7 +102,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5:after {
+.emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: nowrap;
@@ -115,7 +115,7 @@ exports[`defaults - snapshot 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -133,7 +133,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-7 {
+.emotion-8 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -144,7 +144,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8 {
+.emotion-9 {
   color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
@@ -156,11 +156,11 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8:hover {
+.emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
-.emotion-9 {
+.emotion-10 {
   display: inline-block;
   fill: currentColor;
   line-height: 1;
@@ -172,6 +172,10 @@ exports[`defaults - snapshot 1`] = `
   <div
     class=" emotion-0"
   >
+    <span
+      class="emotion-1"
+      id="react-select-2-live-region"
+    />
     <span
       aria-atomic="false"
       aria-live="polite"
@@ -179,23 +183,25 @@ exports[`defaults - snapshot 1`] = `
       class="emotion-1"
     />
     <div
-      class=" emotion-2"
+      class=" emotion-3"
     >
       <div
-        class=" emotion-3"
+        class=" emotion-4"
       >
         <div
-          class=" emotion-4"
+          class=" emotion-5"
+          id="react-select-2-placeholder"
         >
           Select...
         </div>
         <div
-          class=" emotion-5"
+          class=" emotion-6"
           data-value=""
         >
           <input
             aria-autocomplete="list"
             aria-controls="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
@@ -214,18 +220,18 @@ exports[`defaults - snapshot 1`] = `
         </div>
       </div>
       <div
-        class=" emotion-6"
+        class=" emotion-7"
       >
         <span
-          class=" emotion-7"
+          class=" emotion-8"
         />
         <div
           aria-hidden="true"
-          class=" emotion-8"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"
-            class="emotion-9"
+            class="emotion-10"
             focusable="false"
             height="20"
             viewBox="0 0 20 20"
diff --git a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
index 269fefe8d3..326248fe43 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`defaults - snapshot 1`] = `
   white-space: nowrap;
 }
 
-.emotion-2 {
+.emotion-3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -48,11 +48,11 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-2:hover {
+.emotion-3:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.emotion-3 {
+.emotion-4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -75,7 +75,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-4 {
+.emotion-5 {
   color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
@@ -88,7 +88,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5 {
+.emotion-6 {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 2px;
@@ -102,7 +102,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5:after {
+.emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: nowrap;
@@ -115,7 +115,7 @@ exports[`defaults - snapshot 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -133,7 +133,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-7 {
+.emotion-8 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -144,7 +144,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8 {
+.emotion-9 {
   color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
@@ -156,11 +156,11 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8:hover {
+.emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
-.emotion-9 {
+.emotion-10 {
   display: inline-block;
   fill: currentColor;
   line-height: 1;
@@ -172,6 +172,10 @@ exports[`defaults - snapshot 1`] = `
   <div
     class=" emotion-0"
   >
+    <span
+      class="emotion-1"
+      id="react-select-2-live-region"
+    />
     <span
       aria-atomic="false"
       aria-live="polite"
@@ -179,23 +183,25 @@ exports[`defaults - snapshot 1`] = `
       class="emotion-1"
     />
     <div
-      class=" emotion-2"
+      class=" emotion-3"
     >
       <div
-        class=" emotion-3"
+        class=" emotion-4"
       >
         <div
-          class=" emotion-4"
+          class=" emotion-5"
+          id="react-select-2-placeholder"
         >
           Select...
         </div>
         <div
-          class=" emotion-5"
+          class=" emotion-6"
           data-value=""
         >
           <input
             aria-autocomplete="list"
             aria-controls="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
@@ -214,18 +220,18 @@ exports[`defaults - snapshot 1`] = `
         </div>
       </div>
       <div
-        class=" emotion-6"
+        class=" emotion-7"
       >
         <span
-          class=" emotion-7"
+          class=" emotion-8"
         />
         <div
           aria-hidden="true"
-          class=" emotion-8"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"
-            class="emotion-9"
+            class="emotion-10"
             focusable="false"
             height="20"
             viewBox="0 0 20 20"
diff --git a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
index 2247a2953b..68c6d9da10 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`snapshot - defaults 1`] = `
   white-space: nowrap;
 }
 
-.emotion-2 {
+.emotion-3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -48,11 +48,11 @@ exports[`snapshot - defaults 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-2:hover {
+.emotion-3:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.emotion-3 {
+.emotion-4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -75,7 +75,7 @@ exports[`snapshot - defaults 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-4 {
+.emotion-5 {
   color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
@@ -88,7 +88,7 @@ exports[`snapshot - defaults 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5 {
+.emotion-6 {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 2px;
@@ -102,7 +102,7 @@ exports[`snapshot - defaults 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5:after {
+.emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: nowrap;
@@ -115,7 +115,7 @@ exports[`snapshot - defaults 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -133,7 +133,7 @@ exports[`snapshot - defaults 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-7 {
+.emotion-8 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -144,7 +144,7 @@ exports[`snapshot - defaults 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8 {
+.emotion-9 {
   color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
@@ -156,11 +156,11 @@ exports[`snapshot - defaults 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8:hover {
+.emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
-.emotion-9 {
+.emotion-10 {
   display: inline-block;
   fill: currentColor;
   line-height: 1;
@@ -172,6 +172,10 @@ exports[`snapshot - defaults 1`] = `
   <div
     class=" emotion-0"
   >
+    <span
+      class="emotion-1"
+      id="react-select-2-live-region"
+    />
     <span
       aria-atomic="false"
       aria-live="polite"
@@ -179,23 +183,25 @@ exports[`snapshot - defaults 1`] = `
       class="emotion-1"
     />
     <div
-      class=" emotion-2"
+      class=" emotion-3"
     >
       <div
-        class=" emotion-3"
+        class=" emotion-4"
       >
         <div
-          class=" emotion-4"
+          class=" emotion-5"
+          id="react-select-2-placeholder"
         >
           Select...
         </div>
         <div
-          class=" emotion-5"
+          class=" emotion-6"
           data-value=""
         >
           <input
             aria-autocomplete="list"
             aria-controls="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
@@ -214,18 +220,18 @@ exports[`snapshot - defaults 1`] = `
         </div>
       </div>
       <div
-        class=" emotion-6"
+        class=" emotion-7"
       >
         <span
-          class=" emotion-7"
+          class=" emotion-8"
         />
         <div
           aria-hidden="true"
-          class=" emotion-8"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"
-            class="emotion-9"
+            class="emotion-10"
             focusable="false"
             height="20"
             viewBox="0 0 20 20"
diff --git a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
index 4b9a0517d5..4efc64f3ad 100644
--- a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`defaults > snapshot 1`] = `
   white-space: nowrap;
 }
 
-.emotion-2 {
+.emotion-3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -48,11 +48,11 @@ exports[`defaults > snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-2:hover {
+.emotion-3:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.emotion-3 {
+.emotion-4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -75,7 +75,7 @@ exports[`defaults > snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-4 {
+.emotion-5 {
   color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
@@ -88,7 +88,7 @@ exports[`defaults > snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5 {
+.emotion-6 {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 2px;
@@ -102,7 +102,7 @@ exports[`defaults > snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5:after {
+.emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: nowrap;
@@ -115,7 +115,7 @@ exports[`defaults > snapshot 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -133,7 +133,7 @@ exports[`defaults > snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-7 {
+.emotion-8 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -144,7 +144,7 @@ exports[`defaults > snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8 {
+.emotion-9 {
   color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
@@ -156,11 +156,11 @@ exports[`defaults > snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8:hover {
+.emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
-.emotion-9 {
+.emotion-10 {
   display: inline-block;
   fill: currentColor;
   line-height: 1;
@@ -172,6 +172,10 @@ exports[`defaults > snapshot 1`] = `
   <div
     class=" emotion-0"
   >
+    <span
+      class="emotion-1"
+      id="react-select-2-live-region"
+    />
     <span
       aria-atomic="false"
       aria-live="polite"
@@ -179,23 +183,25 @@ exports[`defaults > snapshot 1`] = `
       class="emotion-1"
     />
     <div
-      class=" emotion-2"
+      class=" emotion-3"
     >
       <div
-        class=" emotion-3"
+        class=" emotion-4"
       >
         <div
-          class=" emotion-4"
+          class=" emotion-5"
+          id="react-select-2-placeholder"
         >
           Select...
         </div>
         <div
-          class=" emotion-5"
+          class=" emotion-6"
           data-value=""
         >
           <input
             aria-autocomplete="list"
             aria-controls="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
@@ -214,18 +220,18 @@ exports[`defaults > snapshot 1`] = `
         </div>
       </div>
       <div
-        class=" emotion-6"
+        class=" emotion-7"
       >
         <span
-          class=" emotion-7"
+          class=" emotion-8"
         />
         <div
           aria-hidden="true"
-          class=" emotion-8"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"
-            class="emotion-9"
+            class="emotion-10"
             focusable="false"
             height="20"
             viewBox="0 0 20 20"
diff --git a/packages/react-select/src/accessibility/index.ts b/packages/react-select/src/accessibility/index.ts
index 1803266435..bb889a6ad9 100644
--- a/packages/react-select/src/accessibility/index.ts
+++ b/packages/react-select/src/accessibility/index.ts
@@ -1,6 +1,7 @@
 import {
   ActionMeta,
   GroupBase,
+  InitialInputFocusedActionMeta,
   OnChangeValue,
   OptionBase,
   Options,
@@ -14,9 +15,12 @@ export type GuidanceContext = 'menu' | 'input' | 'value';
 export type AriaLive = 'polite' | 'off' | 'assertive';
 
 export type AriaSelection<Option extends OptionBase, IsMulti extends boolean> =
-  ActionMeta<Option> & {
-    value: OnChangeValue<Option, IsMulti>;
-  };
+  | InitialInputFocusedActionMeta<Option, IsMulti>
+  | (ActionMeta<Option> & {
+      value: OnChangeValue<Option, IsMulti>;
+      option?: Option;
+      options?: Options<Option>;
+    });
 
 export interface AriaGuidanceProps {
   /** String value of selectProp aria-label */
@@ -39,6 +43,8 @@ export type AriaOnChangeProps<
 > = AriaSelection<Option, IsMulti> & {
   /** String derived label from selected or removed option/value */
   label: string;
+  /** Array of labels derived from multiple selected or cleared options */
+  labels: string[];
   /** Boolean indicating if the selected menu option is disabled */
   isDisabled: boolean | null;
 };
@@ -127,12 +133,18 @@ export const defaultAriaLiveMessages = {
   onChange: <Option extends OptionBase, IsMulti extends boolean>(
     props: AriaOnChangeProps<Option, IsMulti>
   ) => {
-    const { action, label = '', isDisabled } = props;
+    const { action, label = '', labels, isDisabled } = props;
     switch (action) {
       case 'deselect-option':
       case 'pop-value':
       case 'remove-value':
         return `option ${label}, deselected.`;
+      case 'clear':
+        return 'All selected options have been cleared.';
+      case 'initial-input-focus':
+        return `option${labels.length > 1 ? 's' : ''} ${labels.join(
+          ','
+        )}, selected.`;
       case 'select-option':
         return isDisabled
           ? `option ${label} is disabled. Select another option.`
diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx
index 97891c48d7..d4d7880ccd 100644
--- a/packages/react-select/src/components/LiveRegion.tsx
+++ b/packages/react-select/src/components/LiveRegion.tsx
@@ -30,6 +30,7 @@ export interface LiveRegionProps<
   selectValue: Options<Option>;
   focusableOptions: Options<Option>;
   isFocused: boolean;
+  id: string;
 }
 
 const LiveRegion = <
@@ -47,6 +48,7 @@ const LiveRegion = <
     isFocused,
     selectValue,
     selectProps,
+    id,
   } = props;
 
   const {
@@ -77,15 +79,31 @@ const LiveRegion = <
   const ariaSelected = useMemo(() => {
     let message = '';
     if (ariaSelection && messages.onChange) {
-      const { option, removedValue, value } = ariaSelection;
+      const {
+        option,
+        options: selectedOptions,
+        removedValue,
+        removedValues,
+        value,
+      } = ariaSelection;
       // select-option when !isMulti does not return option so we assume selected option is value
       const asOption = (val: OnChangeValue<Option, IsMulti>): Option | null =>
         !Array.isArray(val) ? (val as Option) : null;
+
+      // If there is just one item from the action then get its label
       const selected = removedValue || option || asOption(value);
+      const label = selected ? getOptionLabel(selected) : '';
+
+      // If there are multiple items from the action then return an array of labels
+      const multiSelected = selectedOptions || removedValues || undefined;
+      const labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
 
       const onChangeProps = {
+        // multiSelected items are usually items that have already been selected
+        // or set by the user as a default value so we assume they are not disabled
         isDisabled: selected && isOptionDisabled(selected, selectValue),
-        label: selected ? getOptionLabel(selected) : '',
+        label,
+        labels,
         ...ariaSelection,
       };
 
@@ -176,19 +194,28 @@ const LiveRegion = <
 
   const ariaContext = `${ariaFocused} ${ariaResults} ${ariaGuidance}`;
 
+  const ScreenReaderText = (
+    <React.Fragment>
+      <span id="aria-selection">{ariaSelected}</span>
+      <span id="aria-context">{ariaContext}</span>
+    </React.Fragment>
+  );
+
+  const isInitialFocus = ariaSelection?.action === 'initial-input-focus';
+
   return (
-    <A11yText
-      aria-live={ariaLive}
-      aria-atomic="false"
-      aria-relevant="additions text"
-    >
-      {isFocused && (
-        <React.Fragment>
-          <span id="aria-selection">{ariaSelected}</span>
-          <span id="aria-context">{ariaContext}</span>
-        </React.Fragment>
-      )}
-    </A11yText>
+    <React.Fragment>
+      {/* We use 'aria-describedby' linked to this component for the initial focus */}
+      {/* action, then for all other actions we use the live region below */}
+      <A11yText id={id}>{isInitialFocus && ScreenReaderText}</A11yText>
+      <A11yText
+        aria-live={ariaLive}
+        aria-atomic="false"
+        aria-relevant="additions text"
+      >
+        {isFocused && !isInitialFocus && ScreenReaderText}
+      </A11yText>
+    </React.Fragment>
   );
 };
 
diff --git a/packages/react-select/src/components/MultiValue.tsx b/packages/react-select/src/components/MultiValue.tsx
index 90c155be3e..043d26685f 100644
--- a/packages/react-select/src/components/MultiValue.tsx
+++ b/packages/react-select/src/components/MultiValue.tsx
@@ -127,7 +127,11 @@ export function MultiValueRemove<
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 >({ children, innerProps }: MultiValueRemoveProps<Option, IsMulti, Group>) {
-  return <div {...innerProps}>{children || <CrossIcon size={14} />}</div>;
+  return (
+    <div role="button" {...innerProps}>
+      {children || <CrossIcon size={14} />}
+    </div>
+  );
 }
 
 const MultiValue = <
@@ -201,6 +205,7 @@ const MultiValue = <
                   className
                 )
               ),
+              'aria-label': `Remove ${children || 'option'}`,
               ...removeProps,
             }}
             selectProps={selectProps}
diff --git a/packages/react-select/src/types.ts b/packages/react-select/src/types.ts
index 820baa9d17..94febb2627 100644
--- a/packages/react-select/src/types.ts
+++ b/packages/react-select/src/types.ts
@@ -140,7 +140,6 @@ export interface RemoveValueActionMeta<Option extends OptionBase>
   removedValue: Option;
   name?: string;
 }
-
 export interface PopValueActionMeta<Option extends OptionBase>
   extends ActionMetaBase<Option> {
   action: 'pop-value';
@@ -160,6 +159,14 @@ export interface CreateOptionActionMeta<Option extends OptionBase>
   action: 'create-option';
   name?: string;
 }
+export interface InitialInputFocusedActionMeta<
+  Option extends OptionBase,
+  IsMulti extends boolean
+> extends ActionMetaBase<Option> {
+  action: 'initial-input-focus';
+  value: OnChangeValue<Option, IsMulti>;
+  options?: Options<Option>;
+}
 
 export type ActionMeta<Option extends OptionBase> =
   | SelectOptionActionMeta<Option>