Ems, Rems, and Flexible Interfaces

Find Ems, Rems, and Flexible Interfaces on the Knowbility Learning Center

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.