COD

  • CSUN Assistive Technology Conference Logo

    The Premier AT Conference

Ems, Rems, and Flexible Interfaces

Description
Flexible interfaces have been on our minds since the need for responsive websites to seamlessly flow between diverse screen sizes across devices. It is also 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. Building our CSS to allow for the flexible display of typography and web content is required to meet these user needs. 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, viewport dimensions, flex, and grid. 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. With so many choices to include flexibility into a digital experience how do we know what to use to have successful outcomes? To answer this, we will look at the benefits and limitations of each technique and think through some use cases that best suit each. 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.  
Audience
  • Information & Communications Technology
  • Media & Publishing
  • Research & Development
  • Marketing
Audience Level
Intermediate  
Session Summary (Abstract)
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.  
Session Type
General Track  
Topics
  • Design
  • Development
  • Digital Accessibility
  • Web

Presenter

  • Christina Adams
    Siteimprove

Back to Session List