diff --git a/docs/src/pages/components/badges/AccessibleBadges.js b/docs/src/pages/components/badges/AccessibleBadges.js
new file mode 100644
index 00000000000000..e23988ebafe43d
--- /dev/null
+++ b/docs/src/pages/components/badges/AccessibleBadges.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import IconButton from '@material-ui/core/IconButton';
+import Badge from '@material-ui/core/Badge';
+import MailIcon from '@material-ui/icons/Mail';
+
+function notificationsLabel(count) {
+  if (count === 0) {
+    return 'no notifications';
+  }
+  if (count > 99) {
+    return 'more than 99 notifications';
+  }
+  return `${count} notifications`;
+}
+
+export default function AccessibleBadges() {
+  return (
+    <IconButton aria-label={notificationsLabel(100)}>
+      <Badge badgeContent={100} color="secondary">
+        <MailIcon />
+      </Badge>
+    </IconButton>
+  );
+}
diff --git a/docs/src/pages/components/badges/AccessibleBadges.tsx b/docs/src/pages/components/badges/AccessibleBadges.tsx
new file mode 100644
index 00000000000000..383abe77e0973f
--- /dev/null
+++ b/docs/src/pages/components/badges/AccessibleBadges.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import IconButton from '@material-ui/core/IconButton';
+import Badge from '@material-ui/core/Badge';
+import MailIcon from '@material-ui/icons/Mail';
+
+function notificationsLabel(count: number) {
+  if (count === 0) {
+    return 'no notifications';
+  }
+  if (count > 99) {
+    return 'more than 99 notifications';
+  }
+  return `${count} notifications`;
+}
+
+export default function AccessibleBadges() {
+  return (
+    <IconButton aria-label={notificationsLabel(100)}>
+      <Badge badgeContent={100} color="secondary">
+        <MailIcon />
+      </Badge>
+    </IconButton>
+  );
+}
diff --git a/docs/src/pages/components/badges/BadgeAlignment.js b/docs/src/pages/components/badges/BadgeAlignment.js
index 2515c5f6214d2e..5caca2d0eb8928 100644
--- a/docs/src/pages/components/badges/BadgeAlignment.js
+++ b/docs/src/pages/components/badges/BadgeAlignment.js
@@ -68,6 +68,7 @@ export default function BadgeAlignment() {
         sx={{
           display: 'flex',
           justifyContent: 'center',
+          color: 'action.active',
           '& > *': {
             margin: 2,
           },
diff --git a/docs/src/pages/components/badges/BadgeMax.js b/docs/src/pages/components/badges/BadgeMax.js
index ad07e4bf58992d..4197b9330815fb 100644
--- a/docs/src/pages/components/badges/BadgeMax.js
+++ b/docs/src/pages/components/badges/BadgeMax.js
@@ -1,25 +1,20 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
-const defaultProps = {
-  color: 'secondary',
-  children: <MailIcon />,
-};
-
 export default function BadgeMax() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          margin: 2,
-        },
-      }}
-    >
-      <Badge badgeContent={99} {...defaultProps} />
-      <Badge badgeContent={100} {...defaultProps} />
-      <Badge badgeContent={1000} max={999} {...defaultProps} />
-    </Box>
+    <Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
+      <Badge color="secondary" badgeContent={99}>
+        <MailIcon />
+      </Badge>
+      <Badge color="secondary" badgeContent={100}>
+        <MailIcon />
+      </Badge>
+      <Badge color="secondary" badgeContent={1000} max={999}>
+        <MailIcon />
+      </Badge>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/BadgeMax.tsx b/docs/src/pages/components/badges/BadgeMax.tsx
index 0a01bf2f79d3ef..4197b9330815fb 100644
--- a/docs/src/pages/components/badges/BadgeMax.tsx
+++ b/docs/src/pages/components/badges/BadgeMax.tsx
@@ -1,25 +1,20 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
-const defaultProps = {
-  color: 'secondary' as 'secondary',
-  children: <MailIcon />,
-};
-
 export default function BadgeMax() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          margin: 2,
-        },
-      }}
-    >
-      <Badge badgeContent={99} {...defaultProps} />
-      <Badge badgeContent={100} {...defaultProps} />
-      <Badge badgeContent={1000} max={999} {...defaultProps} />
-    </Box>
+    <Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
+      <Badge color="secondary" badgeContent={99}>
+        <MailIcon />
+      </Badge>
+      <Badge color="secondary" badgeContent={100}>
+        <MailIcon />
+      </Badge>
+      <Badge color="secondary" badgeContent={1000} max={999}>
+        <MailIcon />
+      </Badge>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/BadgeOverlap.js b/docs/src/pages/components/badges/BadgeOverlap.js
index f2470da271f453..0444d60409ac5d 100644
--- a/docs/src/pages/components/badges/BadgeOverlap.js
+++ b/docs/src/pages/components/badges/BadgeOverlap.js
@@ -1,22 +1,18 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 
 const shapeStyles = { bgcolor: 'primary.main', width: 40, height: 40 };
 const shapeCircleStyles = { borderRadius: '50%' };
+const rectangle = <Box component="span" sx={shapeStyles} />;
+const circle = (
+  <Box component="span" sx={{ ...shapeStyles, ...shapeCircleStyles }} />
+);
 
 export default function BadgeOverlap() {
-  const rectangle = <Box sx={shapeStyles} />;
-  const circle = <Box sx={{ ...shapeStyles, ...shapeCircleStyles }} />;
-
   return (
-    <Box
-      sx={{
-        '& > *': {
-          margin: 1,
-        },
-      }}
-    >
+    <Stack spacing={3} direction="row">
       <Badge color="secondary" badgeContent=" ">
         {rectangle}
       </Badge>
@@ -29,6 +25,6 @@ export default function BadgeOverlap() {
       <Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
         {circle}
       </Badge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/BadgeOverlap.tsx b/docs/src/pages/components/badges/BadgeOverlap.tsx
index f2470da271f453..0444d60409ac5d 100644
--- a/docs/src/pages/components/badges/BadgeOverlap.tsx
+++ b/docs/src/pages/components/badges/BadgeOverlap.tsx
@@ -1,22 +1,18 @@
 import * as React from 'react';
 import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 
 const shapeStyles = { bgcolor: 'primary.main', width: 40, height: 40 };
 const shapeCircleStyles = { borderRadius: '50%' };
+const rectangle = <Box component="span" sx={shapeStyles} />;
+const circle = (
+  <Box component="span" sx={{ ...shapeStyles, ...shapeCircleStyles }} />
+);
 
 export default function BadgeOverlap() {
-  const rectangle = <Box sx={shapeStyles} />;
-  const circle = <Box sx={{ ...shapeStyles, ...shapeCircleStyles }} />;
-
   return (
-    <Box
-      sx={{
-        '& > *': {
-          margin: 1,
-        },
-      }}
-    >
+    <Stack spacing={3} direction="row">
       <Badge color="secondary" badgeContent=" ">
         {rectangle}
       </Badge>
@@ -29,6 +25,6 @@ export default function BadgeOverlap() {
       <Badge color="secondary" overlap="circular" badgeContent=" " variant="dot">
         {circle}
       </Badge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/BadgeVisibility.js b/docs/src/pages/components/badges/BadgeVisibility.js
index 76a67660b4e922..e927e0275b7638 100644
--- a/docs/src/pages/components/badges/BadgeVisibility.js
+++ b/docs/src/pages/components/badges/BadgeVisibility.js
@@ -20,6 +20,7 @@ export default function BadgeVisibility() {
   return (
     <Box
       sx={{
+        color: 'action.active',
         display: 'flex',
         flexDirection: 'column',
         '& > *': {
@@ -58,6 +59,7 @@ export default function BadgeVisibility() {
           <MailIcon />
         </Badge>
         <FormControlLabel
+          sx={{ color: 'text.primary' }}
           control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
           label="Show Badge"
         />
diff --git a/docs/src/pages/components/badges/BadgeVisibility.tsx b/docs/src/pages/components/badges/BadgeVisibility.tsx
index 76a67660b4e922..e927e0275b7638 100644
--- a/docs/src/pages/components/badges/BadgeVisibility.tsx
+++ b/docs/src/pages/components/badges/BadgeVisibility.tsx
@@ -20,6 +20,7 @@ export default function BadgeVisibility() {
   return (
     <Box
       sx={{
+        color: 'action.active',
         display: 'flex',
         flexDirection: 'column',
         '& > *': {
@@ -58,6 +59,7 @@ export default function BadgeVisibility() {
           <MailIcon />
         </Badge>
         <FormControlLabel
+          sx={{ color: 'text.primary' }}
           control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
           label="Show Badge"
         />
diff --git a/docs/src/pages/components/badges/DotBadge.js b/docs/src/pages/components/badges/DotBadge.js
index 6b029eddc1c251..a1e47bef282f5a 100644
--- a/docs/src/pages/components/badges/DotBadge.js
+++ b/docs/src/pages/components/badges/DotBadge.js
@@ -2,23 +2,13 @@ import * as React from 'react';
 import Box from '@material-ui/core/Box';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
-import Typography from '@material-ui/core/Typography';
 
 export default function DotBadge() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          m: 1,
-        },
-      }}
-    >
+    <Box sx={{ color: 'action.active' }}>
       <Badge color="secondary" variant="dot">
         <MailIcon />
       </Badge>
-      <Badge color="secondary" variant="dot">
-        <Typography>Typography</Typography>
-      </Badge>
     </Box>
   );
 }
diff --git a/docs/src/pages/components/badges/DotBadge.tsx b/docs/src/pages/components/badges/DotBadge.tsx
index 6b029eddc1c251..a1e47bef282f5a 100644
--- a/docs/src/pages/components/badges/DotBadge.tsx
+++ b/docs/src/pages/components/badges/DotBadge.tsx
@@ -2,23 +2,13 @@ import * as React from 'react';
 import Box from '@material-ui/core/Box';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
-import Typography from '@material-ui/core/Typography';
 
 export default function DotBadge() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          m: 1,
-        },
-      }}
-    >
+    <Box sx={{ color: 'action.active' }}>
       <Badge color="secondary" variant="dot">
         <MailIcon />
       </Badge>
-      <Badge color="secondary" variant="dot">
-        <Typography>Typography</Typography>
-      </Badge>
     </Box>
   );
 }
diff --git a/docs/src/pages/components/badges/ShowZeroBadge.js b/docs/src/pages/components/badges/ShowZeroBadge.js
index 27b3c9176782ef..5f6a05f43046ef 100644
--- a/docs/src/pages/components/badges/ShowZeroBadge.js
+++ b/docs/src/pages/components/badges/ShowZeroBadge.js
@@ -1,23 +1,17 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
 export default function ShowZeroBadge() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          m: 1,
-        },
-      }}
-    >
+    <Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
       <Badge color="secondary" badgeContent={0}>
         <MailIcon />
       </Badge>
       <Badge color="secondary" badgeContent={0} showZero>
         <MailIcon />
       </Badge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/ShowZeroBadge.tsx b/docs/src/pages/components/badges/ShowZeroBadge.tsx
index 27b3c9176782ef..5f6a05f43046ef 100644
--- a/docs/src/pages/components/badges/ShowZeroBadge.tsx
+++ b/docs/src/pages/components/badges/ShowZeroBadge.tsx
@@ -1,23 +1,17 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
 export default function ShowZeroBadge() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          m: 1,
-        },
-      }}
-    >
+    <Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
       <Badge color="secondary" badgeContent={0}>
         <MailIcon />
       </Badge>
       <Badge color="secondary" badgeContent={0} showZero>
         <MailIcon />
       </Badge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/SimpleBadge.js b/docs/src/pages/components/badges/SimpleBadge.js
index 256c2eb9734cd1..29695efc06fe1f 100644
--- a/docs/src/pages/components/badges/SimpleBadge.js
+++ b/docs/src/pages/components/badges/SimpleBadge.js
@@ -1,26 +1,17 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
 export default function SimpleBadge() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          m: 1,
-        },
-      }}
-    >
-      <Badge badgeContent={4} color="primary">
-        <MailIcon />
-      </Badge>
+    <Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
       <Badge badgeContent={4} color="secondary">
         <MailIcon />
       </Badge>
       <Badge badgeContent={4} color="error">
         <MailIcon />
       </Badge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/SimpleBadge.tsx b/docs/src/pages/components/badges/SimpleBadge.tsx
index 256c2eb9734cd1..29695efc06fe1f 100644
--- a/docs/src/pages/components/badges/SimpleBadge.tsx
+++ b/docs/src/pages/components/badges/SimpleBadge.tsx
@@ -1,26 +1,17 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
 export default function SimpleBadge() {
   return (
-    <Box
-      sx={{
-        '& > *': {
-          m: 1,
-        },
-      }}
-    >
-      <Badge badgeContent={4} color="primary">
-        <MailIcon />
-      </Badge>
+    <Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
       <Badge badgeContent={4} color="secondary">
         <MailIcon />
       </Badge>
       <Badge badgeContent={4} color="error">
         <MailIcon />
       </Badge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/UnstyledBadge.js b/docs/src/pages/components/badges/UnstyledBadge.js
index 0c95d7428c80e7..1fe055f854787b 100644
--- a/docs/src/pages/components/badges/UnstyledBadge.js
+++ b/docs/src/pages/components/badges/UnstyledBadge.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { experimentalStyled as styled } from '@material-ui/core/styles';
 import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
 import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 
 const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
@@ -58,6 +59,7 @@ const StyledBadge = styled(BadgeUnstyled)`
 function BadgeContent() {
   return (
     <Box
+      component="span"
       sx={{
         width: 42,
         height: 42,
@@ -72,13 +74,13 @@ function BadgeContent() {
 
 export default function UnstyledBadge() {
   return (
-    <Box>
-      <StyledBadge badgeContent={5} overlap="circular" sx={{ mr: 2 }}>
+    <Stack spacing={4} direction="row">
+      <StyledBadge badgeContent={5} overlap="circular">
         <BadgeContent />
       </StyledBadge>
       <StyledBadge badgeContent={5} variant="dot" overlap="circular">
         <BadgeContent />
       </StyledBadge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/UnstyledBadge.tsx b/docs/src/pages/components/badges/UnstyledBadge.tsx
index 0c95d7428c80e7..1fe055f854787b 100644
--- a/docs/src/pages/components/badges/UnstyledBadge.tsx
+++ b/docs/src/pages/components/badges/UnstyledBadge.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { experimentalStyled as styled } from '@material-ui/core/styles';
 import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
 import Box from '@material-ui/core/Box';
+import Stack from '@material-ui/core/Stack';
 
 const StyledBadge = styled(BadgeUnstyled)`
   box-sizing: border-box;
@@ -58,6 +59,7 @@ const StyledBadge = styled(BadgeUnstyled)`
 function BadgeContent() {
   return (
     <Box
+      component="span"
       sx={{
         width: 42,
         height: 42,
@@ -72,13 +74,13 @@ function BadgeContent() {
 
 export default function UnstyledBadge() {
   return (
-    <Box>
-      <StyledBadge badgeContent={5} overlap="circular" sx={{ mr: 2 }}>
+    <Stack spacing={4} direction="row">
+      <StyledBadge badgeContent={5} overlap="circular">
         <BadgeContent />
       </StyledBadge>
       <StyledBadge badgeContent={5} variant="dot" overlap="circular">
         <BadgeContent />
       </StyledBadge>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/src/pages/components/badges/badges.md b/docs/src/pages/components/badges/badges.md
index 493a5e280510c3..e7f5a3ebcab63d 100644
--- a/docs/src/pages/components/badges/badges.md
+++ b/docs/src/pages/components/badges/badges.md
@@ -66,3 +66,10 @@ import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled';
 ```
 
 {{"demo": "pages/components/badges/UnstyledBadge.js"}}
+
+## Accessibility
+
+You can't rely on the content of the badge to be announced correctly.
+You should provide a full description, for instance, with `aria-label`:
+
+{{"demo": "pages/components/badges/AccessibleBadges.js"}}