diff --git a/.changeset/a11y-input-error-message-not-read.md b/.changeset/a11y-input-error-message-not-read.md
new file mode 100644
index 0000000000..d996b451d0
--- /dev/null
+++ b/.changeset/a11y-input-error-message-not-read.md
@@ -0,0 +1,5 @@
+---
+'react-magma-docs': patch
+---
+
+fix(Input): Clarification that developers should use `ref` with `Input`. Add a new example for Storybook.
diff --git a/packages/react-magma-dom/src/components/Alert/__snapshots__/Alert.test.js.snap b/packages/react-magma-dom/src/components/Alert/__snapshots__/Alert.test.js.snap
index 31bb651f6e..c50f9e4128 100644
--- a/packages/react-magma-dom/src/components/Alert/__snapshots__/Alert.test.js.snap
+++ b/packages/react-magma-dom/src/components/Alert/__snapshots__/Alert.test.js.snap
@@ -389,6 +389,10 @@ exports[`Alert Variants should render an alert with danger variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 .emotion-0 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
@@ -492,6 +496,10 @@ exports[`Alert Variants should render an alert with danger variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -521,7 +529,9 @@ exports[`Alert Variants should render an alert with danger variant 1`] = `
       <div
         class="emotion-6 emotion-7"
       >
-        <span>
+        <span
+          class="emotion-8 emotion-9"
+        >
           Test Alert Text
         </span>
       </div>
@@ -634,6 +644,10 @@ exports[`Alert Variants should render an alert with info variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 .emotion-0 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
@@ -737,6 +751,10 @@ exports[`Alert Variants should render an alert with info variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -766,7 +784,9 @@ exports[`Alert Variants should render an alert with info variant 1`] = `
       <div
         class="emotion-6 emotion-7"
       >
-        <span>
+        <span
+          class="emotion-8 emotion-9"
+        >
           Test Alert Text
         </span>
       </div>
@@ -879,6 +899,10 @@ exports[`Alert Variants should render an alert with warning variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 .emotion-0 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
@@ -982,6 +1006,10 @@ exports[`Alert Variants should render an alert with warning variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -1011,7 +1039,9 @@ exports[`Alert Variants should render an alert with warning variant 1`] = `
       <div
         class="emotion-6 emotion-7"
       >
-        <span>
+        <span
+          class="emotion-8 emotion-9"
+        >
           Test Alert Text
         </span>
       </div>
@@ -1124,6 +1154,10 @@ exports[`Alert should render an alert with default variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 .emotion-0 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
@@ -1227,6 +1261,10 @@ exports[`Alert should render an alert with default variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -1256,7 +1294,9 @@ exports[`Alert should render an alert with default variant 1`] = `
       <div
         class="emotion-6 emotion-7"
       >
-        <span>
+        <span
+          class="emotion-8 emotion-9"
+        >
           Test Alert Text
         </span>
       </div>
diff --git a/packages/react-magma-dom/src/components/AlertBase/index.tsx b/packages/react-magma-dom/src/components/AlertBase/index.tsx
index 109febb36d..1380bb3060 100644
--- a/packages/react-magma-dom/src/components/AlertBase/index.tsx
+++ b/packages/react-magma-dom/src/components/AlertBase/index.tsx
@@ -379,6 +379,10 @@ const DismissButton = styled(IconButton, { shouldForwardProp })<{
   }
 `;
 
+const AlertSpan = styled.span`
+  white-space: pre-line;
+`
+
 function renderIcon(variant = 'info', isToast?: boolean, theme?: any) {
   const Icon = VARIANT_ICON[variant];
 
@@ -479,7 +483,7 @@ export const AlertBase = React.forwardRef<HTMLDivElement, AlertBaseProps>(
               isDismissible={isDismissible}
               theme={theme}
             >
-              <span>{children}</span>
+              <AlertSpan>{children}</AlertSpan>
               {additionalContent && (
                 <AdditionalContentWrapper theme={theme}>
                   {additionalContent}
diff --git a/packages/react-magma-dom/src/components/Form/index.tsx b/packages/react-magma-dom/src/components/Form/index.tsx
index 9544c18a49..014b140ae0 100644
--- a/packages/react-magma-dom/src/components/Form/index.tsx
+++ b/packages/react-magma-dom/src/components/Form/index.tsx
@@ -8,6 +8,7 @@ import { ThemeInterface } from '../../theme/magma';
 import { InverseContext, useIsInverse } from '../../inverse';
 import styled from '@emotion/styled';
 import { TypographyContextVariant, TypographyVisualStyle } from '../Typography';
+import { Announce } from '../Announce';
 
 /**
  * @children required
@@ -108,7 +109,9 @@ export const Form = React.forwardRef<HTMLFormElement, FormProps>(
           </Heading>
           {description && <Paragraph>{description}</Paragraph>}
           {errorMessage && (
-            <Alert variant={AlertVariant.danger}>{errorMessage}</Alert>
+            <Announce role="alert">
+              <Alert variant={AlertVariant.danger}>{errorMessage}</Alert>
+            </Announce>
           )}
           <div>{children}</div>
           <FormActions>{actions}</FormActions>
diff --git a/packages/react-magma-dom/src/components/Input/Input.stories.tsx b/packages/react-magma-dom/src/components/Input/Input.stories.tsx
index 4329385726..71725aff1e 100644
--- a/packages/react-magma-dom/src/components/Input/Input.stories.tsx
+++ b/packages/react-magma-dom/src/components/Input/Input.stories.tsx
@@ -2,13 +2,14 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import React from 'react';
 import { HelpIcon, NotificationsIcon, WorkIcon } from 'react-magma-icons';
 import { Input, InputProps } from '.';
-import { ButtonSize, ButtonType, ButtonVariant } from '../Button';
+import { Button, ButtonSize, ButtonType, ButtonVariant } from '../Button';
 import { Card, CardBody } from '../Card';
 import { IconButton } from '../IconButton';
 import { InputIconPosition, InputSize, InputType } from '../InputBase';
 import { LabelPosition } from '../Label';
 import { Tooltip } from '../Tooltip';
 import { Spacer } from '../Spacer';
+import { ButtonGroup } from '../ButtonGroup';
 
 const Template: Story<InputProps> = args => (
   <>
@@ -211,7 +212,11 @@ export const HelpLink = args => {
         </Tooltip>
       </Input>
       <Spacer size={16} />
-      <Input labelText="Help link - hidden" isLabelVisuallyHidden {...args}>
+      <Input 
+        labelText="Help link - hidden" 
+        isLabelVisuallyHidden 
+        {...args}
+      >
         <Tooltip content={helpLinkLabel}>
           <IconButton
             aria-label={helpLinkLabel}
@@ -322,3 +327,105 @@ NumberInput.args = {
 NumberInput.parameters = {
   controls: { exclude: ['type', 'iconPosition', 'labelWidth'] },
 };
+
+export const SeveralErrors = () => {
+  const [inputValues, setInputValues] = React.useState({
+    firstName: '',
+    lastName: '',
+    emailAddress: '',
+  });
+  const [hasErrors, setHasErrors] = React.useState({
+    firstName: false,
+    lastName: false,
+    emailAddress: false,
+  });
+
+  const firstNameInputRef = React.useRef();
+  const lastNameInputRef = React.useRef();
+  const emailAddressInputRef = React.useRef();
+
+  const submit = () => {
+    setHasErrors({
+      firstName: false,
+      lastName: false,
+      emailAddress: false,
+    });
+
+    if (!inputValues.emailAddress) {
+      setHasErrors(prev => ({ ...prev, emailAddress: true }));
+      emailAddressInputRef.current.focus();
+    }
+
+    if (!inputValues.lastName) {
+      setHasErrors(prev => ({ ...prev, lastName: true }));
+      lastNameInputRef.current.focus();
+    }
+
+    if (!inputValues.firstName) {
+      setHasErrors(prev => ({ ...prev, firstName: true }));
+      firstNameInputRef.current.focus();
+    }
+  };
+
+  const reset = () => {
+    setHasErrors({
+      firstName: false,
+      lastName: false,
+      emailAddress: false,
+    });
+    setInputValues({
+      firstName: '',
+      lastName: '',
+      emailAddress: '',
+    });
+
+    firstNameInputRef.current.focus();
+  };
+
+  return (
+    <>
+      <Input
+        errorMessage={hasErrors.firstName ? 'Please enter your first name' : ''}
+        helperMessage=""
+        labelText="First name *"
+        onChange={event =>
+          setInputValues(prev => ({ ...prev, firstName: event.target.value }))
+        }
+        required
+        value={inputValues.firstName}
+        ref={firstNameInputRef}
+      />
+      <br />
+      <Input
+        errorMessage={hasErrors.lastName ? 'Please enter your last name' : ''}
+        helperMessage=""
+        labelText="Last name *"
+        onChange={event =>
+          setInputValues(prev => ({ ...prev, lastName: event.target.value }))
+        }
+        required
+        value={inputValues.lastName}
+        ref={lastNameInputRef}
+      />
+      <br />
+      <Input
+        errorMessage={hasErrors.emailAddress ? 'Please enter your email address' : ''}
+        helperMessage=""
+        labelText="Email address *"
+        onChange={event =>
+          setInputValues(prev => ({ ...prev, emailAddress: event.target.value }))
+        }
+        required
+        value={inputValues.emailAddress}
+        ref={emailAddressInputRef}
+      />
+      <br />
+      <ButtonGroup>
+        <Button onClick={submit}>Submit</Button>
+        <Button onClick={reset} color="secondary">
+          Reset
+        </Button>
+      </ButtonGroup>
+    </>
+  );
+};
diff --git a/website/react-magma-docs/src/pages/api/form.mdx b/website/react-magma-docs/src/pages/api/form.mdx
index 2d84b46d52..7a94181fe8 100644
--- a/website/react-magma-docs/src/pages/api/form.mdx
+++ b/website/react-magma-docs/src/pages/api/form.mdx
@@ -27,23 +27,135 @@ import {
 } from 'react-magma-dom';
 
 export function Example() {
+  const [state, setState] = React.useState({
+    firstName: '',
+    lastName: '',
+    email: '',
+  });
+
+  const [errors, setErrors] = React.useState({
+    firstName: false,
+    lastName: false,
+    email: false,
+  });
+
+  const resetErrors = () => {
+    setErrors({
+      firstName: false,
+      lastName: false,
+      email: false,
+    });
+  };
+
+  const onSubmit = event => {
+    event.preventDefault();
+    resetErrors();
+
+    if (!state.firstName) {
+      setErrors(prevErrors => ({ ...prevErrors, firstName: true }));
+    }
+
+    if (!state.lastName) {
+      setErrors(prevErrors => ({ ...prevErrors, lastName: true }));
+    }
+
+    if (!state.email) {
+      setErrors(prevErrors => ({ ...prevErrors, email: true }));
+    }
+  };
+
+  const cancel = () => {
+    setState({
+      firstName: '',
+      lastName: '',
+      email: '',
+    });
+    setErrors({
+      firstName: false,
+      lastName: false,
+      email: false,
+    });
+  };
+
+  const errorMessage = React.useMemo(() => {
+    let message = '';
+
+    if (Object.values(errors).some(error => error)) {
+      message += 'Please fix the following errors:\n';
+    }
+
+    for (const error in errors) {
+      if (errors[error]) {
+        switch (error) {
+          case 'firstName':
+            message += '· First Name is required\n';
+            break;
+          case 'lastName':
+            message += '· Last Name is required\n';
+            break;
+          case 'email':
+            message += '· Email is required\n';
+            break;
+          default:
+            return;
+        }
+      }
+    }
+
+    return message;
+  }, [errors]);
+
   return (
     <Form
-      onSubmit={() => alert('form submitted')}
+      onSubmit={onSubmit}
       header="Form Heading"
       description="Some Form Description"
-      errorMessage="Some Form Error"
+      errorMessage={errorMessage}
       actions={
         <ButtonGroup>
-          <Button color={ButtonColor.secondary}>Cancel</Button>
+          <Button color={ButtonColor.secondary} onClick={cancel}>
+            Cancel
+          </Button>
           <Button type={ButtonType.submit}>Submit</Button>
         </ButtonGroup>
       }
     >
       <>
-        <Input labelText="Name" />
+        <Input
+          labelText="First Name (required)"
+          value={state.firstName}
+          onChange={event =>
+            setState(prevState => ({
+              ...prevState,
+              firstName: event.target.value,
+            }))
+          }
+          errorMessage={errors.firstName && 'First Name is required'}
+        />
+        <Spacer size="12" />
+        <Input
+          labelText="Last Name (required)"
+          value={state.lastName}
+          onChange={event =>
+            setState(prevState => ({
+              ...prevState,
+              lastName: event.target.value,
+            }))
+          }
+          errorMessage={errors.lastName && 'Last Name is required'}
+        />
         <Spacer size="12" />
-        <Input labelText="Email" />
+        <Input
+          labelText="Email (required)"
+          value={state.email}
+          onChange={event =>
+            setState(prevState => ({
+              ...prevState,
+              email: event.target.value,
+            }))
+          }
+          errorMessage={errors.email && 'Email is required'}
+        />
         <Spacer size="24" />
       </>
     </Form>
diff --git a/website/react-magma-docs/src/pages/api/input.mdx b/website/react-magma-docs/src/pages/api/input.mdx
index 9a1936a8de..49240f6a1e 100644
--- a/website/react-magma-docs/src/pages/api/input.mdx
+++ b/website/react-magma-docs/src/pages/api/input.mdx
@@ -170,7 +170,9 @@ If an error message is present, it will replace the helper text. Can be a node o
 
 The `required` prop can be used to indicate when a field is required. It is also important to indicate to the user whenever a field is required.
 
-While React Magma provides the error styling, it is up to the consumer app to handle the validation.
+While React Magma provides the error styling, it is up to the consumer app to handle the validation. We recommend using a `ref` on the input for accessibility.
+
+For short forms with an error, clicking submit should bring the focus back to the input with an error. For long forms, we recommend using an alert to combine the errors and focus should be moved to the alert. See example in <Link to='/api/form'>Form</Link>.
 
 ```tsx
 import React from 'react';
@@ -178,10 +180,12 @@ import { Input, Button, ButtonGroup, Spacer } from 'react-magma-dom';
 export function Example() {
   const [hasError, setHasError] = React.useState(false);
   const [nameValue, setNameValue] = React.useState('');
+  const inputRef = React.useRef();
 
   function submit() {
     if (nameValue === '') {
       setHasError(true);
+      inputRef.current.focus();
     } else {
       setHasError(false);
     }
@@ -190,6 +194,7 @@ export function Example() {
   function reset() {
     setHasError(false);
     setNameValue('');
+    inputRef.current.focus();
   }
 
   return (
@@ -201,6 +206,7 @@ export function Example() {
         onChange={event => setNameValue(event.target.value)}
         required
         value={nameValue}
+        ref={inputRef}
       />
       <Spacer size="12" />
       <ButtonGroup>