accessibility as a first-class concern in teaching …...info 343: client-side web development •...
TRANSCRIPT
![Page 1: Accessibility as a First-Class Concern in Teaching …...Info 343: Client-Side Web Development • HTML, CSS, JavaScript, Web Frameworks (Angular, React) • Required one-quarter course](https://reader033.vdocuments.mx/reader033/viewer/2022043012/5fa8d2a9a72b681b003396de/html5/thumbnails/1.jpg)
Accessibility as a First-Class Concern in Teaching GUIs and Software Engineering
Joel Ross, Andy Ko, David StearnsSIGCSE 2017, Seattle, WA
![Page 2: Accessibility as a First-Class Concern in Teaching …...Info 343: Client-Side Web Development • HTML, CSS, JavaScript, Web Frameworks (Angular, React) • Required one-quarter course](https://reader033.vdocuments.mx/reader033/viewer/2022043012/5fa8d2a9a72b681b003396de/html5/thumbnails/2.jpg)
Accessibility should be a coretopic in software development
Including accessibility is a low-effort taskthat can improve software design skills
![Page 3: Accessibility as a First-Class Concern in Teaching …...Info 343: Client-Side Web Development • HTML, CSS, JavaScript, Web Frameworks (Angular, React) • Required one-quarter course](https://reader033.vdocuments.mx/reader033/viewer/2022043012/5fa8d2a9a72b681b003396de/html5/thumbnails/3.jpg)
Our Course Context
Info 343: Client-Side Web Development• HTML, CSS, JavaScript, Web Frameworks (Angular, React)• Required one-quarter course for our majors!
https://info343-au16.github.io/
![Page 4: Accessibility as a First-Class Concern in Teaching …...Info 343: Client-Side Web Development • HTML, CSS, JavaScript, Web Frameworks (Angular, React) • Required one-quarter course](https://reader033.vdocuments.mx/reader033/viewer/2022043012/5fa8d2a9a72b681b003396de/html5/thumbnails/4.jpg)
"New" Material: Perceivability
Provide textual equivalent to visual elements
![Page 5: Accessibility as a First-Class Concern in Teaching …...Info 343: Client-Side Web Development • HTML, CSS, JavaScript, Web Frameworks (Angular, React) • Required one-quarter course](https://reader033.vdocuments.mx/reader033/viewer/2022043012/5fa8d2a9a72b681b003396de/html5/thumbnails/5.jpg)
"New" Material: Navigability
Use semantic tags (and ARIA landmarks)
![Page 6: Accessibility as a First-Class Concern in Teaching …...Info 343: Client-Side Web Development • HTML, CSS, JavaScript, Web Frameworks (Angular, React) • Required one-quarter course](https://reader033.vdocuments.mx/reader033/viewer/2022043012/5fa8d2a9a72b681b003396de/html5/thumbnails/6.jpg)
Course Changes
Reinforced content that we included anyway!
• Change one lecture on accessibility concepts– Practice HTML tag and attribute syntax– Have students use a screen reader!
• Add one focused assignment– Adding HTML to follow W3C & Accessibility standards– Can be graded automatically
https://info343-au16.github.io/
![Page 7: Accessibility as a First-Class Concern in Teaching …...Info 343: Client-Side Web Development • HTML, CSS, JavaScript, Web Frameworks (Angular, React) • Required one-quarter course](https://reader033.vdocuments.mx/reader033/viewer/2022043012/5fa8d2a9a72b681b003396de/html5/thumbnails/7.jpg)
Supported CS Principles
• Separation of Concerns– HTML for content semantics, not appearance!
• Working with Standards– Following W3C and WAI-ARIA specifications
![Page 8: Accessibility as a First-Class Concern in Teaching …...Info 343: Client-Side Web Development • HTML, CSS, JavaScript, Web Frameworks (Angular, React) • Required one-quarter course](https://reader033.vdocuments.mx/reader033/viewer/2022043012/5fa8d2a9a72b681b003396de/html5/thumbnails/8.jpg)
![Page 9: Accessibility as a First-Class Concern in Teaching …...Info 343: Client-Side Web Development • HTML, CSS, JavaScript, Web Frameworks (Angular, React) • Required one-quarter course](https://reader033.vdocuments.mx/reader033/viewer/2022043012/5fa8d2a9a72b681b003396de/html5/thumbnails/9.jpg)
Works for Most GUI Frameworks!• Example: Java Swing
(http://docs.oracle.com/javase/tutorial/uiswing/misc/access.html)
• Example: Android Development(https://developer.android.com/guide/topics/ui/accessibility/apps.html)
![Page 10: Accessibility as a First-Class Concern in Teaching …...Info 343: Client-Side Web Development • HTML, CSS, JavaScript, Web Frameworks (Angular, React) • Required one-quarter course](https://reader033.vdocuments.mx/reader033/viewer/2022043012/5fa8d2a9a72b681b003396de/html5/thumbnails/10.jpg)
Works for Many Courses!
• Software Engineering– A non-functional requirement for student projects
...that is testable!
• Human-Computer Interaction– A lens for considering navigation / Universal Design
• Any Course!– A way to emphasize diversity in software design
![Page 11: Accessibility as a First-Class Concern in Teaching …...Info 343: Client-Side Web Development • HTML, CSS, JavaScript, Web Frameworks (Angular, React) • Required one-quarter course](https://reader033.vdocuments.mx/reader033/viewer/2022043012/5fa8d2a9a72b681b003396de/html5/thumbnails/11.jpg)
An accessibility focus improves teaching software developmentContact Info
Joel Ross: [email protected], UW iSchoolAndy Ko: [email protected], UW iSchoolDave Stearns: [email protected], UW iSchool
https://www.washington.edu/accesscomputing/