[A11Y] Convert core to use EM's for all @media and font-sizes

wesruv commented 8 years ago

https://github.com/backdrop/backdrop-issues/issues/930#issuecomment-204680496

If the CSS for the admin theme is built well this will be really easy to implement. Since that's a goal I have anyway, this is a gimme.

This will be great for those of us that want to have smaller UI as well as a great feature for accessibility. Low vision people's gotsta edit websites too!

... mayhaps a high contrast setting too...

Just had a full day training on accessbility and that and this issue cemented my belief that we should (almost) never use PX in CSS for better flexibility and accessibility.

For a user that increases the default font-size:

If we use PX for our fonts, our text size will be uneffected.
If we use REM/EM for our fonts, but PX for our breakpoints we could be giving the user a broken experience, for example 3-word line lengths in a sidebar that would go away if the site was at a smaller breakpoint.
Using REM/EM for your font-sizes and breakpoints will give users that increase font size 125% an (almost) identical experience as a user that zoomed into the page 125%. (The EMs still have it.)

The issue that could come up unintended EM inheritance, but I think I have a strategy to prevent that from being a problem. Just need to iron some things out.

PR by @wesruv: https://github.com/backdrop/backdrop/pull/1323

mikemccaffrey commented 8 years ago

Great idea to think more about accessibility for people with restricted vision. But perhaps it might be better to approach that from a system-wide perspective, rather than starting the discussion with one possible solution to one problem.

wesruv commented 8 years ago

It'd require the themes to be built using EMs or REMs for all font sizes... unless there's a clever way to set browser zoom from JS or something. Can definitely make the setting, and any theme could benefit from it, but can't promise every theme will use EM's for all font-sizes.

biolithic commented 8 years ago

if there was some sort of standard I would make my themes conform to it. For example, setting a REM (this might not translate to Bartik or other themes without extra work).

For buttons or other minor elements, I can't promise EM's (for example, setting a button height on phones).

On Sun, Apr 3, 2016 at 12:21 PM, wesruv notifications@github.com wrote:

It'd require the themes to be built using EM CSS... unless there's a clever way to set browser zoom from JS or something. Can definitely make the setting, and any theme could benefit from it, but can't promise every theme will use EM's for all font-sizes.

— You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub https://github.com/backdrop/backdrop-issues/issues/1775#issuecomment-205014944

wesruv commented 8 years ago

Updated issue title and description, which will flow into the ability to have a setting for base font-size for the site, per user.

@biolithic, yep. In order to have this be a user facing setting all font sizes would have to be in EM's or REM's, and the user setting would update the font-size on the HTML tag, which would inherit throughout the document.

wesruv commented 8 years ago

Talked about this in the design meeting, we have a green light for changing all breakpoints to EM's, and we need to think/talk about changing all font-sizes and what the approach should be.

https://youtu.be/_UIAWF9XveQ?t=621

wesruv commented 8 years ago

One issue that was brought up was the lack of intuitiveness of EM's over PX in fonts. A way to address that is with the IE8/9 fallback to PX on REM's:

.thing {
  font-size: 18px; /* IE8 fallback to px */
  font-size: 1.125rem;
}

quicksketch commented 8 years ago

Though we're also considering dropping IE8 support: https://github.com/backdrop/backdrop-issues/issues/214#issuecomment-201253535. Though I also have reservations about em/rems and their general difficulty/misunderstanding of how they work.

wesruv commented 8 years ago

There are some issues with REM's in IE9 as well, so it'll be a while before we can drop that fallback completely.

wesruv commented 8 years ago

I should probably admit, I've been an EM fanboy for many years, and want to foist them on everything on I'm on.

Those and CSS Pseudo Elements... LOVE EM!

dboulet commented 8 years ago

Has there been any talk about moving to SASS? It can help make some of the math involved a lot easier. :wink:

biolithic commented 8 years ago

Sass for core CSS files? How would it work? On Apr 14, 2016 3:16 PM, "Dan Boulet" notifications@github.com wrote:

wesruv commented 8 years ago

Even though I'm a HUGE Sass fan, I don't want to add that as a requirement for core.

biolithic commented 8 years ago

Agreed

dboulet commented 8 years ago

Even though I'm a HUGE Sass fan, I don't want to add that as a requirement for core.

That’s completely understandable, it does add complexity to development. It is doable though, WordPress core has been using SASS for years already: http://wptavern.com/wordpress-core-adopts-sass-css-preprocessor.

wesruv commented 8 years ago

To hammer home the EM's in @media queries, here's a forrealsies example.

I've cranked up my Chrome default font size to 'Very Large', did not change the viewport width, and taken screenshots of the top row of the 3-3-4 layout.

With PX in @media queries:

With EM in @media queries

I much prefer the latter, layout adjusting to text size increase, like it does with modern browser's zoom implementations.

Working on a PR to update all core media queries.

wesruv commented 8 years ago

PR for media queries ready for review: https://github.com/backdrop/backdrop/pull/1323

Dinornis commented 7 years ago

Does the PR need to be updated to 1.7.x ?

Somewhat on topic: WordPress is officially ending support for Internet Explorer versions 8, 9, and 10, starting with WordPress 4.8 (see https://make.wordpress.org/core/2017/04/23/target-browser-coverage/)

quicksketch commented 7 years ago

Does the PR need to be updated to 1.7.x ?

Yep, and this is still applying CSS to the old layouts too, we can probably leave those as-is if we're not even allowing them to be enabled on new sites.

We've dropped support for IE8. Perhaps it's time to talk about IE9 and IE10 as well.

jenlampton commented 5 years ago

Adding the 'good first issue' tag since there's a PR here that needs to be rebased (and likely updated, afterward)

backdrop / backdrop-issues

[A11Y] Convert core to use EM's for all @media and font-sizes #1775

The issue that could come up unintended EM inheritance, but I think I have a strategy to prevent that from being a problem. Just need to iron some things out.