Accessibility issue: no lang attribute

[scoutb-cogapp]

UV version: [email protected]

I'm submitting a: bug report => please fork one of these codesandbox examples with a repro of your issue and include a link to it below

Page area

all items that switch language

Issue description

UV does not set any lang attributes. There is a language switcher that changes many ineractive elements. But these items need a lang attribute which changes accordingly so that assistive technologies can announce them correctly.

Steps to reproduce

1. open this manifest
2. use the language switcher and browser devtools to investigate the code

Expected behaviour

When a multilingual screenreader user switches to a different language, the screenreader should be able to use the appropriate language to read out content.

Possible fix

Every item that changes when the language is switched (like buttons) should be marked with a lang attribute and that attribute should change according to language.

WCAG criterion

3.1.2 Language of Parts (Level AA)

Related code example

<button class="btn imageBtn next" tabindex="0" title="Nästa bild">
    <i class="uv-icon-next" aria-hidden="true"></i>
    <span class="sr-only">Nästa bild</span>
</button>

[thattonBL]

@thattonBL I can pick this one up

[thattonBL]

Okay I spent a couple of days looking at this and the issue is that there is no current way of accessing the current localisation value from within the component. To make localisation accessible within each component I think the way to go is to make the BaseView which extends ModuleConfig to additionally extend Localisation. This however means changing a lot of code and perhaps this could do with some prior discussion and being implemented in a separate sprint of a longer sprint which will allow for an extensive smoke test.

[demiankatz]

My question is what granularity is needed? If we put the user-selected language as an attribute on the top-most tag of the UV, is that good enough as long as text in other languages (e.g. in metadata) is tagged appropriately? If so, is it possible that this could be addressed by ensuring the top-level tag has an ID on it, and then injecting the attribute using the ID whenever the locale is set or changed?

(I'm not an expert on HTML semantics, and I'm making this suggestion without reviewing any actual code, so it's entirely possible this is a bad idea -- but just asking in case it is potentially viable, or might be a "better than nothing" first step).

[thattonBL]

My question is what granularity is needed? If we put the user-selected language as an attribute on the top-most tag of the UV, is that good enough as long as text in other languages (e.g. in metadata) is tagged appropriately? If so, is it possible that this could be addressed by ensuring the top-level tag has an ID on it, and then injecting the attribute using the ID whenever the locale is set or changed?

(I'm not an expert on HTML semantics, and I'm making this suggestion without reviewing any actual code, so it's entirely possible this is a bad idea -- but just asking in case it is potentially viable, or might be a "better than nothing" first step).

Hi Damien, yes there is an "en-gb" css class in the div at the third level in which changes when the language is changed. The story implies that each readable element requires a "lang" attribute so this was my aim.

[demiankatz]

Hi Damien, yes there is an "en-gb" css class in the div at the third level in which changes when the language is changed. The story implies that each readable element requires a "lang" attribute so this was my aim.

If we can find the code that's applying that CSS class, we might be able to adjust it to also set the lang attribute at the same time... Let me know if you'd like me to help find it!

[thattonBL]

I can easily do this, the code is in the BaseExtension.ts in the uv-shared-module. I will test with a screen reader and see if it has the desired effect.

[thattonBL]

I may be missing something here but using NVDA screen reader nothing in the UV is actually read out currently???

[demiankatz]

I may be missing something here but using NVDA screen reader nothing in the UV is actually read out currently???

When I run NVDA and go to the examples page, the UV doesn't get read automatically for me either -- but if I use the keyboard controls to start tabbing through elements within the UV, NVDA announces them all correctly.

I think this must be somehow related to the way the examples page is set up. When I look at the UV on Villanova's Digital Library, NVDA announces its contents automatically at the appropriate time.

[thattonBL]

I found that Firefox works as I expect but not Chrome with NVDA. So immediately the text under the mouse cursor is read out. But what I can't produce is the accent changing. There is a checkbox within NVDA preferences to "change the accent where it is available" which I have checked. In the code I can manually add a "lang" attribute to the "Contents" heading of the left panel by hardcoding it on line:34 of uv-shared-module/BaseExpandPanel.ts but no change in pronunciation?

[thattonBL]

Hmmm okay, it looks like it might be the case that there is a bug in NVDA related to this functionality. The last comment on this bug is from Jul 31 this year saying it's still broken: https://github.com/nvaccess/nvda/issues/12611 We could do with a screen reader that works...

[scoutb-cogapp]

if anybody has a mac, they could try voiceover. they behave differently in many ways but would be helpful to see if the code works in principal.

[demiankatz]

@thattonBL, maybe it's worth opening a PR that adds the language attribute as discussed, so it's easier for people to test (if nothing else, switching the language setting in the options dialog is less work than manually adding a lang attribute via code inspector... and it might yield more authentic results too). I don't think having a top-level language setting will hurt anything, even if it doesn't necessarily help as much as we would like.

[thattonBL]

@demiankatz, okay I will add this. It is meant to cascade down to the lower elements anyway. Its going to be a tricky one to test. I had a little go with JAWS but that wasn't reading text under my mouse cursor either, as per NVDA in Chrome.

[scoutb-cogapp]

for testing, it is good to keep in mind that you will have to have the language that you are testing installed. i don't know if that means on your OS or in NVDA. meaning that if you don't have french installed (and also told NVDA to change language when it encounters different languages), your testing the french translation is not going to work. i usually test screenreader behaviour in browserstack as i don't have windows or mac and therefore cannot test this reliably on my own (no language options in browserstack)