diff --git a/guides/release/accessibility/components.md b/guides/release/accessibility/components.md
index 9b84e52313..cc14c9ba0e 100644
--- a/guides/release/accessibility/components.md
+++ b/guides/release/accessibility/components.md
@@ -59,6 +59,8 @@ However, the most common methods for providing accessible names can be reviewed
 
 Every `<input>` element should have an associated `<label>` element. To do this, the `<input>` element's `id` attribute value should be the same as the `for` attribute value on the `<label>`, like this:
 
+![Separate input and label elements with a connection established by matching for and id attributes](/images/accessibility/component-considerations/input-for-id.png)
+
 ```html
 <label for="input-firstName">First Name:</label>
 <input id="input-firstName" name="firstName" value="" type="text" />
@@ -66,10 +68,24 @@ Every `<input>` element should have an associated `<label>` element. To do this,
 
 It is also valid to wrap the `<label>` element around the `<input />` element: 
 
+![A child input element nested within a parent label element without any for and id attributes](/images/accessibility/component-considerations/input-nested.png)
+
 ```html
 <label>First Name:
   <input name="firstName" value="" type="text" />
 </label>
 ```
 
-However, this option can be a little harder to apply styles to, so both should be tested before determining which approach to use. 
+However, this option can be a little harder to apply styles to, so both should be tested before determining which approach to use.
+
+<div class="cta">
+  <div class="cta-note">
+    <div class="cta-note-body">
+      <div class="cta-note-heading">Zoey says...</div>
+      <div class="cta-note-message">
+To dig deeper into accessible input patterns in Ember check out the <a href="https://emberjs-1.gitbook.io/ember-component-patterns/form-components/input">ember-component-patterns article on Input Fields</a>.
+      </div>
+    </div>
+    <img src="/images/mascots/zoey.png" role="presentation" alt="Ember Mascot">
+  </div>
+</div>
diff --git a/guides/v3.12.0/accessibility/components.md b/guides/v3.12.0/accessibility/components.md
index 6997d5a018..d7ec2bcaee 100644
--- a/guides/v3.12.0/accessibility/components.md
+++ b/guides/v3.12.0/accessibility/components.md
@@ -59,6 +59,8 @@ However, the most common methods for providing accessible names can be reviewed
 
 Every `<input>` element should have an associated `<label>` element. To do this, the `<input>` element's `id` attribute value should be the same as the `for` attribute value on the `<label>`, like this:
 
+![Separate input and label elements with a connection established by matching for and id attributes](/images/accessibility/component-considerations/input-for-id.png)
+
 ```html
 <label for="input-firstName">First Name:</label>
 <input id="input-firstName" name="firstName" value="" />
@@ -66,6 +68,8 @@ Every `<input>` element should have an associated `<label>` element. To do this,
 
 It is also valid to wrap the `<label>` element around the `<input />` element: 
 
+![A child input element nested within a parent label element without any for and id attributes](/images/accessibility/component-considerations/input-nested.png)
+
 ```html
 <label>First Name:
   <input id="input-firstName" name="firstName" value="" />
@@ -73,3 +77,15 @@ It is also valid to wrap the `<label>` element around the `<input />` element:
 ```
 
 However, this option can be a little harder to apply styles to, so both should be tested before determining which approach to use. 
+
+<div class="cta">
+  <div class="cta-note">
+    <div class="cta-note-body">
+      <div class="cta-note-heading">Zoey says...</div>
+      <div class="cta-note-message">
+To dig deeper into accessible input patterns in Ember check out the <a href="https://emberjs-1.gitbook.io/ember-component-patterns/form-components/input">ember-component-patterns article on Input Fields</a>.
+      </div>
+    </div>
+    <img src="/images/mascots/zoey.png" role="presentation" alt="Ember Mascot">
+  </div>
+</div>
diff --git a/guides/v3.13.0/accessibility/components.md b/guides/v3.13.0/accessibility/components.md
index 6997d5a018..d7ec2bcaee 100644
--- a/guides/v3.13.0/accessibility/components.md
+++ b/guides/v3.13.0/accessibility/components.md
@@ -59,6 +59,8 @@ However, the most common methods for providing accessible names can be reviewed
 
 Every `<input>` element should have an associated `<label>` element. To do this, the `<input>` element's `id` attribute value should be the same as the `for` attribute value on the `<label>`, like this:
 
+![Separate input and label elements with a connection established by matching for and id attributes](/images/accessibility/component-considerations/input-for-id.png)
+
 ```html
 <label for="input-firstName">First Name:</label>
 <input id="input-firstName" name="firstName" value="" />
@@ -66,6 +68,8 @@ Every `<input>` element should have an associated `<label>` element. To do this,
 
 It is also valid to wrap the `<label>` element around the `<input />` element: 
 
+![A child input element nested within a parent label element without any for and id attributes](/images/accessibility/component-considerations/input-nested.png)
+
 ```html
 <label>First Name:
   <input id="input-firstName" name="firstName" value="" />
@@ -73,3 +77,15 @@ It is also valid to wrap the `<label>` element around the `<input />` element:
 ```
 
 However, this option can be a little harder to apply styles to, so both should be tested before determining which approach to use. 
+
+<div class="cta">
+  <div class="cta-note">
+    <div class="cta-note-body">
+      <div class="cta-note-heading">Zoey says...</div>
+      <div class="cta-note-message">
+To dig deeper into accessible input patterns in Ember check out the <a href="https://emberjs-1.gitbook.io/ember-component-patterns/form-components/input">ember-component-patterns article on Input Fields</a>.
+      </div>
+    </div>
+    <img src="/images/mascots/zoey.png" role="presentation" alt="Ember Mascot">
+  </div>
+</div>
diff --git a/guides/v3.14.0/accessibility/components.md b/guides/v3.14.0/accessibility/components.md
index 6997d5a018..d7ec2bcaee 100644
--- a/guides/v3.14.0/accessibility/components.md
+++ b/guides/v3.14.0/accessibility/components.md
@@ -59,6 +59,8 @@ However, the most common methods for providing accessible names can be reviewed
 
 Every `<input>` element should have an associated `<label>` element. To do this, the `<input>` element's `id` attribute value should be the same as the `for` attribute value on the `<label>`, like this:
 
+![Separate input and label elements with a connection established by matching for and id attributes](/images/accessibility/component-considerations/input-for-id.png)
+
 ```html
 <label for="input-firstName">First Name:</label>
 <input id="input-firstName" name="firstName" value="" />
@@ -66,6 +68,8 @@ Every `<input>` element should have an associated `<label>` element. To do this,
 
 It is also valid to wrap the `<label>` element around the `<input />` element: 
 
+![A child input element nested within a parent label element without any for and id attributes](/images/accessibility/component-considerations/input-nested.png)
+
 ```html
 <label>First Name:
   <input id="input-firstName" name="firstName" value="" />
@@ -73,3 +77,15 @@ It is also valid to wrap the `<label>` element around the `<input />` element:
 ```
 
 However, this option can be a little harder to apply styles to, so both should be tested before determining which approach to use. 
+
+<div class="cta">
+  <div class="cta-note">
+    <div class="cta-note-body">
+      <div class="cta-note-heading">Zoey says...</div>
+      <div class="cta-note-message">
+To dig deeper into accessible input patterns in Ember check out the <a href="https://emberjs-1.gitbook.io/ember-component-patterns/form-components/input">ember-component-patterns article on Input Fields</a>.
+      </div>
+    </div>
+    <img src="/images/mascots/zoey.png" role="presentation" alt="Ember Mascot">
+  </div>
+</div>
diff --git a/guides/v3.15.0/accessibility/components.md b/guides/v3.15.0/accessibility/components.md
index 64cea7e1a2..d429660939 100644
--- a/guides/v3.15.0/accessibility/components.md
+++ b/guides/v3.15.0/accessibility/components.md
@@ -59,6 +59,8 @@ However, the most common methods for providing accessible names can be reviewed
 
 Every `<input>` element should have an associated `<label>` element. To do this, the `<input>` element's `id` attribute value should be the same as the `for` attribute value on the `<label>`, like this:
 
+![Separate input and label elements with a connection established by matching for and id attributes](/images/accessibility/component-considerations/input-for-id.png)
+
 ```html
 <label for="input-firstName">First Name:</label>
 <input id="input-firstName" name="firstName" value="" type="text" />
@@ -66,6 +68,8 @@ Every `<input>` element should have an associated `<label>` element. To do this,
 
 It is also valid to wrap the `<label>` element around the `<input />` element: 
 
+![A child input element nested within a parent label element without any for and id attributes](/images/accessibility/component-considerations/input-nested.png)
+
 ```html
 <label>First Name:
   <input name="firstName" value="" type="text" />
@@ -73,3 +77,15 @@ It is also valid to wrap the `<label>` element around the `<input />` element:
 ```
 
 However, this option can be a little harder to apply styles to, so both should be tested before determining which approach to use. 
+
+<div class="cta">
+  <div class="cta-note">
+    <div class="cta-note-body">
+      <div class="cta-note-heading">Zoey says...</div>
+      <div class="cta-note-message">
+To dig deeper into accessible input patterns in Ember check out the <a href="https://emberjs-1.gitbook.io/ember-component-patterns/form-components/input">ember-component-patterns article on Input Fields</a>.
+      </div>
+    </div>
+    <img src="/images/mascots/zoey.png" role="presentation" alt="Ember Mascot">
+  </div>
+</div>
diff --git a/guides/v3.16.0/accessibility/components.md b/guides/v3.16.0/accessibility/components.md
index 64cea7e1a2..d429660939 100644
--- a/guides/v3.16.0/accessibility/components.md
+++ b/guides/v3.16.0/accessibility/components.md
@@ -59,6 +59,8 @@ However, the most common methods for providing accessible names can be reviewed
 
 Every `<input>` element should have an associated `<label>` element. To do this, the `<input>` element's `id` attribute value should be the same as the `for` attribute value on the `<label>`, like this:
 
+![Separate input and label elements with a connection established by matching for and id attributes](/images/accessibility/component-considerations/input-for-id.png)
+
 ```html
 <label for="input-firstName">First Name:</label>
 <input id="input-firstName" name="firstName" value="" type="text" />
@@ -66,6 +68,8 @@ Every `<input>` element should have an associated `<label>` element. To do this,
 
 It is also valid to wrap the `<label>` element around the `<input />` element: 
 
+![A child input element nested within a parent label element without any for and id attributes](/images/accessibility/component-considerations/input-nested.png)
+
 ```html
 <label>First Name:
   <input name="firstName" value="" type="text" />
@@ -73,3 +77,15 @@ It is also valid to wrap the `<label>` element around the `<input />` element:
 ```
 
 However, this option can be a little harder to apply styles to, so both should be tested before determining which approach to use. 
+
+<div class="cta">
+  <div class="cta-note">
+    <div class="cta-note-body">
+      <div class="cta-note-heading">Zoey says...</div>
+      <div class="cta-note-message">
+To dig deeper into accessible input patterns in Ember check out the <a href="https://emberjs-1.gitbook.io/ember-component-patterns/form-components/input">ember-component-patterns article on Input Fields</a>.
+      </div>
+    </div>
+    <img src="/images/mascots/zoey.png" role="presentation" alt="Ember Mascot">
+  </div>
+</div>
diff --git a/guides/v3.17.0/accessibility/components.md b/guides/v3.17.0/accessibility/components.md
index 64cea7e1a2..d429660939 100644
--- a/guides/v3.17.0/accessibility/components.md
+++ b/guides/v3.17.0/accessibility/components.md
@@ -59,6 +59,8 @@ However, the most common methods for providing accessible names can be reviewed
 
 Every `<input>` element should have an associated `<label>` element. To do this, the `<input>` element's `id` attribute value should be the same as the `for` attribute value on the `<label>`, like this:
 
+![Separate input and label elements with a connection established by matching for and id attributes](/images/accessibility/component-considerations/input-for-id.png)
+
 ```html
 <label for="input-firstName">First Name:</label>
 <input id="input-firstName" name="firstName" value="" type="text" />
@@ -66,6 +68,8 @@ Every `<input>` element should have an associated `<label>` element. To do this,
 
 It is also valid to wrap the `<label>` element around the `<input />` element: 
 
+![A child input element nested within a parent label element without any for and id attributes](/images/accessibility/component-considerations/input-nested.png)
+
 ```html
 <label>First Name:
   <input name="firstName" value="" type="text" />
@@ -73,3 +77,15 @@ It is also valid to wrap the `<label>` element around the `<input />` element:
 ```
 
 However, this option can be a little harder to apply styles to, so both should be tested before determining which approach to use. 
+
+<div class="cta">
+  <div class="cta-note">
+    <div class="cta-note-body">
+      <div class="cta-note-heading">Zoey says...</div>
+      <div class="cta-note-message">
+To dig deeper into accessible input patterns in Ember check out the <a href="https://emberjs-1.gitbook.io/ember-component-patterns/form-components/input">ember-component-patterns article on Input Fields</a>.
+      </div>
+    </div>
+    <img src="/images/mascots/zoey.png" role="presentation" alt="Ember Mascot">
+  </div>
+</div>
diff --git a/guides/v3.18.0/accessibility/components.md b/guides/v3.18.0/accessibility/components.md
index 9b84e52313..1390c76e3a 100644
--- a/guides/v3.18.0/accessibility/components.md
+++ b/guides/v3.18.0/accessibility/components.md
@@ -59,6 +59,8 @@ However, the most common methods for providing accessible names can be reviewed
 
 Every `<input>` element should have an associated `<label>` element. To do this, the `<input>` element's `id` attribute value should be the same as the `for` attribute value on the `<label>`, like this:
 
+![Separate input and label elements with a connection established by matching for and id attributes](/images/accessibility/component-considerations/input-for-id.png)
+
 ```html
 <label for="input-firstName">First Name:</label>
 <input id="input-firstName" name="firstName" value="" type="text" />
@@ -66,6 +68,8 @@ Every `<input>` element should have an associated `<label>` element. To do this,
 
 It is also valid to wrap the `<label>` element around the `<input />` element: 
 
+![A child input element nested within a parent label element without any for and id attributes](/images/accessibility/component-considerations/input-nested.png)
+
 ```html
 <label>First Name:
   <input name="firstName" value="" type="text" />
@@ -73,3 +77,15 @@ It is also valid to wrap the `<label>` element around the `<input />` element:
 ```
 
 However, this option can be a little harder to apply styles to, so both should be tested before determining which approach to use. 
+
+<div class="cta">
+  <div class="cta-note">
+    <div class="cta-note-body">
+      <div class="cta-note-heading">Zoey says...</div>
+      <div class="cta-note-message">
+To dig deeper into accessible input patterns in Ember check out the <a href="https://emberjs-1.gitbook.io/ember-component-patterns/form-components/input">ember-component-patterns article on Input Fields</a>.
+      </div>
+    </div>
+    <img src="/images/mascots/zoey.png" role="presentation" alt="Ember Mascot">
+  </div>
+</div>
diff --git a/public/images/accessibility/component-considerations/input-for-id.png b/public/images/accessibility/component-considerations/input-for-id.png
new file mode 100644
index 0000000000..be609a094c
Binary files /dev/null and b/public/images/accessibility/component-considerations/input-for-id.png differ
diff --git a/public/images/accessibility/component-considerations/input-nested.png b/public/images/accessibility/component-considerations/input-nested.png
new file mode 100644
index 0000000000..231c61e3df
Binary files /dev/null and b/public/images/accessibility/component-considerations/input-nested.png differ