I test this site against WCAG 2.2 Level AA and keep every result here, including the criteria it does not meet yet.
Results
| Website | ivankristianto.com |
|---|---|
| Standard | Web Content Accessibility Guidelines (WCAG) 2.2 |
| Target level | Level AA |
| Current status | Partially conforms to Level AA |
| Breakdown | Pass 29, Fail 2, Not tested 10, N/A 14 (of 55 criteria) |
| Test date | |
| Build tested | The release that adds this page, tested on a local build before it went live. I will retest on the live site. |
| Views tested | Home, the articles archive, a long article with code and images, resume, about, contact, the 404 page and this page, each at 1440px and 390px, plus the command palette and the mobile menu. A content scan of all 490 posts for alt text, tables, embedded media, link text and headings. |
| Method | axe-core 4.10.2 with the WCAG 2.2 A and AA rules, a keyboard-only pass through every view, browser text size at 20 to 32px, 200% and 400% zoom, reflow at 320px, the WCAG text-spacing overrides, reduced motion, contrast computed from the theme colors, and a source review. No screen reader pass yet. |
| Tested by | Ivan Kristianto |
Success criteria
All 55 Level A and AA success criteria in WCAG 2.2, grouped by principle. Each result is one of:
- Pass
- The site meets the criterion.
- Fail
- Something on the site does not meet it. It stays Fail until the fix is live.
- Not tested
- Not checked yet, or only partly. It does not count as a pass.
- N/A
- Nothing on the site is covered by it. WCAG counts this as met.
1. Perceivable
| Criterion | Result and notes |
|---|---|
| 1.1.1 · A Non-text Content | Fail Theme images and icons have text alternatives or are hidden as decoration. 31 images in 14 older posts, mostly screenshots and event photos, have no alt text. Six posts from 2010 and 2011 embed Flash players that no longer play and have no text alternative. |
| 1.2.1 · A Audio-only and Video-only (Prerecorded) | Not tested 39 posts embed YouTube videos. I have not checked whether any of them is audio-only or video-only. |
| 1.2.2 · A Captions (Prerecorded) | Not tested Captions on the 39 embedded YouTube videos are not checked yet. |
| 1.2.3 · A Audio Description or Media Alternative (Prerecorded) | Not tested Not checked for the embedded videos yet. |
| 1.2.4 · AA Captions (Live) | N/A There is no live audio or video. |
| 1.2.5 · AA Audio Description (Prerecorded) | Not tested Not checked for the embedded videos yet. |
| 1.3.1 · A Info and Relationships | Fail Templates use landmarks, headings in order, real lists and labelled controls. One older post has a table of Google search operators whose header row uses ordinary cells. 50 older posts jump from the title to an h3; WCAG allows that, but I will fix it too. |
| 1.3.2 · A Meaningful Sequence | Not tested Source order matches the visual order in every template. Still to confirm with a screen reader. |
| 1.3.3 · A Sensory Characteristics | Not tested Theme copy never relies on shape, size or position. Instructions in older posts are not reviewed yet. |
| 1.3.4 · AA Orientation | Pass Nothing locks the orientation. Every view works in portrait and landscape. |
| 1.3.5 · AA Identify Input Purpose | N/A The only field is search, which asks nothing about you. |
| 1.4.1 · A Use of Color | Pass Links in running text are underlined. Status labels, filters and the current page all carry text, not color alone. |
| 1.4.2 · A Audio Control | N/A Nothing plays audio on its own. |
| 1.4.3 · AA Contrast (Minimum) | Pass Every text color clears 4.5:1 on each background it sits on. The lowest pair is 5.75:1. |
| 1.4.4 · AA Resize Text | Pass All type is set in rem and follows the browser text size. With the default at 20 to 32px and at 200% zoom, nothing is cut off or scrolls sideways. |
| 1.4.5 · AA Images of Text | Pass The theme renders all text as text. Screenshots in posts show software as it appears, which the criterion allows. |
| 1.4.10 · AA Reflow | Pass No view scrolls sideways at 320px. Code blocks and tables wrap instead. |
| 1.4.11 · AA Non-text Contrast | Pass The focus ring measures 7.29:1 against the page. Controls are identified by their text, so their light borders carry no meaning on their own. |
| 1.4.12 · AA Text Spacing | Pass With the WCAG spacing overrides applied, no text is cut off or overlaps on any view. |
| 1.4.13 · AA Content on Hover or Focus | N/A Nothing appears on hover or focus. |
2. Operable
| Criterion | Result and notes |
|---|---|
| 2.1.1 · A Keyboard | Pass Navigation, the command palette, the mobile menu, the article filters and the image lightbox all work from the keyboard. |
| 2.1.2 · A No Keyboard Trap | Pass Tab reaches the end of every view. The mobile menu and the palette hold focus while open and release it on Escape. |
| 2.1.4 · A Character Key Shortcuts | N/A The only shortcut is Cmd+K or Ctrl+K, which needs a modifier key. |
| 2.2.1 · A Timing Adjustable | N/A Nothing has a time limit. |
| 2.2.2 · A Pause, Stop, Hide | Not tested The blinking cursor and status dots stop within five seconds, and nothing blinks with reduced motion on. Ten older posts include GIFs that are not checked yet. |
| 2.3.1 · A Three Flashes or Below Threshold | Not tested The theme never flashes. The GIFs in ten older posts are not checked yet. |
| 2.4.1 · A Bypass Blocks | Pass A skip link is the first stop and moves focus to the main content. |
| 2.4.2 · A Page Titled | Pass Every view has a title that names it, such as "Resume – Ivan" and "Page not found – Ivan". |
| 2.4.3 · A Focus Order | Pass Focus follows the visual order. On phones the Resume button comes before the menu button in both the layout and the tab order. |
| 2.4.4 · A Link Purpose (In Context) | Not tested Theme links name where they go. 97 links in 75 older posts read "here" or "click here"; most sentences give the context, but I have not checked each one. |
| 2.4.5 · AA Multiple Ways | Pass Main navigation, the command palette search, topic and tag archives, and the footer. |
| 2.4.6 · AA Headings and Labels | Pass Headings and labels describe their section or control. |
| 2.4.7 · AA Focus Visible | Pass Every focus stop shows a 2px ring in the accent color with a 3px offset. |
| 2.4.11 · AA Focus Not Obscured (Minimum) | Pass No sticky header or banner covers the focused element. While the mobile menu is open, focus stays inside it. |
| 2.5.1 · A Pointer Gestures | N/A Nothing needs a multi-point or path-based gesture. |
| 2.5.2 · A Pointer Cancellation | Pass Links and buttons act on release, the browser default. |
| 2.5.3 · A Label in Name | Pass Each accessible name contains the visible label. The menu button reads "menu" and is named "Open menu". |
| 2.5.4 · A Motion Actuation | N/A Nothing responds to device motion. |
| 2.5.7 · AA Dragging Movements | N/A Nothing is dragged. |
| 2.5.8 · AA Target Size (Minimum) | Pass Most targets are 44px tall. The 32px footer icons and filter pills meet the spacing exception. |
3. Understandable
| Criterion | Result and notes |
|---|---|
| 3.1.1 · A Language of Page | Pass Every page declares English (en-US). |
| 3.1.2 · AA Language of Parts | Pass Posts are in English. Indonesian event and company names are proper names, which the criterion exempts. |
| 3.2.1 · A On Focus | Pass Focusing a control never opens anything or moves the page. |
| 3.2.2 · A On Input | Pass The article filters are links, so nothing changes until you follow one. |
| 3.2.3 · AA Consistent Navigation | Pass Every view shares one header and footer, in the same order. |
| 3.2.4 · AA Consistent Identification | Pass Controls that do the same thing have the same name everywhere. |
| 3.2.6 · A Consistent Help | Pass Contact sits in the main navigation of every page, in the same place. |
| 3.3.1 · A Error Identification | N/A No field can produce an input error. |
| 3.3.2 · A Labels or Instructions | Pass The search field in the command palette is labelled. |
| 3.3.3 · AA Error Suggestion | N/A No field can produce an input error. |
| 3.3.4 · AA Error Prevention (Legal, Financial, Data) | N/A There are no legal, financial or data forms. |
| 3.3.7 · A Redundant Entry | N/A Nothing asks for the same information twice. |
| 3.3.8 · AA Accessible Authentication (Minimum) | N/A Public pages have no login. |
4. Robust
| Criterion | Result and notes |
|---|---|
| 4.1.2 · A Name, Role, Value | Not tested axe finds no name, role or value problems, and the keyboard checks pass. Still to confirm with a screen reader. |
| 4.1.3 · AA Status Messages | Pass The command palette announces its result count, such as "8 results.", without moving focus. |
Next steps
- Write alt text for the 31 images and replace the six Flash embeds.
- Add header cells to the search operators table.
- Check the GIFs, and the captions on the embedded videos.
- Review link text and instructions in older posts.
- Test with VoiceOver and NVDA.
- Retest on the live site after this release and update this page.
Report a problem
If something on this site gets in your way, email me at [email protected]. Tell me the page and what happened, and I will fix it or tell you why I can't yet.