Steps for Assignment 7, DGMD E-20 Section 1 (26270)
- Use media queries for two layouts – one for large monitors and one for mobile apps but with only one external CSS file ✓
- Use a Web Accessibility Evaluation Tool and check whether your website content is accessible to users with disabilities. Write a short report of whether your websites is accessible or not. What changes do you have to make so that your website is accessible? ✓
- Use 1 CSS variable ✓
- Add a new page and add two transitions ✓
- Graduate Credit:
- Use at least 2 CSS variables ✓
For this assignment, I used one external style sheet css/style.css to style the content on all the pages, using @media queries to optimize the pages for both mobile and desktop views.
To check accessibility I evaluated the site using axe Development Tools extension, ARC Toolkit, and the WAVE extension for Chrome. Items flagged included adding a language attribute to the ❮html❯ tag, adding alt text to every svg image, removing role=main from the ❮nav❯, and on the content page, changing the red color I was using to indicate "required" to something with more contrast. A general recommendation was to remove all italics, and always give the ❮fieldset❯ a ❮legend❯. Sometimes the accessibility tools differed; for example ARC toolkit recommended the ❮h1❯ tags be moved to within the ❮main❯ content, but the other tools didn't flag this. Overall, the site is pretty close, but with a few changes it can be made much more accessible.
I added a new page, teams.html, and used @media queries to change its layout for mobile and desktop views.
I added a green background transition to all in-page links except the nav links. And for viewports over 768, I also added transitions to the input fields on the contact page, and to the team member panels on the team page. I used CSS variables for the ❮h2❯ colors, and for a different color and font display of the ❮h2❯ tags on the team page. I also put a fun animation on the cartoon car on the home page.
Finally, I summarized my changes here on this standalone HTML page assignment7.html, and linked it from the home page using target="_blank" so it would open in a new tab, and not interfere with site navigation.