diff --git a/etp-front/src/components/FlashMessage/Alert.svelte b/etp-front/src/components/FlashMessage/Alert.svelte
index 689f8bf71..787b6a5ea 100644
--- a/etp-front/src/components/FlashMessage/Alert.svelte
+++ b/etp-front/src/components/FlashMessage/Alert.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { announceAssertively } from '@Utility/announce';
+
   export let type;
   export let text;
   export let close = () => {};
@@ -8,6 +10,8 @@
     warn: 'warning',
     success: 'check_circle_outline'
   }[type];
+
+  $: announceAssertively(text);
 </script>
 
 <style type="text/postcss">
diff --git a/etp-front/src/components/Input/Input.svelte b/etp-front/src/components/Input/Input.svelte
index 7091d7ed8..08fbf1875 100644
--- a/etp-front/src/components/Input/Input.svelte
+++ b/etp-front/src/components/Input/Input.svelte
@@ -116,6 +116,8 @@
     </svelte:component>
   {/if}
 
+  <div class="sr-only" id={`${id}-error-label`}>{validationResult.message}</div>
+
   {#if !valid}
     <div class="validation-label">
       {#if validationResult.type === 'error'}
diff --git a/etp-front/src/components/Input/InputField.svelte b/etp-front/src/components/Input/InputField.svelte
index 9ba14ec94..69390fca4 100644
--- a/etp-front/src/components/Input/InputField.svelte
+++ b/etp-front/src/components/Input/InputField.svelte
@@ -44,6 +44,8 @@
   class="input"
   class:center
   class:error
+  aria-describedby={`${id}-error-label`}
+  aria-invalid={error && viewValue.length > 0 ? 'true' : 'false'}
   {type}
   {autocomplete}
   {placeholder}
diff --git a/etp-front/src/template.html b/etp-front/src/template.html
new file mode 100644
index 000000000..dd025b148
--- /dev/null
+++ b/etp-front/src/template.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="fi">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <div id="polite-announcer" aria-live="polite" class="sr-only"></div>
+    <div id="assertive-announcer" aria-live="assertive" class="sr-only"></div>
+  </body>
+</html>
diff --git a/etp-front/src/utils/announce.js b/etp-front/src/utils/announce.js
new file mode 100644
index 000000000..5bf58f83a
--- /dev/null
+++ b/etp-front/src/utils/announce.js
@@ -0,0 +1,16 @@
+const assertiveAnnouncerId = 'assertive-announcer';
+const politeAnnouncerId = 'polite-announcer';
+
+const announce = announcerId => msg => {
+  const announcer = document.getElementById(announcerId);
+  const previous = announcer.children[0];
+  if (previous !== undefined) {
+    announcer.removeChild(previous);
+  }
+  const p = document.createElement('p');
+  p.textContent = msg;
+  announcer.appendChild(p);
+};
+
+export const announceAssertively = announce(assertiveAnnouncerId);
+export const announcePolitely = announce(politeAnnouncerId);
diff --git a/etp-front/src/utils/validation.js b/etp-front/src/utils/validation.js
index fea892158..5a3423916 100644
--- a/etp-front/src/utils/validation.js
+++ b/etp-front/src/utils/validation.js
@@ -270,6 +270,12 @@ export const VerkkolaskuosoiteValidator = {
 
 /**
  * @sig Array [Validator] -> a -> Either [Validator,a]
+ *
+ * This function checks a single value from the data
+ * model against an array of validators.
+ *
+ * On success returns Either.Right(value),
+ * on failure returns Either.Left(validator).
  */
 const validate = (validators, value) =>
   Maybe.fromUndefined(
@@ -280,6 +286,11 @@ const validate = (validators, value) =>
 
 /**
  * @sig Array [Validator] -> a -> Either [(Translate -> string),a]
+ *
+ * This function checks a single value from the data model
+ * against an array of validators. The value is passed through
+ * as-is from `validate` if the validations succeed, but on failure
+ * the Left validator is mapped to a Left label function.
  */
 export const validateModelValue = R.curry((validators, value) =>
   Either.fromValueOrEither(value).flatMap(modelValue =>
@@ -295,14 +306,28 @@ const expandSchemaToObjectSize = (schemaObject, object) =>
     ? R.map(R.always(schemaObject[0]), R.range(0, object.length))
     : schemaObject;
 
+/**
+ * @sig Object -> boolean
+ *
+ * deep.map needs this kind of a predicate function to decide what should be considered
+ * a leaf object that is mapped  instead of walked through
+ */
+const isValidatorArray = R.allPass([
+  R.is(Array),
+  R.all(R.propIs(Function, 'predicate'))
+]);
+
 /**
  * @sig Object -> Object -> Object
+ *
+ * This function is used to validate a data model object against
+ * a schema object.
  */
 export const validateModelObject = R.curry((schemaObject, object) =>
   R.evolve(
     deep.map(
-      R.allPass([R.is(Array), R.all(R.propIs(Function, 'predicate'))]),
-      v => validateModelValue(v),
+      isValidatorArray,
+      validators => validateModelValue(validators),
       expandSchemaToObjectSize(schemaObject, object)
     ),
     object
diff --git a/etp-front/webpack.config.js b/etp-front/webpack.config.js
index c13451fcb..1ec1a4c1c 100644
--- a/etp-front/webpack.config.js
+++ b/etp-front/webpack.config.js
@@ -106,6 +106,7 @@ module.exports = {
     }),
     new HtmlWebpackPlugin({
       title: 'Ara - Energiatodistuspalvelu',
+      template: './src/template.html',
       favicon: './assets/favicon.png'
     }),
     new CopyWebpackPlugin({
