Skip to main content

Word spacing (WCAG 2.1)

P

I would like to submit a request to add the ability to change the spacing between words in the text. There is space between letters, but there is no space between words. Please add this, especially since it is such a common CSS attribute. This is also one of the WCAG 2.1 AA requirements, which will soon become mandatory and it would be nice to be able to use it in Figma.

WCAG 2.1 will require for AA, among other things:
- Word spacing to at least 0.16 times the font size;

  • Line height (line spacing) to at least 1.5 times the font size;
  • Spacing following paragraphs to at least 2 times the font size;
  • Letter spacing (tracking) to at least 0.12 times the font size;

2 replies

Daniel_Cullinan

Agree with the call to add the CSS word-spacing property to Figma.

I think you’re misunderstanding the WCAG SC though. That criteria just requires that your front-end build allows the user to increase word spacing without affecting content or functionality: Understanding Success Criterion 1.4.12: Text Spacing | WAI | W3C

Damian_Sian

@Pawel_Wojciechowski I agree with this request in relation SC 1.4.12. Even though the final conformance is in the front-end build, testing a design for conformance in the design file has a place as well.

If I built a plugin similar to the text spacing bookmarklet from Steven Faulkner for example that would examine all my text containers for conformance by applying line height, paragraph spacing, and letter spacing… As a designer, I could ensure my frame’s auto-layout properties accepted the change in size of the container or not. I’d like to see this step added to Design accessibility checklists personally. And that would be part of the hand off to engineering to ensure the final front-end build supports user-driven style changes.

L
1 person likes this
  • L
    Lori_Neff

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings