Exercises

To reinforce the concepts covered in this lesson, here are a series of practical exercises that provide hands-on experience in implementing multilingual and accessible forms. These exercises range from simple tasks to more complex challenges, helping you build confidence and deepen your understanding.

Exercise 1: Creating a Multilingual Name Input Form

Objective: Build a form that supports name input in multiple languages and scripts.

1. Create a basic form with two input fields: one for a name in the native script and one for its Latin transliteration.
2. Add lang and dir attributes to each field to specify language and directionality.
3. Test the form with names in different scripts, such as Arabic, Chinese, and Cyrillic.

Bonus:

• Add validation to ensure both fields are not empty.
• Display error messages in the user’s preferred language.

Exercise 2: Implementing Autocomplete for Multilingual Search

Objective: Develop a search bar with autocomplete suggestions tailored to different languages.

1. Create a form with a single search field.
2. Implement a basic datalist element to provide autocomplete suggestions in two languages (e.g., English and Spanish).
3. Test the search bar by entering queries in both languages.

Bonus:

• Fetch autocomplete suggestions dynamically from an API.
• Support transliterated input (e.g., typing "panir" for "पनीर" in Hindi).

Exercise 3: Adding Bidirectional Text Support

Objective: Build a feedback form that supports bidirectional (bidi) text input.

1. Create a text area field for user comments.
2. Add the dir attribute to allow both LTR and RTL input.
3. Test the form with mixed-language input, such as "شكراً for your help."

Bonus:

• Use the <bdi> element to isolate bidi text dynamically.
• Add CSS styles to ensure proper alignment of bidi text fields.

Exercise 4: Validating Multilingual Input

Objective: Implement and test validation rules for multilingual input.

1. Create a form with three fields: Name, Email, and Postal Code.
2. Use regular expressions to validate:
   • Names with diacritics (e.g., "José").
   • Emails with internationalized domain names (IDNs).
   • Postal codes in two formats (e.g., U.S. ZIP codes and Japanese postal codes).

Bonus:

• Display error messages localized to the user’s language.
• Ensure the form accepts input in scripts like Cyrillic or Arabic.

Exercise 5: Localizing a Date Picker

Objective: Create a date picker that adjusts based on the user’s locale.

1. Add a date picker input field to a form.
2. Configure the date format dynamically based on the user’s region (e.g., "MM/DD/YYYY" for the U.S. and "DD/MM/YYYY" for Europe).
3. Test the form with users from at least three different locales.

Bonus:

• Add labels and placeholder text in the user’s language.
• Validate the selected date and display an error message if the format is incorrect.

Exercise 6: Designing an Accessible Virtual Keyboard

Objective: Build a simple virtual keyboard for a non-Latin script.

1. Create a virtual keyboard for Arabic input using HTML, CSS, and JavaScript.
2. Ensure the keyboard is navigable with both a mouse and keyboard.
3. Add ARIA roles and labels for accessibility.

Bonus:

• Allow users to toggle between Arabic and English keyboards.
• Save the user’s keyboard preference for future use.

Exercise 7: Debugging a Multilingual Form

Objective: Identify and fix common issues in a pre-built multilingual form.

1. Start with a provided form that has the following issues:
   • Garbled text in submissions.
   • Misaligned RTL text.
   • Missing screen reader labels.
2. Debug and fix the issues to ensure the form works correctly.

Bonus:

• Add a test case for mixed-language input.
• Document the fixes you applied.

Exercise 8: Building a Real-World Multilingual Form

Objective: Combine all the skills you’ve learned to create a complete multilingual form.

1. Design a registration form with the following fields:
   • Name (in native script and Latin transliteration).
   • Address (localized formatting based on the user’s country).
   • Email (supporting IDNs).
   • Feedback (with bidi text support).
2. Add validation, accessibility features, and language-specific formatting.

Bonus:

• Implement a language selector that dynamically updates the form’s labels and error messages.
• Use an API to fetch localized address suggestions.

Reflection and Sharing

After completing the exercises, reflect on the challenges you faced and how you overcame them. Share your completed forms with peers or mentors for feedback and suggestions.

These exercises provide practical ways to apply the concepts from the lesson, helping you develop a deeper understanding of multilingual and accessible form design. Let me know if you'd like any specific exercise detailed further!