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. | ||