37th Annual CSUN Assistive Technology Conference Has Concluded

Ems, Rems, and Flexible Interfaces

Date & Time

Friday, March 18, 2022 - 11:20 AM PST

Location

Orange County

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.

This Presentation Link is provided by the Presenter(s) and not hosted by the Center on Disabilities at CSUN. The Center on Disabilities has confirmed, as of March 15, 2022, content linked is relevant to the presentation, but has not been reviewed for accessibility nor will the Center on Disabilities attempt to remediate any accessibility issues in the linked content. Please contact the Presenter(s) with any accessibility concerns.

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