diff --git a/assets/images/html-form-validation.png b/assets/images/html-form-validation.png
new file mode 100644
index 00000000..75d2840c
Binary files /dev/null and b/assets/images/html-form-validation.png differ
diff --git a/assets/images/mark-non-required-form-fields.png b/assets/images/mark-non-required-form-fields.png
new file mode 100644
index 00000000..e916fbc1
Binary files /dev/null and b/assets/images/mark-non-required-form-fields.png differ
diff --git a/assets/images/mark-required-form-fields.png b/assets/images/mark-required-form-fields.png
new file mode 100644
index 00000000..e72dc378
Binary files /dev/null and b/assets/images/mark-required-form-fields.png differ
diff --git a/docs/topics/content/links/link-text.md b/docs/topics/content/links/link-text.md
index 69cd61db..fe904a01 100644
--- a/docs/topics/content/links/link-text.md
+++ b/docs/topics/content/links/link-text.md
@@ -20,7 +20,7 @@ Link text should stand on its own. Some assistive software scans a page for link
It also makes your text easier to scan visually, so that sighted users can more quickly find the information they’re looking for.
-
+Descriptive, meaningful link text in the Apple VoiceOver link list.
@@ -31,7 +31,7 @@ Avoid meaningless link text like: click here, download, info, more, here, this.
With these types of links, users have to read the whole sentence to understand the purpose of the link. This makes your content less browsable, and harder to engage with. Screen reader users cannot navigate by links, because those links are not useful without additional context.
-
+Useless, non-descriptive link text in the Apple VoiceOver link list.
diff --git a/docs/topics/forms/descriptions/content-description.md b/docs/topics/forms/descriptions/content-description.md
index c96e4ade..41e5b653 100644
--- a/docs/topics/forms/descriptions/content-description.md
+++ b/docs/topics/forms/descriptions/content-description.md
@@ -20,7 +20,7 @@ In this [demo video](https://www.youtube.com/watch?v=6brKmJfDtNQ), VoiceOver in
What are the options for adding information and explanations to a form and its input fields? Follow the [description decision tree]({{site.baseurl}}/docs/topics/forms/descriptions/).
-## Related WCAG Succes Criteria
+## Related WCAG Success Criteria
- [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/quickref/#info-and-relationships).
- [3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG22/quickref/#labels-or-instructions).
diff --git a/docs/topics/forms/descriptions/decision-tree-description.md b/docs/topics/forms/descriptions/decision-tree-description.md
index 080c6f5c..bef0d9fd 100644
--- a/docs/topics/forms/descriptions/decision-tree-description.md
+++ b/docs/topics/forms/descriptions/decision-tree-description.md
@@ -44,7 +44,7 @@ Rich text in this context means: additional structure or interactive functionali
**Yes**: Consider a multistep form, where the information is placed directly above the form for each step.
**No**: Rewrite the description so that it only contains plain text. This ensures that all users can read the information.
-## Related WCAG Succes Criteria
+## Related WCAG Success Criteria
- [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/quickref/#info-and-relationships).
- [3.3.2 Labels or Instructions](https://www.w3.org/WAI/WCAG22/quickref/#labels-or-instructions).
diff --git a/docs/topics/forms/descriptions/location-description.md b/docs/topics/forms/descriptions/location-description.md
index 37ce78b0..35cc0023 100644
--- a/docs/topics/forms/descriptions/location-description.md
+++ b/docs/topics/forms/descriptions/location-description.md
@@ -112,7 +112,7 @@ Use the "Form Layout" settings on the Form Settings screen:
- Sub-Label Placement: Above inputs
-
+ Screenshot Form Settings in Gravity Forms version 2.9.20 .
diff --git a/docs/topics/forms/required.md b/docs/topics/forms/required.md
deleted file mode 100644
index 7c0d50dc..00000000
--- a/docs/topics/forms/required.md
+++ /dev/null
@@ -1,12 +0,0 @@
----
-title: Required fields
-layout: default
-parent: Web forms
-nav_order: 8
----
-
-# Indicate required fields in forms
-
-{: .alert }
-This content needs to be written.
-Related issue on [GitHub #160 Topic Indicate required fields in forms](https://github.com/wpaccessibility/wp-a11y-docs/issues/160).
diff --git a/docs/topics/forms/required/index.md b/docs/topics/forms/required/index.md
new file mode 100644
index 00000000..de4e32de
--- /dev/null
+++ b/docs/topics/forms/required/index.md
@@ -0,0 +1,20 @@
+---
+title: Required fields
+layout: default
+parent: Web forms
+nav_order: 8
+---
+
+# Indicate required fields in forms
+
+Clearly indicate to the user whether a form field is required to fill out or not.
+Then the user knows which information they must provide to submit a form.
+
+You have two options:
+
+1. By visually marking required fields.
+2. By visually marking non-required fields.
+
+Both are fine, as long as you are consistent within the form and, if possible, also within all forms on your website.
+
+Always place the explanation of how you indicate this above the form, so the user knows beforehand what to expect when completing it.
diff --git a/docs/topics/forms/required/mark-non-required-fields.md b/docs/topics/forms/required/mark-non-required-fields.md
new file mode 100644
index 00000000..cd505f43
--- /dev/null
+++ b/docs/topics/forms/required/mark-non-required-fields.md
@@ -0,0 +1,44 @@
+---
+title: Mark non-required fields
+layout: default
+parent: Required fields
+nav_order: 3
+---
+
+# Option 2: Marking only the non-required form fields
+
+Clearly indicate to the user if a form field is optional.
+
+Assuming that you only request essential information in forms, most fields will be required. Then, non-required fields are the exception. You can choose to mark only the optional fields visually. Do this by informing the user above the field and by including the text '(optional)' in the label for non-required fields.
+
+## Example
+
+
+
+
+ In this screenshot: Above the form the text: "All questions are required except the questions marked as (optional)".
+ This information is also in the label text: Your Pronouns (optional).
+
+
+
+{: .alert }
+**Note for developers**: for screen reader users the indication if a field is required must be added in the code with a form field. Read [Mark if a form field is required for screen readers]({{site.baseurl}}/docs/topics/forms/required/required-screen-readers/) about how to do this.
+
+## Indication non-required fields in WordPress form plugins
+
+{: .info }
+We'd like to invite people familiar with form plugins to help us add instructions for WordPress form plugins. Like possibilities, settings and screenshots.
+Please [contact us]({{site.baseurl}}/docs/contact/) if you want to help us with this additional content.
+
+## Related WCAG Success Criteria
+
+By indicating required fields, you meet WCAG success criterion [3.3.2 Labels or Instructions (Level A)](https://www.w3.org/WAI/WCAG22/quickref/#labels-or-instructions).
+
+## Related pages in this documentation
+
+- [Option 1: Marking only the required form fields]({{site.baseurl}}/docs/topics/forms/required/mark-required-fields/).
+
+## Resources
+
+- NL Design System [Guidelines for web forms (Dutch content)](https://nldesignsystem.nl/richtlijnen/formulieren/).
+- Faizan Ahmed on UX Design World [Optimizing Form Design: Marking Required and Optional Fields in a Better Way](https://uxdworld.com/form-design-required-and-optional-fields/)
diff --git a/docs/topics/forms/required/mark-required-fields.md b/docs/topics/forms/required/mark-required-fields.md
new file mode 100644
index 00000000..509f34ed
--- /dev/null
+++ b/docs/topics/forms/required/mark-required-fields.md
@@ -0,0 +1,54 @@
+---
+title: Mark required fields
+layout: default
+parent: Required fields
+nav_order: 2
+---
+
+# Option 1: Marking only the required form fields
+
+Clearly indicate to the user if a form field is required to fill out or not. Inform the user above the field how the fields are marked.
+
+If you choose to mark the required field, include the text '(required)', or an equivalent, in the label for required fields.
+
+A required field indicator can be:
+- The text (required).
+- An asterisk (\*). If you use an asterisk, explain this above the form. An asterisk on the form field alone is not sufficient; not everyone has this prior knowledge.
+
+## Example
+
+
+
+
+ In this screenshot: Above the form the text: "*" indicates required fields.
+ This information is also in the label text: Your name *.
+
+
+
+{: .alert }
+**Note for developers**: for screen reader users the indication if a field is required must be added in the code with a form field. Read [Mark if a form field is required for screen readers]({{site.baseurl}}/docs/topics/forms/required/required-screen-readers/) about how to do this.
+
+## Indication required fields in WordPress form plugins
+
+### Gravity Forms
+
+Gravity Forms adds the possibility to select "Required" with each form field. In the form settings you can choose the type of Required Field Indicator. The explanation of this indicator is added automatically above the form.
+
+### Other WordPress form plugins
+
+{: .info }
+We'd like to invite people familiar with form plugins to help us add instructions for WordPress form plugins. Like possibilities, settings and screenshots.
+Please [contact us]({{site.baseurl}}/docs/contact/) if you want to help us with this additional content.
+
+## Related WCAG Success Criteria
+
+By indicating required fields, you meet WCAG success criterion [3.3.2 Labels or Instructions (Level A)](https://www.w3.org/WAI/WCAG22/quickref/#labels-or-instructions).
+
+## Related pages in this documentation
+
+- [Option 2: Marking only the non-required form fields]({{site.baseurl}}/docs/topics/forms/required/mark-non-required-fields/).
+
+## Resources
+
+- NL Design System [Guidelines for web forms (Dutch content)](https://nldesignsystem.nl/richtlijnen/formulieren/).
+- Faizan Ahmed on UX Design World [Optimizing Form Design: Marking Required and Optional Fields in a Better Way](https://uxdworld.com/form-design-required-and-optional-fields/)
diff --git a/docs/topics/forms/required/required-screen-readers.md b/docs/topics/forms/required/required-screen-readers.md
new file mode 100644
index 00000000..4e428fe9
--- /dev/null
+++ b/docs/topics/forms/required/required-screen-readers.md
@@ -0,0 +1,64 @@
+---
+title: Mark required for screen readers
+layout: default
+parent: Required fields
+nav_order: 4
+---
+
+# Mark a required form field for screen readers
+
+Screen reader users will have the field announced as required by the HTML attributes `aria-required` or `required` on the form field.
+
+## Basic HTML examples
+
+### Using aria-required="true"
+
+```html
+
+
+
+```
+
+### Using required
+
+```html
+
+
+```
+
+The disadvantage of using `required` is, that it triggers the [client-side form validation](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation) of the browser.
+
+At the time of writing, this validation does not meet WCAG accessibility guidelines. The error messages are not specific enough, they disappear after a few seconds, and they currently lack sufficient screen reader support.
+
+If you decide to use `required`, also use `novalidate` on the form element to prevent the browser's form validation from kicking in and enable you to handle validation server-side.
+
+```html
+
+
+
+ 
+ 
+