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 | #+title: Striving for 100% WCAG 2 Compliance | 2 | #+title: Striving for 100% WCAG 2 Compliance |
| 3 | #+description: Read on to learn more about how I've ensured my humble site is compliant with WCAG 2. | 3 | #+description: Read on to learn more about how I've ensured my humble site is compliant with WCAG 2. |
| 4 | #+slug: wcag | 4 | #+slug: wcag |
| @@ -49,7 +49,8 @@ not implement any custom element that would require verification. | |||
| 49 | - [1.1]: Text alternatives for non-text content (i.e., images) | 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 | 50 | - For each image within my website, I made sure that alt-text was |
| 51 | available. | 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 | - ARIA landmarks are available for the navigation menu on my website, | 54 | - 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 | which is the only element I use which is recommended by WCAG to have |
| 55 | an ARIA role. | 56 | an ARIA role. |
| @@ -78,3 +79,28 @@ not implement any custom element that would require verification. | |||
| 78 | (1) native browser functionality which works as expected since I am | 79 | (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 | using semantic HTML, and (2) my use of a structure outline and logical |
| 80 | content flow on each page of the site. | 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. | ||