Adds topic required form fields to the Web forms section

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.
 
 <figure>
-<img src="/assets/images/vo-rotor-links.png" alt="">
+<img src="{{site.baseurl}}/assets/images/vo-rotor-links.png" alt="">
 <figcaption>Descriptive, meaningful link text in the Apple VoiceOver link list.</figcaption>
 </figure>
 
@@ -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.
 
 <figure>
-<img src="/assets/images/incorrect-links.png" alt="">
+<img src="{{site.baseurl}}/assets/images/incorrect-links.png" alt="">
 <figcaption>Useless, non-descriptive link text in the Apple VoiceOver link list.</figcaption>
 </figure>
 

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).

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).

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
 
 <figure>
-    <img src="/assets/images/form-settings-page-layout-gravity-forms.png" alt="">
+    <img src="{{site.baseurl}}/assets/images/form-settings-page-layout-gravity-forms.png" alt="">
     <figcaption>Screenshot Form Settings in Gravity Forms version 2.9.20 .</figcaption>
 </figure>
 

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. 

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
+
+<figure>
+<img src="{{site.baseurl}}/assets/images/mark-non-required-form-fields.png" alt="Screenshot form indicating non-required fields">
+    <figcaption>
+    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).
+    </figcaption>
+</figure>
+
+{: .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/)

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
+
+<figure>
+    <img src="{{site.baseurl}}/assets/images/mark-required-form-fields.png" alt="Screenshot form indicating required fields">
+    <figcaption>
+    In this screenshot: Above the form the text: "*" indicates required fields.
+    This information is also in the label text: Your name *.
+    </figcaption>
+</figure>
+
+{: .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/)

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
+
+<label for="name">Your name (required)</label>
+<input
+    id="name"
+    type="text"
+    name="name"
+    autocomplete="name"
+    aria-required="true"
+    aria-invalid="false"
+/>
+```
+
+### Using required
+
+```html
+<label for="name">Your name (required)</label>
+<input
+    id="name"
+    type="text"
+    name="name"
+    autocomplete="name"
+    required
+    aria-invalid="false"
+/>
+```
+
+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
+<form action="some-url" novalidate>
+```
+
+{: .info }
+Note: the use of `aria-invalid` will be addressed later in the section Feedback on form errors.
+
+## 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).
+
+## Resources
+- MDN [aria-required](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-required).
+- MDN [HTML attribute: required](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/required).
+- W3C [Validating Input](https://www.w3.org/WAI/tutorials/forms/validation/).
+- NL Design System [Guidelines for web forms (Dutch content)](https://nldesignsystem.nl/richtlijnen/formulieren/).