Details on WCAG 2.2 conformance - Seirdy


Every WCAG 2.2 success criterion, and how seirdy.one achieves it. I list techniques I used and areas for improvement. This page is a work in progress



Onion Details



Page Clicks: 0

First Seen: 03/11/2024

Last Indexed: 10/21/2024

Domain Index Total: 190



Onion Content



I made full conformance with the AA level and partial conformance with AAA a goal in my site’s accessibility statement. I use the following abbreviations: SC Success criterion. A requirement listed in the WCAG. ST Sufficient technique; a technique that meets a given success criterion. Toggle table of contents Principle 1: Perceivable Guideline 1.1: Text Alternatives SC 1.1.1: Non-Text Content All non-text content on my site has a text alternative. Images have alt-text ( ST H37 ). I provide image and audio transcripts using aria-describedby when relevant ( ST ARIA15 and ST G74 ). Form controls have elements ( ST H44 ). This covers SC 1.1.1’s situations A, B, C, and D. Situation E is irrelevant, as my site has no CAPTCHAs. For situation F: I hide my avatar using null alt-text ( ST H67 ) and use aria-hidden on one instance of decorative emoji. Guideline 1.2: Time-based Media SC 1.2.1: Audio-only and Video-only (Prerecorded) My site doesn’t have any video, but does feature one element. The element has a full transcript and information on how it was created ( ST G158 ). SC 1.2.2: Captions (Prerecorded) This SC is only applicable to synchronized media, which is not present on this site. SC 1.2.3: Audio Description or Media Alternative (Prerecorded) I provide an alternative for time-based media in the form of a full audio transcript. There is no video content on this site. SC 1.2.4: Captions (Live) SC 1.2.9: Audio-only (Live) These criteria are only applicable to live media. There is no live media on this site. SC 1.2.5: Audio Description (Prerecorded) SC 1.2.7 Extended Audio Description (Prerecorded) These criteria are only applicable to prerecorded video in synchronized media, which is not present on this site. SC 1.2.6: Sign Language (Prerecorded) This SC is only applicable to synchronized media, which is not present on this site. However, I think it should apply to audio-only tracks too. The only element on this site is a text-to-speech recording intended to demonstrate what a certain speech synthesizer sounds like, rendering the WCAG’s stated benefits of sign language interpretation moot ( the ability to provide intonation, emotion and other audio information that is reflected in sign language interpretation, but not in captions ). SC 1.2.8: Media Alternative (Prerecorded) As mentioned for SC 1.2.1, I provide both a full transcript and short description for an element. I also link a page containing the text of the audio. There is no video on this site. Guideline 1.3: Adaptable SC 1.3.1: Info and Relationships I’ve made extensive efforts to meet this SC. I use aria-labelledby and/or headings to label sections ( ST ARIA11 , ST H42 ), and always use semantic elements where appropriate: ST G115: Using semantic elements to mark up structure ST H49: Using semantic markup to mark emphasized or special text ST H44: Using label elements to associate text labels with form controls ST H71: Providing a description for groups of form controls using fieldset and legend elements ST H48: Using ol , ul and dl for lists or groups of links ST H97: Grouping related links using the nav element SC 1.3.2: Meaningful Sequence Every page on this site follows a single-column layout that flows top-to-bottom, left-to-right. The source, DOM, and visual orders are all identical ( ST C27 ). I regularly test my pages without CSS to ensure that the order of the content remains logical (this passes ST G57’s testing procedure ). SC 1.3.3: Sensory Characteristics When possible, I convey information semantically. If that’s ever impossible, I use text. I never refer to parts of a page spatially (e.g. “the section above”) when I can instead refer to the parts sequentially (“the previous section”). The testing procedure used to comply with SC 1.3.2 applies here as well. Any items requiring sensory information (audio, images, etc.) also have textual alternatives ( ST G96 ). SC 1.3.4: Orientation No content on this site restricts orientation. SC 1.3.5: Identify Input Purpose I use autocomplete attributes wherever appropriate ( ST H98 ), and use type attributes to specify acceptable values. SC 1.3.6: Identify Purpose This site uses no icons; all interactive elements are represented textually. I use WAI-ARIA ( ST ARIA11 ) and DPUB-ARIA to identify sections of a page, and I use microdata with schema.org vocabulary (I’m not sure if any assistive technologies actually use microdata, but it’s a part of WCAG for some reason). Required inputs receive a required attribute; SC 1.3.6 describes use of the older aria-required attribute as an advisory technique. Guideline 1.4: Distinguishable SC 1.4.1: Use of Color I do not set any custom colors for the default stylesheet. Users who opt into a dark palette by broadcasting a dark preference to the prefers-color-scheme media query will get custom colors which map directly onto an element’s semantics. SC 1.4.2: Audio control Absolutely no auto-playing media of any kind is present on this site. SC 1.4.3: Contrast (minimum) SC 1.4.6: Contrast (enhanced) I use the Accessible Perceptual Contrast Algorithm (APCA) to measure contrast, and I ensure that all elements meet or gently surpass acceptable contrast ratios for their size at AAA-equivalent levels. I also pass these criteria using the legacy WCAG contrast algorithm. SC 1.4.4: Resize Text With the exception of borders and certain margins, I only use relative units in my stylesheets by using em units ( ST C28 ) or percent ( ST C12 ). Zoom works well up to 200% at well below this SC’s minimum page width, for both standard zoom and zooming text only ( ST G179 ). When setting the content widths of article bodies with em , I still ensure that the average line length is 80 characters or shorter ( Advisory technique C20 ). SC 1.4.5: Images of Text SC 1.4.9: Images of Text (no exception) I only include images of text when the visual presentation of the text is what I wish to convey (i.e., it meets the requirements for being “essential”). If the text content in the image is at all significant, I include a full transcript that’s semantically linked to the image using aria-describedby ( ST G140 ). SC 1.4.7: Low or No Background Audio The only audio present on this site contains no background audio. SC 1.4.8: Visual Presentation Users can opt into a dark color palette using the prefers-color-scheme media feature; otherwise, all colors are specified by the user-agent’s default stylesheets ( ST G148 ). The dark color palette only specifies a single background color for the entire document, and may eventually specify higher-contrast background colors for elements with small text (e.g. superscripts). Rather than use background colors to delineate regions, I use borders and white space ( ST C25 ). I use relative measurements to ensure that the average line-length is 80 characters or less for long body text ( ST C20 ) I do not use justified text anywhere on this site; all text alignment is done according to the user-agent’s default stylesheet. I specify a line-spacing of 1.5 in CSS ( ST C21 ) I use liquid layout ( ST G146 ) with percent font sizes ( ST C12 ). I only specify one base font size for the page; all elements obey that scale-factor according to the user-agent’s stylesheet. SC 1.4.10: Reflow I surpass this requirement by a wide margin (pun intended). A viewport width of under 240 px (typically much less) should not trigger horizontal scrolling. 240 px is the typical width of a smart feature phone running KaiOS. Any content that must be wider is confined to a single horizontally-scrollable block (e.g. elements), so that users can switch between horizontal and vertical scrolling without having to resort to two-dimensional scrolling for the entire document. All content is single-column on any viewport. SC 1.4.11: Non-text Contrast I supply a focus indicator with excellent contrast ( ST G195 ) and give all graphics a border, should their background colors blend into the page background. Borders follow guidelines for non-text contrast. Any graphic containing text that must be read also has a transcript available. SC 1.4.12: Text Spacing My entire stylesheet is optional, and overrides of anything related to the forms of spacing or sizing covered by the SC should not cause any issues. Furthermore, I set line spacing to 1.5 using CSS ( ST C21 ). I do not set word, letter, and paragraph spacing; these are all set by the user-agent. SC 1.4.13: Content on Hover or Focus The only content available on hover is content exposed by a title attribute. I ensure that this content is not made exclusively available through the title attribute; it must also be visible in the surrounding text, or previously in the document. Moreover: content exposed by the title attribute is actually an exception listed by this SC, so I pass. Principle 2: Operable I fully pass all guidelines under Principle 2 at the A and AA levels. SC 2.4.9 Link Purpose (link only) (AAA) is an ongoing work-in-progress, but should be mostly met. I pass all other AAA-level criteria. Guideline 2.1: Keyboard Accessible SC 2.1.1: Keyboard SC 2.1.3: Keyboard (No exception) I don’t use any scripts, only vanilla HTML elements and their built-in functionality ( ST H91 ). Additionally, I ensure that non-interactive but horizontally-scrollable elements are focusable, such as elements. SC 2.1.2: No Keyboard Trap Nothing on this site can trigger a keyboard trap in a compliant browser, as I only use vanilla (X)HTML elements. SC 2.1.4: Character Key Shortcuts I do not implement any custom keyboard shortcuts for this site (I don’t use scripts or access keys), so I pass this SC. Guideline 2.2: Enough Time SC 2.2.1: Timing Adjustable SC 2.2.3: No Timing No elements except an element have timing. The element uses browser-native controls; these should include speed adjustments and a mechanism to play, pause, and re-wind. SC 2.2.2: Pause, Stop, Hide SC 2.2.4: Interruptions My site has no elements that automatically move, blink, scroll, auto-update, or interrupt the user. SC 2.2.5: Re-authenticating SC 2.2.6: Timeouts No authentication is required to use public-facing portions of this site. All requests are idempotent, deterministic, and require no client authorization; there’s naturally no reason for timeouts. Guideline 2.3 Seizures and Physical Reactions There is absolutely no animation or flashing content on any of my pages, save for browser-native progress-bars in elements or scrolling. Both of these follow user defaults. I pass all three SC for this guideline. Guideline 2.4: Navigable SC 2.4.1: Bypass Blocks I use navigation landmarks and headings to bypass blocks. This includes ST ARIA11 and ST H69 . I also follow advisory techniques C6: Positioning content based on structural markup and H97: Grouping related links using the nav element . Later, I also adopted ST G1 by adding a skip-link to jump to the main content SC 2.4.2: Page Titled All pages use the...