This is my exam project for the class idg2012

Requirements:

Conduct user research: You will conduct user research to understand the needs and challenges of people with disabilities when using digital devices to access content. You should use this feedback to inform your design decisions and prioritize the features and content that are most important to this user group.

Create a design brief: Based on your research, you will create a design brief that outlines the goals and objectives for your website. You should also create a user persona or personas that represent your target user group, to help guide your design decisions.

Design the website: Using the principles of universal design, you will create wireframes and design mockups for your website. You should consider the accessibility features and design elements that will make your website usable for people with disabilities, such as alternative text for images, captions for videos, clear navigation menus, and high color contrast.

Develop the website: You will use HTML, CSS, and JavaScript to develop your website, ensuring that it meets the accessibility standards set by the Web Content Accessibility Guidelines (WCAG). You should test your website using assistive technologies such as screen readers, keyboard-only navigation, and voice recognition software, and make any necessary adjustments to ensure that it is fully accessible.

Submit a final report: You will submit a final report that includes a summary of your research findings, your design brief, wireframes and design mockups, and a description of the accessibility features you implemented in your website. You should also include a reflection on the universal design process and any challenges or successes you encountered during the project. The language of the report must be English. The report must not be longer than 15 pages.

Technical Requirements:

• Include following design elements (at least):
• Proper text (no lorem ipsum)
• 5 pages
• Menu with 5 menu items and 2 sub-menu items
• 5 images
• 1 video files (don’t embed the video from other platforms, e.g. YouTube)
• 1 audio file
• 1 table (3x3)
• 1 form page
• 1 pop-up window
• Use HTML5 for markup and CSS3 for styling.

• Use ARIA (Accessible Rich Internet Applications) to provide additional accessibility information for screen readers and other assistive technologies.
• Clear navigation menus: The navigation menu should be easy to use and should clearly indicate the current page and section of the website. Use keyboard-only navigation to ensure that users can navigate the website without a mouse.
• Headers: The website should have proper headers (h1, h2, h3, etc.) that provide a clear structure to the content. The headers should be used in a hierarchical order to provide context to the content.
• High color contrast: Ensure high color contrast for all text and images. All text and graphical elements should have high contrast to make it easier for people with low vision to read and understand.
• Skip to main content: A "skip to main content" link should be provided to allow users to jump directly to the main content of the page, bypassing navigation and other repetitive elements.

Requirements for Design Elements:

• Images: All images used on the website should have alternative text (alt text) descriptions, which provide a textual description of the image for people who cannot see the image. The alt text should be concise and descriptive.
• Audio files: Audie files should have transcripts or captions, which provide a textual description of the audio content. The transcripts should be accurate and provide a description of all audio content, including sound effects and background music.
• Video files: Video files should have captions or transcripts, which provide a textual description of the video content. The captions should be synchronized with the audio and video content.
• Tables: All tables should have headers that describe the content of each column and row and should be designed to be easy to navigate for people using assistive technology.
• Form fields: Form fields should be labeled properly and have clear instructions for filling out the form. Form fields should also have proper error messages to help users correct mistakes. The forms should also be accessible via tab keys.
• Pop-up: Pop-up should be designed in a way that does not create a barrier to access. It should not interrupt the user experience and must have an easy way to close the pop-up. Pop-ups should be designed to be accessible and easy to close, with clear labeling and instructions.

Delivery:

• A single Zip file containing both the HTML, CSS and JavaScript files for the website and a PDF with the project report.
• All materials must be uploaded to Inspera.

Evaluation and Grading:

The following criteria will be used to grade the course project:

• Accessibility Compliance (70%): The website should comply with the WCAG 2.1 guidelines and meet all the technical requirements mentioned above.
• Design and Aesthetics (10%): The website should have a visually appealing design that is consistent throughout the website.
• Final Project Report (20%): A final project report should be submitted, which should include a detailed explanation of the design and development process, the challenges faced, and the solutions implemented to ensure accessibility compliance.
• In the report, there should be clear link to WCAG on how to meet relevant checkpoints outlined in WCAG.
• Suggested outline for the report:
• Introduction
• Explain the theme of the website.
• Provide user need and analysis.
• Provide user persona.
• Design report
• Provide lo-fi prototype.
• Explain how you iterated your design.
• Explain how to consider usability.
• Accessibility report
• Explain what you have done to make this website accessible.
• Explain how accessibility has been tested.
• Explain the results of the accessibility testing.
• Explain how your website support full keyboard navigation via Tab and Shift + Tab keys.
• Explain how to meet relevant checkpoints outlined in WCAG 2.1.
• Conclusion
• Summary of what you have done and highlights of the best parts.

Deadline:

December 4