Commit ab1d0a88a5
Unsigned
Layout: unified · split
content/blog/2025-11-13-wcag.org added +80
| @@ -0,0 +1,80 @@ | ||
| 1 | #+date: <2025-11-13 Thu 18:16:40> | |
| 2 | #+title: Striving for 100% WCAG 2 Requirements | |
| 3 | #+description: Read on to learn more about how I've ensured my humble site is compliant with WCAG 2. | |
| 4 | #+slug: wcag | |
| 5 | ||
| 6 | * WCAG 2 | |
| 7 | ||
| 8 | What are the Web Content Accessibility Guidelines (WCAG) 2 requirements? | |
| 9 | ||
| 10 | While the full list of WCAG requirements may seem intimidating, it's actually | |
| 11 | straightforward for a static site like =cleberg.net= if you are intentional | |
| 12 | about design. Luckily, they offer a [[https://www.w3.org/WAI/WCAG22/quickref/][Quick Reference]] guide that is much easier to | |
| 13 | parse than the full specification. | |
| 14 | ||
| 15 | So, while it wasn't onerous to push myself over the 100% threshold, I wanted to | |
| 16 | write about how my current website design contributed to my compliance rate and | |
| 17 | why WCAG is important. | |
| 18 | ||
| 19 | * Why WCAG? | |
| 20 | ||
| 21 | Before I dive into the specifics of how my website complies with these | |
| 22 | requirements, I wanted to touch on the importance of WCAG itself. | |
| 23 | ||
| 24 | There are three major reasons I wanted to implement the WCAG requirements on my | |
| 25 | website: | |
| 26 | ||
| 27 | 1. *Usability*: The main reason, which I've covered in numerous other blog posts | |
| 28 | about minimalism and design, is usability. I believe that our tech should | |
| 29 | always serve a purpose and I believe that the design of a tool should | |
| 30 | encapsulate that idea. Therefore, designing a website with intent leads to | |
| 31 | better usability, both by those with and without disabilities. | |
| 32 | 2. *Kindness*: What's better than designing a tool accessible by /everyone/? | |
| 33 | Personally, I love the idea that no matter who visits my website, they should | |
| 34 | experience the same content and same utility intended by the website. | |
| 35 | 3. *Future-Proofing*: Technology, include internet tools, are changing | |
| 36 | constantly. When a website is well-designed, reachable by all audiences, and | |
| 37 | utilitarian, it will be able to last longer or even "decay gracefully". | |
| 38 | ||
| 39 | * Implementing WCAG On My Website | |
| 40 | ||
| 41 | Since I do not implement JavaScript, forms, or multimedia content on my website, | |
| 42 | the list of items to implement was short. | |
| 43 | ||
| 44 | I'll go through some of the items that I considered during my manual | |
| 45 | verification of the site. If an item is not on this list, it is either *not | |
| 46 | applicable* or the native browser functionality covers the requirement and I do | |
| 47 | not implement any custom element that would require verification. | |
| 48 | ||
| 49 | - [1.1]: Text alternatives for non-text content (i.e., images) | |
| 50 | - For each image within my website, I made sure that alt-text was | |
| 51 | available. | |
| 52 | - [1.3.1]: Use ARIA landmarks to identify regions of a page | |
| 53 | - ARIA landmarks are available for the navigation menu on my website, | |
| 54 | which is the only element I use which is recommended by WCAG to have | |
| 55 | an ARIA role. | |
| 56 | - [1.3.1]: Use semantic HTML elements to identify regions of a page | |
| 57 | - I have always used semantic HTML, but I reviewed my HTML templates to | |
| 58 | ensure I had coverage. In short, I use elements like =<nav>=, | |
| 59 | =<main>=, =<article>=, and =<footer>= instead of =<div>= elements. | |
| 60 | - [1.4.1]: Use a color with a relative luminance difference of 3:1 or greater | |
| 61 | - When choosing the color palettes for this site, I ensured that all | |
| 62 | were at least AA compliant and in most cases, AAA compliant. | |
| 63 | - [1.4.4]: Use em (or rem) units for font sizes | |
| 64 | - All sizing on this site uses =rem= sizing. | |
| 65 | - [2.4.1]: Create links to skip blocks of repeated material | |
| 66 | - I created a =skip-to-content= link hidden at the top each web page | |
| 67 | that allows keyboard or screen reader users to skip the navigation | |
| 68 | block. | |
| 69 | - [2.4.6]: Provide descriptive headings | |
| 70 | - Each page contains hierarchical headers starting at =<h1>=. | |
| 71 | - [3.1.1]: Use the language attribute on the HTML element | |
| 72 | - Each pages is defined with =<html lang=en-us>=. | |
| 73 | - [3.1.4]: Provide an expansion of an abbreviation on the first occurrence | |
| 74 | - To the best of my ability, I have been reviewing all historical posts | |
| 75 | on this site and expanding abbreviations upon first use. | |
| 76 | - [3.2]: Make web pages appear and operate in predictable ways | |
| 77 | - This, and many other requirements, are resolved by a combination of | |
| 78 | (1) native browser functionality which works as expected since I am | |
| 79 | using semantic HTML, and (2) my use of a structure outline and logical | |
| 80 | content flow on each page of the site. | |