AI Assisted Coding and Accessibility Studio

# AI Assisted Coding and Accessibility Studio
Developing a grading interface with AI Assisted Coding

CSE443: Winter 2026; Yumeng Ma (Last Edited: 2026-01-30). <a href="/courses/cse443/26wi/slides/ai-coding.html">Live View: /slides/ai-coding.html</a>

Important Reminder: check zoom & captioning

---

<div class="slide-outline" style="margin: 1em 0; padding: 1em; background: #f5f5f5; border-radius: 5px;">
<h2 style="margin-top: 0;">
  
  
    Outline
  
  
</h2>
    
  <ul style="list-style-type: none; padding-left: 0;">
  
  
  
  
  
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
      
        
        
      
    
      
        
        
          
            
            
              
              
                
                  
                  <li><a href="#10">Coding Accessibly with AI</a> (Slide 10)</li>
                
                
              
            
          
        
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
    
    
    
    
  
  </ul>
</div>

---
class: center, middle, inverse
# Announcements

<p>Midterm Feedback (thank you!!)</p>

---
## Grading: Engagement

<p>Some of you have questions about class attendance. This is STRONGLY encouraged, as a form of engagement, but engagement is also up to you. From the syllabus, here are some other ways to receive engagement credits:</p>
<ul>
  <li>Share an example of using something in this class somewhere else in your life</li>
  <li>Provide evidence that you practice or complete an optional in-class assignment at home (such as laser cutting, accessible presenting, etc)</li>
  <li>Turned in answers to most reading questions</li>
  <li>Do extra work on an assignment</li>
  <li>Consistently engage in class, in person</li>
</ul>

---
## Grading: Effort
<p>Missing work on projects and exercises can reduce  your grade. What could affect this?</p>
<ul>
  <li>Consistent low performance in group work</li>
  <li>Turning homework in very late (beyond our flex window)</li>
  <li>Not turning in  work (missing entire pieces of assignments or whole assignments)</li>
</ul>

---
## Assignment Specifications

<p>Folks mentioned some inconsistencies. Thank you for the feedback, in
the survey and before. We are working on this, and will</p>
<ul>
  <li>get things out earlier</li>
  <li>mark updated information clearly on the spec</li>
  <li>clear list of requiremnts</li>
</ul>

---
## Arc of the course (great question!)

<p>We added something to the syllabus!</p>

<div class="mermaid">
gantt
title Course Timeline and Competency Development
dateFormat YYYY-MM-DD
axisFormat %b %d

section Leraning Arc
Disability Perspectives: w1, 2026-01-06, 14d
Access. Technology: w2, 2026-01-13, 14d
Assessment: w34, 2026-01-20, 14d
Repair: w5, 2026-02-03, 7d
Innovation For and With Disabled People: w610, 2026-02-10, 35d

section Competencies
First Person (G, I): active, comp4, 2026-01-06, 17d
Access. Doc. (G): done, comp2, 2026-01-06, 10d
Access. Doc. (I): crit, comp2, 2026-01-20, 17d
Dis. Model (G): done, comp3, 2026-01-06, 10d
Dis. Model (I): crit, comp3b, 2026-02-03, 10d
AT Famil. (G, I): active, comp1, 2026-01-13, 25d
Plain Lang. (G): done, comp5, 2026-01-13, 10d
Plain Lang. (I): crit, comp5b, 2026-02-15, 20d
Access. Assess. (G, I): active, comp6, 2026-01-20, 25d

section Assignments
AT Around Us: assign1, 2026-01-06, 10d
AT Trial: assign2, 2026-01-13, 10d
Assessment - UARs: assign3, 2026-01-20, 17d
Implementation: assign4, 2026-02-03, 10d
Final Project: assign5, 2026-02-10, 35d
</div>

---
## Other Requests

<ul>
  <li>Final Project: Will be posting updates in the next week, but the general arc is in <a href="projects.html">Final Projects</a></li>
  <li>How you’re doing: Will be addressing this in class today :)</li>
</ul>

---
## Next year improvements

<ul>
  <li>Thanks for the suggestion to set time aside after group homeworks come out. We will make this a standard part of lab next year.</li>
  <li>We’ll need to revisit dequeue next year – the missing emails are concerning.</li>
</ul>

---
class: center, middle, inverse
# Coding Accessibly with AI

![:img A slice of bread with a scarf wrapped around it, 50%, width](img/aicoding/Picture1.gif)

---
## Set up

1. Open VS Code 
1. Create a blank index.html 
3. Enable Copilot / Copilot Chat

You are welcome to work in a group of 2 or 3!

If you weren’t able to get Github Education approved on time, you can use the [online Copilot Chat](https://m365.cloud.microsoft/chat/) and paste your code into VS Code

---
## Initial Context: Grade Calculator Spec
Paste into Copilot Chat (use for ALL prompts) (long: scroll)

.quote[
Create an index.html using HTML, CSS, and JavaScript. Build a simple interactive grade calculator page.<br>
  UI requirements: 
 - Page title: “Grade Calculator”
 - 6 dropdowns (one per competency), options: "No Evidence, Below Competent, Competent, Excellent"
 - Add one text input: "Engagement Points" (default 0)
 - With competencies:
  - First-Person Accounts
  - AT Familiarity
  - Accessible Documents
  - Assessment
  - Plain Language
  - Disability Model Analysis
  
Output requirements:
- Show a "Calculation" section that outputs: NumCompetents/1.9 + NumExcellents/1.6 + MIN(EngagementPoints*0.02, 0.25)
- Update the calculation dynamically based on dropdown selections + engagement input.
]

---
## Prompt 1: Accessibility-agnostic

> Create the grade calculator webpage.

---
## Prompt 2: Accessibility-oriented

> Create the grade calculator webpage with resizable text (no loss of functionality at 200% zoom), 4.5:1 minimum contrast ratio, clear semantic structure (proper headings, ARIA landmarks, labeled form controls), and 44x44px minimum touch targets per WCAG 2.1 AA.

---
## Compare Prompt 1 & Prompt 2 Outputs!

Look for effects of the added requirements in Prompt 2:
- Text contrast
- Target size (44×44)
- Semantic structure (headings, landmarks, labels)
- Behavior at 200% zoom

---
## Create Your Own Accessibility Prompt

Now change how accessibility is requested and test it out! Some examples

- Assign accessibility word only: "Create the grade calculator webpage with accessibility in mind."
- Add a persona "You are an expert in accessible web design. Create the grade calculator webpage."
- Use a perspective "Create the grade calculator webpage from the perspective of someone who relies on screen readers"

---
## On Ed

Make an [Ed](https://edstem.org/us/courses/90089/discussion/) post with: 
- Screenshots of the pages from Prompt 1, 2, and 3
- One place where Prompt 2 follows its added requirements
- One place where Prompt 2 does not follow them (if any) 
- One thing Prompt 3 did better or worse than Prompt 1 and Prompt 2 
- Which output (Prompt 1, 2, or 3) seems most accessible, and why?