WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Text spacing for labels

for

From: Mallory
Date: Mar 28, 2020 7:56AM

Hi Ajay,
(first, the note from Patrick I assume you read and you're now using the custom CSS to *check* that users could change text spacing.)
I've seen issues with the "floating label" technique on a client I'm auditing, and inputs and buttons.
1. I believe the success criteria does include other texty things, like labels.
2. The fix for my current client (and past clients) is doing several things:
- not setting heights on containers (or switching to min-height). In your case, "containers" will including text inputs [input type=text, etc] and buttons.
- use position: relative instead of absolute for floating labels. Change the top position to account for this adjustment, as well as the focussed/filled-input position. Soak up some of the additional visual room you may now have with a negative bottom margin. Now when the labels grow (and possible wrap, which is the case with my client), the inputs can adjust their positions accordingly, and the label text no longer overlaps the inputs when text or line-spacing is enlarged
- for most of my clients this has meant recommending not using px for font sizes, so everything can grow (or shrink) based on the font size, even if font size is changed through something other than zooming (px fonts and px-based heights and widths will zoom, but they won't change if text is enlarged in other ways such as text-only).

hope this helps,
Mallory



On Sat, Mar 28, 2020, at 1:55 AM, Ajay Sharma wrote:
> Hello,
>
> We are using a custom CSS to override the text spacing to the units
> mentioned in this success criteria. It works fine for the chunk of
> text present in paragraphs and individual lines, but it is breaking
> the design for the labels, for example, on buttons, the label floats
> out of the boundary of the button.
>
> So, looking for thoughts on couple of points, first, is this success
> criteria applicable to labels? if yes, is there any good practice to
> handle this?
>
> Thanks!
> Ajay
> > > > >