WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Text spacing for labels

for

Number of posts in this thread: 4 (In chronological order)

From: Ajay Sharma
Date: Fri, Mar 27 2020 6:55PM
Subject: Text spacing for labels
No previous message | Next message →

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

From: Patrick H. Lauke
Date: Fri, Mar 27 2020 8:17PM
Subject: Re: Text spacing for labels
← Previous message | Next message →

On 28/03/2020 00:55, 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?

I believe you're misunderstanding the SC. It doesn't say YOU as a
developer have to set those text spacing styles. It says that when a
USER does it (through whatever means they have, such as their own
bookmarklet, custom settings in their browser, greasemonkey script, etc)
that things don't break (overlap, stop working, get cut off).

P
--
Patrick H. Lauke

https://www.splintered.co.uk/ | https://github.com/patrickhlauke
https://flickr.com/photos/redux/ | https://www.deviantart.com/redux
twitter: @patrick_h_lauke | skype: patrick_h_lauke

From: Mallory
Date: Sat, Mar 28 2020 7:56AM
Subject: Re: Text spacing for labels
← Previous message | Next message →

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

From: Ajay Sharma
Date: Sat, Mar 28 2020 1:04PM
Subject: Re: Text spacing for labels
← Previous message | No next message

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 ADDRESS 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
>> >> >> >> >>
> > > >