#+date: [2025-11-14 Fri 19:46:30] #+title: WCAG Compliance: Accessibility as a Real Constraint #+description: How I've made this site compliant with WCAG 2. #+slug: wcag #+filetags: :audit:web: * WCAG 2 What are the Web Content Accessibility Guidelines (WCAG) 2 requirements? While the full list of WCAG requirements may seem intimidating, it's actually straightforward for a static site like =cleberg.net= if you are intentional about design. Luckily, they offer a [[https://www.w3.org/WAI/WCAG22/quickref/][Quick Reference]] guide that is much easier to parse than the full specification. So, while it wasn't onerous to push myself over the 100% threshold, I wanted to write about how my current website design contributed to my compliance rate and why WCAG is important. * Why WCAG? Before I dive into the specifics of how my website complies with these requirements, I wanted to touch on the importance of WCAG itself. There are three major reasons I wanted to implement the WCAG requirements on my website: 1. *Usability*: The main reason, which I've covered in numerous other blog posts about minimalism and design, is usability. I believe that our tech should always serve a purpose and I believe that the design of a tool should encapsulate that idea. Therefore, designing a website with intent leads to better usability, both by those with and without disabilities. 2. *Kindness*: What's better than designing a tool accessible by /everyone/? Personally, I love the idea that no matter who visits my website, they should experience the same content and same utility intended by the website. 3. *Future-Proofing*: Technology, include internet tools, are changing constantly. When a website is well-designed, reachable by all audiences, and utilitarian, it will be able to last longer or even "decay gracefully". * Implementing WCAG On My Website Since I do not implement JavaScript, forms, or multimedia content on my website, the list of items to implement was short. I'll go through some of the items that I considered during my manual verification of the site. If an item is not on this list, it is either *not applicable* or the native browser functionality covers the requirement and I do not implement any custom element that would require verification. - [1.1]: Text alternatives for non-text content (i.e., images) - For each image within my website, I made sure that alt-text was available. - [1.3.1]: Use Accessible Rich Internet Applications (ARIA) landmarks to identify regions of a page - ARIA landmarks are available for the navigation menu on my website, which is the only element I use which is recommended by WCAG to have an ARIA role. - [1.3.1]: Use semantic HTML elements to identify regions of a page - I have always used semantic HTML, but I reviewed my HTML templates to ensure I had coverage. In short, I use elements like =