diff --git a/site/content/docs/5.3/content/tables.md b/site/content/docs/5.3/content/tables.md
index b75b233e1267..c0285be372c4 100644
--- a/site/content/docs/5.3/content/tables.md
+++ b/site/content/docs/5.3/content/tables.md
@@ -305,7 +305,7 @@ Add a thicker border, darker between table groups—`<thead>`, `<tbody>`, and `<
 Table cells of `<thead>` are always vertical aligned to the bottom. Table cells in `<tbody>` inherit their alignment from `<table>` and are aligned to the top by default. Use the [vertical align]({{< docsref "/utilities/vertical-align" >}}) classes to re-align where needed.
 
 <div class="bd-example">
-  <div class="table-responsive">
+  <div class="table-responsive" tabindex="0">
     <table class="table align-middle">
       <thead>
         <tr>
@@ -340,7 +340,7 @@ Table cells of `<thead>` are always vertical aligned to the bottom. Table cells
 </div>
 
 ```html
-<div class="table-responsive">
+<div class="table-responsive" tabindex="0">
   <table class="table align-middle">
     <thead>
       <tr>
@@ -665,6 +665,10 @@ You can also put the `<caption>` on the top of the table with `.caption-top`.
 
 Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl|-xxl}`.
 
+{{< callout info >}}
+For accessibility reasons, we recommend in most cases using `tabindex="0"` with a `.table-responsive` to ensure a keyboard access when the content is scrollable.
+{{< /callout >}}
+
 {{< callout warning >}}
 ##### Vertical clipping/truncation
 
@@ -676,7 +680,7 @@ Responsive tables make use of `overflow-y: hidden`, which clips off any content
 Across every breakpoint, use `.table-responsive` for horizontally scrolling tables.
 
 <div class="bd-example">
-  <div class="table-responsive">
+  <div class="table-responsive" tabindex="0">
     <table class="table">
       <thead>
         <tr>
@@ -735,7 +739,7 @@ Across every breakpoint, use `.table-responsive` for horizontally scrolling tabl
 </div>
 
 ```html
-<div class="table-responsive">
+<div class="table-responsive" tabindex="0">
   <table class="table">
     ...
   </table>
@@ -752,7 +756,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 {{ range $.Site.Data.breakpoints }}
 {{ if not (eq . "xs") }}
 <div class="bd-example">
-  <div class="table-responsive{{ .abbr }}">
+  <div class="table-responsive{{ .abbr }}" tabindex="0">
     <table class="table">
       <thead>
         <tr>
@@ -813,7 +817,7 @@ Use `.table-responsive{-sm|-md|-lg|-xl|-xxl}` as needed to create responsive tab
 {{< tables.inline >}}
 {{- range $.Site.Data.breakpoints -}}
 {{- if not (eq . "xs") }}
-<div class="table-responsive{{ .abbr }}">
+<div class="table-responsive{{ .abbr }}" tabindex="0">
   <table class="table">
     ...
   </table>
diff --git a/site/content/docs/5.3/examples/dashboard-rtl/index.html b/site/content/docs/5.3/examples/dashboard-rtl/index.html
index 6fb4a63aa903..d47b8c30cd7f 100644
--- a/site/content/docs/5.3/examples/dashboard-rtl/index.html
+++ b/site/content/docs/5.3/examples/dashboard-rtl/index.html
@@ -201,7 +201,7 @@ <h1 class="h2">لوحة القيادة</h1>
       <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
 
       <h2>عنوان القسم</h2>
-      <div class="table-responsive small">
+      <div class="table-responsive small" tabindex="0">
         <table class="table table-striped table-sm">
           <thead>
             <tr>
diff --git a/site/content/docs/5.3/examples/dashboard/index.html b/site/content/docs/5.3/examples/dashboard/index.html
index db84bd68d999..1ccbb8f05329 100644
--- a/site/content/docs/5.3/examples/dashboard/index.html
+++ b/site/content/docs/5.3/examples/dashboard/index.html
@@ -200,7 +200,7 @@ <h1 class="h2">Dashboard</h1>
       <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
 
       <h2>Section title</h2>
-      <div class="table-responsive small">
+      <div class="table-responsive small" tabindex="0">
         <table class="table table-striped table-sm">
           <thead>
             <tr>
diff --git a/site/content/docs/5.3/examples/pricing/index.html b/site/content/docs/5.3/examples/pricing/index.html
index 2f375b36d251..494c0f4202ba 100644
--- a/site/content/docs/5.3/examples/pricing/index.html
+++ b/site/content/docs/5.3/examples/pricing/index.html
@@ -91,7 +91,7 @@ <h1 class="card-title pricing-card-title">$29<small class="text-body-secondary f
 
     <h2 class="display-6 text-center mb-4">Compare plans</h2>
 
-    <div class="table-responsive">
+    <div class="table-responsive" tabindex="0">
       <table class="table text-center">
         <thead>
           <tr>
diff --git a/site/content/docs/5.3/layout/grid.md b/site/content/docs/5.3/layout/grid.md
index 1783410f987f..0052b6f0d52e 100644
--- a/site/content/docs/5.3/layout/grid.md
+++ b/site/content/docs/5.3/layout/grid.md
@@ -63,7 +63,7 @@ Bootstrap's grid system can adapt across all six default breakpoints, and any br
 
 As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here's how the grid changes across these breakpoints:
 
-<div class="table-responsive">
+<div class="table-responsive" tabindex="0">
   <table class="table mb-4">
     <thead>
       <tr>
diff --git a/site/layouts/shortcodes/bs-table.html b/site/layouts/shortcodes/bs-table.html
index 9eec109cb8cf..4880c7f2ee9c 100644
--- a/site/layouts/shortcodes/bs-table.html
+++ b/site/layouts/shortcodes/bs-table.html
@@ -4,6 +4,6 @@
 
 {{- $css_class := .Get 0 | default "table" -}}
 {{- $html_table := .Inner | markdownify -}}
-{{- $html_table = replace $html_table "<table>" (printf `<div class="table-responsive"><table class="%s">` $css_class) -}}
+{{- $html_table = replace $html_table "<table>" (printf `<div class="table-responsive" tabindex="0"><table class="%s">` $css_class) -}}
 {{- $html_table = replace $html_table "</table>" "</table></div>" -}}
 {{- $html_table | safeHTML -}}