diff --git a/src/_style.scss b/src/_style.scss
index a3a6b70c..92d88382 100644
--- a/src/_style.scss
+++ b/src/_style.scss
@@ -14,6 +14,22 @@ $microsoft-focus-black: #000;
 $apple-black: #000000;
 $apple-focus-black: $apple-black;
 
+.sr-only {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.focus-out {
+  position: absolute;
+  padding-left: 17px;
+  opacity: 0.75;
+  z-index: 1;
+}
+
 .alert-link {
   font-weight: normal;
   text-decoration: underline;
@@ -219,21 +235,21 @@ $apple-focus-black: $apple-black;
   padding-left: 14px;
 }
 
-.opt-inline-field{
-    display: inline-block;
-    width: 50%;
+.opt-inline-field {
+  display: inline-block;
+  width: 50%;
 }
 
-.opt-year-field{
-    padding-left: 15px;
+.opt-year-field {
+  padding-left: 15px;
 }
 
 .invalid-feedback {
   color: $red;
 }
 
-.full-vertical-height{
-    height: 100vh;
+.full-vertical-height {
+  height: 100vh;
 }
 
 .help-links {
@@ -257,7 +273,7 @@ $apple-focus-black: $apple-black;
 }
 
 .mt-10 {
- margin-top: 10px;
+  margin-top: 10px;
 }
 
 .pt-10 {
@@ -281,7 +297,7 @@ $apple-focus-black: $apple-black;
   .section-heading-line {
     position: relative;
     text-align: center;
-  
+
     &:before,
     &:after {
       width: 10%;
diff --git a/src/common-components/AuthnValidationFormGroup.jsx b/src/common-components/AuthnValidationFormGroup.jsx
index 8084eba8..a17b98d4 100644
--- a/src/common-components/AuthnValidationFormGroup.jsx
+++ b/src/common-components/AuthnValidationFormGroup.jsx
@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl } from '@edx/frontend-platform/i18n';
 import {
   Form,
   Input,
@@ -11,13 +10,11 @@ const AuthnCustomValidationFormGroup = (props) => {
   const { onClick, onChange, onBlur } = props;
   const [showHelpText, setShowHelpText] = useState(false);
   const [showLabelText, setShowLabelText] = useState(false);
-  const [showPlaceholder, setShowPlaceHolder] = useState(true);
 
   // handler code that need to be invoked via input
   const onClickHandler = (e, clickCb) => {
     setShowHelpText(true);
     setShowLabelText(true);
-    setShowPlaceHolder(false);
     if (clickCb) {
       clickCb(e);
     }
@@ -25,7 +22,6 @@ const AuthnCustomValidationFormGroup = (props) => {
   const onBlurHandler = (e, blurCb) => {
     setShowHelpText(false);
     setShowLabelText(false);
-    setShowPlaceHolder(true);
     if (blurCb) {
       blurCb(e);
     }
@@ -38,12 +34,18 @@ const AuthnCustomValidationFormGroup = (props) => {
   const onOptionalHandler = (e, clickCb) => { clickCb(e); };
 
   const showLabel = () => {
-    const fieldLabel = (!props.optionalFieldCheckbox && showLabelText) ? (
-      <Form.Label htmlFor={props.for} className="h6 pt-10">
-        {props.label}
-      </Form.Label>
-    ) : <span />;
-    return fieldLabel;
+    let className;
+    if (props.optionalFieldCheckbox || (!showLabelText && (props.value !== '' || props.type === 'select'))) {
+      className = 'sr-only';
+    } else if (showLabelText) {
+      className = 'pt-10 h6';
+    } else {
+      className = 'pt-10 focus-out';
+    }
+
+    return (
+      <Form.Label htmlFor={props.for} className={className}>{props.label}</Form.Label>
+    );
   };
   const showOptional = () => {
     const additionalField = props.optionalFieldCheckbox ? (
@@ -60,7 +62,6 @@ const AuthnCustomValidationFormGroup = (props) => {
     type: props.type,
     value: props.value,
   };
-  inputProps.placeholder = showPlaceholder ? props.label : '';
   inputProps.onChange = (e) => onChangeHandler(e, onChange);
   inputProps.onClick = (e) => onClickHandler(e, onClick);
   inputProps.onBlur = (e) => onBlurHandler(e, onBlur);
@@ -145,4 +146,4 @@ AuthnCustomValidationFormGroup.propTypes = {
   })),
 };
 
-export default injectIntl(AuthnCustomValidationFormGroup);
+export default AuthnCustomValidationFormGroup;
diff --git a/src/common-components/tests/AuthnValidationFormGroup.test.jsx b/src/common-components/tests/AuthnValidationFormGroup.test.jsx
new file mode 100644
index 00000000..88f3dfbf
--- /dev/null
+++ b/src/common-components/tests/AuthnValidationFormGroup.test.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import AuthnCustomValidationFormGroup from '../AuthnValidationFormGroup';
+
+describe('AuthnCustomValidationFormGroup', () => {
+  let props = {
+    label: 'Email Label',
+    for: 'email',
+    name: 'email',
+    type: 'email',
+    value: '',
+    helpText: 'Email field help text',
+  };
+
+  it('should show label in place of placeholder when field is empty', () => {
+    const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
+    expect(validationFormGroup.find('label').prop('className')).toEqual('pt-10 focus-out form-label');
+  });
+
+  it('should show label on top of field when field is focused in', () => {
+    const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
+
+    validationFormGroup.find('input').simulate('focus');
+    expect(validationFormGroup.find('label').prop('className')).toEqual('pt-10 h6 form-label');
+  });
+
+  it('should keep label hidden for checkbox field', () => {
+    props = {
+      ...props,
+      type: 'checkbox',
+      optionalFieldCheckbox: true,
+    };
+    const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
+    expect(validationFormGroup.find('label').prop('className')).toEqual('sr-only form-label');
+  });
+
+  it('should keep label hidden when input field is not empty', () => {
+    props = {
+      ...props,
+      value: 'test',
+    };
+    const validationFormGroup = mount(<AuthnCustomValidationFormGroup {...props} />);
+    expect(validationFormGroup.find('label').prop('className')).toEqual('sr-only form-label');
+  });
+});
diff --git a/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap b/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
index 4f05be99..5a886582 100644
--- a/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
+++ b/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap
@@ -23,7 +23,12 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = `
       <div
         className="form-group mb-0 w-100"
       >
-        <span />
+        <label
+          className="pt-10 focus-out form-label"
+          htmlFor="forgot-password-input"
+        >
+          Email
+        </label>
         <input
           aria-describedby=""
           className="form-control"
@@ -33,7 +38,6 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = `
           onChange={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          placeholder="Email"
           required={true}
           type="email"
           value=""
@@ -138,7 +142,12 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
       <div
         className="form-group mb-0 w-100"
       >
-        <span />
+        <label
+          className="pt-10 focus-out form-label"
+          htmlFor="forgot-password-input"
+        >
+          Email
+        </label>
         <input
           aria-describedby=""
           className="form-control"
@@ -148,7 +157,6 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = `
           onChange={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          placeholder="Email"
           required={true}
           type="email"
           value=""
@@ -238,7 +246,12 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
       <div
         className="form-group mb-0 w-100"
       >
-        <span />
+        <label
+          className="pt-10 focus-out form-label"
+          htmlFor="forgot-password-input"
+        >
+          Email
+        </label>
         <input
           aria-describedby=""
           className="form-control"
@@ -248,7 +261,6 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = `
           onChange={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          placeholder="Email"
           required={true}
           type="email"
           value=""
diff --git a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
index 3a642b71..44fd63e5 100644
--- a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
+++ b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap
@@ -36,7 +36,12 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="email"
+          >
+            Email
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -46,7 +51,6 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Email"
             required={true}
             type="email"
             value=""
@@ -56,7 +60,12 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="password"
+          >
+            Password
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -66,7 +75,6 @@ exports[`LoginPage should match TPA provider snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Password"
             required={true}
             type="password"
             value=""
@@ -214,7 +222,12 @@ exports[`LoginPage should match default section snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="email"
+          >
+            Email
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -224,7 +237,6 @@ exports[`LoginPage should match default section snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Email"
             required={true}
             type="email"
             value=""
@@ -234,7 +246,12 @@ exports[`LoginPage should match default section snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="password"
+          >
+            Password
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -244,7 +261,6 @@ exports[`LoginPage should match default section snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Password"
             required={true}
             type="password"
             value=""
@@ -394,7 +410,12 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="email"
+          >
+            Email
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -404,7 +425,6 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Email"
             required={true}
             type="email"
             value=""
@@ -414,7 +434,12 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="password"
+          >
+            Password
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -424,7 +449,6 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Password"
             required={true}
             type="password"
             value=""
@@ -536,7 +560,12 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="email"
+          >
+            Email
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -546,7 +575,6 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Email"
             required={true}
             type="email"
             value=""
@@ -556,7 +584,12 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="password"
+          >
+            Password
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -566,7 +599,6 @@ exports[`LoginPage should match pending button state snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Password"
             required={true}
             type="password"
             value=""
@@ -715,7 +747,12 @@ exports[`LoginPage should show error message 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="email"
+          >
+            Email
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -725,7 +762,6 @@ exports[`LoginPage should show error message 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Email"
             required={true}
             type="email"
             value=""
@@ -735,7 +771,12 @@ exports[`LoginPage should show error message 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="password"
+          >
+            Password
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -745,7 +786,6 @@ exports[`LoginPage should show error message 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Password"
             required={true}
             type="password"
             value=""
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index b40d276f..3bab2911 100644
--- a/src/register/RegistrationPage.jsx
+++ b/src/register/RegistrationPage.jsx
@@ -530,7 +530,7 @@ class RegistrationPage extends React.Component {
                 </div>
                 {getConfig().REGISTRATION_OPTIONAL_FIELDS ? (
                   <AuthnValidationFormGroup
-                    label=""
+                    label={intl.formatMessage(messages['support.education.research'])}
                     for="optional"
                     name="optional"
                     type="checkbox"
diff --git a/src/register/tests/RegistrationPage.test.jsx b/src/register/tests/RegistrationPage.test.jsx
index b32a39af..ae4fcc98 100644
--- a/src/register/tests/RegistrationPage.test.jsx
+++ b/src/register/tests/RegistrationPage.test.jsx
@@ -285,7 +285,7 @@ describe('RegistrationPageTests', () => {
     expect(registrationPage.find('#validation-errors').first().text()).toEqual(alertBanner);
   });
 
-  it('should show error message on alert and below the fields incase of 409', () => {
+  it('should show error message on alert and below the fields in case of 409', () => {
     const errors = {
       email: 'It looks like test@gmail.com belongs to an existing account. Try again with a different email address.',
       username: 'It looks like test belongs to an existing account. Try again with a different username.',
@@ -338,7 +338,7 @@ describe('RegistrationPageTests', () => {
     expect(store.dispatch).toHaveBeenCalledWith(registerNewUser(formPayload));
   });
 
-  it('should display validationAlertMessages incase of invalid form submission', () => {
+  it('should display validationAlertMessages in case of invalid form submission', () => {
     const alertMessages = {
       name: [{ user_message: 'Please enter your full name.' }],
       username: [{ user_message: 'Please enter your public username.' }],
diff --git a/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap b/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
index 68fe577d..64f5e49e 100644
--- a/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
+++ b/src/register/tests/__snapshots__/RegistrationPage.test.jsx.snap
@@ -35,7 +35,12 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="name"
+          >
+            Full name (required)
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -45,7 +50,6 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Full name (required)"
             required={true}
             type="text"
             value=""
@@ -55,7 +59,12 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="username"
+          >
+            Public username (required)
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -65,7 +74,6 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Public username (required)"
             required={true}
             type="text"
             value=""
@@ -75,7 +83,12 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="email"
+          >
+            Email (required)
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -85,7 +98,6 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Email (required)"
             required={true}
             type="text"
             value=""
@@ -95,7 +107,12 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="password"
+          >
+            Password (required)
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -105,7 +122,6 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Password (required)"
             required={true}
             type="password"
             value=""
@@ -115,7 +131,12 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
         <div
           className="form-group mb-0"
         >
-          <span />
+          <label
+            className="sr-only form-label"
+            htmlFor="country"
+          >
+            Country or region of residence (required)
+          </label>
           <select
             aria-describedby=""
             className="form-control"
@@ -125,7 +146,6 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Country or region of residence (required)"
             required={true}
             value=""
           >
@@ -1440,7 +1460,12 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
         <div
           className="form-group custom-control pt-10 mb-0"
         >
-          <span />
+          <label
+            className="sr-only form-label"
+            htmlFor="optional"
+          >
+            Support education research by providing additional information. (Optional)
+          </label>
           <input
             aria-describedby=""
             checked={false}
@@ -1451,7 +1476,6 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder=""
             required={true}
             type="checkbox"
             value={false}
@@ -1560,7 +1584,12 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="name"
+          >
+            Full name (required)
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -1570,7 +1599,6 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Full name (required)"
             required={true}
             type="text"
             value=""
@@ -1580,7 +1608,12 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="username"
+          >
+            Public username (required)
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -1590,7 +1623,6 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Public username (required)"
             required={true}
             type="text"
             value=""
@@ -1600,7 +1632,12 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="email"
+          >
+            Email (required)
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -1610,7 +1647,6 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Email (required)"
             required={true}
             type="text"
             value=""
@@ -1620,7 +1656,12 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="password"
+          >
+            Password (required)
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -1630,7 +1671,6 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Password (required)"
             required={true}
             type="password"
             value=""
@@ -1640,7 +1680,12 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
         <div
           className="form-group mb-0"
         >
-          <span />
+          <label
+            className="sr-only form-label"
+            htmlFor="country"
+          >
+            Country or region of residence (required)
+          </label>
           <select
             aria-describedby=""
             className="form-control"
@@ -1650,7 +1695,6 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Country or region of residence (required)"
             required={true}
             value=""
           >
@@ -2965,7 +3009,12 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
         <div
           className="form-group custom-control pt-10 mb-0"
         >
-          <span />
+          <label
+            className="sr-only form-label"
+            htmlFor="optional"
+          >
+            Support education research by providing additional information. (Optional)
+          </label>
           <input
             aria-describedby=""
             checked={false}
@@ -2976,7 +3025,6 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = `
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder=""
             required={true}
             type="checkbox"
             value={false}
@@ -3046,7 +3094,12 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="name"
+          >
+            Full name (required)
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -3056,7 +3109,6 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Full name (required)"
             required={true}
             type="text"
             value=""
@@ -3066,7 +3118,12 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="username"
+          >
+            Public username (required)
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -3076,7 +3133,6 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Public username (required)"
             required={true}
             type="text"
             value=""
@@ -3086,7 +3142,12 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="email"
+          >
+            Email (required)
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -3096,7 +3157,6 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Email (required)"
             required={true}
             type="text"
             value=""
@@ -3106,7 +3166,12 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
         <div
           className="form-group"
         >
-          <span />
+          <label
+            className="pt-10 focus-out form-label"
+            htmlFor="password"
+          >
+            Password (required)
+          </label>
           <input
             aria-describedby=""
             className="form-control"
@@ -3116,7 +3181,6 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Password (required)"
             required={true}
             type="password"
             value=""
@@ -3126,7 +3190,12 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
         <div
           className="form-group mb-0"
         >
-          <span />
+          <label
+            className="sr-only form-label"
+            htmlFor="country"
+          >
+            Country or region of residence (required)
+          </label>
           <select
             aria-describedby=""
             className="form-control"
@@ -3136,7 +3205,6 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder="Country or region of residence (required)"
             required={true}
             value=""
           >
@@ -4451,7 +4519,12 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
         <div
           className="form-group custom-control pt-10 mb-0"
         >
-          <span />
+          <label
+            className="sr-only form-label"
+            htmlFor="optional"
+          >
+            Support education research by providing additional information. (Optional)
+          </label>
           <input
             aria-describedby=""
             checked={false}
@@ -4462,7 +4535,6 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] =
             onChange={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
-            placeholder=""
             required={true}
             type="checkbox"
             value={false}
diff --git a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
index d336982f..01b714b3 100644
--- a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
+++ b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap
@@ -24,7 +24,12 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
       <div
         className="form-group w-100"
       >
-        <span />
+        <label
+          className="pt-10 focus-out form-label"
+          htmlFor="reset-password-input"
+        >
+          New password
+        </label>
         <input
           aria-describedby=""
           className="form-control"
@@ -34,7 +39,6 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
           onChange={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          placeholder="New password"
           required={true}
           type="password"
           value=""
@@ -44,7 +48,12 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
       <div
         className="form-group w-100"
       >
-        <span />
+        <label
+          className="pt-10 focus-out form-label"
+          htmlFor="confirm-password-input"
+        >
+          Confirm password
+        </label>
         <input
           aria-describedby=""
           className="form-control"
@@ -54,7 +63,6 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1
           onChange={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          placeholder="Confirm password"
           required={true}
           type="password"
           value=""
@@ -111,7 +119,12 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
       <div
         className="form-group w-100"
       >
-        <span />
+        <label
+          className="pt-10 focus-out form-label"
+          htmlFor="reset-password-input"
+        >
+          New password
+        </label>
         <input
           aria-describedby=""
           className="form-control"
@@ -121,7 +134,6 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
           onChange={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          placeholder="New password"
           required={true}
           type="password"
           value=""
@@ -131,7 +143,12 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
       <div
         className="form-group w-100"
       >
-        <span />
+        <label
+          className="pt-10 focus-out form-label"
+          htmlFor="confirm-password-input"
+        >
+          Confirm password
+        </label>
         <input
           aria-describedby=""
           className="form-control"
@@ -141,7 +158,6 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1
           onChange={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          placeholder="Confirm password"
           required={true}
           type="password"
           value=""
@@ -219,7 +235,12 @@ exports[`ResetPasswordPage should match reset password default section snapshot
       <div
         className="form-group w-100"
       >
-        <span />
+        <label
+          className="pt-10 focus-out form-label"
+          htmlFor="reset-password-input"
+        >
+          New password
+        </label>
         <input
           aria-describedby=""
           className="form-control"
@@ -229,7 +250,6 @@ exports[`ResetPasswordPage should match reset password default section snapshot
           onChange={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          placeholder="New password"
           required={true}
           type="password"
           value=""
@@ -239,7 +259,12 @@ exports[`ResetPasswordPage should match reset password default section snapshot
       <div
         className="form-group w-100"
       >
-        <span />
+        <label
+          className="pt-10 focus-out form-label"
+          htmlFor="confirm-password-input"
+        >
+          Confirm password
+        </label>
         <input
           aria-describedby=""
           className="form-control"
@@ -249,7 +274,6 @@ exports[`ResetPasswordPage should match reset password default section snapshot
           onChange={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          placeholder="Confirm password"
           required={true}
           type="password"
           value=""
@@ -344,7 +368,12 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] =
       <div
         className="form-group w-100"
       >
-        <span />
+        <label
+          className="pt-10 focus-out form-label"
+          htmlFor="reset-password-input"
+        >
+          New password
+        </label>
         <input
           aria-describedby=""
           className="form-control"
@@ -354,7 +383,6 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] =
           onChange={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          placeholder="New password"
           required={true}
           type="password"
           value=""
@@ -364,7 +392,12 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] =
       <div
         className="form-group w-100"
       >
-        <span />
+        <label
+          className="pt-10 focus-out form-label"
+          htmlFor="confirm-password-input"
+        >
+          Confirm password
+        </label>
         <input
           aria-describedby=""
           className="form-control"
@@ -374,7 +407,6 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] =
           onChange={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
-          placeholder="Confirm password"
           required={true}
           type="password"
           value=""