Commit 03531b9b00
Unsigned
Layout: unified · split
content/blog/2025-11-13-wcag.org +28 −2
| @@ -1,4 +1,4 @@ | ||
| 1 | #+date: <2025-11-13 Thu 18:16:40> | |
| 1 | #+date: <2025-11-14 Fri 19:46:30> | |
| 2 | 2 | #+title: Striving for 100% WCAG 2 Compliance |
| 3 | 3 | #+description: Read on to learn more about how I've ensured my humble site is compliant with WCAG 2. |
| 4 | 4 | #+slug: wcag |
| @@ -49,7 +49,8 @@ not implement any custom element that would require verification. | ||
| 49 | 49 | - [1.1]: Text alternatives for non-text content (i.e., images) |
| 50 | 50 | - For each image within my website, I made sure that alt-text was |
| 51 | 51 | available. |
| 52 | - [1.3.1]: Use ARIA landmarks to identify regions of a page | |
| 52 | - [1.3.1]: Use Accessible Rich Internet Applications (ARIA) landmarks to | |
| 53 | identify regions of a page | |
| 53 | 54 | - ARIA landmarks are available for the navigation menu on my website, |
| 54 | 55 | which is the only element I use which is recommended by WCAG to have |
| 55 | 56 | an ARIA role. |
| @@ -78,3 +79,28 @@ not implement any custom element that would require verification. | ||
| 78 | 79 | (1) native browser functionality which works as expected since I am |
| 79 | 80 | using semantic HTML, and (2) my use of a structure outline and logical |
| 80 | 81 | content flow on each page of the site. |
| 82 | ||
| 83 | * Results | |
| 84 | ||
| 85 | #+caption: IBM Equal Access Accessibility Checker | |
| 86 | #+attr_html: :alt Results from the IBM Equal Access Accessibility Checker, showing 94% confirmed compliance, with the remaining manually confirmed. | |
| 87 | [[https://img.cleberg.net/blog/20251113-wcag/accessibility_assessment.webp]] | |
| 88 | ||
| 89 | To confirm compliance, I chose /not/ to use one of the "free" accessibility | |
| 90 | checker websites, since they often only test one page at a time, take a while to | |
| 91 | run, and I just generally don't enjoy scanning my website with random services. | |
| 92 | ||
| 93 | Instead, I used the [[https://www.ibm.com/able/toolkit/tools/#develop][IBM Equal Access Accessibility Checker]] extension on Firefox. | |
| 94 | This allowed me to scan each page I wanted, stored my scans, and provided | |
| 95 | in-depth results with links to guidance and suggestions for fixing each issue. | |
| 96 | ||
| 97 | This was great as it showed me a handful of issues I hadn't caught previously. | |
| 98 | However, the image above shows that my site is 94% compliant through *automated* | |
| 99 | checks and I manually verified the remaining 6% of checks. | |
| 100 | ||
| 101 | I performed these scans for all top-level pages on my website (home, about, | |
| 102 | blog, services, about, salary, and now), as well as the three latest blog posts | |
| 103 | to confirm compliance. | |
| 104 | ||
| 105 | I'd love to test 100% of every page of my website one day and will continue to | |
| 106 | strive to enhance my compliance with ARIA and WCAG. | |