diff --git a/assets/images/html-form-validation.png b/assets/images/html-form-validation.png
new file mode 100644
index 000000000..75d2840ca
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 000000000..e916fbc10
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 000000000..e72dc3781
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 cd798231c..6ad93f8c2 100644
--- a/docs/topics/content/links/link-text.md
+++ b/docs/topics/content/links/link-text.md
@@ -19,7 +19,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.
@@ -30,7 +30,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 c96e4ade8..41e5b653c 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 080c6f5c1..bef0d9fd0 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 37ce78b09..35cc00235 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 d9631107c..000000000
--- 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 will 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 000000000..daa8057bd
--- /dev/null
+++ b/docs/topics/forms/required/index.md
@@ -0,0 +1,20 @@
+---
+title: Required fields
+layout: default
+parent: Web forms
+nav_order: 8
+description: Clearly indicate to the user whether a form field is required. Then the user can tell what information they must provide to submit a form.
+---
+
+# Indicate required fields in forms
+
+Clearly indicate to the user whether a form field is required. Then the user can tell what information they must provide to submit a form.
+
+You have two options:
+
+1. By visually marking required fields.
+2. By visually marking optional fields.
+
+Both are fine, as long as you are consistent within the form and, if possible, also within all forms on your website.
+
+Always explain how you are indicating required fields above the form, so the user knows beforehand what to expect when completing it.
diff --git a/docs/topics/forms/required/mark-optional-fields.md b/docs/topics/forms/required/mark-optional-fields.md
new file mode 100644
index 000000000..8c249dedc
--- /dev/null
+++ b/docs/topics/forms/required/mark-optional-fields.md
@@ -0,0 +1,46 @@
+---
+title: Mark optional form fields
+layout: default
+parent: Required fields
+nav_order: 3
+description: Clearly indicate to the user if a form field is optional.
+---
+
+# Option 2: Marking only the optional 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, optional 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 optional 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. Learn how to [Indicate required fields for screen readers]({{site.baseurl}}/docs/topics/forms/required/required-screen-readers/).
+
+## Indication of optional fields in WordPress form plugins
+
+{: .info }
+We want to invite people familiar with form plugins to help us add instructions for WordPress form plugins, including options, 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/).
+- [Indicate required fields for screen readers]({{site.baseurl}}/docs/topics/forms/required/required-screen-readers/).
+
+## 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 000000000..638f23e47
--- /dev/null
+++ b/docs/topics/forms/required/mark-required-fields.md
@@ -0,0 +1,56 @@
+---
+title: Mark required form fields
+layout: default
+parent: Required fields
+nav_order: 2
+description: Clearly indicate to the user if a form field is required.
+---
+
+# Option 1: Marking only the required form fields
+
+Clearly indicate to the user whether a form field is required. Inform the user above the form 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**: screen readers have specific needs for discovering required fields. 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 of 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 want to invite people familiar with form plugins to help us add instructions for WordPress form plugins, including options, 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 optional form fields]({{site.baseurl}}/docs/topics/forms/required/mark-optional-fields/).
+- [Indicate required fields for screen readers]({{site.baseurl}}/docs/topics/forms/required/required-screen-readers/).
+
+## 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 000000000..1aad1b2d6
--- /dev/null
+++ b/docs/topics/forms/required/required-screen-readers.md
@@ -0,0 +1,82 @@
+---
+title: Indicate required fields for screen readers
+layout: default
+parent: Required fields
+nav_order: 4
+description: Screen readers announce form fields as required if they have the HTML attributes aria-required or required on the form field.
+---
+
+# Indicate required fields for screen readers
+
+Screen readers announce form fields as required if they have the HTML attributes `aria-required="true"` or `required` on the form field.
+
+## Basic HTML examples
+
+### Using aria-required="true"
+
+```html
+
+
+
+```
+
+### Using required
+
+```html
+
+
+```
+
+The attribute `required` triggers the [client-side form validation](https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation) of the browser.
+
+Client side validation may create accessibility and usability issues. The topic about [feedback on form errors]({{site.baseurl}}/docs/topics/forms/feedback/) will address this in more detail.
+
+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
+