Test accessibility of LibCal space booking

[anarchivist]

SUL wants to go live with LibCal for group study room booking in Green, ideally by July 29, 2022. We need to undertake accessibility testing of this feature. I believe the pages we will need to test are the following:

• Green landing page: https://appointments.library.stanford.edu/spaces?lid=15456
• Individual booking pages (maybe not all, an example is https://appointments.library.stanford.edu/space/128662 )
• The variant for screen readers: https://appointments.library.stanford.edu/r/accessible?lid=15456
• The interstitial pages after you start a booking through completion (Reservation details and the confirmation page)

The best recommendation I can follow is to look at the past accessibility analysis that Camille did in August 2021, which used the following methods:

• WCAG compliance checking browser extensions (axe, Lighthouse, Firefox Accessibility Inspector)
• Manual audit screenreader audit (Mac VoiceOver)
• Manual keyboard navigation check

[thatbudakguy]

added comments to Camille's analysis, but here's a quick breakdown of the two major issues.

1. Primary buttons don't have a focus style. this is a WCAG violation and makes it difficult for sighted keyboard users to submit reservation forms. This affects all pages that have primary buttons. Fortunately, it's an easy fix — we are explicitly disabling the focus style on these buttons in our CSS currently, so we just need to set a focus style. Probably good to get a designer's take, but in the meantime we can do something simple but functional. Relevant CSS here:

libapps/libcal/head.html

Lines 166 to 182 in 474cded

	.btn-primary,
	.btn-primary.focus,
	.btn-primary:focus,
	.btn-primary.active,
	.btn-primary:active,
	.open>.dropdown-toggle.btn-primary,
	.btn-primary.active.focus,
	.btn-primary.active:focus,
	.btn-primary:active.focus,
	.btn-primary:active:focus,
	.open>.dropdown-toggle.btn-primary.focus,
	.open>.dropdown-toggle.btn-primary:focus,
	.btn-info {
	background-color: #8c1515 !important;
	border: none !important;
	outline: none !important;
	}

2. The booking widget is not keyboard accessible. no one other than sighted mouse users can interact with this widget, which shows up on the library landing page and individual space booking page. It isn't quite game-over, though, because the "accessible version" of the booking experience works fine for both SRs and keyboard users. The only issue is that sighted keyboard users probably won't know to click the "version of this page for screen readers" link and will be frustrated when they can't initially access the booking widget. This link text should be updated so it's more obvious that keyboard users need to go to this page, too. I think this is a SpringShare thing; not sure what their bandwidth to address it is.

there's a few other minor issues, but nothing that is a blocker to access, and nothing that screen reader users aren't likely used to dealing with elsewhere.

[anarchivist]

Thanks! I know @astridu was working on the room booking part of the LibCal implementation in part, so could you perhaps pair with her to investigate the focus style?

I can submit the feedback to Springshare on the second issue, but it may not get resolved in time for us to launch.

[anarchivist]

@thatbudakguy I went ahead and submitted a Springshare ticket on the "screen reader version" link text, as well as the logout button on reservation confirmation page as tab-navigable and the unlabeled fieldset on the confirmation part of booking.

If you follow up with Astrid and think this is otherwise good to go, let me know and close this issue.

[thatbudakguy]

got some help from Gary on applying the new focus style and addressed everything on our side, so closing this.

[anarchivist]

[anarchivist]

Just to confirm, these changes have now been implemented in LibCal. Thanks again!