diff --git a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Image.Example.tsx b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Image.Example.tsx
index d1497f075778a..7742dea18a51c 100644
--- a/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Image.Example.tsx
+++ b/packages/react-examples/src/react/ChoiceGroup/ChoiceGroup.Image.Example.tsx
@@ -6,17 +6,18 @@ const options: IChoiceGroupOption[] = [
   {
     key: 'bar',
     imageSrc: TestImages.choiceGroupBarUnselected,
-    imageAlt: 'Bar chart icon',
+    imageAlt: 'Bar chart',
     selectedImageSrc: TestImages.choiceGroupBarSelected,
     imageSize: { width: 32, height: 32 },
-    text: 'Clustered bar chart', // This text is long to show text wrapping.
+    text: 'Bar',
   },
   {
     key: 'pie',
-    imageSrc: TestImages.choiceGroupBarUnselected,
-    selectedImageSrc: TestImages.choiceGroupBarSelected,
+    imageSrc: TestImages.choiceGroupPieUnselected,
+    imageAlt: 'Pie chart',
+    selectedImageSrc: TestImages.choiceGroupPieSelected,
     imageSize: { width: 32, height: 32 },
-    text: 'Pie chart',
+    text: 'Pie',
   },
 ];
 
diff --git a/packages/react-examples/src/react/ChoiceGroup/docs/ChoiceGroupBestPractices.md b/packages/react-examples/src/react/ChoiceGroup/docs/ChoiceGroupBestPractices.md
index c9c160a64ede7..bcd885339123b 100644
--- a/packages/react-examples/src/react/ChoiceGroup/docs/ChoiceGroupBestPractices.md
+++ b/packages/react-examples/src/react/ChoiceGroup/docs/ChoiceGroupBestPractices.md
@@ -12,3 +12,4 @@
 - Select the safest (to prevent loss of data or system access), most secure, and most private option as the default. If safety and security aren't factors, select the most likely or convenient option.
 - Use a phrase for the label, rather than a full sentence.
 - Make sure to give people the option to not make a choice. For example, include a "None" option.
+- When using ChoiceGroup with images, keep text short (ideally one or two words), since overflowing text will be cut off. Translation to other languages and user-applied text styles can often cause label text to end up longer than the English label with author styles.
diff --git a/packages/react-examples/src/react/__snapshots__/ChoiceGroup.Image.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/ChoiceGroup.Image.Example.tsx.shot
index 42e8f174fa4d9..ee5184c6f324b 100644
--- a/packages/react-examples/src/react/__snapshots__/ChoiceGroup.Image.Example.tsx.shot
+++ b/packages/react-examples/src/react/__snapshots__/ChoiceGroup.Image.Example.tsx.shot
@@ -268,7 +268,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                   }
                 >
                   <img
-                    alt="Bar chart icon"
+                    alt="Bar chart"
                     className=
                         ms-Image-image
                         ms-Image-image--portrait
@@ -319,7 +319,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                   }
                 >
                   <img
-                    alt="Bar chart icon"
+                    alt="Bar chart"
                     className=
                         ms-Image-image
                         ms-Image-image--portrait
@@ -364,7 +364,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                 className="ms-ChoiceFieldLabel"
                 id="ChoiceGroupLabel1-bar"
               >
-                Clustered bar chart
+                Bar
               </span>
             </div>
           </label>
@@ -552,7 +552,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                   }
                 >
                   <img
-                    alt=""
+                    alt="Pie chart"
                     className=
                         ms-Image-image
                         ms-Image-image--portrait
@@ -566,7 +566,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                         }
                     onError={[Function]}
                     onLoad={[Function]}
-                    src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-unselected.png"
+                    src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-unselected.png"
                   />
                 </div>
               </div>
@@ -611,7 +611,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                   }
                 >
                   <img
-                    alt=""
+                    alt="Pie chart"
                     className=
                         ms-Image-image
                         ms-Image-image--portrait
@@ -625,7 +625,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                         }
                     onError={[Function]}
                     onLoad={[Function]}
-                    src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-bar-selected.png"
+                    src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/choicegroup-pie-selected.png"
                   />
                 </div>
               </div>
@@ -656,7 +656,7 @@ exports[`Component Examples renders ChoiceGroup.Image.Example.tsx correctly 1`]
                 className="ms-ChoiceFieldLabel"
                 id="ChoiceGroupLabel1-pie"
               >
-                Pie chart
+                Pie
               </span>
             </div>
           </label>