We had a very short study group meeting for session 9, featuring 2 short topic: CSS Positioning (also known as Content Order and Meaning) & Pre-Recorded Media. You can also watch the recording on YouTube.
The Trusted Tester process builds on and explicitly references WCAG 2.0 as its foundation. For the accessibility topics covered in this session (content order, audio alternatives, and video alternatives) the content and conformance levels have remained consistent between WCAG 2.0 and 2.2 versions. As in previous sessions, I recommend referencing the latest standards.
While it may sound very technical, I assure you that the testing process is not.
This test ID asks a simple question: Does the reading order of the content remain understandable if CSS positioning is removed?
When the sequence in which content is presented affects its meaning, a correct reading sequence must be programmatically determined. In practice, this means checking if your layout holds up even if it’s stripped of its decorative CSS.
To verify this, we use the ANDI bookmarklet (specifically the “Focusable Elements” module):
Open the Advanced Settings within ANDI (hiding behind the gear icon).
Check the “Linearize Page” checkbox.
This removes CSS positioning on the page. Glowing turquoise boxes will appear around all elements previously positioned with CSS.
Review the linearized content. Does the sequence still make sense?
Passing Example: The content may shift positions visually, but the logical flow remains intact. For example, if a page lists “Products” and “Locations” side-by-side, removing CSS might move the “Locations” block below “Products”. If the list items (e.g. Telephones & Computers are still listed under Products) still logically follow their respective headers, then the page passes.
Failing Example: The removal of CSS results in a jumble where context is lost. If products and location names are mixed into a single, indistinguishable line (e.g., “Products Locations Telephones Wisconsin Computers Idaho”), the meaning gets lost. The user cannot distinguish which items belong to which category without the visual grouping.
It is acceptable for the layout to change, but it is not acceptable for the semantic relationship between headings and their content to be remixed into oblivion.
This will all be relevant to the next topic, so take notes!
For any prerecorded audio-only content (such as podcasts or interviews), this test ID checks if there is a text-based transcript that accurately represents the audio content.
A passing transcript must meet three specific criteria:
The transcript cannot be an image of the text. It must be selectable, copy-pasteable plain text. This allows users to adjust font size, contrast, or paste the text into assistive tools.
The transcript must match the audio exactly. It cannot omit information.
Speaker Identification: In dialogues, speakers must be identified by name before they speak (e.g., “Host Name: ... Guest Name: ...”).
Sounds: Relevant background noises (music, sirens, door slams) must be included if they contribute to the meaning of the content.
Questions to help determine if a sound is relevant:
Does the sound add pertinent information or cues? Some sounds contribute to setting the scene or adding additional explanation to the narration or dialogue. If so, the sound is relevant and should be included in the transcript.
If the sound was not part of the transcript, would a user lose some information? Would their experience change? If so, the sound is relevant and should be included in the transcript.
Is the sound irrelevant? While it is not required to include sounds in the transcript that convey no meaning, such as music playing in the background, relevant sounds must be included. An instance where music is relevant and needs to be included in the transcript is when the song “Jailhouse Rock” is heard during an interview with its performer, Elvis Presley.
Basic Accessibility Functionality: The method to access the transcript must work with pointing devices, keyboards, and screen readers.
This does not apply to synchronized media (but again: foreshadowing), static visual elements within a player, or non-content alerts like error beeps or notification sounds that also have a corresponding visual indicator.
Is there a text or audio alternative that provides an equivalent experience to the video? This is the counterpart to 16.A., specifically for prerecorded video-only content (video without sound). Since there is no audio track to convey the action, an alternative description is mandatory. You can satisfy this requirement by providing either:
An audio description that narrates the visual actions.
A detailed text transcript describing the visuals.
Just like with audio-only content, images of text do not count. The alternative must be modifiable (in size, color, and font) by the user.
The alternative must capture the meaning, not just the literal pixels. Consider the Banana Slug example from the course:
Weak: “A yellow slug moves.”
Strong: “A yellow banana slug sits on a mossy rock, slowly moving its retractable tentacles. The camera zooms out to show it stretching across a branch, then wrapping itself around the tree.”
The strong version includes the environment, the specific movements, and the context of the scene.
Exclude any video-only content intended as a media alternative for text if it is clearly labeled as such, since this type of video-only content presents no more information than what is already presented in text directly or via text alternatives.
If a sign language interpretation is clearly labeled as a media alternative for the text content itself (e.g., “Sign Language Version of Submission Guidelines”), it is excluded and noted as Not Tested.
Join the next session: GDG Vienna
Previous GDG Vienna Accessibility Webinar Series
Comments
Nothing yet. Say the first thing.
Sign in to join the conversation.