Effective Reflow/Responsiveness Design for more Accessible Websites

What is Reflow?

 

Reflow is the process of fitting content to the width of a page so that site material remains within the boundaries of the page window when users zoom in to enlarge content. The layout and distance between objects on a page might change with enlargement, but all content on the page remains fully accessible.

 

A good indication that your site is responsive is when you can magnify a webpage and the pages reformat so that the user only needs to scroll vertically rather than both vertically and horizontally whilst maintaining all of the functionality and visibility of site content.

 

All active sites must comply with level AA reflow criterion set out by the WCAG organization. Reflow criterion are met when page content can be presented with full functionality and content without needing to scroll two dimensionally for

– Vertical scrolling content at a width equivalent to 320 CSS pixel

– Horizontal scrolling content at a height equivalent to 256 CSS pixels

 

EdWeb sites and sites that use our design system EdGEL already have this reflow functionality built in.

 

Essentially, proper responsive web design results in a site with a flexible layout which adjusts to variable screen sizes, meaning that your site is accessible to more users and screen designs (e.g. mobile, laptop, desktop, etc).

 

 

Why Reflow Matters

 

By supporting reflow- or “Responsive Web Design”- we can make our sites increasingly accessible for those who are visually impaired.  Enlargement of site content facilitates visual tracking and enhances character and object perception.

 

In addition to the intrinsic value of increasing accessibility, improving site reflow aids in increasing how user-friendly sites are- potentially expanding user engagement and site traffic.

 

 

Designing a Site with Proper Reflow

 

There are three main components to responsive web design:

  • A fluid grid
  • Flexible text and media
  • CSS media queries

 

Fluid Grids

 

Site grids aren’t new to website design. However, fixed width grids of the past prevented the fluidity we see in newer sites that meet responsiveness criteria.

 

A fluid grid ensures that content is scalable and flexible- site elements adjust to variable screen-widths based on percentages used for consistent spacing and proportion.

A fluid grid forms the basic structure of a responsive website - it alows the content to scale to different screen formats and sizes.

By using a fixed grid, your site will have a consistently high-quality presentation across visual platforms.

 

Flexible Text & Media

 

How text is viewed across platforms can be variable, but it should always be readable.

 

When you structure the   content hierarchy within your stylesheet, text and media adjust accordingly within the width of the website layout, making site text legible regardless of device. By using a flexible container within a fluid grid, you can achieve text wrap across platforms- even with an increase in font size.

 

Flexible images should be able to scale or crop according to differing screen sizes.

 

The site Medium.com as viewed from a mobile browser. Notice how the content does not change when viewed from an alternative screen, like that of a desktop.The site Medium.com as viewed from a desktop browser. Notice how the content does not change when viewed from what is displayed on the mobile device.

 

 

Notice how the text and images on the home page of Medium.com adjust to the variable screen sizes that I’m viewing them on (laptop and mobile, respectively) without any loss of information or functionality. This is an example of successful responsiveness.

 

 

CSS Media Queries

 

Flexible layout is powered by CSS media queries, which specify how CSS should be applied based on a device’s breakpoint- a point in a site’s content and design which allows for adjustment to the user.

 

Media queries facilitate multiple layouts of a design using the same HTML-coded web page.

 

We recommend using the NoCoffee Vision Simulator plugin for Chrome to simulate page views from different visual perspectives. Additionally, Chrome 83 has released a similarly oriented plugin- right click > Inspect > Settings > Emulate Vision Deficiencies

 

 

Further Guidance and Resources for Optimizing Site Reflow

 

As we move quickly towards the September’s Accessibility legislation deadline, we want to provide tools and in-depth guidance to help you improve the responsiveness of your site. To that end, we are providing in-depth workshops and informational posts centred around high-impact, efficient, and approachable site fixes.

 

For sites within the EdWeb web estate, we provide a web governance tool called Little Forest (please email Astoria DeTuncq at ddetuncq@exseed.ed.ac.uk for access) to provide accessibility auditing information. With Little Forest, we can audit how accessible your site is in terms of reflow, identifying problem areas to enable more focused improvements.

 

Additionally, we hosted a Reflow/Responsiveness workshop on June 3rd, in which we delved further into the importance of reflow to accessibility, best practice methods to achieve optimal site reflow, and information on how to use Little Forest site audits to gauge your sites for reflow accessibility. We have uploaded a recording of this workshop to Media Hopper Replay.

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

css.php

Report this page

To report inappropriate content on this page, please use the form below. Upon receiving your report, we will be in touch as per the Take Down Policy of the service.

Please note that personal data collected through this form is used and stored for the purposes of processing this report and communication with you.

If you are unable to report a concern about content via this form please contact the Service Owner.

Please enter an email address you wish to be contacted on. Please describe the unacceptable content in sufficient detail to allow us to locate it, and why you consider it to be unacceptable.
By submitting this report, you accept that it is accurate and that fraudulent or nuisance complaints may result in action by the University.

  Cancel