diff --git a/aria-practices.html b/aria-practices.html
index ff3973986..dad8e56e9 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -2222,6 +2222,7 @@ <h4>Examples</h4>
         <ul>
           <li><a href="examples/radio/radio.html">Radio Group Example Using Roving tabindex</a></li>
           <li><a href="examples/radio/radio-activedescendant.html">Radio Group Example Using aria-activedescendant</a></li>
+          <li><a href="examples/radio/radio-rating.html">Rating Radio Group Example</a>: Radio group that provides input for a five-star rating scale.</li>
         </ul>
       </section>
 
diff --git a/examples/index.html b/examples/index.html
index 7e6f27f50..666b087d7 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -263,6 +263,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
               <ul>
                 <li><a href="menu-button/menu-button-links.html">Navigation Menu Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="menubar/menubar-navigation.html">Navigation Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="radio/radio-rating.html">Rating Radio Group</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-multithumb.html">Horizontal Multi-Thumb Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-seek.html">Media Seek Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-temperature.html">Vertical Temperature Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -290,6 +291,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td>
               <ul>
                 <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="radio/radio-rating.html">Rating Radio Group</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>
@@ -300,6 +302,7 @@ <h2 id="examples_by_role_label">Examples by Role</h2>
             <td>
               <ul>
                 <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="radio/radio-rating.html">Rating Radio Group</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="toolbar/toolbar.html">Toolbar</a></li>
               </ul>
@@ -492,6 +495,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="checkbox/checkbox.html">Checkbox  (Two State)</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="menubar/menubar-editor.html">Editor Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="radio/radio-rating.html">Rating Radio Group</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="switch/switch-button.html">Switch  Using HTML Button</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="switch/switch.html">Switch</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
@@ -644,6 +648,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="link/link.html">Link</a></li>
                 <li><a href="menubar/menubar-editor.html">Editor Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="menubar/menubar-navigation.html">Navigation Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="radio/radio-rating.html">Rating Radio Group</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-multithumb.html">Horizontal Multi-Thumb Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="spinbutton/datepicker-spinbuttons.html">Date Picker Spin Button</a></li>
                 <li><a href="table/table.html">Table</a></li>
@@ -679,6 +684,7 @@ <h2 id="examples_by_props_label">Examples By Properties and States</h2>
                 <li><a href="menubar/menubar-navigation.html">Navigation Menubar</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="meter/meter.html">Meter</a></li>
                 <li><a href="radio/radio-activedescendant.html">Radio Group  Using aria-activedescendant</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
+                <li><a href="radio/radio-rating.html">Rating Radio Group</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="radio/radio.html">Radio Group  Using Roving tabindex</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-color-viewer.html">Color Viewer Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
                 <li><a href="slider/slider-rating.html">Rating Slider</a> (<abbr title="High Contrast Support">HC</abbr>)</li>
diff --git a/examples/radio/css/radio-rating.css b/examples/radio/css/radio-rating.css
new file mode 100644
index 000000000..c32ef77b3
--- /dev/null
+++ b/examples/radio/css/radio-rating.css
@@ -0,0 +1,76 @@
+/* CSS Document */
+
+.rating-radio label {
+  display: block;
+}
+
+.rating-radio svg g[role="radio"] {
+  color: #005a9c;
+}
+
+.rating-radio svg {
+  forced-color-adjust: auto;
+  touch-action: pan-y;
+}
+
+.rating-radio svg .focus-ring,
+.rating-radio svg .focus-ring-none {
+  stroke-width: 0;
+  fill-opacity: 0;
+}
+
+.rating-radio svg .star {
+  stroke-width: 2px;
+  stroke: currentColor;
+  fill-opacity: 0;
+}
+
+.rating-radio svg .star-none {
+  stroke-width: 3px;
+  stroke: currentColor;
+  fill-opacity: 0;
+}
+
+.rating-radio[data-rating-value="5"] svg .star {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+.rating-radio[data-rating-value="1"] svg .star-1 .star {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+.rating-radio[data-rating-value="2"] svg .star-2 .star {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+.rating-radio[data-rating-value="3"] svg .star-3 .star {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+.rating-radio[data-rating-value="4"] svg .star-4 .star {
+  fill: currentColor;
+  fill-opacity: 1;
+}
+
+/* focus styling */
+
+.rating-radio:focus {
+  outline: none;
+}
+
+.rating-radio svg g:focus {
+  outline: none;
+}
+
+.rating-radio svg g:focus .focus-ring {
+  stroke-width: 2px;
+  stroke: currentColor;
+}
+
+.rating-radio:hover {
+  cursor: pointer;
+}
diff --git a/examples/radio/js/radio-rating.js b/examples/radio/js/radio-rating.js
new file mode 100644
index 000000000..4b27fb5a2
--- /dev/null
+++ b/examples/radio/js/radio-rating.js
@@ -0,0 +1,140 @@
+/*
+ *   This content is licensed according to the W3C Software License at
+ *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ *   File:   radio-rating.js
+ *
+ *   Desc:   Radio group widget that implements ARIA Authoring Practices
+ */
+
+'use strict';
+
+class RatingRadioGroup {
+  constructor(groupNode) {
+    this.groupNode = groupNode;
+
+    this.radioButtons = [];
+
+    this.firstRadioButton = null;
+    this.lastRadioButton = null;
+
+    var rbs = this.groupNode.querySelectorAll('[role=radio]');
+
+    for (var i = 0; i < rbs.length; i++) {
+      var rb = rbs[i];
+
+      rb.tabIndex = -1;
+      rb.setAttribute('aria-checked', 'false');
+
+      rb.addEventListener('keydown', this.handleKeydown.bind(this));
+      rb.addEventListener('click', this.handleClick.bind(this));
+
+      this.radioButtons.push(rb);
+
+      if (!this.firstRadioButton) {
+        this.firstRadioButton = rb;
+      }
+      this.lastRadioButton = rb;
+    }
+
+    var value = groupNode.getAttribute('data-rating-value');
+    var index = parseInt(value);
+
+    if (value && index >= 0 && index < this.radioButtons.length) {
+      this.radioButtons[index].tabIndex = 0;
+    } else {
+      value = this.firstRadioButton.getAttribute('data-rating-value');
+      groupNode.getAttribute('data-rating-value', value);
+      this.firstRadioButton.tabIndex = 0;
+    }
+  }
+
+  setChecked(currentItem) {
+    this.groupNode.tabIndex = -1;
+    for (var i = 0; i < this.radioButtons.length; i++) {
+      var rb = this.radioButtons[i];
+      rb.setAttribute('aria-checked', 'false');
+      rb.tabIndex = -1;
+    }
+    this.currentValue = currentItem.getAttribute('data-rating');
+    this.groupNode.setAttribute('data-rating-value', this.currentValue);
+
+    currentItem.setAttribute('aria-checked', 'true');
+    currentItem.tabIndex = 0;
+    currentItem.focus();
+  }
+
+  setCheckedToPreviousItem(currentItem) {
+    var index;
+
+    if (currentItem === this.firstRadioButton) {
+      this.setChecked(this.lastRadioButton);
+    } else {
+      index = this.radioButtons.indexOf(currentItem);
+      this.setChecked(this.radioButtons[index - 1]);
+    }
+  }
+
+  setCheckedToNextItem(currentItem) {
+    var index;
+
+    if (currentItem === this.lastRadioButton) {
+      this.setChecked(this.firstRadioButton);
+    } else {
+      index = this.radioButtons.indexOf(currentItem);
+      this.setChecked(this.radioButtons[index + 1]);
+    }
+  }
+
+  /* EVENT HANDLERS */
+
+  handleKeydown(event) {
+    var tgt = event.currentTarget,
+      flag = false;
+
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        this.setChecked(tgt);
+        flag = true;
+        break;
+
+      case 'Up':
+      case 'ArrowUp':
+      case 'Left':
+      case 'ArrowLeft':
+        this.setCheckedToPreviousItem(tgt);
+        flag = true;
+        break;
+
+      case 'Down':
+      case 'ArrowDown':
+      case 'Right':
+      case 'ArrowRight':
+        this.setCheckedToNextItem(tgt);
+        flag = true;
+        break;
+
+      default:
+        break;
+    }
+
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+
+  handleClick(event) {
+    this.setChecked(event.currentTarget);
+  }
+}
+
+// Initialize radio button group
+
+window.addEventListener('load', function () {
+  var radios = document.querySelectorAll('.rating-radio');
+  for (var i = 0; i < radios.length; i++) {
+    new RatingRadioGroup(radios[i]);
+  }
+});
diff --git a/examples/radio/radio-activedescendant.html b/examples/radio/radio-activedescendant.html
index 823626400..eafd370d7 100644
--- a/examples/radio/radio-activedescendant.html
+++ b/examples/radio/radio-activedescendant.html
@@ -34,6 +34,7 @@ <h1>Radio Group Example Using aria-activedescendant</h1>
       <p>Similar examples include: </p>
       <ul>
         <li><a href="radio.html">Radio Group Example Using Roving tabindex</a>: A radio button group that uses roving <code>tabindex</code> for managing keyboard focus.</li>
+        <li><a href="radio-rating.html">Rating Radio Group Example</a>: Radio group that provides input for a five-star rating scale.</li>
       </ul>
      <section>
       <div class="example-header">
diff --git a/examples/radio/radio-rating.html b/examples/radio/radio-rating.html
new file mode 100644
index 000000000..f6f2569ce
--- /dev/null
+++ b/examples/radio/radio-rating.html
@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Rating Radio Group Example | WAI-ARIA Authoring Practices 1.2</title>
+
+  <!--  Core js and css shared by all examples; do not modify when using this template. -->
+  <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
+  <link rel="stylesheet" href="../css/core.css">
+  <script src="../js/examples.js"></script>
+  <script src="../js/highlight.pack.js"></script>
+  <script src="../js/app.js"></script>
+
+  <!-- example js and css files -->
+  <link rel="stylesheet" type="text/css" href="css/radio-rating.css">
+  <script src="js/radio-rating.js" type="text/javascript"></script>
+</head>
+<body>
+  <nav aria-label="Related Links" class="feedback">
+    <ul>
+      <li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
+      <li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
+      <li><a href="https://github.com/w3c/aria-practices/projects/3">Related Issues</a></li>
+      <li><a href="../../#radio">Design Pattern</a></li>
+    </ul>
+  </nav>
+  <main>
+    <h1>Rating Radio Group Example</h1>
+    <p>
+      Following is an example of a rating input that demonstrates the
+      <a href="../../#radio">Radio Group Design Pattern.</a>
+      The rating is indicated by the number of stars selected by the user.
+    </p>
+    <p>Similar examples include: </p>
+    <ul>
+      <li><a href="../slider/slider-rating.html">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum value of a rating input for a five star rating scale.</li>
+      <li><a href="radio-activedescendant.html">Radio Group Example Using aria-activedescendant</a>: Radio button group that uses <code>aria-activedescendant</code> for managing keyboard focus.</li>
+      <li><a href="radio.html">Radio Group Example Using Roving tabindex</a>: A radio button group that uses roving <code>tabindex</code> for managing keyboard focus.</li>
+    </ul>
+    
+    <section>
+      <div class="example-header">
+        <h2 id="ex_label">Example</h2>
+      </div>
+      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+      <div id="ex1">
+        <div class="rating-radio" role="radiogroup" aria-labelledby="id-rating-label" data-rating-value="">
+          <div id="id-rating-label" class="label">Rating</div>
+          <svg role="none" xmlns="http://www.w3.org/2000/svg" width="264" height="48">
+            <defs>
+              <g id="star">
+                <polygon points="2.0,13.4 11.7,20.5 8.0,31.1 17.7,24.8 27.4,31.9 23.7,20.5 33.4,13.4 21.4,13.4 17.7,2.0 14.0,13.4"/>
+              </g>
+              <g id="focus-ring">
+                <rect width="40" height="38" rx="4"/>
+              </g>
+            </defs>
+
+            <g role="radio" aria-checked="false" tabindex="-1" data-rating="1" aria-label="one star" class="star-1 star-2 star-3 star-4 star-5" >
+              <use class="star" xlink:href="#star" x="10" y="7"/>
+              <use class="focus-ring" xlink:href="#focus-ring" x="8" y="5"/>
+            </g>
+
+            <g role="radio" aria-checked="false" tabindex="-1" data-rating="2" aria-label="two stars" class="star-2 star-3 star-4 star-5">
+              <use class="star" xlink:href="#star" x="50" y="7"/>
+              <use class="focus-ring" xlink:href="#focus-ring" x="48" y="5"/>
+            </g>
+
+            <g role="radio" aria-checked="false" tabindex="-1" data-rating="3" aria-label="three stars" class="star-3 star-4 star-5">
+              <use class="star" xlink:href="#star" x="90" y="7"/>
+              <use class="focus-ring" xlink:href="#focus-ring" x="88" y="5"/>
+            </g>
+
+            <g role="radio" aria-checked="false" tabindex="-1" data-rating="4" aria-label="four stars" class="star-4 star-5">
+              <use class="star" xlink:href="#star" x="130" y="7"/>
+              <use class="focus-ring" xlink:href="#focus-ring" x="128" y="5"/>
+            </g>
+
+            <g role="radio" aria-checked="false" tabindex="-1" data-rating="5" aria-label="five stars" class="star-5">
+              <use class="star" xlink:href="#star" x="170" y="7"/>
+              <use class="focus-ring" xlink:href="#focus-ring" x="168" y="5"/>
+            </g>
+          </svg>
+        </div>
+      </div>
+      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+    </section>
+
+    <section>
+      <h2>Accessibility Features</h2>
+      <ul>
+        <li>To enhance perceivability when operating the radios, visual keyboard focus and hover are styled using CSS:
+          <ul>
+            <li>The focus ring has a width of 2 pixels and at least 2 pixels of spacing between it and the star borders.</li>
+            <li>The cursor changes to a pointer when hovering over the stars so it is easier to perceive that the rating stars are interactive.</li>
+          </ul>
+        </li>
+        <li>
+          To ensure the borders of the stars and the focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content.
+          For example, the color of the focus ring border is set to match the foreground color of  high contrast mode text by specifying the CSS <code>currentColor</code> value for the <code>stroke</code> property of the inline SVG <code>polygon</code> to draw the star borders and <code>rect</code> element used to draw the focus ring border.
+          To make the background of the <code>polygon</code> and <code>rect</code> elements match the high contrast background color, the <code>fill-opacity</code> attribute of the <code>rect</code> is set to zero.
+          If specific colors were instead used to specify the <code>stroke</code> and <code>fill</code> properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the star and the background or even make them invisible if their color matched the high contrast mode background.<br>
+          Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to <code>auto</code> for the <code>currentColor</code> value to be updated in high contrast mode.
+          Some browsers do not use <code>auto</code> for the default value.
+        </li>
+      </ul>
+    </section>
+
+    <section>
+      <h2 id="kbd_label">Keyboard Support</h2>
+      <table aria-labelledby="kbd_label" class="def">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Function</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="key-tab">
+            <th><kbd>Tab</kbd></th>
+            <td>
+              <ul>
+                <li>Moves focus to the checked <code>radio</code> button in the <code>radiogroup</code>.</li>
+                <li>If a <code>radio</code> button is not checked, focus moves to the first <code>radio</code> button in the group.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="key-space">
+            <th><kbd>Space</kbd></th>
+            <td>
+              <ul>
+                <li>If the <code>radio</code> button with focus is not checked, changes the state to <code>checked</code>.</li>
+                <li>Otherwise, does nothing.</li>
+                <li>Note: The state where a radio is not checked only occurs on page load.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="key-down-right-arrow">
+            <th><kbd>Down arrow</kbd><br/><kbd>Right arrow</kbd></th>
+            <td>
+              <ul>
+                <li>Moves focus to and checks the next <code>radio</code> button in the group.</li>
+                <li>If focus is on the last <code>radio</code> button, moves focus to the first <code>radio</code> button.</li>
+                <li>The state of the previously checked radio button is changed to unchecked.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="key-up-left-arrow">
+            <th><kbd>Up arrow</kbd><br/><kbd>Left arrow</kbd></th>
+            <td>
+              <ul>
+                <li>Moves focus to and checks the previous <code>radio</code> button in the group.</li>
+                <li>If focus is on the first <code>radio</code> button, moves focus to and checks the last <code>radio</code> button.</li>
+                <li>The state of the previously checked radio button is changed to unchecked.</li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section>
+      <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
+      <table aria-labelledby="rps_label" class="data attributes">
+        <thead>
+          <tr>
+            <th scope="col">Role</th>
+            <th scope="col">Attributes</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="svg-none">
+            <th scope="row">
+              <code>none</code>
+            </th>
+            <td></td>
+            <td>
+              <code>svg</code>
+            </td>
+            <td>
+              The use of the <code>none</code> role on the SVG element ensures assistive technologies do not interpret the SVG element as an image or some other role.
+            </td>
+          </tr>
+          <tr data-test-id="radiogroup-role">
+            <th scope="row"><code>radiogroup</code></th>
+            <td></td>
+            <td><code>div</code></td>
+            <td>
+              <ul>
+                <li>Identifies the <code>div</code> element as a container for a group of <code>radio</code> buttons.</li>
+                <li>Is not focusable because focus is managed using a roving tabindex strategy as described below.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="radiogroup-aria-labelledby">
+            <td></td>
+            <th scope="row"><code>aria-labelledby="ID_REFERENCE"</code></th>
+            <td><code>div</code></td>
+            <td>Refers to the element that contains the label of the radio group.</td>
+          </tr>
+          <tr data-test-id="radio-role">
+            <th scope="row"><code>radio</code></th>
+            <td></td>
+            <td><code>g</code></td>
+            <td>Identifies the <code>g</code> element as an ARIA <code>radio</code> button.</td>
+          </tr>
+          <tr data-test-id="radio-aria-label">
+            <td></td>
+            <th scope="row"><code>aria-label="<em>name</em>"</code></th>
+            <td><code>g</code></td>
+            <td>
+              Defines an accessible name that identifies the number of stars associated with the radio button (e.g. "one star", two stars", ..).
+            </td>
+          </tr>
+          <tr data-test-id="radio-tabindex">
+            <td></td>
+            <th scope="row"><code>tabindex="-1"</code></th>
+            <td><code>g</code></td>
+            <td>
+              <ul>
+                <li>Makes the element focusable but not part of the page <kbd>Tab</kbd> sequence.</li>
+                <li>Applied to all radio buttons contained in the radio group except for one that is included in the page <kbd>Tab</kbd> sequence.</li>
+                <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="radio-tabindex">
+            <td></td>
+            <th scope="row"><code>tabindex="0"</code></th>
+            <td><code>g</code></td>
+            <td>
+              <ul>
+                <li>Makes the radio button focusable and includes it in the page <kbd>Tab</kbd> sequence.</li>
+                <li>Set on only one radio in the radio group.</li>
+                <li>On page load, is set on the first radio button in the radio group.</li>
+                <li>Moves with focus inside the radio group so the most recently focused radio button is included in the page <kbd>Tab</kbd> sequence.</li>
+                <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="radio-aria-checked">
+            <td></td>
+            <th scope="row"><code>aria-checked="false"</code></th>
+            <td><code>g</code></td>
+            <td>
+              <ul>
+                <li>Identifies <code>radio</code> buttons which are not checked.</li>
+                <li>CSS attribute selectors (e.g. <code>[aria-checked="false"]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
+                <li>The CSS <code>::before</code> pseudo-element is used to indicate visual state of unchecked radio buttons to support high contrast settings in operating systems and browsers.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="radio-aria-checked">
+            <td></td>
+            <th scope="row"><code>aria-checked="true"</code></th>
+            <td><code>g</code></td>
+            <td>
+              <ul>
+                <li>Identifies the <code>radio</code> button which is checked.</li>
+                <li>CSS attribute selectors (e.g. <code>[aria-checked="true"]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
+                <li>The CSS <code>::before</code> pseudo-element is used to indicate visual state of checked radio buttons to support high contrast settings in operating systems and browsers.</li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+
+    <section>
+      <h2>Javascript and CSS Source Code</h2>
+      <ul id="css_js_files">
+        <li>CSS: <a href="css/radio-rating.css" type="text/css">radio-rating.css</a></li>
+        <li>Javascript: <a href="js/radio-rating.js" type="text/javascript">radio-rating.js</a></li>
+      </ul>
+    </section>
+
+    <section>
+      <h2 id="sc1_label">HTML Source Code</h2>
+      <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
+      <pre><code id="sc1"></code></pre>
+      <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
+      <script>
+        sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files');
+        sourceCode.make();
+      </script>
+    </section>
+
+  </main>
+  <nav>
+    <a href="../../#radio">Slider Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
+  </nav>
+</body>
+</html>
diff --git a/examples/radio/radio.html b/examples/radio/radio.html
index 7caa7a6d2..ae7465ef0 100644
--- a/examples/radio/radio.html
+++ b/examples/radio/radio.html
@@ -34,6 +34,7 @@ <h1>Radio Group Example Using Roving tabindex</h1>
       <p>Similar examples include: </p>
       <ul>
         <li><a href="radio-activedescendant.html">Radio Group Example Using aria-activedescendant</a>: Radio button group that uses <code>aria-activedescendant</code> for managing keyboard focus.</li>
+        <li><a href="radio-rating.html">Rating Radio Group Example</a>: Radio group that provides input for a five-star rating scale.</li>
       </ul>
       <section>
         <div class="example-header">
diff --git a/examples/slider/slider-rating.html b/examples/slider/slider-rating.html
index 4409d384b..414c6e2ad 100644
--- a/examples/slider/slider-rating.html
+++ b/examples/slider/slider-rating.html
@@ -45,6 +45,7 @@ <h1>Rating Slider Example</h1>
     </p>
     <p>Similar examples include: </p>
     <ul>
+      <li><a href="../radio/radio-rating.html">Rating Radio Group Example</a>: Radio group that provides input for a five-star rating scale.</li>
       <li><a href="slider-color-viewer.html">Color Viewer Slider Example</a>: Basic  horizontal sliders that illustrate setting numeric values for a color picker.</li>
       <li><a href="slider-temperature.html">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
       <li><a href="slider-seek.html">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
diff --git a/test/tests/radio_radio-rating.js b/test/tests/radio_radio-rating.js
new file mode 100644
index 000000000..d7c90d8ee
--- /dev/null
+++ b/test/tests/radio_radio-rating.js
@@ -0,0 +1,326 @@
+const { ariaTest } = require('..');
+const { By, Key } = require('selenium-webdriver');
+const assertAttributeValues = require('../util/assertAttributeValues');
+const assertAriaLabelExists = require('../util/assertAriaLabelExists');
+const assertAriaLabelledby = require('../util/assertAriaLabelledby');
+const assertAriaRoles = require('../util/assertAriaRoles');
+const assertRovingTabindex = require('../util/assertRovingTabindex');
+const assertTabOrder = require('../util/assertTabOrder');
+
+const exampleFile = 'radio/radio-rating.html';
+
+const ex = {
+  radiogroupSelector: '#ex1 [role="radiogroup"]',
+  radioSelector: '#ex1 [role="radio"]',
+  innerRadioSelector: '[role="radio"]',
+  radiogroupSelector1: '#ex1 [role="radiogroup"]:nth-of-type(1) [role="radio"]',
+};
+
+const checkFocus = async function (t, selector, index) {
+  return t.context.session.executeScript(
+    function () {
+      const [selector, index] = arguments;
+      const items = document.querySelectorAll(selector);
+      return items[index] === document.activeElement;
+    },
+    selector,
+    index
+  );
+};
+
+// Attributes
+
+ariaTest('role="none" on SVG element', exampleFile, 'svg-none', async (t) => {
+  await assertAriaRoles(t, 'ex1', 'none', '1', 'svg');
+});
+
+ariaTest(
+  'role="radiogroup" on div element',
+  exampleFile,
+  'radiogroup-role',
+  async (t) => {
+    await assertAriaRoles(t, 'ex1', 'radiogroup', '1', 'div');
+  }
+);
+
+ariaTest(
+  '"aria-labelledby" attribute on radiogroup',
+  exampleFile,
+  'radiogroup-aria-labelledby',
+  async (t) => {
+    await assertAriaLabelledby(t, ex.radiogroupSelector);
+  }
+);
+
+ariaTest('role="radio" on g elements', exampleFile, 'radio-role', async (t) => {
+  await assertAriaRoles(t, 'ex1', 'radio', '5', 'g');
+});
+
+ariaTest(
+  'aria-label on g[role=radio] element',
+  exampleFile,
+  'radio-aria-label',
+  async (t) => {
+    await assertAriaLabelExists(t, ex.radioSelector);
+  }
+);
+
+ariaTest(
+  'roving tabindex on radio elements',
+  exampleFile,
+  'radio-tabindex',
+  async (t) => {
+    // Test first radio group
+    let radios =
+      ex.radiogroupSelector + ':nth-of-type(1) ' + ex.innerRadioSelector;
+    await assertRovingTabindex(t, radios, Key.ARROW_RIGHT);
+  }
+);
+
+ariaTest(
+  '"aria-checked" set on role="radio"',
+  exampleFile,
+  'radio-aria-checked',
+  async (t) => {
+    // The radio groups will be all unchecked on page load
+    await assertAttributeValues(t, ex.radioSelector, 'aria-checked', 'false');
+
+    const radiogroups = await t.context.queryElements(t, ex.radiogroupSelector);
+    for (let radiogroup of radiogroups) {
+      let radios = await t.context.queryElements(
+        t,
+        ex.innerRadioSelector,
+        radiogroup
+      );
+
+      for (let checked = 0; checked < radios.length; checked++) {
+        await await radios[checked].sendKeys(' ');
+        for (let el = 0; el < radios.length; el++) {
+          // test only one element has aria-checked="true"
+          let isChecked = el === checked ? 'true' : 'false';
+          t.is(
+            await radios[el].getAttribute('aria-checked'),
+            isChecked,
+            'Tab at index ' +
+              checked +
+              ' is checked, therefore, tab at index ' +
+              el +
+              ' should have aria-checked="' +
+              checked +
+              '"'
+          );
+        }
+      }
+    }
+  }
+);
+
+// Keys
+
+ariaTest(
+  'Moves focus to first or checked item',
+  exampleFile,
+  'key-tab',
+  async (t) => {
+    // On page load, the first item in the radio list should be in tab index
+    await assertTabOrder(t, [ex.radiogroupSelector1 + ':nth-of-type(1)']);
+  }
+);
+
+ariaTest('Selects radio item', exampleFile, 'key-space', async (t) => {
+  const firstCrustSelector = ex.radiogroupSelector1 + ':nth-of-type(1)';
+  await t.context.session.findElement(By.css(firstCrustSelector)).sendKeys(' ');
+  await assertAttributeValues(t, firstCrustSelector, 'aria-checked', 'true');
+});
+
+ariaTest(
+  'RIGHT ARROW changes focus and checks radio',
+  exampleFile,
+  'key-down-right-arrow',
+  async (t) => {
+    let radios = await t.context.queryElements(t, ex.radiogroupSelector1);
+
+    // Right arrow moves focus to right
+    for (let index = 0; index < radios.length - 1; index++) {
+      await radios[index].sendKeys(Key.ARROW_RIGHT);
+      const newIndex = index + 1;
+
+      t.true(
+        await checkFocus(t, ex.radiogroupSelector1, newIndex),
+        'Focus should be on radio at index ' +
+          newIndex +
+          ' after ARROW_RIGHT to radio' +
+          ' at index ' +
+          index
+      );
+      t.is(
+        await radios[newIndex].getAttribute('aria-checked'),
+        'true',
+        'Radio at index ' +
+          newIndex +
+          ' should be checked after ARROW_RIGHT to radio' +
+          ' at index ' +
+          index
+      );
+    }
+
+    // Right arrow should move focus from last item to first
+    await radios[radios.length - 1].sendKeys(Key.ARROW_RIGHT);
+    t.true(
+      await checkFocus(t, ex.radiogroupSelector1, 0),
+      'Focus should be on radio at index 0 after ARROW_RIGHT to radio at index ' +
+        (radios.length - 1)
+    );
+    t.is(
+      await radios[0].getAttribute('aria-checked'),
+      'true',
+      'Radio at index 0 should be checked after ARROW_RIGHT to radio at index ' +
+        (radios.length - 1)
+    );
+  }
+);
+
+ariaTest(
+  'DOWN ARROW changes focus and checks radio',
+  exampleFile,
+  'key-down-right-arrow',
+  async (t) => {
+    let radios = await t.context.queryElements(t, ex.radiogroupSelector1);
+
+    // Down arrow moves focus to down
+    for (let index = 0; index < radios.length - 1; index++) {
+      await radios[index].sendKeys(Key.ARROW_DOWN);
+      const newIndex = index + 1;
+
+      t.true(
+        await checkFocus(t, ex.radiogroupSelector1, newIndex),
+        'Focus should be on radio at index ' +
+          newIndex +
+          ' after ARROW_DOWN to radio' +
+          ' at index ' +
+          index
+      );
+      t.is(
+        await radios[newIndex].getAttribute('aria-checked'),
+        'true',
+        'Radio at index ' +
+          newIndex +
+          ' should be checked after ARROW_DOWN to radio' +
+          ' at index ' +
+          index
+      );
+    }
+
+    // Down arrow should move focus from last item to first
+    await radios[radios.length - 1].sendKeys(Key.ARROW_DOWN);
+    t.true(
+      await checkFocus(t, ex.radiogroupSelector1, 0),
+      'Focus should be on radio at index 0 after ARROW_DOWN to radio at index ' +
+        (radios.length - 1)
+    );
+    t.is(
+      await radios[0].getAttribute('aria-checked'),
+      'true',
+      'Radio at index 0 should be checked after ARROW_DOWN to radio at index ' +
+        (radios.length - 1)
+    );
+  }
+);
+
+ariaTest(
+  'LEFT ARROW changes focus and checks radio',
+  exampleFile,
+  'key-up-left-arrow',
+  async (t) => {
+    let radios = await t.context.queryElements(t, ex.radiogroupSelector1);
+
+    // Left arrow should move focus from first item to last, then progressively left
+    await radios[0].sendKeys(Key.ARROW_LEFT);
+
+    t.true(
+      await checkFocus(t, ex.radiogroupSelector1, radios.length - 1),
+      'Focus should be on radio at index ' +
+        (radios.length - 1) +
+        ' after ARROW_LEFT to radio at index 0'
+    );
+    t.is(
+      await radios[radios.length - 1].getAttribute('aria-checked'),
+      'true',
+      'Radio at index ' +
+        (radios.length - 1) +
+        ' should be checked after ARROW_LEFT to radio at index 0'
+    );
+
+    for (let index = radios.length - 1; index > 0; index--) {
+      await radios[index].sendKeys(Key.ARROW_LEFT);
+      const newIndex = index - 1;
+
+      t.true(
+        await checkFocus(t, ex.radiogroupSelector1, newIndex),
+        'Focus should be on radio at index ' +
+          newIndex +
+          ' after ARROW_LEFT to radio' +
+          ' at index ' +
+          index
+      );
+      t.is(
+        await radios[newIndex].getAttribute('aria-checked'),
+        'true',
+        'Radio at index ' +
+          newIndex +
+          ' should be checked after ARROW_LEFT to radio' +
+          ' at index ' +
+          index
+      );
+    }
+  }
+);
+
+ariaTest(
+  'UP ARROW changes focus and checks radio',
+  exampleFile,
+  'key-up-left-arrow',
+  async (t) => {
+    let radios = await t.context.queryElements(t, ex.radiogroupSelector1);
+
+    // Up arrow should move focus from first item to last, then progressively up
+    await radios[0].sendKeys(Key.ARROW_UP);
+
+    t.true(
+      await checkFocus(t, ex.radiogroupSelector1, radios.length - 1),
+      'Focus should be on radio at index ' +
+        (radios.length - 1) +
+        ' after ARROW_UP to radio at index 0'
+    );
+    t.is(
+      await radios[radios.length - 1].getAttribute('aria-checked'),
+      'true',
+      'Radio at index ' +
+        (radios.length - 1) +
+        ' should be checked after ARROW_UP to radio at index 0'
+    );
+
+    for (let index = radios.length - 1; index > 0; index--) {
+      await radios[index].sendKeys(Key.ARROW_UP);
+      const newIndex = index - 1;
+
+      t.true(
+        await checkFocus(t, ex.radiogroupSelector1, newIndex),
+        'Focus should be on radio at index ' +
+          newIndex +
+          ' after ARROW_UP to radio' +
+          ' at index ' +
+          index
+      );
+      t.is(
+        await radios[newIndex].getAttribute('aria-checked'),
+        'true',
+        'Radio at index ' +
+          newIndex +
+          ' should be checked after ARROW_UP to radio' +
+          ' at index ' +
+          index
+      );
+    }
+  }
+);