Patron self-registration form needs better mobile design (responsiveness and accessibility)

Bug #1819238 reported by Eva Cerninakova
28
This bug affects 5 people
Affects Status Importance Assigned to Milestone
Evergreen
Won't Fix
Undecided
Unassigned

Bug Description

The patron self-registration form is not responsive on mobile devices - the DOB, phone or email examples (etc.) overflow from the visible part of the interface and it is necessary to scroll to the right to see them. The form field are too wide, so they hit the green background.

Moreover, the examples are not accessible due to poor contrast: the examples texts (black) get on a dark green background) and its very hard to read them.

I have attached the screenshot illustrating the problem.

Revision history for this message
Eva Cerninakova (ece) wrote :
tags: added: accessibility
Andrea Neiman (aneiman)
summary: - Patron self-registration form responsibility and ssibility on mobile
+ Patron self-registration form responsibility and accessibility on mobile
devices
Remington Steed (rjs7)
summary: - Patron self-registration form responsibility and accessibility on mobile
- devices
+ Patron self-registration form needs better mobile design (responsiveness
+ and accessibility)
Revision history for this message
Meg Stroup (mstroup) wrote :

Hi Eva,

The form fields on our mobile registration do not hit the background, so no scrolling is necessary (you still have to scroll to see the examples, as you say). I asked our webmaster how she accomplished this, and this is what she said:

"Have her check the width of each box in the CSS. If it’s set to a specific width (e.g. 600px), then ask her to change it to something like 98% instead. This is assuming the page (affected by the page width) is the white background and the green sidebar is treated separately. It might be helpful to add padding around everything as well: https://www.w3schools.com/cssref/pr_padding.asp

The contrast of the examples is just a font color change. Instead of #00000, change it to #FFFFFF."

Katie added that you're welcome to contact her at ksimmons (at) statelibrary.sc.gov.

Revision history for this message
Linda Jansova (skolkova-s) wrote :

I confirm the bug still appears in Evergreen 3.3.

Revision history for this message
Eva Cerninakova (ece) wrote :

Confirmed in 3.3.2
Note: there is certainly possibility to set the width, background color etc., as suggested by Meg, to provide that the information can be read (we solved the problem this way the library) but it is only a partial solution. All parts of the catalog should definitely be responsive by default (especially the one the user encounters first).

Revision history for this message
Meg Stroup (mstroup) wrote :

I agree with Eva that a default solution-- rather than a workaround-- would be preferable.

It's a usability and potentially an accessibility issue.

Revision history for this message
Linda Jansova (skolkova-s) wrote :

This bug still appears in 3.3.2.

Changed in evergreen:
status: New → Confirmed
Revision history for this message
Eva Cerninakova (ece) wrote :

In the Bootstrap OPAC, the problem has been solved.
(Evergreen 3.7 beta)

Revision history for this message
Terran McCanna (tmccanna) wrote :

Marking Won't Fix as additional work is not actively occurring on the old TPAC OPAC.

Changed in evergreen:
status: Confirmed → Won't Fix
To post a comment you must log in.
This report contains Public information  
Everyone can see this information.

Other bug subscribers

Remote bug watches

Bug watches keep track of this bug in other bug trackers.