Accessibility Report

This is the landing page for an accessible version of my site, as prompted by Module 7 of my Web Authoring and Design class. The links above lead to accessible versions of my principal site pages (the index as well as top level pages for creative and research). I have used the W3C's Checklist of Checkpoints for Web Content Accessibility Guidelines as well as the broader W3C Web Content Accessibility Guidelines (WCAG) when reviewing my site for accessibility and usability. I also screened my site using the W3C HTML and CSS validators, and the WAVE accessibility checker. Finally, I assessed my color choices using Toptal's Colorblind Web Page Filter and WebAIM's Contrast Checker.

I had not yet included alt text for the thumbnails of my collages on the creative page. I noticed this when reviewing my site as HTML only, per the guidance in W3C's Priority 1 checkpoint item 6.1. Reviewing in HTML only is not something I thought to do as a form of site review, but I will adopt it as a consistent practice going forward. I found it very helpful to review my content in HTML only. It highlighted what was missing, what I could add, and what will need to be fleshed out or strenghtened going forward. In learning to style my site, I fear I've gotten caught up in the CSS of it all and will now need to devote time to rounding out my content.

In addition to flagging the br/ tags, which I've elected to leave, W3C's HTML checker pointed out a stray paragraph end tag on my index page. On the creative page, it flagged two unclosed divs within the body. On the research page, it flagged the iframe element I used to embed a YouTube video as obsolete, and advised I use CSS instead.

The CSS across all three principal pages received a "Congratulations! No errors found" from W3C's CSS checker! One of the offered validation icons perfectly complements the color scheme of my site, so I grabbed it and added it to my footer. When I first used this validator on CSS produced by Claude AI, it did not pass this validation. The work I've done to clean up and strengthen the code on my own has earned this validation, and that is very reassuring as a beginning coder!

WAVE flagged no top level errors on my index page, but 5 contrast errors and 1 alert. The first two contrast errors have to do with the baige text against the rust colored background in my main site header and main navigation links. WAVE does not flag the content headers in the body of my site with the same font color and rust background, so I assume the all caps style or small text influence the accessibility of the site header elements. The last 3 contrast errors flag the footer of my site, which is rust against my beige background. I will adjust with a darker rust color, and perhaps larger font. WebAIM's Contrast Checker was increidbly helpful here, as it allowed me to adjust the lightness on my chosen rust color and find one dark enough to pass all of the contrast guidelines. This darker color is reflected on these "Accessible" site pages. On my creative page, WAVE flagged the lack of alt text I noticed in my earlier HTML review. On my research page, WAVE alerted to the embedded YouTube video and noted, "For video content with audio, ensure that synchronized captioning is available. While YouTube can auto-generate captions using voice recognition, these are typically not of sufficient quality to be considered equivalent." I have verified the captions on the video I've embedded, and will do so for any additional videos. If the captioning is not sufficient, I will include a transcript on my site.

Toptal's Colorblind Web Page Filter was enlightening, as it further highlighted some of the contrast issues with my site. Specifically, the greyscale filter showed me the little yellow "sidenote" Post-Its I employ on most of my pages may appear to blend into the background for some users. The W3C Accessibility Checkpoints also referenced greyscale usability as a benchmark. Though my content remains viewable in greyscale, some of my design elements become obscured.

Outside of the WAVE accessibility checker and W3C Guidelines, I identified the "Mansalva" font I used in the "sidenote" and "polaroid caption" on my site as difficult to read. I changed it to an Arial sans-serif, which still contrasts from the Times serif I use in the rest of the site. I also took out all of the transformations that caused canted angles and animation of my containers. Though I enjoy the whimsy and dynamic nature of this style, I acknowledge it causes some wonky text appearances and may otherwise represent a barrier to accessibility. There is something crisp and clean about resetting the angles, while preserving use of drop shadow maintains some of that collage aesthetic.

For my user testing, I asked the following questions:

1. Who have I cited as a "collage expert" and what museum do they work for?
2. What class have I created this website for? Number and class title?
3. Name three of my collage titles.

My user testing revealed a lack of top level descriptions on pages. "The Hobby" and "The Medium" as well as my subtitles "Collage, as tried by me" and "Collage, as told by experts" are clever and on theme, but don't thoroughly introduce the page to the user. I will either make my titles more descriptive, or add introductory sections to the front of each page in order to summarize what the page features.