Skip to content

Instantly share code, notes, and snippets.

@meduzen
Last active March 22, 2021 19:34
Show Gist options
  • Save meduzen/9d42c811c737f181039eacf37445d773 to your computer and use it in GitHub Desktop.
Save meduzen/9d42c811c737f181039eacf37445d773 to your computer and use it in GitHub Desktop.
(For French person only)
<!-- « 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>
@meduzen
Copy link
Author

meduzen commented Jan 16, 2020

Other resources (in French and English) in a Twitter thread.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment