跳轉到

無障礙與互動

語意與減少動態

Semantics(role=None, label=None, description=None, reading_order=None, hidden=False)
rolestr | None預設值: None

ARIA 風格的角色,例如 "graphics-symbol"。

labelstr | None預設值: None

簡短的可存取名稱。

descriptionstr | None預設值: None

較長的說明。

reading_orderint | None預設值: None

線性閱讀時的順位,數字小的先讀;沒有順位的依場景順序接在後面。

hiddenbool預設值: False

標示純裝飾的物件。

每個節點的無障礙資料:角色、標籤、說明、閱讀順序,以及標示純裝飾物件的旗標。

AccessibilityInfo(
    title=None,
    description=None,
    alt_text=None,
    long_description=None,
    lang='en',
    reduced_motion=...,
)
titlestr | None預設值: None

動畫的標題。

descriptionstr | None預設值: None

簡短說明。

alt_textstr | None預設值: None

GIF 與圖片使用的簡短替代文字。

long_descriptionstr | None預設值: None

完整的文字替代內容。

langstr預設值: "en"

文字的語言標籤。

reduced_motionReducedMotion預設值: ...

觀看者要求減少動態時要顯示的內容。

整段動畫的標題、說明、替代文字、語言與減少動態的處理方式。

ReducedMotion(mode='final', time=None)
modestr預設值: "final"

"final"、"first" 或 "time"。

timefloat | None預設值: None

動畫中的秒數;只在 mode="time" 時有效。

決定觀看者要求減少動態時,用哪個靜止畫面取代自動播放:最後一格、第一格,或指定的某個時間。

ReducedMotion 對應網頁平台的 prefers-reduced-motion 偏好設定 {W3C} (2026)。它是作者設計的替代內容,不是自動降低影格率。觀看者主動要求時,仍然可以播放。

from kinetickit import AccessibilityInfo, ReducedMotion, Semantics

semantics = Semantics(role="graphics-symbol", label="Start", reading_order=1)
info = AccessibilityInfo(
    title="Reaching the goal",
    description="A dot travels to a target",
    long_description="A dot starts at the lower left and moves to the upper right.",
    reduced_motion=ReducedMotion("time", 1.0),
)

SVG 與 HTML 會保留標題、說明、穩定的物件編號與各節點的語意。HTML 另外提供可用鍵盤操作的控制項與依閱讀順序排列的物件清單。GIF 無法攜帶這些執行時的語意,所以要求 GIF 輸出無障礙內容時,必須提供文字說明,並可回傳代表性 PNG。

互動

互動是資料,指定某個節點上的事件和要執行的動作。KineticKit 在寫出任何檔案之前,會拿場景的節點編號與標記逐一驗證每個綁定。

Event(*values)

可攜式的觸發事件:HOVER_ENTER、HOVER_LEAVE、CLICK、DBLCLICK、FOCUS、SELECT、DESELECT、CAMERA_CHANGE 或 PLAYBACK_END。

Binding(event, actions, target=None, required=False)

把一個事件接到只含資料的動作,並標明這個互動是否為必要。

InteractionSpec(bindings=(), ranges=...)

經過驗證的綁定集合,加上 PlayRange 能播放的具名時間區間。

from kinetickit.interaction import Binding, Event, InteractionSpec, PlayRange, Select, SetProperty

interactions = InteractionSpec(
    (
        Binding(Event.CLICK, (PlayRange("run"),), "a"),
        Binding(Event.CLICK, (Select(mode="toggle"), SetProperty(None, "opacity", 0.6)), "b"),
    ),
    {"run": (0.0, 2.0)},
)

PlayRange(name='')
namestr預設值: ''

InteractionSpec.ranges 中的區間名稱。

播放具名時間區間的動作。

Select(target=None, mode='toggle')
targetstr | None預設值: None

節點編號,None 表示被點到的節點。

modestr預設值: 'toggle'

"select"、"deselect" 或 "toggle"。

選取、取消選取或切換節點的動作。

SetProperty(target=None, property='opacity', value=1.0)
targetstr | None預設值: None

節點編號,None 表示被點到的節點。

propertystr預設值: 'opacity'

屬性名稱。

valuefloat | bool預設值: 1.0

新的值。

設定節點屬性(例如不透明度)的動作。

動作有 Play、Pause、Seek、PlayRange、Select、SetProperty、Toggle、SetSpeed、Reverse 與 ResetCamera。標了 required=True 的綁定,在所選格式無法執行時,會在輸出之前就失敗;選用的綁定則會被捨棄,並在輸出清單的 degraded 列出。SVG 與 GIF 依政策捨棄互動,HTML 才會執行。

互動範例在一個兩點場景上同時用到兩半功能。

留言