Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Chore: Improve Accessibility #129

Closed
2 tasks done
nelsonic opened this issue Aug 13, 2022 · 16 comments
Closed
2 tasks done

Chore: Improve Accessibility #129

nelsonic opened this issue Aug 13, 2022 · 16 comments
Assignees
@nelsonic
Labels
awaiting-review An issue or pull request that needs to be reviewed chore a tedious but necessary task often paying technical debt enhancement New feature or enhancement of existing functionality help wanted If you can help make progress with this issue, please comment! priority-2 Second highest priority, should be worked on as soon as the Priority-1 issues are finished starter A beginner-friendly issue that is a good starting point for a new person T1h Time Estimate 1 Hour technical A technical issue that requires understanding of the code, infrastructure or dependencies user-feedback Feedback from people using the App

Comments

@nelsonic
Copy link
Member

nelsonic commented Aug 13, 2022 •
edited
Loading

At present the Accessibility of the MVP is not lacking:
https://web.dev/measure/?url=https%3A%2F%2Fmvp.fly.dev%2F
image

This is reasonably easy to solve as we only have one form.

Todo

  • Follow the guidelines on Accessibility to achieve a 100% score.

Best Practices

  • Check best practices advice on logo image size. Can we create a smaller logo e.g. 24x24px
    or enlarge the logo in the UI to 32x32px

image

At present this is what the Top Nav looks like for me:
image

Related: #128
@nelsonic nelsonic added enhancement New feature or enhancement of existing functionality help wanted If you can help make progress with this issue, please comment! technical A technical issue that requires understanding of the code, infrastructure or dependencies priority-2 Second highest priority, should be worked on as soon as the Priority-1 issues are finished user-feedback Feedback from people using the App starter A beginner-friendly issue that is a good starting point for a new person chore a tedious but necessary task often paying technical debt T1h Time Estimate 1 Hour labels Aug 13, 2022
@nelsonic nelsonic self-assigned this Aug 14, 2022
@nelsonic
Copy link
Member Author

I'm going to try and pick this up now as my last pomodoro of the day. ⏳ 🍅

@nelsonic nelsonic added the in-progress An issue or pull request that is being worked on by the assigned person label Aug 14, 2022
@nelsonic
Copy link
Member Author

image

@nelsonic
Copy link
Member Author

First thing on the Accessiblity Improvement list is: "Form elements do not have associated labels"

image

Docs: https://web.dev/label/#:~:text=Labels%20ensure%20that%20form%20controls,makes%20a%20larger%20click%20target.

Question: https://www.google.com/search?q=can+a+form+label+be+hidden

https://www.w3.org/WAI/tutorials/forms/labels/#:~:text=The%20label%20can%20be%20hidden,reader%20and%20speech%20input%20users.
image

Ok, that was easy enough. 👌

nelsonic added a commit that referenced this issue Aug 14, 2022
@nelsonic
add label to checkbox in form for #129
549a383
@nelsonic
Copy link
Member Author

Next is a bit more tricky because it kinda messes with the "branding" ... 💭 🌈
image

Going to try and increase the contrast by bumping the saturation on all the buttons. 🧑‍💻

@nelsonic
Copy link
Member Author

Definitely prefer the brighter colors ... but this is what I've done:

image

nelsonic added a commit that referenced this issue Aug 14, 2022
@nelsonic
increase contrast on all buttons for accessibility #129
c836504
nelsonic added a commit that referenced this issue Aug 14, 2022
@nelsonic
use <main> instead of <div> for a11y #129
7278a8e
@nelsonic
Copy link
Member Author

Going through the errors detected by Validator:
https://validator.w3.org/nu/?doc=https%3A%2F%2Fmvp.fly.dev%2F
image

@nelsonic
Copy link
Member Author

Basically none of the custom LiveView attributes e.g. phx-track-static, phx-submit, phx-value-id
or x-on:input from Alpine.js are allowed by W3C ... 🤦‍♂️

@nelsonic nelsonic mentioned this issue Aug 14, 2022
Merged
nelsonic added a commit that referenced this issue Aug 14, 2022
@nelsonic
update contrast of buttons for a11y #129
16097e3
@nelsonic
Copy link
Member Author

Deployed my branch and now get: https://web.dev/measure/?url=https%3A%2F%2Fmvp.fly.dev%2F
image

PR: #130

nelsonic added a commit that referenced this issue Aug 14, 2022
@nelsonic
add Content-Security-Policy meta tag for "best practices" #129
4bd6486
nelsonic added a commit that referenced this issue Aug 14, 2022
@nelsonic
add CSP https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP for #129
8e32fc7
@nelsonic
Copy link
Member Author

Reading: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

@nelsonic
Copy link
Member Author

https://content-security-policy.com/

nelsonic added a commit that referenced this issue Aug 14, 2022
@nelsonic
add cdnjs and dwyl.com to CSP #129
7f758e8
nelsonic added a commit that referenced this issue Aug 14, 2022
@nelsonic
attempt to add script-src CSP #129
9af84ba
@nelsonic
Copy link
Member Author

Looks like we need to add 'unsafe-eval' for the scripts loaded from cdnjs ... 💭
see: aframevr/aframe#5028

nelsonic added a commit that referenced this issue Aug 14, 2022
@nelsonic
add sript-src unsafe-eval for CSP #129
6a5332c
nelsonic added a commit that referenced this issue Aug 14, 2022
@nelsonic
add unsafe-inline to CSP for #129
2455ad3
@nelsonic
Copy link
Member Author

Accessibility 100. ✅
image

@nelsonic
Copy link
Member Author

The final aspect of "Best Practices" that we can improve on is the images ...
https://web.dev/codelab-serve-images-correct-dimensions/

Think it's worth having a separate issue for this. 💭

@nelsonic nelsonic added awaiting-review An issue or pull request that needs to be reviewed and removed in-progress An issue or pull request that is being worked on by the assigned person labels Aug 14, 2022
@nelsonic
Copy link
Member Author

https://elixirforum.com/t/securityerror-the-operation-is-insecure-content-security-policy-directive-default-src-self/48362/10

nelsonic added a commit that referenced this issue Aug 14, 2022
@nelsonic
add connect-src self; to CSP for #129
8f7bb8e
nelsonic added a commit that referenced this issue Aug 14, 2022
@nelsonic
connect-src self wss://mvp.fly.dev; #129
19701a4
nelsonic added a commit that referenced this issue Aug 14, 2022
@nelsonic
style-src self unsafe-inline; CSP #129
36c3857
SimonLab added a commit that referenced this issue Aug 15, 2022
@SimonLab
Merge pull request #130 from dwyl/improve-accessibility-issue-#129
25a138e 
PR: Improve Accessibility #129
@nelsonic nelsonic mentioned this issue Aug 17, 2022
Closed
@nelsonic
Copy link
Member Author

Don't think there's anything else to do for this issue: https://web.dev/measure/?url=https%3A%2F%2Fmvp.fly.dev%2F
image

@nelsonic
Copy link
Member Author

Closing. ✅

@nelsonic nelsonic mentioned this issue Oct 11, 2022
Open
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nelsonic nelsonic

Labels
awaiting-review An issue or pull request that needs to be reviewed chore a tedious but necessary task often paying technical debt enhancement New feature or enhancement of existing functionality help wanted If you can help make progress with this issue, please comment! priority-2 Second highest priority, should be worked on as soon as the Priority-1 issues are finished starter A beginner-friendly issue that is a good starting point for a new person T1h Time Estimate 1 Hour technical A technical issue that requires understanding of the code, infrastructure or dependencies user-feedback Feedback from people using the App
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@nelsonic