Accessibility issues on the Post a Job page

[nickytonline]

Describe the bug

There are currently accessibility violations on the post a job page.

To Reproduce

Steps to reproduce the behavior:

1. Install the WAVE browser extension for.
2. Navigate to https://protege.dev/post-a-job or localhost:3000/post-a-job if your local development server is running.
3. Click on the WAVE icon in the list of extension of your browser.

3. The WAVE extension will open a side bar on the left of your browser window. Click on the Details tab to see a detailed list of accessibility violations.

Expected behavior

There should be no accessibilty violations on the page.

Screenshots

Desktop (please complete the following information):

N/A

Smartphone (please complete the following information):

N/A

Additional context

N/A

[nickytonline]

A @drewclem or @pickleat, would it be possible to add an accessibility label for this issue and the other accessibility issues I logged? Thanks!

[Nelson-Chinedu]

Hi @drewclem @pickleat @nickytonline is this issue still open

[pickleat]

I believe so!

[nickytonline]

Assigning it to you @Nelson-Chinedu. For contrast issues, just check with @drewclem for colour changes.

[Nelson-Chinedu]

@nickytonline okay

[Nelson-Chinedu]

Hi @nickytonline I tried testing locally on my machine but running the server I do get 'bin' is not recognized as an internal or external command, operable program or batch file. any heads up on what to do.

P:S have installed the dependencies

[pickleat]

Yes, this relates to #127, we're all Mac users and not sure how to solve or test that issue honestly.

[pickleat]

I think there is a workaround in that Issue, but I'm not certain. Wish I had a better answer for you 😬 .

[nickytonline]

I'll look into getting #127 sorted out.

[Nelson-Chinedu]

Hi @nickytonline, have you sorted #127 out?

[nickytonline]

Hi @nickytonline, have you sorted #127 out?

I'll have a PR up for it tonight. For now, if you want to get started on this, just remove the prestart script temporarily in package.json

[nickytonline]

@Nelson-Chinedu, #127 has been resolved.

[kldickenson]

@Nelson-Chinedu @nickytonline Is this issue still open? If so, let me know if I can help out. -- Karen

[ghost]

If it's still open and it looks like it is, can i jump in and work on it?

[nickytonline]

@kldickenson, it is still open. @Nelson-Chinedu has been pretty silent, so I can assign this to you. @JoeChuCodes, since @kldickenson asked first, I've assigned it to them. Karen if you'd like to team up with Joe on this, I leave that up to you.

[ghost]

Sure that would be awesome. First time contributor but long time learner. Doesn't seem to hard to fix this :)

[kldickenson]

Accessibility audit was done with Axe Chrome extension and PR submitted:

224

Issues that could not be solved: Buttons must have descriptive text (x16) - All related to the Job Description editor created with react-quill, see quilljs/quill, Suggestions for toolbar accessibility #2038

With these changes, Lighthouse score has improved to 94 (from 92). When Quill.js fixes their toolbar a11y issues, this should get up to at least 98. Remaining 2 points will be the H2s with the background images. Axe cannot decern the contrast between the text and the background images.

@JoeChuCodes , the PR has all the details of the changes I made. If you have any questions, feel free to reach out to me.

[ghost]

Not really you went the same route I did. What about adding descriptors to the H2's images

On Mon, Nov 30, 2020 at 5:57 PM Karen Dickenson notifications@github.com wrote:

Accessibility audit was done with Axe Chrome extension and PR submitted:

224 https://github.com/drewclem/protege/pull/224

Issues that could not be solved: Buttons must have descriptive text (x16) - All related to the Job Description editor created with react-quill, see quilljs/quill, Suggestions for toolbar accessibility #2038 https://github.com/quilljs/quill/issues/2038

With these changes, Lighthouse score has improved to 94 (from 92). When Quill.js fixes their toolbar a11y issues, this should get up to at least

98. Remaining 2 points will be the H2s with the background images. Axe cannot decern the contrast between the text and the background images.

@JoeChuCodes https://github.com/JoeChuCodes , the PR has all the details of the changes I made. If you have any questions, feel free to reach out to me.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/drewclem/protege/issues/151#issuecomment-736105398, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQYZYVD6G2IMMCWZJZOFEG3SSQPMHANCNFSM4QPLGRPQ .

[kldickenson]

@JoeChuCodes Thanks for thinking about the H2s with backgrounds. I don't think a descriptor is necessary on the H2s as the backgrounds are decorative, applied via CSS background-image, and will NOT be perceivable by screenreaders. The text is perceivable since it is not part of the background image. See WCAG2.0, 1.1.1 Text Alternative for Decoration, Formatting, Invisible

[sethburtonhall]

@kldickenson where are we with this issue?

[kldickenson]

I thought Drew merged the changes I made.

The a11y issues that could not be addressed are part of the integrated text editor provided by the react-quill plugin. Per https://github.com/quilljs/quill/issues/2038, I don't think react-quill has solved them yet.

Karen Dickenson KLD Interactive Design

On Tue, Mar 9, 2021 at 2:24 PM Seth Hall @.***> wrote:

@kldickenson https://github.com/kldickenson where are we with this issue?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/drewclem/protege/issues/151#issuecomment-794339616, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAP2IMBAU7IWUNNVCCY2YHLTCZRV3ANCNFSM4QPLGRPQ .