RE: SC_1.4.12: Text Spacing_Scenario based doubt [SEC=OFFICIAL]

Hi Ragupathy,

Great question!

From the screen shots, I think you may have 2 violations here for truncated or overlapping content.

·         1.4.12 Text Spacing -  related failure F104<https://www.w3.org/WAI/WCAG21/Techniques/failures/F104>.

·         1.4.4 Resize Text - related failures are F69<https://www.w3.org/WAI/WCAG21/Techniques/failures/F69> and F80<https://www.w3.org/WAI/WCAG21/Techniques/failures/F80>.

Even though the  screenshots you have inserted does not show any overlapping content, this may cause confusion for the user to distinguish content of edit field & the label as the position of the floating label & text in edit field is slightly off.

If we are to look at the root cause, overlapping and truncating occurs when we are not using consistent measurements. For example, font-size is set in relative measurement (in percentage, em or rem) & the container size is in absolute measurement (pts or pixels) or vice versa.

To fix this use consistent relative measurement for width, height, padding, font-size in rem. Also make sure the CSS property overflow is not set to hidden.

You can test 1.4.4 Resize Text with the browser’s settings.

If using Microsoft Edge or Chrome,

1.    Go to settings > appearance.

2.    Change the Font size to Very Large or Very small.
You can also change Custom font-size to 2 times the standard font size (For example 32).

3.    Check if all content of the page resize consistently. This includes labels, placeholders, text inside form fields, buttons, form containers itself.

To view how it’s expected to work, check Bootstrap v5.0 document has an example floating label <https://getbootstrap.com/docs/5.0/forms/floating-labels/> which has width, height, padding, font-size in rem.

Hope this helps!

Thanks and regards,
Herin

From: Ragupathy Ramasamy [mailto:meragu87@gmail.com]
Sent: Tuesday, 23 February 2021 6:11 PM
To: w3c-wai-ig@w3.org
Subject: SC_1.4.12: Text Spacing_Scenario based doubt

⚠ EXTERNAL EMAIL: Do not click any links or open any attachments unless you trust the sender and know the content is safe.

Hello w3 Team,

Hope you're doing good and safe.

Coming to the question directly,
After applying text spacing using the paciellogroup text spacing bookmarklet on the webpage, the text spacing got applied on the page perfectly.
The actual issue we have faced is, after applying the text spacing the text present in the edit field, the "UAT13 & Optional" word got a wrap and overlapped on the edit field border.
please refer below screenshots

[image.png]
[image.png]

1. Is this violation? and failing under 1.4.12 Text spacing?
2. If it is a violation the same will be applicable for the placeholder text as well?
FYI, floating labels used for edit fields and edit field size designed as per requirement.

I have provided the link below for the bookmarklet.
https://developer.paciellogroup.com/blog/2018/05/short-note-on-getting-spaced-out-with-sc-1-4-12-text-spacing/<https://aus01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fdeveloper.paciellogroup.com%2Fblog%2F2018%2F05%2Fshort-note-on-getting-spaced-out-with-sc-1-4-12-text-spacing%2F&data=04%7C01%7CHentryH%40rba.gov.au%7C06522efd908149d70e7608d8d7caf4c1%7Caf0d88c1660544c2999ee6b2f8790d86%7C0%7C0%7C637496613993928291%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=wU6KoE5dZQHz3SP8G2GKVPP82iqlO6mLt1QyAAZMMoA%3D&reserved=0>
Please suggest to me some of the text spacing bookmarklets or plug-ins.

Your support on this is highly appreciated and helps me to understand the SC better.

Thanks in advance

Regards,
Ragupathy
Disclaimer

This e-mail message (along with any attachments) is intended only for the named addressee and could contain information that is confidential or privileged. If you are not the intended recipient you are notified that any dissemination, copying or use of any of the information is prohibited. Please notify us immediately by return e-mail if you are not the intended recipient and delete all copies of the original message and attachments. This footnote also confirms that this message has been checked for computer viruses.