Thanks for posting this @mouxdesign!

We'd go through video and log these issues as a task-list here, then proceed with tackling them
cc @Bas02 & @petzsch

@mouxdesign Can you elaborate on what it means that a label is missing or needs improvement? For instance, how would the "Paid invoice" screen be improved and what needs to be changed in terms of HTML? If you could provide a link for guidance, that would also be fine — I'm just struggling to see what needs to be changed concretely, as the spots you marked seem to be "labels" already.

@mouxdesign Can you help me understand what to do exactly? (See my previous comment)

@pavlenex Let's put this into the backlog until we clarify the actual TODOs.

Sure!

The labels on the paid invoice screen as an example:

Labels are the way that the screen reader would read the text to a blind/visually impaired person.

On the invoice paid screen:
The label for Invoice ID would read Invoice ID. This is the aria label on the html side of things.

So its pretty much ensuring that those aria labels are relevant and directly connected to the text there itself.

Imagine that a person cannot see the text on the screen so when they hover over each element, the element itself reads out very succiently what it is.

• View reciept: The aira text would read "view reciept"
• Return to developer wallet: The aria text would read "return to developer wallet"

Hope this is helpful, feel free to shoot over any questions will do my best to help! If you like feel free to send a screen shot of the html of for example the paid invoice screen and then together we can look at the labels.

@mouxdesign Thanks for answering!

Invoice ID

Let's take the Invoice ID as an example:

<div>
    <dt>Invoice ID</dt>
    <dd>9AgMUeAYBJbSt3xxcHGdSV</dd>
</div>

There the connection between the label and content isn't clear, so it would turn into this?

<div>
    <dt id="dt_invoice_id">Invoice ID</dt>
    <dd aria-labelledby="dt_invoice_id">9AgMUeAYBJbSt3xxcHGdSV</dd>
</div>

"Return to" button

For the buttons it isn't clear to me what is missing, because there the connection between the element and descriptive text is present imho, because it's the elements content — what am I missing?

<div class="buttons">
    <a href="/i/DPJKnfjFPJ74SrQcxKAmJ/receipt" id="ReceiptLink" class="btn btn-primary rounded-pill w-100">View receipt</a>
    <a href="https://satoshisteaks.com/" id="StoreLink" class="btn btn-secondary rounded-pill w-100">Return to Satoshis Steaks</a>
</div>

@dennisreimann There's some work by @TChukwuleta done here #5452

@pavlenex I saw that, yet it doesn't address what's described here.

Hello @dennisreimann

I made an update to the PR, for the different things that was pointed out in terms of accessibility and labelling.

Please kindly review.

Just circling back to this one:

The aria label here would describe the text as best as possible to the user. So in this case "invoice id" would also be ok. The voice reader will read out "invoice id".

Then for the button labels.
The buttons would have their own additional labels called aria labels. Like this:

Would the text "view buttons" be readable there by a screen-reader? I am not a programmer and so hard to tell how a users device will read out the text. To my knowledge if the code does not contain the word "aria label" then the screen reader of the users computer does not recognize it as text that it should read out. Hope that makes sense.