WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Text spacing for labels

for

From: Ajay Sharma
Date: Mar 28, 2020 1:04PM

Thanks Mallory and Patrick, I think we could build a good design based on the mentioned tips. Btw, we are using bookmarklet to apply custom CSS, sorry for not being clear 😊

Thanks again!
Ajay


> On Mar 28, 2020, at 6:56 AM, Mallory < <EMAIL REMOVED> > wrote:
>
> 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
>> >> >> >> >>
> > > >