Accessible by Design / Keynote in development

Access Is the Interface

Creative coding, accessibility, and human authority in the age of AI.

By Adekemi (Kemi) Hanna Sijuwade-Ukadike

A story-world as a design space

A garden inside the lab

UMADA is my Afrofuturist speculative-fiction project. This garden is part of a laboratory where scientists have made chimera children through many kinds of technology. We do not need to explain the science to enter the story: these children are living, growing people, learning what their changing bodies can do and what they need.

No two bodies in the garden are alike. Each has its own capacities, limits, and ways of sensing. A child may travel on wheels, use a responsive prosthetic limb, or notice the world through vibration, sound, light, or touch. They are learning their bodies’ rhythms, needs, and possibilities. Children and adults share the lab; the children make this garden their own.

Three ways of being in the garden

Moving through the garden

One child uses a wheeled mobility rig and chooses where things go with simple buttons. The path through the garden is part of the design.

Feeling a signal

Another child notices vibration and pressure before a change is visible. A clear text description can share the same clue in another way.

Making with many hands

A child’s body includes a responsive, prosthetic hand. They can shape, place, or move a garden object in the way that works for them.

Something is coming

A blast is approaching the lab. The children do not know it is coming. We are outside the garden, working inside a bounded coding sandbox. For now, we can offer a shape or words. We can imagine other objects—a light, signal, or character—and ask what would make each useful. We do not know in advance what will help. Participants can ask, test, and document what happens.

The garden is a Faraday-cage metaphor for that boundary. Each object changes only this local p5 scene. It cannot call a tool, send a message, or leave the garden. Its purpose and description are visible; movement stays paused until someone allows it, and a person can stop it. The children remain the authors of their world.

Participants can make an object, explain its intention, add text alternatives, try an interaction, and inspect the resulting code and decision trail. The question is not only “Can we build it?” It is also “Who asked for it, who decides whether it helps, and what should it never do?”

Workshop question: How can we offer help inside someone else’s world without taking control of it?

When assistance becomes action

Simulation only

Prepare a draft, review it, then try the action before and after approval. The message is fictional and delivery is simulated.

The interactive controls are loading. The UMADA story and workshop outline are available even if a visual sketch does not load.

1. Express an intention

Optional voice input may send audio to your browser's speech service. It only fills the request; it never approves an action.

The script prepares a fixed example for review. No language model is connected.

2. Review and edit

Read-aloud is optional. All information is also available as text.

3. Decide what can happen

Prepare a draft to enable approval. Editing the request, recipient, or draft clears approval.

Ready. Prepare the sample draft, or try a simulated send to test the boundary.

The p5 sketch: expression, interpretation, preparation, review, action

Current stage: expression. No action has been authorized.

The visual diagram is loading. Controls and stage descriptions work independently.

Your turn: make a page with your own code

Change the HTML and CSS below. The preview updates as you type. Your work stays in this browser; nothing is uploaded. The isolated preview does not run JavaScript.

Try changing the heading, adding a paragraph, or adjusting the CSS. Keep a heading structure, readable contrast, and a visible keyboard focus.

Starter preview is ready.

Live preview

This frame is isolated: scripts and network requests are blocked. It is a learning preview, not a production security review.

UMADA Garden: a p5 playground

Give a shape or words an intention. Change the scene with keyboard, touch, or optional face tracking. At the end of this accessibility experiment, each participant can take their Schema Card home as a gift: a portable record of what they made, the access rules they chose, and the code and decisions behind it.

Start with the garden and its children in view. Add your own ideas over the scene, then decide what each thing means, how it moves, and what another person needs to know.

What UMADA canon says about the Garden

The UMADA world guide places the Garden in Era 4: it represents coexistence, curiosity, care, and possibility, and Tallai explores it. The guide leaves the Garden’s exact setting and nature open. The children’s designs are also open; this workshop image is a proposal, not a locked canon plate.

Tallai is a chimera care specialist. Q is a small insect-like chimera with a sensing role; Quartz is a massive, gentle load-bearer. Their full dossiers are still awaiting fragments, and this scene does not depict them.

Read the UMADA world guide · Read the visual canon registry

Workshop concept: three chimera children with distinct bodies tend plants together in a coastal greenhouse garden. One child uses a wheelchair and explores a raised tactile plant marker while two friends tend seedlings nearby.
Workshop concept · exploratory, not locked canon. A possible Garden for this playground: a living place where access, care, and shared discovery shape the environment.

A care and wayfinding layer

Nago signs in the garden

Nago is UMADA’s evolving, shared sign system. Choose a sign to place a labeled marker in the scene; its meaning and tactile description will travel with it into your Schema Card.

About the marks and their source

This prototype uses plain-language sign labels and canon descriptions rather than drawing new glyphs. The structured Nago registry marks these forms as emerging; treat each as a study marker, not a finished public sign. Nago is fictional UMADA worldbuilding, drawing on Nagô/Yoruba heritage; it is not a real sign language or sacred script.

Read the Nago sign registry · Read the Nago Symbology Bible

  • Emerging · Survival
    Water

    Meaning: Need water.

    Mark study: Wave line with two descending ridges.

    Tactile: Raised wave with two descending ridges.

  • Emerging · Survival
    Safe

    Meaning: No threat; I mean no harm.

    Mark study: Open circle with a downward settling line.

    Tactile: Raised open circle with a calm base line.

  • Emerging · Care
    Help

    Meaning: Help needed, or help here.

    Mark study: Two open hands.

    Tactile: Raised paired open-hand forms.

  • Emerging · Care
    Rest

    Meaning: Rest here; recover.

    Mark study: Soft downward curve or cupped arc.

    Tactile: Raised shallow cupped arc.

1. Add something to your garden

2. Choose how you want to interact

Input mode

Select an object, then use the direction buttons or arrow keys while the movement panel has focus.

See the movement rule

ml5 estimates the center of a face. A simple rule uses that position: below 45% of the stage width, move the selected object left; above 55%, move it right; between those points, hold. The same rule applies vertically. No identity or emotion is inferred.

if (faceX < 0.45) moveLeft();
else if (faceX > 0.55) moveRight();
else holdPosition();

3. Select and describe an object

    Movement is paused until you allow it for an object and select Run approved movement. Stop the camera at any time.

    The garden is empty. Add a shape or some words.

    Your p5 stage

    The drawing is optional. The object list, descriptions, movement controls, and code work independently of the visual stage.

    No objects yet.

    Action and decision trail

      Your Schema Card: take it with you

      A Schema Card is your portable handoff: it records each object’s intention, description, alt text choice, controls, movement permission, accessibility requirements, your decision trail, and the p5 code. Download Markdown to read or bring into an AI conversation, or JSON to use as structured input in a device or code workflow. Ask the next system to preserve the card’s rules. The card communicates your requirements; it does not grant a system new permissions.

      Add an object to prepare your Schema Card.

      Code for this scene

      The code includes object intention, description, text alternative choice, and your recorded decisions.

      // Add an object to create your p5.js code.

      Next step: Check this sketch with the p5 / Creative Coding Check. It runs in your browser and checks for common patterns. Then review whether each description makes sense to a nonvisual visitor, the keyboard path completes the same task, and motion can pause.

      Learning references: ml5.js, p5.js reference, and WCAG 2.2 Quick Reference.

      Action history (0)

        The convergence

        Access needs are shaping the future of code

        Creative coding is reaching a convergence: the systems we use to make work can also interpret our intentions, generate speech, manipulate files, call APIs, and act through other software. For a creator with access needs, these capabilities can be the interface through which making becomes possible.

        A spoken request can become editable text, a draft can become speech, and an API can complete a task that an inaccessible interface puts out of reach. Accessibility therefore belongs inside the architecture of an agent: how it receives an intention, represents uncertainty, offers review, receives permission, and carries out an action.

        This keynote argues that the convergence changes what it means to write code. Alongside designing images, sounds, and interactions, we are designing delegated authority. The creator must be able to understand, direct, correct, authorize, and stop the system through access pathways they can actually use.

        The future of code is also the design of agency: what a system can do, whose intention it serves, and how that person remains in control.

        What AI governance means here

        AI governance is the assignment and enforcement of responsibility, decision rights, and limits around an AI system across its life cycle. In a creative coding project, that means deciding who may authorize an action, what tools the system can reach, how failures are detected, and who must respond when something goes wrong.

        An approval control is one part of that work. Governance also includes testing, access to evidence, incident response, and the people responsible for repair. NIST's AI Risk Management Framework offers a broader structure for managing risks through design, development, use, and evaluation.

        Keynote outline

        Suggested arc: 35 minutes, followed by discussion. Each section begins with a coding decision and follows its consequences for access and authority.

        1. When a function acts in your name 4 minutes

          Open with a familiar operation: preparing a message. A person asks to review it, but an assistant sends it. Put the missing boundary between prepareDraft() and sendMessage() on screen. The issue is the action taken beyond permission and its consequences for the person.

          Coding question: What actually prevents a proposed action from becoming an executed action?

        2. Access begins with participation 4 minutes

          Ask what someone needs to interact online: to perceive what is happening, express an intention, operate controls, understand a response, and correct a mistake. Connect these capabilities to semantic HTML, keyboard operation, speech, captions, and adjustable presentation.

          Coding question: Can a person complete the whole task through the input and output pathways available to them?

        3. Access needs reveal the agent stack 5 minutes

          Follow a voice request through transcription, interpretation, a proposed tool call, review, and execution. Define an agent operationally: a system that can select and use tools over multiple steps toward a task. These layers may be essential working infrastructure for a disabled creative coder.

          Coding question: Where do transcription errors, inferred intentions, and tool permissions become different problems?

        4. The convergence: making through delegation 4 minutes

          Move beyond code completion: a creator dictates a sketch change, asks for its behavior to be described aloud, and uses an API to manage project files. The same pipeline supports creative expression and exercises authority. Walk through expression -> proposal -> permission -> effect.

          Coding question: What can be automated within an agreed scope, and what changes require a new decision?

        5. Live p5 demo: make the boundary visible 7 minutes

          Prepare a draft. Read or hear it. Attempt an unapproved simulated send and inspect the refusal. Approve, edit the recipient or text, and try again: approval is invalidated. Approve the current version, simulate one send, then show that the permission cannot be reused.

          Coding question: Is permission attached to the exact action, or just to an old checkbox?

        6. Governance becomes architecture 4 minutes

          Separate proposals from execution; enforce permissions at the tool service; limit credentials to the resources a task needs. Bind permission to the actor, action, target, version, and appropriate duration. Keep records and provide a stop path. Examine observable failure paths before attributing intentions to a system.

          Coding question: If the model proposes something outside its authority, does the surrounding code refuse it?

        7. Accessible control, accountable recovery 4 minutes

          Test whether a person can review a meaningful change, refuse it, revoke delegation, and inspect the outcome without an inaccessible interface. Distinguish cancellation before execution from recovery afterward; some external actions cannot be undone. Close with an invitation to build these controls with the people who depend on them.

          Closing question: If someone relies on your code to act, can they also use it to govern that action?

        Presenter walkthrough

        1. Select Prepare sample draft. The editable preview appears and receives focus. Explain that this teaching example uses a fixed template; it does not infer permission from language.
        2. Edit the preview, or select Read preview aloud. The recipient is part of the review. Voice input is optional; browser or device dictation into the text fields is another pathway.
        3. Leave approval unchecked and select Try simulated send. The status and p5 diagram show a blocked action.
        4. Check approval, then change a word or the recipient. Approval clears. Try again to demonstrate why an old approval cannot authorize a new action.
        5. Approve the current version and select Try simulated send. The history records a simulated receipt. Try once more: that one-use permission has been consumed.
        6. Select Reset demo for the next run. Reset also stops voice input and reading. Ask the audience where they would enforce these rules in an app with a real backend.

        Explore the code

        The p5 canvas reflects the state of the interaction. Native HTML holds the request, recipient, preview, approval, status, and history, so using the demo does not depend on seeing or clicking the canvas.

        const action = { tool: 'message.send', recipient, body, revision };
        
        // Approval stores a copy of this exact proposed action.
        gate.approve(action);
        
        // Editing any part revokes permission.
        gate.revoke();
        
        // Every attempt passes through the same check.
        const result = gate.execute(action);
        if (!result.ok) {
          announce(result.reason);
          return;
        }
        // This demo records a local simulated receipt only.

        This browser gate is a teaching model. A production tool service must enforce authorization independently of the model and browser, authenticate the person, validate the allowed action and resources, and prevent duplicate execution. The browser alone cannot protect a real API.

        Approval can also be scoped and revocable for a sequence of low-risk actions. This demo deliberately uses one explicit approval per message so that the boundary is easy to inspect.

        The sketch uses p5 createCanvas() and noLoop() with redraws on state changes. It has no continuous animation. The Web Speech API has limited browser support; some implementations process recognition on a server. Text input remains available.