search

gordon-cs / gordon-360-ui

Gordon 360 User Interface
https://360.gordon.edu
15 stars 10 forks source link

Fix Overall Accessibility -> Replace PX with REMs #812

Open cpabbot opened 4 years ago

cpabbot commented 4 years ago

Many UI elements of the 360 site use pixels in their units (a fixed unit) when they should be using REMs, a size unit that is relative to the document font size. This can be an accessibility issue as some users may set their default browser font size to something other than the default. The dropdown links that appear when clicking the profile avatar are a good example of how the UI should react (no pun intended).

To test this out for yourself, open up developer tools (usually ctrl/cmd shift i or inspect element) and change the font size of the base tag to a different pixel value, and see how the UI responds. A lot of the text responds well but not the layout.

See this website for more information and advice on size units.

andrew-wzj commented 1 year ago

There are so many parameters of pixels need to change, I will only change the conversion in one feature at each pull request.

andrew-wzj commented 1 year ago

Also my question for this issue: are all the changes we need by manually converting PXs to REMs. I just did it to Header file, and should I just repeat this process without change anything else.

bennettforkner commented 1 year ago

Clarification on this: There are a lot of cases where we DO want to use PX instead of REM or EM in the codebase. Things such as breakpoint widths (change design based on screen size) and others should never be replaced with REM.

This will take some careful and intentional thought to address case-by-case.