A11Y GAAD - Hyderabad 2024 Empowering Web-Accessibility through Artificial Intelligence (AI)

1. Samir Dash
samdash@cisco.com 11 MAY 2024
L V Prasad Eye Institute, Hyderabad
Web-Accessibility
Empowering
through
Artificial
Intelligence

2. Learning
Reasoning
Problem Solving
Perception
Text
Image
Video
Comprehension Powers of AI

3. • The Approach
• 5 Experiments
1. Font Size/ Text Legibility
2. WAI-ARIA Landmarks
3. Graphs/Charts : Accessible + Meaningful
4. Making <Objects> Accessible
5. Video without Sound
Agenda

4. A Different Perspective in Approach
Addressing Issues
From the Other End

5. Every 8th person has some
form of disability
* Roughly 1 Bn out of total 8.1 Bn World population has disability
Larger issues are always about scale!

6. 96.3% of home-pages failed
Web Content Accessibility Guidelines (WCAG)
*Affects more than 1 billion websites of the total across internet that includes the 18% active sites.
.. A lot like the real world !

7. Major aspects of
WCAG 2.0 Level AA + Section 508 Alignment
*The WCAG 2.0 guidelines were published in 2008
**Section 508 is a part of the United States Workforce Rehabilitation Act of 1973.
Level A (minimum)
Addresses the most basic web accessibility features,
but does not generally achieve broad accessibility
Level AA (mid-range)
Addresses most common barriers for disabled users
and aligns to the Revised 508 Standards
Level AAA (highest)
Addresses the highest level of web accessibility, but is
not recommended as a general policy, because it is not
possible to satisfy all criteria for some content.

8. Traditional Approach:
Fixing Accessibility Issues while
Development is going on for the sites
New Approach in These Experiments:
Fixing Accessibility Issues On the
Fly by AI for sites
New Approach of Solving
Web Accessibility Issues involving AI
• only new sites get the benefit
• Existing legacy sites with issues are not fixed due to
cost/time/complexity of factors.
• High cost & time
• No special handling of accessibility issues during
development
• All existing sites with issues are fixed.
• Low cost and time to fix.

9. How Technology Works?
Use of GPT based Tuned Models
* For the POC the training data was based on the limited potential outcomes

10. Experiment 1
Improving Font
Sizes Across the
Page

12. Improving Font Size

13. Improving Font Size
• Body font-size 12 points (pt), or around 16 pixels (px).
• No text/font should be smaller than 9pt (12 px).
• Use a widely available, "sans serif" font family.
E.g:"Times New Roman", "Verdana", "Arial", Tahoma,
Helvetica, and Calibri.
• For any <span> or <div> containing Single line of text
and appears as a heading, replace it with <h1> or <h2>
or <h3> or <h4> tag.

14. API SERVICE
DOM ANALYSER
CURRENT DOM
UPDATED DOM
DOM RENDERER
SCANNER
RENDERING OF
UPDATED DOM

15. Experiment 2
Fixing WAI-ARIA
Landmarks

16. Missing ARIA Landmark
Missing ALT tag
Heading Structure
Missing Form Labels
ARIA for decorative image

19. Experiment 3
Making
Graphs/Charts
Accessible + Meaningful

20. Experiment #2

21. Test #1/2

22. Test #2/2

25. Experiment 4
Making <Object>s
Accessible

26. AFTER
BEFORE

28. Experiment 5
Video Without
Sound

29. BEFORE
AFTER

33. Thank You!
LINKEDIN: @mobilewish