diff --git a/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx b/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx
index 1851d7c91c2..78d28c253ae 100644
--- a/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx
+++ b/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx
@@ -66,6 +66,8 @@ import { EmptyState } from '@grafana/ui';
 <EmptyState variant="not-found" message="No playlists found" />;
 ```
 
+If the empty state is rendered as you are typing in a search box, use the `role="alert"` prop to announce the empty state to screen readers. Verify that the use case makes sense, as this approach may be very disruptive if used the wrong way.
+
 ### `variant="completed"`
 
 For when a user has completed all tasks on a page, such as reading all their notifications.
diff --git a/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx b/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx
index 28d7f67724e..338f6771a06 100644
--- a/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx
+++ b/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { ReactNode } from 'react';
+import React, { AriaRole, ReactNode } from 'react';
 import SVG from 'react-inlinesvg';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -31,6 +31,10 @@ interface Props {
    * Which variant to use. Affects the default image shown.
    */
   variant: 'call-to-action' | 'not-found' | 'completed';
+  /**
+   * Use to set `alert` when needed. See documentation for the use case
+   */
+  role?: AriaRole;
 }
 
 export const EmptyState = ({
@@ -40,12 +44,13 @@ export const EmptyState = ({
   message,
   hideImage = false,
   variant,
+  role,
 }: React.PropsWithChildren<Props>) => {
   const styles = useStyles2(getStyles);
   const imageToShow = image ?? getDefaultImageForVariant(variant);
 
   return (
-    <Box paddingY={4} display="flex" direction="column" alignItems="center">
+    <Box paddingY={4} display="flex" direction="column" alignItems="center" role={role}>
       <div className={styles.container}>
         {!hideImage && imageToShow}
         <Stack direction="column" alignItems="center">
diff --git a/public/app/features/browse-dashboards/components/SearchView.tsx b/public/app/features/browse-dashboards/components/SearchView.tsx
index 03c72c3a6b1..48493f7e0bc 100644
--- a/public/app/features/browse-dashboards/components/SearchView.tsx
+++ b/public/app/features/browse-dashboards/components/SearchView.tsx
@@ -97,6 +97,7 @@ export function SearchView({ width, height, canSelect }: SearchViewProps) {
           }
           message={t('browse-dashboards.no-results.text', 'No results found for your query')}
           variant="not-found"
+          role="alert"
         />
       </div>
     );
diff --git a/public/app/features/commandPalette/CommandPalette.tsx b/public/app/features/commandPalette/CommandPalette.tsx
index a1e36d3a20b..38f268eb71b 100644
--- a/public/app/features/commandPalette/CommandPalette.tsx
+++ b/public/app/features/commandPalette/CommandPalette.tsx
@@ -121,7 +121,11 @@ const RenderResults = ({ isFetchingSearchResults, searchResults }: RenderResults
   const showEmptyState = !isFetchingSearchResults && items.length === 0;
 
   return showEmptyState ? (
-    <EmptyState variant="not-found" message={t('command-palette.empty-state.message', 'No results found')} />
+    <EmptyState
+      variant="not-found"
+      role="alert"
+      message={t('command-palette.empty-state.message', 'No results found')}
+    />
   ) : (
     <KBarResults
       items={items}