Ems, Rems, and Flexible Interfaces
taught by: Christina Adams
Flexible interfaces have been central to development practices since responsive websites became a business priority. In typography and visual design systems flexibility is also an accessibility requirement. We will explore flexibility with CSS through ems, rems, and relative sizing techniques and how these impact user experience.
Flexibility is an important concept for assistive technology users who want to customize their experience to meet their needs as introduced by several WCAG 2.1 success criterion. Users may choose to customize the visual display of typography and visual content when viewing sites. Achieving a flexible interface is possible using relative size units in CSS for UI components and especially typography, but these concepts are often not well understood. In this presentation we will look at the different ways of building flexible, fluid interfaces using ems, rems, percentages, and viewport dimensions. We will deep dive into the meaning of these relative size units and techniques, how they are used in CSS, and test the results in the browser. Throughout we will discuss how technology interprets these style units and what the impact is for the user experience by introducing testing techniques such as zooming, user custom styling, and browser default customizations. Using the browser’s zoom features, how does each relative size unit present the website content? How does a user’s custom styling impact the display of the content if a user customizes font size and spacing? How does the page display respond when setting custom browser defaults in Chrome and Firefox? What other CSS properties can have an impact on the legibility of the page content? These are just some of the questions we will be looking to answer as well as how to meet the WCAG requirements for no loss of content or functionality when the user implements their own customizations for typography and display of web content.
- A better understanding of CSS relative sizing units and their effect on typography
- A baseline for the expected user experience regarding flexibility and technology customizations
- How design features of a page can negatively impact flexible typography and content which will report as accessibility errors