Page Editor — Prabhakar Khatri

Student 4 — Student ID: w2152989

Role: Interactive Data & SVG Lead | Profile | Sitemap | Content Page (ST4)

1. User Profile Page (profile.html)

The User Profile page collects personal information from the user interactively using JavaScript and renders it as a formatted profile card on the page.

Technical Description

I implemented the User Profile using a sequence of 9 JavaScript prompt() calls grouped into 3 steps. The profile summary results are dynamically injected into the DOM through document.createElement and appendChild(). This logic ensures the DOM builds cleanly based on interactive user input.

Accessibility

I ensure that all JavaScript-generated content injects into semantic HTML elements. I had to add default "..." text into empty <span> tags used for JavaScript DOM insertion so screen readers don't misinterpret empty elements before script execution.

View User Profile Page See Validation Evidence

2. Sitemap Page (sitemap.html)

The Sitemap page provides a full visual overview of the website's page hierarchy using an interactive SVG tree diagram with clickable nodes.

Technical Description

The sitemap was built entirely using Scalable Vector Graphics (SVG). I utilized <rect>, <path>, and <circle> nodes with standard href attributes connecting the tree diagram to all the major pages in our ProjectBlue web application. It scales neatly to any viewport.

Accessibility

For the SVG sitemap, I added <title> and <desc> children elements directly into the SVG nodes for context readability. The shapes are focusable with correct outlines addressing keyboard accessibility users.

View Sitemap Page See Validation Evidence

3. Content Page — Water Ecosystems (content_ST4.html)

My individual content page is titled Water Ecosystems. It explores the role of freshwater ecosystems in supporting biodiversity and human life, with a focus on SDG 6 targets.

Technical Description

The content page implements a fully responsive CSS grid to showcase data blocks describing Water Ecosystems. I used nested <section> paired with structural header tags. The external CSS variables from style.css are applied to maintain consistent branding.

Accessibility

Images in the content section all feature robust alt descriptions. Color contrasts between the text elements and the white/gray card surfaces fall strictly within the WCAG AA compliance ratios.

View Content Page See Validation Evidence

4. Challenges & Lessons Learned

Challenge 1 — SVG Deprecation

A major challenge was building a fully accessible SVG graphic with linked nodes while migrating away from the deprecated xlink:href standard to HTML5's native href. It was challenging testing these SVG links uniformly across browsers, but the validation process heavily facilitated recognizing deprecated attributes early.

What I learned: always check W3C standards for SVG attributes. The validator is an essential tool for catching deprecated usage before submission.

Challenge 2 — JavaScript DOM Validation

Relying entirely on JavaScript to generate the profile layout required me to rethink how raw DOM manipulation impacts initial page load validation. Empty <span> elements that JavaScript would later populate were flagging accessibility warnings in the W3C checker.

What I learned: placeholder text in dynamically populated elements prevents false validation warnings and improves the experience for screen reader users before scripts run.

5. Compliance

My work complies with JA.NET regulations. All scripts and SVG assets are custom-coded or strictly standard-library without relying on black-box external frameworks. I ensured the site functions optimally without high bandwidth dependencies for all media assets.

The interactive profile gathers inputs solely on the client side using the window API and no data is persisted or transmitted to third-party endpoints, ensuring full privacy alignment with academic network regulations.

6. Group Meetings & Contribution Log

The following table records the group meetings held over the course of the semester, including my individual contributions at each stage.

# Date & Time Format Objective Attended My Individual Contribution
1 27th March, 2026 Face-to-face Agree SDG, assign roles, agree folder structure Yes Agreed to take on responsibilities for Profile, Sitemap, and Content page. Contributed to choosing SDG 6.
2 28th March, 2026 Online (Teams) Review shared template and global CSS Yes Reviewed the shared template structure and confirmed my pages would integrate correctly with the global stylesheet.
3 29th March, 2026 Online (Teams) Progress check — first drafts Yes Shared draft profile.html with the group for review. Received feedback on DOM injection structure.
4 30th March, 2026 Face-to-face Content review and consistency check Yes Presented content_ST4.html structure. Confirmed image placeholder naming convention with the team.
5 31st March, 2026 Hybrid Accessibility and validation review Yes Ran HTML validation on all three pages. Resolved minor validation errors including empty span warnings.
6 1st April, 2026 Online (Teams) Final review and submission prep Yes Completed Page Editor and Validation page. Verified SVG navigation links across pages.

7. References

The following resources were consulted during the development of my pages.

  1. W3C (2026). Markup Validation Service. Available at: https://validator.w3.org/ [Accessed: April 2026]
  2. MDN Web Docs (2026). SVG: Scalable Vector Graphics. Available at: https://developer.mozilla.org/ [Accessed: March 2026]
  3. Unsplash (2026). Thriving Wetlands Ecosystem. Available at: https://unsplash.com/ [Accessed: April 2026]
  4. Unsplash (2026). Freshwater Mountain Lakes. Available at: https://unsplash.com/ [Accessed: April 2026]
  5. Unsplash (2026). Lush Forest Watersheds. Available at: https://unsplash.com/ [Accessed: April 2026]
  6. United Nations (2024). Sustainable Development Goal 6 — Clean Water and Sanitation. Available at: https://sdgs.un.org/goals/goal6 [Accessed: February 2026]
⇧