Last active
June 30, 2024 15:52
-
-
Save meduzen/9d42c811c737f181039eacf37445d773 to your computer and use it in GitHub Desktop.
Inclusive writing and HTML/CSS, in French.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- « un neu concepteurice », says Voice Over --> | |
<p>Test 1 : nous recherchons un•e concepteur•rice & rédacteur•rice francophone.</p> | |
<!-- « une concepteurice », says Voice Over `(content: '•'` is ignored) --> | |
<p>Test 2 : nous recherchons un<span class="content-middot"></span>e concepteur<span class="content-middot"></span>rice & rédacteur<span class="content-middot"></span>rice francophone.</p> | |
<!-- `alt is ignored by macOS Voice Over --> | |
<p>Test 3 : nous recherchons <span alt="un concepteur et rédacteur, ou une conceptrice et rédactrice">un•e concepteur•rice & rédacteur•rice</span> francophone.</p> | |
<!-- `aria-label` or `aria-labelledby` is ignored by macOS Voice Over --> | |
<p>Test 4 : nous recherchons <span aria-label="un concepteur et rédacteur, ou une conceptrice et rédactrice">un•e concepteur•rice & rédacteur•rice</span> francophone.</p> | |
<!-- Gist: https://gist.github.com/meduzen/9d42c811c737f181039eacf37445d773 --> | |
<!-- 👇 THIS WORKS 👇 --> | |
<style> | |
.inclusive-un-une::after { | |
content: '•e'; | |
} | |
.inclusive-eur-rice::after { | |
content: '•rice'; | |
} | |
</style> | |
<!-- Voice Over reads it properly. --> | |
<p>Test 5 : nous recherchons un<span class="inclusive-un-une"></span> concepteur<span class="inclusive-eur-rice"></span> & rédacteur<span class="inclusive-eur-rice"></span> <span class="visually-hidden">, ou une conceptrice et rédactrice </span> francophone.</p> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Other resources (in French and English) in a Twitter thread.