Individual Technical Report

Ruchee: UX & Form Design Specialist

Technical Description Accessibility JANET Compliance Meeting Log

1. Technical Implementation

Form Validation Logic

I developed the **Feedback Form** with a dual-system validation: standard HTML5 attributes (type="email", required) and custom JavaScript for detailed error feedback. The live character counter uses the input event to provide real-time updates.

Team Grid Hover Reveal

For the team page, I utilized advanced CSS Flexbox behaviors to create an interactive reveal of portfolio details on card click/hover, enhancing the presentation of team contributions.

2. Accessibility Considerations

I prioritized form accessibility by ensuring each input has a corresponding <label> and is logically grouped using <fieldset> and <legend> elements, which is essential for screen reader navigation.

3. JANET Compliance

This project is for educational use and complies with JA.NET Acceptable Use Policy. All data collection (Feedback) is simulated for student learning and does not store real PII in a backend server.

4. Group Meetings & Contribution Log

# Date & Time Format Objective Attended My Individual Contribution
1 [2026-03-27] Face-to-face Agree SDG, assign roles, agree folder structure Yes Agreed to take Ruchee responsibilities: Feedback, Team, Content page. Contributed to choosing SDG 6 and the water crisis focus.
2 [2026-03-28] Online (Teams) Review shared template and global CSS from Swosti Yes Reviewed the shared template structure and confirmed my pages would integrate correctly. Flagged the need for a scrollable programme section on the Feedback page.
3 [2026-03-29] Online (Teams) Progress check - first drafts Yes Shared draft feedback.html with the group for review. Discussed JavaScript form validation approach. Received feedback on the team card layout.
4 [2026-03-30] Face-to-face Content review and consistency check Yes Presented content_ST3.html structure. Agreed on the sanitation gap topic and eight-section layout. Confirmed image placeholder naming convention with the group.
5 [2026-03-31] Hybrid Accessibility and validation review Yes Ran HTML validation on all three pages. Resolved minor validation errors. Added missing aria-label attributes and confirmed tabindex on team cards.
6 [2026-04-01] Online (Teams) Final review and submission preparation Yes Completed Page Editor and Validation page. Uploaded files to university server. Confirmed all navigation links work correctly across the full site.