diff --git a/src-docs/src/views/context_menu/context_menu_example.js b/src-docs/src/views/context_menu/context_menu_example.js
index 48e01a01c62..0694c88222d 100644
--- a/src-docs/src/views/context_menu/context_menu_example.js
+++ b/src-docs/src/views/context_menu/context_menu_example.js
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { GuideSectionTypes } from '../../components';
 
 import {
+  EuiCallOut,
   EuiCode,
   EuiContextMenu,
   EuiContextMenuItem,
@@ -122,11 +123,24 @@ export const ContextMenuExample = {
         },
       ],
       text: (
-        <p>
-          Use <strong>EuiContextMenuPanel</strong> for simple, non-nested
-          context menus. The below pagination example has no nesting and no
-          title.
-        </p>
+        <>
+          <p>
+            Use <strong>EuiContextMenuPanel</strong> for simple, non-nested
+            context menus. The below pagination example has no nesting and no
+            title.
+          </p>
+          <EuiCallOut
+            iconType="accessibility"
+            title="The selected context menu item should have an aria-current attribute"
+          >
+            <p>
+              <strong>aria-current</strong> tells screen readers which item is
+              selected. Add an <EuiCode>aria-current="true"</EuiCode> attribute
+              to <EuiCode>EuiContextMenuItem</EuiCode> when a context menu item
+              is clicked or receives a keypress.
+            </p>
+          </EuiCallOut>
+        </>
       ),
       snippet: singlePanelSnippet,
       demo: <SinglePanel />,
diff --git a/src-docs/src/views/context_menu/single_panel.js b/src-docs/src/views/context_menu/single_panel.js
index aaa87fbb3e5..d2a9de914e6 100644
--- a/src-docs/src/views/context_menu/single_panel.js
+++ b/src-docs/src/views/context_menu/single_panel.js
@@ -24,8 +24,10 @@ export default () => {
     setPopover(false);
   };
 
-  const getIconType = (size) => {
-    return size === rowSize ? 'check' : 'empty';
+  const isSelectedProps = (size: number) => {
+    return size === rowSize
+      ? { icon: 'check', 'aria-current': 'true' }
+      : { icon: 'empty', 'aria-current': undefined };
   };
 
   const button = (
@@ -41,8 +43,8 @@ export default () => {
 
   const items = [
     <EuiContextMenuItem
+      {...isSelectedProps(10)}
       key="10 rows"
-      icon={getIconType(10)}
       onClick={() => {
         closePopover();
         setRowSize(10);
@@ -51,8 +53,8 @@ export default () => {
       10 rows
     </EuiContextMenuItem>,
     <EuiContextMenuItem
+      {...isSelectedProps(20)}
       key="20 rows"
-      icon={getIconType(20)}
       onClick={() => {
         closePopover();
         setRowSize(20);
@@ -61,8 +63,8 @@ export default () => {
       20 rows
     </EuiContextMenuItem>,
     <EuiContextMenuItem
+      {...isSelectedProps(50)}
       key="50 rows"
-      icon={getIconType(50)}
       onClick={() => {
         closePopover();
         setRowSize(50);
@@ -71,8 +73,8 @@ export default () => {
       50 rows
     </EuiContextMenuItem>,
     <EuiContextMenuItem
+      {...isSelectedProps(100)}
       key="100 rows"
-      icon={getIconType(100)}
       onClick={() => {
         closePopover();
         setRowSize(100);