Add labels for Contacts menu and Settings, thanks to @MarcoZehe by jancborchardt · Pull Request #9224 · nextcloud/server

jancborchardt · 2018-04-18T11:35:45Z

Ideally, the labels should show up as popovers also when hovering just like for the apps cc @juliushaertl @skjnldsv.

Please review @nextcloud/accessibility @nextcloud/designers @MarcoZehe

aria-label: https://www.w3.org/WAI/tutorials/page-structure/labels/
aria-haspopup & aria-expanded (should both be on button element though): https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/menu-button/menu-button-links.html
Not using maximum-scale: https://a11yproject.com/posts/never-use-maximum-scale/

MarcoZehe · 2018-04-18T11:54:30Z

 </div>
- <div id="settings">
+ <nav id="settings" aria-label="Settings">
 <div id="expand" tabindex="0" role="link" class="menutoggle">


This would create a navigation landmark with the label "Settings", but the actual link (which should be a button) will still not be labeled. Also, due to the tabindex attribute, keyboard focus will land on here. So what the user will hear is:
"Settings navigation landmark"
followed by "Link".
And that link still won't say that it is the Settings link, that it's actually hiding a dropdown menu (aria-haspopup="true", and that it's currently hiding it (aria-expanded="false"). Oh and yes that div should have a role of "button", not "link". Links go somewhere, buttons do something.

Just added the aria-haspopup, -expanded and -controls attributes. Will look into the other things now, thank you!

I moved the aria-label="Settings" down to the actual link, and also added an aria-label="Settings menu" to the menu. Is that correct?

MorrisJobke · 2018-04-18T11:55:59Z

 <div class="menu"></div>
 </div>
- <div id="settings">
+ <nav id="settings" aria-label="Settings">


Shouldn't this be localized as well?

Yes, aria-label, or anything referenced by aria-labeledby via ID, as well as aria-describedby (for additional info, less often used), are spoken by a screen reader and thus should be localized.

codecov · 2018-04-18T12:09:20Z

Codecov Report

Merging #9224 into master will decrease coverage by <.01%.
The diff coverage is 10%.

@@ Coverage Diff @@## master #9224 +/- ##
============================================
- Coverage 51.91% 51.91% -0.01% 
Complexity 25361 25361 ============================================
Files 1606 1606 Lines 95311 95317 +6 Branches 1394 1394 ============================================
+ Hits 49478 49480 +2 - Misses 45833 45837 +4

Impacted Files	Coverage Δ	Complexity Δ
core/templates/login.php	`0% <ø> (ø)`	`0 <0> (ø)`	⬇️
core/templates/layout.public.php	`0% <0%> (ø)`	`0 <0> (ø)`	⬇️
core/templates/layout.user.php	`0% <0%> (ø)`	`0 <0> (ø)`	⬇️
core/templates/layout.guest.php	`0% <0%> (ø)`	`0 <0> (ø)`	⬇️
core/templates/layout.base.php	`0% <0%> (ø)`	`0 <0> (ø)`	⬇️
core/js/js.js	`65.96% <100%> (+0.07%)`	`0 <0> (ø)`	⬇️
apps/files_trashbin/lib/Trashbin.php	`72.46% <0%> (-0.25%)`	`136% <0%> (ø)`
lib/private/Files/Cache/Propagator.php	`96.2% <0%> (+1.26%)`	`16% <0%> (ø)`	⬇️

jancborchardt · 2018-04-18T12:18:27Z

Also added labels to the apps now. @MarcoZehe I did it via aria-label on the link directly, since it’s simpler than aria-labelledby referring to the span.

jancborchardt · 2018-04-18T12:37:37Z

@MarcoZehe I think now all the feedback points you mentioned on Twitter should be fixed? (Except making the elements buttons, because that will need some more global CSS work.)

@nextcloud/accessibility please check also. :)

juliusknorr · 2018-04-18T13:02:37Z

 </ul>

-	</div>
+</nav>


Indentation seems wrong here.

@MarcoZehe

… thanks to @MarcoZehe Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

jancborchardt · 2018-04-18T13:10:04Z

Squashed the commits into one also because it’s not so much, and in case we want to backport. @MorrisJobke?

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

jancborchardt · 2018-04-18T14:22:50Z

I also went through it with aXe again and fixed some more color contrast and issues on the log in page. This should be good to go now, and other aspects like settings and such we should do in separate pull requests.

MorrisJobke · 2018-04-19T09:11:33Z

Retriggered the CI job

jancborchardt · 2018-04-19T12:33:11Z

@MarcoZehe by the way, I’d like to invite you to the Nextcloud organization here, and the accessibility team as well. Let me know if you are ok with that. :)

MorrisJobke · 2018-04-19T12:47:40Z

We should backport this to stable13 for 13.0.3

tyrylu · 2018-04-19T18:20:48Z

Yes, please, i would be glad as well.

MorrisJobke · 2018-05-09T06:49:44Z

We should backport this to stable13 for 13.0.3

@jancborchardt Could you do this? Thanks

jancborchardt · 2018-05-09T08:32:12Z

@MorrisJobke I have issues with my laptop currently as it is not properly charging, and is off to repair since yesterday eve. :/ Could I ask you to do it?

MorrisJobke · 2018-05-09T09:43:38Z

@MorrisJobke I have issues with my laptop currently as it is not properly charging, and is off to repair since yesterday eve. :/ Could I ask you to do it?

Sure - there you go #9433

jancborchardt added bug design Design, UI, UX, etc. 3. to review Waiting for reviews labels Apr 18, 2018

jancborchardt self-assigned this Apr 18, 2018

jancborchardt requested review from MorrisJobke, juliusknorr and skjnldsv April 18, 2018 11:46

MarcoZehe reviewed Apr 18, 2018
View reviewed changes

MorrisJobke reviewed Apr 18, 2018
View reviewed changes

juliusknorr reviewed Apr 18, 2018
View reviewed changes

Comment threadcore/templates/layout.user.php Outdated
</ul>

</div>
</nav>
juliusknorrApr 18, 2018
Copy link
Copy Markdown
Member
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Indentation seems wrong here.

Add proper ARIA attributes and structure to header for accessibility,…
df3c1ac
… thanks to @MarcoZehe Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

jancborchardt force-pushed the accessibility-improvements branch from f704b5f to df3c1acCompare April 18, 2018 13:09

jancborchardt added 4 commits April 18, 2018 15:38

Ensure proper color contrast according to WCAG AA
0d675ec
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Add aria-label to more-apps menu as well
0ee9924
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Do not restrict zooming in
1c00f82
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

Fix form labels and main landmark on log in page
0f9ba85
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

jancborchardt mentioned this pull request Apr 18, 2018
Use aXe Accessibility Engine in tests to ensure accessibility #9227
Open

juliusknorr approved these changes Apr 18, 2018
View reviewed changes

skjnldsv approved these changes Apr 19, 2018
View reviewed changes

MorrisJobke added this to the Nextcloud 14 milestone Apr 19, 2018

MorrisJobke merged commit 0bae516 into masterApr 19, 2018

MorrisJobke deleted the accessibility-improvements branch April 19, 2018 12:47

MorrisJobke added the backport-request label Apr 19, 2018

MorrisJobke mentioned this pull request May 9, 2018
[stable13] Add labels for Contacts menu and Settings #9433
Merged

MorrisJobke removed the backport-request label May 9, 2018

jancborchardt added the feature: accessibility label Jun 21, 2018

  </ul>
-	</div>
+</nav>

Uh oh!

Uh oh!

Conversation

jancborchardt commented Apr 18, 2018• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

MarcoZeheApr 18, 2018

Choose a reason for hiding this comment

Uh oh!

jancborchardtApr 18, 2018

Choose a reason for hiding this comment

Uh oh!

jancborchardtApr 18, 2018

Choose a reason for hiding this comment

Uh oh!

MorrisJobkeApr 18, 2018

Choose a reason for hiding this comment

Uh oh!

MarcoZeheApr 18, 2018

Choose a reason for hiding this comment

Uh oh!

codecovBot commented Apr 18, 2018• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

jancborchardt commented Apr 18, 2018

Uh oh!

jancborchardt commented Apr 18, 2018

Uh oh!

juliusknorrApr 18, 2018

Choose a reason for hiding this comment

Uh oh!

jancborchardt commented Apr 18, 2018

Uh oh!

jancborchardt commented Apr 18, 2018

Uh oh!

MorrisJobke commented Apr 19, 2018

Uh oh!

jancborchardt commented Apr 19, 2018

Uh oh!

MorrisJobke commented Apr 19, 2018

Uh oh!

tyrylu commented Apr 19, 2018

Uh oh!

MorrisJobke commented May 9, 2018

Uh oh!

jancborchardt commented May 9, 2018

Uh oh!

MorrisJobke commented May 9, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

jancborchardt commented Apr 18, 2018•
edited
Loading

codecovBot commented Apr 18, 2018•
edited
Loading