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

View your works accessibility audit #3966

Closed
kellyChex opened this issue Sep 12, 2019 · 5 comments · Fixed by #4160 or #4578
Closed

View your works accessibility audit #3966

kellyChex opened this issue Sep 12, 2019 · 5 comments · Fixed by #4160 or #4578
Assignees
@bkeese
Labels
accessibility-concern
Milestone
3.x series

Comments

@kellyChex
Copy link

kellyChex commented Sep 12, 2019 •
edited
Loading

Descriptive summary

In testing for the Hyrax 3.0 release, the following points are actions that need to be taken on the Hyrax view your works page in order to be more accessible:

ARIA hidden element must not contain focusable elements:
Screen Shot 2019-09-11 at 5 19 37 PM

Screen Shot 2019-09-11 at 5 20 05 PM

Screen Shot 2019-09-11 at 5 20 32 PM

Screen Shot 2019-09-11 at 5 24 39 PM

Screen Shot 2019-09-11 at 5 25 07 PM

Screen Shot 2019-09-11 at 5 25 32 PM

Screen Shot 2019-09-11 at 5 25 58 PM

Screen Shot 2019-09-11 at 5 26 20 PM

Screen Shot 2019-09-11 at 5 26 45 PM

Screen Shot 2019-09-11 at 5 27 07 PM

<li> elements must be contained in a <ul> or <ol>

Screen Shot 2019-09-11 at 5 27 57 PM

Screen Shot 2019-09-11 at 5 28 19 PM

ARIA role must be appropriate for the element:
Screen Shot 2019-09-11 at 5 29 03 PM

Screen Shot 2019-09-11 at 5 29 28 PM

Checkbox inputs with the same name attribute value must be part of a group:
Screen Shot 2019-09-11 at 5 31 37 PM

Ensures landmarks are unique:
Screen Shot 2019-09-11 at 5 32 14 PM

Steps to reproduce the behavior

  1. Install the Axe plugin or addon from Deque (https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/ is the firefox version).
  2. Open https://nurax-dev.curationexperts.com/dashboard/my/works?locale=en
  3. Open the inspector (right-click, and select "Inspect element")
  4. Click on the 'Axe' tab
  5. Click 'Analyze'

Tab Test

In Firefox and Safari, unable to tab through many of the links such as the links to the works.

Chrome works well.

Screen Recording 2019-09-16 at 01 57 PM
@no-reply no-reply added this to the 3.x series milestone Sep 12, 2019
@Dananji Dananji mentioned this issue Nov 8, 2019
Merged
@Dananji Dananji self-assigned this Nov 8, 2019
@dlim87
Copy link

dlim87 commented Nov 18, 2019

Axe found 4 errors, 2 major ones for this page:

Images must have alternate text

Image 2019-11-18 at 7 51 35 AM

Heading levels should only increase by one

Image 2019-11-18 at 7 52 11 AM

And 2 minor ones that we decided were probably just due to Nurax's implementation instead of hyrax:

All page content must be enclosed by landmarks

Image 2019-11-18 at 7 54 37 AM

Elements must have sufficient color contrast

Image 2019-11-18 at 7 54 56 AM

@dlim87
Copy link

dlim87 commented Nov 18, 2019

@Dananji ^

@dlim87 dlim87 reopened this Nov 18, 2019
@bkeese bkeese assigned bkeese and unassigned Dananji Sep 10, 2020
jeremyf added a commit that referenced this issue Oct 7, 2020
@jeremyf
Restoring HTML form field name.
a09812c 
In 241cbed we introduced changes to
address accessibility issues reported in #3966.  However, the introduced
change broke the HTML form field names and the assumed parameters for
the [batch processing][1].

This commit reverts that change, but it does not address the
accessibility concern raised in #3966.  That is for another commit, as I
don't know if that other commit is the correct path forward.

Closes #4516
Closes #4515

[1]:https://github.com/samvera/hyrax/blob/3c7258c95c1fe6f0fe1537078f3f5f458f211989/app/controllers/concerns/hyrax/collections/accepts_batches.rb#L20-L28
jeremyf added a commit that referenced this issue Oct 7, 2020
@jeremyf
Adding fieldset to address like named form inputs
b152637 
In consultation with @Dananji and following the [guidance of W3.org][1],
this commit wraps the forms (or controls) that render the
[add_buttom partial][2].  I don't believe that I have access to the
accessibility testing software, so this is a bit of a stab in the dark.

Note, in some cases I render the fieldset as a direct child of the form,
in other cases, I render the fieldset as a container for the table used
to present the elements that render the add button partial.

This relates to work done in #4160 to address #3966.

[1]:https://www.w3.org/WAI/tutorials/forms/grouping/
[2]:https://github.com/samvera/hyrax/blob/d5aa2f9ca802fe670687bb4f7c14ad242c1bacf6/app/views/hyrax/batch_select/_add_button.html.erb#L2
@jeremyf jeremyf mentioned this issue Oct 7, 2020
Merged
jeremyf added a commit that referenced this issue Oct 7, 2020
@jeremyf
Restoring HTML form field name.
da4f2fd 
In 241cbed we introduced changes to
address accessibility issues reported in #3966.  However, the introduced
change broke the HTML form field names and the assumed parameters for
the [batch processing][1].

This commit reverts that change, but it does not address the
accessibility concern raised in #3966.  That is for another commit, as I
don't know if that other commit is the correct path forward.

Closes #4516
Closes #4515

[1]:https://github.com/samvera/hyrax/blob/3c7258c95c1fe6f0fe1537078f3f5f458f211989/app/controllers/concerns/hyrax/collections/accepts_batches.rb#L20-L28
jeremyf added a commit that referenced this issue Oct 7, 2020
@jeremyf
Adding fieldset to address like named form inputs
8384679 
In consultation with @Dananji and following the [guidance of W3.org][1],
this commit wraps the forms (or controls) that render the
[add_buttom partial][2].  I don't believe that I have access to the
accessibility testing software, so this is a bit of a stab in the dark.

Note, in some cases I render the fieldset as a direct child of the form,
in other cases, I render the fieldset as a container for the table used
to present the elements that render the add button partial.

This relates to work done in #4160 to address #3966.

[1]:https://www.w3.org/WAI/tutorials/forms/grouping/
[2]:https://github.com/samvera/hyrax/blob/d5aa2f9ca802fe670687bb4f7c14ad242c1bacf6/app/views/hyrax/batch_select/_add_button.html.erb#L2
@bkeese bkeese removed their assignment Oct 7, 2020
@bkeese bkeese self-assigned this Nov 11, 2020
@bkeese bkeese mentioned this issue Nov 11, 2020
Merged
@MariaStarPower
Copy link

This passes, but with some minor issues. Also tabbing with Firefox is limited, as I cannot tab through everything on the page.

Results of Axe analysis of the view your works page:

image

image

image

image

@jlhardes
Copy link
Contributor

This issue seems to be a report of an accessibility audit and might point to multiple things that need to be fixed. Review needed to determine work that remains to be done. Not a blocker for Hyrax 3.0 release.

@rjkati
Copy link

rjkati commented Feb 23, 2021

Per conversation in hyrax-wg slack, I created a new ticket for the issues that @MariaStarPower flagged: #4753

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@bkeese bkeese

Labels
accessibility-concern
Projects
None yet
Milestone
3.x series
8 participants
@Dananji @no-reply @jlhardes @dlim87 @bkeese @kellyChex @rjkati @MariaStarPower