index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>MAP Workshop</title>
    <style>
      :root {
        color-scheme: light;
        --ink: #111827;
        --muted: #4b5563;
        --line: #d7dee8;
        --surface: #f7faf9;
        --paper: #ffffff;
        --blue: #1d4ed8;
        --green: #0f766e;
        --amber: #b45309;
        --coral: #be3a2f;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        background: var(--surface);
        color: var(--ink);
      }

      .skip-link {
        position: absolute;
        left: 16px;
        top: 16px;
        z-index: 100;
        transform: translateY(-160%);
        border-radius: 8px;
        padding: 10px 14px;
        background: #ffffff;
        color: var(--ink);
        font-weight: 800;
        text-decoration: none;
        box-shadow: 0 0 0 3px #fbbf24;
      }

      .skip-link:focus-visible {
        transform: translateY(0);
      }

      a:focus-visible {
        outline: 3px solid #fbbf24;
        outline-offset: 3px;
      }

      .topbar {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        padding: 18px max(24px, calc((100vw - 1160px) / 2));
        color: #ffffff;
      }

      .brand {
        font-weight: 800;
      }

      .nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
      }

      .nav a {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(255, 255, 255, 0.42);
        border-radius: 8px;
        padding: 8px 12px;
        color: #ffffff;
        background: rgba(17, 24, 39, 0.28);
        text-decoration: none;
        font-weight: 700;
        font-size: 0.92rem;
      }

      .nav a:focus-visible {
        background: #ffffff;
        color: var(--ink);
      }

      .hero {
        min-height: 58vh;
        display: grid;
        align-items: end;
        background:
          linear-gradient(90deg, rgba(17, 24, 39, 0.88), rgba(17, 24, 39, 0.54) 55%, rgba(17, 24, 39, 0.08)),
          url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/VBZ_Tram_4035_leaving_Schiffbau%2C_Z%C3%BCrich.jpg/1280px-VBZ_Tram_4035_leaving_Schiffbau%2C_Z%C3%BCrich.jpg") center / cover;
      }

      .hero-inner {
        width: min(1160px, calc(100% - 40px));
        margin: 0 auto;
        padding: 112px 0 46px;
        color: #ffffff;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        border-left: 4px solid var(--blue);
        padding: 4px 10px;
        background: rgba(255, 255, 255, 0.14);
        font-weight: 800;
        font-size: 0.86rem;
        text-transform: uppercase;
      }

      h1 {
        max-width: 830px;
        margin: 18px 0 16px;
        font-size: 3.7rem;
        line-height: 1;
      }

      .lead {
        max-width: 760px;
        margin: 0;
        color: #eef5ff;
        font-size: 1.16rem;
        line-height: 1.65;
      }

      .band {
        padding: 54px 20px;
      }

      .band.alt {
        background: #ffffff;
      }

      .inner {
        width: min(1040px, 100%);
        margin: 0 auto;
      }

      .intro {
        max-width: 760px;
        margin-bottom: 26px;
      }

      .intro p + p {
        margin-top: 12px;
      }

      h2 {
        margin: 0 0 10px;
        font-size: 2rem;
        line-height: 1.1;
      }

      p {
        margin: 0;
        color: var(--muted);
        font-size: 1rem;
        line-height: 1.68;
      }

      .sections {
        display: grid;
        gap: 16px;
      }

      .panel {
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 22px;
        background: var(--paper);
      }

      .panel h3 {
        margin: 0 0 10px;
        font-size: 1.2rem;
      }

      .panel dl {
        margin: 0;
      }

      .panel dt {
        margin-top: 12px;
        color: var(--ink);
        font-weight: 800;
      }

      .panel dt:first-child {
        margin-top: 0;
      }

      .panel dd {
        margin: 2px 0 0;
        color: var(--muted);
        line-height: 1.65;
      }

      .panel ul {
        margin: 12px 0 0;
        padding-left: 20px;
        color: var(--muted);
        line-height: 1.65;
      }

      .schedule-list {
        display: grid;
        gap: 14px;
        margin: 16px 0 0;
        padding-left: 0;
        list-style: none;
      }

      .schedule-list > li {
        display: grid;
        grid-template-columns: minmax(190px, 0.35fr) 1fr;
        gap: 14px;
        border-top: 1px solid var(--line);
        padding-top: 14px;
      }

      .schedule-list > li:first-child {
        border-top: 0;
        padding-top: 0;
      }

      .schedule-time {
        color: var(--ink);
        font-weight: 800;
        line-height: 1.55;
      }

      .schedule-detail {
        color: var(--muted);
        line-height: 1.65;
      }

      .schedule-detail ul {
        margin-top: 8px;
      }

      .panel.agenda {
        border-top: 5px solid var(--blue);
      }

      .panel.schedule {
        border-top: 5px solid var(--blue);
      }

      .panel.participation {
        border-top: 5px solid var(--blue);
      }

      .panel.dates {
        border-top: 5px solid var(--blue);
      }

      .panel.apply {
        border-top: 5px solid var(--blue);
      }

      .panel.registration {
        border-top: 5px solid var(--blue);
      }

      .panel.access {
        border-top: 5px solid var(--blue);
      }

      .panel.participation p + p,
      .panel.apply p + p,
      .panel.registration p + p,
      .panel.access p + p {
        margin-top: 12px;
      }

      .panel.participation .links,
      .panel.apply .links,
      .panel.registration .links {
        margin-top: 16px;
        margin-bottom: 16px;
      }

      .panel.inclusion {
        border-top: 5px solid var(--blue);
      }

      .panel.organisers {
        border-top: 5px solid var(--blue);
      }

      .links {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 24px;
      }

      .links + .sections {
        margin-top: 24px;
      }

      .button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        border-radius: 8px;
        border: 1px solid var(--line);
        padding: 10px 14px;
        background: #ffffff;
        color: var(--ink);
        font-weight: 800;
        text-decoration: none;
      }

      .button.challenge {
        background: var(--green);
        color: #ffffff;
        border-color: var(--green);
      }

      .button.workshop {
        background: var(--blue);
        color: #ffffff;
        border-color: var(--blue);
      }

      .button.benchmark {
        background: var(--amber);
        color: #ffffff;
        border-color: var(--amber);
      }

      .button:focus-visible {
        box-shadow: 0 0 0 4px #ffffff, 0 0 0 7px #fbbf24;
      }

      footer {
        border-top: 1px solid var(--line);
        padding: 22px 20px 30px;
        background: #ffffff;
      }

      .foot {
        width: min(1040px, 100%);
        margin: 0 auto;
        color: #64748b;
        font-size: 0.9rem;
        line-height: 1.55;
      }

      @media (max-width: 760px) {
        .topbar {
          position: static;
          flex-direction: column;
          align-items: flex-start;
          background: #111827;
          padding: 14px 16px;
        }

        .nav {
          justify-content: flex-start;
        }

        .hero {
          min-height: 54vh;
        }

        .hero-inner {
          padding: 52px 0 42px;
        }

        h1 {
          font-size: 2.45rem;
        }

        h2 {
          font-size: 1.55rem;
        }

        .schedule-list > li {
          grid-template-columns: 1fr;
          gap: 4px;
        }

        .nav a,
        .button {
          width: 100%;
          justify-content: center;
        }

        .band {
          padding: 42px 16px;
        }
      }
    </style>
  </head>
  <body>
    <a class="skip-link" href="#main-content">Skip to main content</a>

    <header class="topbar">
      <div class="brand">MAP Workshop</div>
      <nav class="nav" aria-label="MAP public pages">
        <a href="https://huggingface.co/spaces/map-ai-benchmark/challenge" target="_blank" rel="noopener noreferrer" aria-label="Challenge, opens in a new tab">Challenge</a>
        <a href="https://huggingface.co/spaces/map-ai-benchmark/benchmark" target="_blank" rel="noopener noreferrer" aria-label="Benchmark, opens in a new tab">Benchmark</a>
      </nav>
    </header>

    <main id="main-content" tabindex="-1">
      <section class="hero" aria-labelledby="workshop-title">
        <div class="hero-inner">
          <span class="eyebrow">Workshop</span>
          <h1 id="workshop-title">Multimodal Accessibility Planning with AI Models</h1>
          <p class="lead">
            A focused workshop around multimodal AI evaluation, accessibility-aware planning, and evidence use for real-world place information.
          </p>
        </div>
      </section>

      <section class="band alt" aria-labelledby="workshop-info-title">
        <div class="inner">
          <div class="intro">
            <h2 id="workshop-info-title">Workshop Information</h2>
            <p>
              We provide details on the public workshop for the benchmark and challenge.
            </p>
            <p>
              <strong><a href="#workshop-registration">Click here</a> to register for the workshop.</strong>
            </p>
          </div>
          <div class="sections">
            <article class="panel dates" aria-labelledby="workshop-dates-title">
              <h3 id="workshop-dates-title">Important dates</h3>
              <dl>
                <dt>Workshop date</dt>
                <dd>October 25, 2026.</dd>
                <dt>Application deadline</dt>
                <dd>Thursday, August 27, 2026, 11:59 p.m. Anywhere on Earth (AoE, UTC-12:00).</dd>
                <dt>Notification date</dt>
                <dd>Thursday, September 3, 2026.</dd>
                <dt>Registration</dt>
                <dd>All accepted participants must <a href="#workshop-registration">register</a> for the full ASSETS 2026 conference and add the workshop during registration.</dd>
              </dl>
            </article>
            <article class="panel agenda" aria-labelledby="workshop-agenda-title">
              <h3 id="workshop-agenda-title">Workshop Agenda</h3>
              <p>
                The Multimodal Accessibility Planning with AI Models (MAP) Workshop is a half-day workshop and will take place on October 25, 2026 as part of the
                <a href="https://assets26.sigaccess.org/index.html" target="_blank" rel="noopener noreferrer" aria-label="28th International ACM SIGACCESS Conference on Computers and Accessibility, opens in a new tab">28th International ACM SIGACCESS Conference on Computers and Accessibility (ASSETS)</a>.
              </p>
            </article>
            <article class="panel schedule" aria-labelledby="workshop-schedule-title">
              <h3 id="workshop-schedule-title">Schedule</h3>
              <p>
                Note: the workshop will run in the afternoon from 14:00 to 17:20. Clocks in Portugal go back 1 hour on October 25 at 2:00 am.
              </p>
              <ul class="schedule-list">
                <li>
                  <span class="schedule-time">14:00-14:20</span>
                  <div class="schedule-detail">Welcome address, presentation of the challenge and challenge results.</div>
                </li>
                <li>
                  <span class="schedule-time">14:20-14:50</span>
                  <div class="schedule-detail">Keynote: Sasha Blair-Goldensohn, Google Maps Staff Accessibility Lead.</div>
                </li>
                <li>
                  <span class="schedule-time">14:50-15:20</span>
                  <div class="schedule-detail">Keynote: Ross Greer, University of California, Merced: "Automated Context-Aware Navigation Support for Individuals with Visual Impairment Using Multimodal Language Models in Urban Environments".</div>
                </li>
                <li>
                  <span class="schedule-time">15:20-15:40</span>
                  <div class="schedule-detail">Coffee break.</div>
                </li>
                <li>
                  <span class="schedule-time">15:40-16:10</span>
                  <div class="schedule-detail">Keynote: Jon Froehlich, University of Washington: "Vision Foundation Models and Generative AI for Accessibility: Challenges and Opportunities".</div>
                </li>
                <li>
                  <span class="schedule-time">16:10-16:40</span>
                  <div class="schedule-detail">
                    Panel discussion:
                    <ul>
                      <li>Robin Angelini, PreDoc Researcher, TU Wien</li>
                      <li>Ioana Tanase, AI and Accessibility Program Manager, Microsoft</li>
                      <li>Sarah Ebling, Professor of Language, Technology and Accessibility, University of Zurich</li>
                      <li>N.N.</li>
                    </ul>
                  </div>
                </li>
                <li>
                  <span class="schedule-time">16:40-17:20</span>
                  <div class="schedule-detail">Break-out groups: planning the 2027 edition of the challenge.</div>
                </li>
              </ul>
            </article>
            <article class="panel inclusion" aria-labelledby="workshop-inclusion-title">
              <h3 id="workshop-inclusion-title">Diversity and Inclusion Considerations</h3>
              <p>
                We are aiming for diversity in gender, disability, and other protected characteristics as well as geographical background
                (specifically looking to welcome participants beyond the US and Europe) at the workshop, both among the contributors
                (keynote speakers and panelists) and the participants.
              </p>
            </article>
            <article class="panel organisers" aria-labelledby="workshop-organisers-title">
              <h3 id="workshop-organisers-title">Organisers</h3>
              <p>
                The organising team consists of a mix of representatives from academia and industry:
              </p>
              <ul>
                <li>Jason Armitage, University of Zurich, Switzerland</li>
                <li>Ioannis Tsochantaridis, Google DeepMind</li>
                <li>Zhiyong Zhou, Zhejiang University, China</li>
                <li>Linda Mazzone, University of Zurich, Switzerland</li>
                <li>Chuqiao Yan, University of Zurich, Switzerland</li>
                <li>Srini Narayanan, Google DeepMind</li>
                <li>Sarah Ebling, University of Zurich, Switzerland</li>
              </ul>
            </article>
          </div>
          <div class="sections">
            <article id="workshop-participation" class="panel participation" aria-labelledby="workshop-participation-title">
              <h3 id="workshop-participation-title">Call for Participation</h3>
              <p>
                We invite participation in the ASSETS 2026 "Multimodal Accessibility Planning with AI Models" (MAP) Workshop to be held on October 25, 2026 in Porto, Portugal. The workshop is linked to the launch of a challenge funded by Google.org on multimodal AI models assisting persons with disabilities in planning accessible activities in the real world. The aim of the challenge is to assess the safety and usefulness of model responses. The challenge will start at the workshop, and first views of the data can be found on the <a href="https://huggingface.co/spaces/map-ai-benchmark/benchmark" target="_blank" rel="noopener noreferrer" aria-label="Benchmark page, opens in a new tab">Benchmark page</a>.
              </p>
              <p>
                The workshop will consist of three keynote talks, a panel discussion, and a break-out session aimed at shaping the challenge in a community-driven manner. Preference is given to participants with demonstrated prior exposure to the topic and potential to contribute to the diversity of the workshop. We will seek to publish the motivation statements on the workshop website prior to the event. We explicitly welcome participants from both academia and industry/accessibility practice and from all over the world.
              </p>
            </article>
            <article id="workshop-apply" class="panel apply" aria-labelledby="workshop-apply-title">
              <h3 id="workshop-apply-title">How to apply</h3>
              <p>
                To apply for the workshop, please submit a motivation statement by email to Sarah Ebling at
                <a href="mailto:ebling@cl.uzh.ch">ebling@cl.uzh.ch</a>.
              </p>
              <p>
                The motivation statement should be either:
              </p>
              <ul>
                <li>2-4 pages of text;</li>
                <li>an audio recording with spoken equivalent content; or</li>
                <li>a signed video of 4-16 minutes in International Sign or American Sign Language.</li>
              </ul>
              <p>
                Applications must be received by Thursday, August 27, 2026, 11:59 p.m. Anywhere on Earth (AoE, UTC-12:00). We expect to notify applicants by Thursday, September 3, 2026.
              </p>
            </article>
            <article id="workshop-registration" class="panel registration" aria-labelledby="workshop-registration-title">
              <h3 id="workshop-registration-title">Registration</h3>
              <p>
                Press this button to register for the workshop:
              </p>
              <div class="links">
                <a class="button workshop" href="https://map-workshop-registration-hiiywrlloq-ew.a.run.app" target="_blank" rel="noopener noreferrer" aria-label="Register for the MAP Workshop, opens in a new tab">Register for the workshop</a>
              </div>
            </article>
            <article class="panel access" aria-labelledby="workshop-access-title">
              <h3 id="workshop-access-title">Access requirements</h3>
              <p>
                For questions about access requirements for participating in the workshop, please contact Jason Armitage at
                <a href="mailto:jason.armitage@uzh.ch">jason.armitage@uzh.ch</a>.
              </p>
              <p>
                Please contact us as early as possible so that we can plan appropriate support.
              </p>
            </article>
          </div>
          <nav class="links" aria-label="Related MAP pages">
            <a class="button challenge" href="https://huggingface.co/spaces/map-ai-benchmark/challenge" target="_blank" rel="noopener noreferrer" aria-label="Challenge, opens in a new tab">Challenge</a>
            <a class="button benchmark" href="https://huggingface.co/spaces/map-ai-benchmark/benchmark" target="_blank" rel="noopener noreferrer" aria-label="Benchmark, opens in a new tab">Benchmark</a>
          </nav>
        </div>
      </section>
    </main>

  </body>
</html>