Splash Screen Page
Technical Description
The Splash Screen was designed using HTML and CSS, incorporating responsive design principles to ensure compatibility across different devices. Semantic elements were used to improve readability and maintainability.
Accessibility
The Splash Screen Page follows accessibility best practices, including descriptive alt attributes for images, keyboard navigability, and proper ARIA roles.
Link to the validation page
Link to the page
Volunteer Page
Technical Description
The Volunteer Page Flexbox and Grid were implemented for layout consistency, along with media queries for responsiveness..
Accessibility
Keyboard navigation support for all interactive components.
Link to the validation page
Link to the page
Content Page
Technical Description
The Content Page utilizes structured HTML with proper heading hierarchies and CSS for styling. It includes multimedia elements with captions for enhanced user experience.
Accessibility
ARIA roles and labels were used to improve navigation and usability for assistive technologies.
Link to the validation page
Link to the page
Challenges and Lessons Learned
Implementing responsive design and ensuring accessibility compliance were key challenges. Using flexbox and media queries improved adaptability, while learning ARIA roles enhanced accessibility knowledge.
Compliance
All pages adhere to Janet web publishing regulations, ensuring proper use of HTML structure, accessibility guidelines, and user privacy considerations.
References
- Pixabay (2025) Pixabay. Available at: https://www.pixabay.com/ (Last accessed: 04 Mar 2025).
- W3Schools (2025) W3Schools. Available at: https://www.w3schools.com/ (Last accessed: 4 Mar 2025).