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

[Eva Cerninakova]

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.

[Meg Stroup (mstroup)]

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.

[Linda Jansova (skolkova-s)]

I confirm the bug still appears in Evergreen 3.3.

[Eva Cerninakova (ece)]

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).

[Meg Stroup (mstroup)]

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

It's a usability and potentially an accessibility issue.

[Linda Jansova (skolkova-s)]

This bug still appears in 3.3.2.

[Eva Cerninakova (ece)]

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

[Terran McCanna (tmccanna)]

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