Accessible Name Automation (Proof of Concept) This is an experiment based on Accessibility Object Model (AOM). It tries to demonstrate that it is theoretically possible (in a certain way) to predict what the screen reader will say by focusing on semantic and non semantic elements with a bit of automated testing, thus reducing the need for manual testing.
Semantic components Buttons Basic Visible label
< button type = " button " > Visible label </ button > 🔓
< button type = " button " > 🔓 </ button > Labelled Visible label
< button type = " button " aria-label = " Accessible label " > Visible label </ button > 🔓
< button type = " button " aria-label = " Accessible label " > 🔓 </ button > Inlined Visible label Accessible label
< button type = " button " >
< span aria-hidden = " true " > Visible label </ span >
< span class = " sr-only " > Accessible label </ span >
</ button > 🔓 Accessible label
< button type = " button " >
< span aria-hidden = " true " > 🔓 </ span >
< span class = " sr-only " > Accessible label </ span >
</ button > Links Basic < a href = " # " > Visible label </ a > < a href = " # " > 🔓 </ a > Labelled < a href = " # " aria-label = " Accessible label " > Visible label </ a > < a href = " # " aria-label = " Accessible label " > 🔓 </ a > Inlined < a href = " # " >
< span aria-hidden = " true " > Visible label </ span >
< span class = " sr-only " > Accessible label </ span >
</ a > < a href = " # " >
< span aria-hidden = " true " > 🔓 </ span >
< span class = " sr-only " > Accessible label </ span >
</ a > Titles First level
Visible title < h1 > Visible title </ h1 > Second level
Visible title < h2 > Visible title </ h2 > Third level
Visible title < h3 > Visible title </ h3 > Fourth level
Visible title < h4 > Visible title </ h4 > Non semantic components Buttons Basic < div tabindex = " 0 " > Visible label </ div > < div tabindex = " 0 " > 🔓 </ div > Labelled < div tabindex = " 0 " aria-label = " Accessible label " > Visible label </ div > < div tabindex = " 0 " aria-label = " Accessible label " > 🔓 </ div > Inlined Visible label Accessible label
< div tabindex = " 0 " >
< span aria-hidden = " true " > Visible label </ span >
< span class = " sr-only " > Accessible label </ span >
</ div > < div tabindex = " 0 " >
< span aria-hidden = " true " > 🔓 </ span >
< span class = " sr-only " > Accessible label </ span >
</ div > Links Basic Visible label
< span tabindex = " 0 " > Visible label </ span > 🔓
< span tabindex = " 0 " > 🔓 </ span > Labelled Visible label
< span tabindex = " 0 " aria-label = " Accessible label " > Visible label </ span > 🔓
< span tabindex = " 0 " aria-label = " Accessible label " > 🔓 </ span > Inlined Visible label Accessible label
< span tabindex = " 0 " >
< span aria-hidden = " true " > Visible label </ span >
< span class = " sr-only " > Accessible label </ span >
</ span > 🔓 Accessible label
< span tabindex = " 0 " >
< span aria-hidden = " true " > 🔓 </ span >
< span class = " sr-only " > Accessible label </ span >
</ span > Titles First level < p > Visible title </ p > Second level < p > Visible title </ p > Third level < p > Visible title </ p > Fourth level < p > Visible title </ p >