Editing Project:Village pump (technical) (section)

== How to force a screen reader to ignore the label for an OO.ui.ButtonWidget? ==

I have three buttons in my script labeled "B", "I" and "XYZ". They are styled as bold, italic and struck text respectively. They work fine. The have "bold", italic" and "strikethrough" respectively in their title attribute which is also good.<br style="margin-bottom:0.5em"/>Unfortunately, not all screen readers are picking up on the title here. They should frankly ignore the label in this case, but how? https://doc.wikimedia.org/oojs-ui/master/js/#!/api/OO.ui.ButtonWidget only provides a solution for the opposite: to hide the label from view while allowing screen readers to still use it. I need the opposite.<br style="margin-bottom:0.5em"/>I can only think of one way currently: to turn the "B", "I" and "XYZ" into SVG images so screen readers have no choice but to fall back on the title attribute. But the actual letters being used depend on the language and text rendering within SVG is a known PITA.<br style="margin-bottom:0.5em"/>Isn't there another way to indicate the label isn't very useful for screen readers and they should fall back on the title? <span id="Alexis_Jazz:1660306914490:WikipediaBWLCLNVillage_pump_(technical)" class="BawlCmt">— <span style="color:#e08020">Alexis Jazz</span> ([[User talk:Alexis Jazz|talk]] or ping me) 12:21, 12 August 2022 (UTC)</span>
:@[[User:Alexis Jazz|Alexis Jazz]] There isn't a built-in way to do it in OOUI, but you can do it using the usual HTML attributes, like this: <code>buttonWidget.$button.attr( 'aria-label', 'Blah blah' )</code>. You shouldn't rely on <code>title</code> for screen reader accessibility, it works fine in some cases but not others, here's a long article about this: [https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/].
:I would actually recommend doing the approach with image icons. OOUI includes icons for bold, italic and strikethrough, and they automatically adapt to the user language – see the "editing-styling" section in the demos: [https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons]. If you use an icon, you can add an accessible label to the OOUI button like this: <code>invisibleLabel: true, label: 'Bold'</code> (in addition to the <code>title</code> for sighted mouse users who hate icons). [[User:Matma Rex|Matma Rex]] <small>[[User talk:Matma Rex|talk]]</small> 19:02, 12 August 2022 (UTC)
::[[User:Matma Rex|Matma Rex]], thanks, I'll use aria-label. Will read the article later.<br style="margin-bottom:0.5em"/>I've considered using those icons. For a short while I actually did.  There are several issues with them though. For one, my script works with just oojs-ui-core. In one benchmark I found that adding any icon dependency increased the load time by 300ms or so. Embedding some SVGs for the few icons I did need was faster. Another consideration was licensing: my script is public domain. Using only original icons, any screenshot of it can also be PD.<br style="margin-bottom:0.5em"/>But probably most importantly: the OO.ui icons for bold/italic/strikethrough aren't that good. The strikethrough is particularly unclear. There were some regional issues as well. For example, using C for italic or V for bold is uncommon and confusing in Dutch. IIRC for my own version I looked mostly at which letters MS Word uses in its toolbar and made some considerations of my own. For example, using ABC for strikethrough (<s>ABC</s>) is common. It's a poor choice though. It's quite hard to see if the A and B are struck. No such problems with <s>XYZ</s>. And once I decided the strikethrough icons from OO.ui were really not acceptable for me, I had to do bold and italic as well to maintain consistency.<br style="margin-bottom:0.5em"/>Thanks again for pointing me towards aria-label! <span id="Alexis_Jazz:1660336461237:WikipediaBWLCLNVillage_pump_(technical)" class="BawlCmt">— <span style="color:#e08020">Alexis Jazz</span> ([[User talk:Alexis Jazz|talk]] or ping me) 20:34, 12 August 2022 (UTC)</span>