diff --git a/app/components/ui/atoms/ValidatedField.js b/app/components/ui/atoms/ValidatedField.js
index c19dc4f34d030b002bbeaeb4c7d4b9e4ab933862..26516ae57f74797d467296f6d981251596853db1 100644
--- a/app/components/ui/atoms/ValidatedField.js
+++ b/app/components/ui/atoms/ValidatedField.js
@@ -4,9 +4,12 @@ import { Field } from 'formik'
 import { get } from 'lodash'
 import { TextField, th } from '@pubsweet/ui'
 
-const ErrorMessage = styled.div`
+const MessageWrapper = styled.div`
   display: block;
   margin-top: calc(${th('gridUnit')} * -1);
+`
+
+const ErrorMessage = styled.div`
   color: ${th('colorError')};
 `
 
@@ -26,7 +29,11 @@ export default ({ name, component: FieldComponent = TextField, ...props }) => {
           {...field}
           {...props}
         />
-        {touched && errors && <ErrorMessage>{errors}</ErrorMessage>}
+
+        {/* live region DOM node must be initially present for changes to be announced */}
+        <MessageWrapper role="alert">
+          {touched && errors && <ErrorMessage>{errors}</ErrorMessage>}
+        </MessageWrapper>
       </div>
     )
   }