-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Accessibility Testing: Paid Invoice, Pull Payment, Create Invoice: Tested on Windows #4986
Comments
Thanks for posting this @mouxdesign! We'd go through video and log these issues as a task-list here, then proceed with tackling them |
This comment was marked as spam.
This comment was marked as spam.
This comment was marked as spam.
This comment was marked as spam.
This comment has been minimized.
This comment has been minimized.
@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: 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.
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 IDLet'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" buttonFor 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. |
Hey team,
Thanks for joining us today on the accessibility kick off call. Tested the following screens:
Pretty much just enabled the voice over feature for windows and tested by clicking on various aspects of the UI.
Video walkthrough of how it was tested here; https://www.loom.com/share/eb2c9eb030f24528a3dbc3e14abb01ad
I used some blue and yellow color coding so that it's a quick and easy reference. Most items were labelled, just a few items here and there where it might be helpful to edit or add in labels. Hope this is helpful and if there's any questions feel free to ask.
The text was updated successfully, but these errors were encountered: