Re: Non-text content loophole

My issue is not with users changing things because I know that's a can of worms, but specifically when the author has 'inserted content using CSS' - but not via ::before or ::after or background-image. For example, in theory you could use divs and spans to make text or numbers. For example:


<div class="number" id="one">
    <div class="segment vertical top-right"></div>
    <div class="segment vertical bottom-right"></div>
</div>

 <div class="number" id="two">

    <div class="segment horizontal top"></div>

    <div class="segment vertical top-right"></div>
    <div class="segment horizontal middle"></div>
    <div class="segment vertical bottom-left"></div>
    <div class="segment horizontal bottom"></div>
</div>

<div class="number" id="three">
    <div class="segment horizontal top"></div>
    <div class="segment vertical top-right"></div>
    <div class="segment horizontal middle"></div>
    <div class="segment vertical bottom-right"></div>
    <div class="segment horizontal bottom"></div>
</div>

<div class="number" id="four">
    <div class="segment vertical top-left"></div>
    <div class="segment vertical top-right"></div>
    <div class="segment horizontal middle"></div>
    <div class="segment vertical bottom-right"></div>
</div>

<div class="number" id="five">
    <div class="segment horizontal top"></div>
    <div class="segment vertical top-left"></div>
    <div class="segment horizontal middle"></div>
    <div class="segment vertical bottom-right"></div>
    <div class="segment horizontal bottom"></div>
</div >

<style>
.number {
    display: inline-block;
    position: relative;
    width: 60px;
    height: 100px;
    margin: 10px;
}

.segment {
    background-color: black;
    position: absolute;
}

.horizontal {
    width: 50px;
    height: 10px;
}

.vertical {
    width: 10px;
    height: 50px;
 }

.top { top: 0; left: 5px; }
.middle { top: 45px; left: 5px; }
.bottom { bottom: 0; left: 5px; }
.top-right { top: 5px; right: 0; }
.bottom-right { bottom: 5px; right: 0; }
.top-left { top: 5px; left: 0; }
.bottom-left { bottom: 5px; left: 0; }

</style>

I think this should fail 1.3.1 (and maybe 4.1.2?) because it isn't detectable to a screen reader user. It needs a role of img and an alt (or just the text instead)?

In the case of the checkbox for example, the checked state is programmatically determinable for a sr user. But for other users, they have this custom visual mechanism - aka, it's an image, just like the example above of the numbers 12345, but an image of a check mark. It's more than just 'background colour', it's 'colour used to construct an object'. It's really just like comparing a background-image to an image with information. I feel like this visual mechanism needs to be programmatically determinable for AT other than screen reading software so that it's clear it's not just 'background styling' but part of the content?

If there was a 'failure' for say 1.3.1 or 1.1.1 that said 'The visual mechanism for identifying user interface components and their states/graphical objects should not be constructed using css background-colours on <div>/<span> alone' then that could possibly cover things like custom checkmarks/focus indicators that then stop the user adjusting the styles? It still allows for authors to do it, but just with an alternative like invisible focus indicators in default mode/using borders not just backgrounds?

Thanks

Sarah

Sent from Outlook for iOS<https://aka.ms/o0ukef>