cmc/cleberg.net
My personal web garden & blog.
clone: git clone https://gitbay.org/cmc/cleberg.net.git
main: content/blog/2025-11-13-wcag.org · raw
1#+date: [2025-11-14 Fri 19:46:30]
2#+title: WCAG Compliance: Accessibility as a Real Constraint
3#+description: How I've made this site compliant with WCAG 2.
4#+slug: wcag
5#+filetags: :audit:web:
6
7* WCAG 2
8
9What are the Web Content Accessibility Guidelines (WCAG) 2 requirements?
10
11While the full list of WCAG requirements may seem intimidating, it's actually
12straightforward for a static site like =cleberg.net= if you are intentional
13about design. Luckily, they offer a [[https://www.w3.org/WAI/WCAG22/quickref/][Quick Reference]] guide that is much easier to
14parse than the full specification.
15
16So, while it wasn't onerous to push myself over the 100% threshold, I wanted to
17write about how my current website design contributed to my compliance rate and
18why WCAG is important.
19
20* Why WCAG?
21
22Before I dive into the specifics of how my website complies with these
23requirements, I wanted to touch on the importance of WCAG itself.
24
25There are three major reasons I wanted to implement the WCAG requirements on my
26website:
27
281. *Usability*: The main reason, which I've covered in numerous other blog posts
29 about minimalism and design, is usability. I believe that our tech should
30 always serve a purpose and I believe that the design of a tool should
31 encapsulate that idea. Therefore, designing a website with intent leads to
32 better usability, both by those with and without disabilities.
332. *Kindness*: What's better than designing a tool accessible by /everyone/?
34 Personally, I love the idea that no matter who visits my website, they should
35 experience the same content and same utility intended by the website.
363. *Future-Proofing*: Technology, include internet tools, are changing
37 constantly. When a website is well-designed, reachable by all audiences, and
38 utilitarian, it will be able to last longer or even "decay gracefully".
39
40* Implementing WCAG On My Website
41
42Since I do not implement JavaScript, forms, or multimedia content on my website,
43the list of items to implement was short.
44
45I'll go through some of the items that I considered during my manual
46verification of the site. If an item is not on this list, it is either *not
47applicable* or the native browser functionality covers the requirement and I do
48not implement any custom element that would require verification.
49
50- [1.1]: Text alternatives for non-text content (i.e., images)
51 - For each image within my website, I made sure that alt-text was
52 available.
53- [1.3.1]: Use Accessible Rich Internet Applications (ARIA) landmarks to
54 identify regions of a page
55 - ARIA landmarks are available for the navigation menu on my website,
56 which is the only element I use which is recommended by WCAG to have
57 an ARIA role.
58- [1.3.1]: Use semantic HTML elements to identify regions of a page
59 - I have always used semantic HTML, but I reviewed my HTML templates to
60 ensure I had coverage. In short, I use elements like =<nav>=,
61 =<main>=, =<article>=, and =<footer>= instead of =<div>= elements.
62- [1.4.1]: Use a color with a relative luminance difference of 3:1 or greater
63 - When choosing the color palettes for this site, I ensured that all
64 were at least AA compliant and in most cases, AAA compliant.
65- [1.4.4]: Use em (or rem) units for font sizes
66 - All sizing on this site uses =rem= sizing.
67- [2.4.1]: Create links to skip blocks of repeated material
68 - I created a =skip-to-content= link hidden at the top each web page
69 that allows keyboard or screen reader users to skip the navigation
70 block.
71- [2.4.6]: Provide descriptive headings
72 - Each page contains hierarchical headers starting at =<h1>=.
73- [3.1.1]: Use the language attribute on the HTML element
74 - Each pages is defined with =<html lang=en-us>=.
75- [3.1.4]: Provide an expansion of an abbreviation on the first occurrence
76 - To the best of my ability, I have been reviewing all historical posts
77 on this site and expanding abbreviations upon first use.
78- [3.2]: Make web pages appear and operate in predictable ways
79 - This, and many other requirements, are resolved by a combination of
80 (1) native browser functionality which works as expected since I am
81 using semantic HTML, and (2) my use of a structure outline and logical
82 content flow on each page of the site.
83
84* Results
85
86#+caption: IBM Equal Access Accessibility Checker
87#+attr_html: :alt Results from the IBM Equal Access Accessibility Checker, showing 94% confirmed compliance, with the remaining manually confirmed.
88[[https://img.cleberg.net/blog/20251113-wcag/accessibility_assessment.webp]]
89
90To confirm compliance, I chose /not/ to use one of the "free" accessibility
91checker websites, since they often only test one page at a time, take a while to
92run, and I just generally don't enjoy scanning my website with random services.
93
94Instead, I used the [[https://www.ibm.com/able/toolkit/tools/#develop][IBM Equal Access Accessibility Checker]] extension on Firefox.
95This allowed me to scan each page I wanted, stored my scans, and provided
96in-depth results with links to guidance and suggestions for fixing each issue.
97
98This was great as it showed me a handful of issues I hadn't caught previously.
99However, the image above shows that my site is 94% compliant through *automated*
100checks and I manually verified the remaining 6% of checks.
101
102I performed these scans for all top-level pages on my website (home, about,
103blog, services, about, salary, and now), as well as the three latest blog posts
104to confirm compliance.
105
106I'd love to test 100% of every page of my website one day and will continue to
107strive to enhance my compliance with ARIA and WCAG.