Reflow
Users with visual impairments view webpages at a certain zoom levels. Hence, it is necessary that the content and functionality of the webpage is not affected.
In general, browsers provide up to 400% zoom levels / text resize options.
NOTE:
- New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
- Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.
- Content present in webpages SHOULD be able to resize up to 200 % without using any kind of assistive technology.
- Ensure that the content SHOULD not overlap or truncate when zoom level is increased.
-
Define font sizes and text container dimensions in relative units, such as
rem
,em
and percentages (%) instead of absolute units. - Avoid explicitly defining the width and height of containers in absolute units such as pixel, point or cm.
- Use responsive design techniques such as viewport, media queries, and so on.
- A horizontal scrollbar along with vertical scrollbar CAN be present for the page when zoomed in up to 200%.
- Content present in webpages SHOULD be able to resize up to 400 % zoom or responsive when viewed in mobile layouts.
- Ensure that the content DOES NOT overlap or truncate when zoom level is increased.
-
Ensure to define
user-scalable="yes"
in<meta name="viewport">
element. -
Define font sizes and text container dimensions in relative units, such as
rem
,em
and percentages (%) instead of absolute units. - Avoid explicitly defining the width and height of containers in absolute units such as pixel, point or cm.
- Use responsive design techniques such as viewport, media queries and so on.
- The page content SHOULD be arranged in a linear view when page is viewed after reflowing.
- There SHOULD NOT be a horizontal scrollbar present when the page is reflowed.
- There are some exceptions that require two-dimensional layout such as images, tables, and videos.
A page that reflows correctly benefits majorly the below users.
- People with visual disabilities
The HTML for all 5 pages is included here.
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<div id="nav-menu" role="banner">
<div class="nav-container">
<div class="nav-start">
<a class="logo" href="/">
<span>Pearson</span>
</a>
<nav aria-label="Primary" class="menu">
<ul class="menu-bar">
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="#">Service</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
<li><a class="nav-link" href="#">Careers</a></li>
</ul>
</nav>
</div>
<nav aria-label="Breadcrumb" class="nav-end">
<button id="hamburger" aria-label="hamburger" aria-haspopup="true" aria-expanded="false">
<i class="bx bx-menu" aria-hidden="true"></i>
</button>
</nav>
</div>
</div>
<div role="main" id="main">
<h1>Reflow</h1>
<div class="container">
<div class="cards card-container">
<article class="card reorder">
<h2><a href="#" id="cardtitle2">StatCrunch</a></h2>
<img src="../common-images/educator-292x146.jpg" width="292" height="146" alt="" loading="lazy">
<p>
Put the power of data in students' hands as they
analyze data sets easily from their text and exercises
</p>
<a href="#" aria-describedby="cardtitle2">Explore StatCrunch</a>
</article>
<article class="card reorder">
<h2><a href="#" id="cardtitle1">Learning Catalytics</a></h2>
<img src="../common-images/student-with-raised-hand-292x146.jpg" alt="" loading="lazy" width="292" height="146">
<p>
Hear from every student when it matters most as they respond
using their own smartphones, tablets or laptops
</p>
<a href="#">Explore Learning Catalytics</a>
</article>
<article class="card reorder">
<h2><a href="#" id="cardtitle3">MediaShare</a></h2>
<img src="../common-images/student-working-at-computer-292x146.jpg" alt="" loading="lazy" width="292" height="146">
<p>
Bring course concepts to life and engage students with
media-rich activities, created with Pearson or your own
content.
</p>
<a href="#" aria-describedby="cardtitle3">Explore MediaShare</a>
</article>
</div>
<div class="aside" role="complementary" aria-labelledby="content-title">
<div class="fld-press-release-report-item">
<div class="press-release-content-box">
<div class="section-heading-content-title" id="content-title">
<h2>Latest Annual Report</h2>
</div>
<div class="section-heading-link-download">
<a href="#" class="button-secondary filelink">
Annual Report 2022
</a>
</div>
</div>
<div class="press-release-image-box">
<div class="press-release-content-image">
<img src="../common-images/ir-landing-media.png" width="212" height="278" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer" role="contentinfo">
<nav aria-label="Secondary">
<ul class="footer-link">
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Statement</a></li>
<li><a href="#">Patent Notice</a></li>
<li><a href="#">Accessibility Statement</a></li>
<li><a href="#">Accessibility Conformance Reports</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
<p>© Copyright 1996-2023 Pearson All rights reserved.</p>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
:root {
--light-grey: #eeeeee;
--border: 1px solid var(--light-grey);
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
button {
border: none;
background-color: transparent;
cursor: pointer;
color: inherit;
}
.icon {
padding: 0.5rem;
background-color: var(--light-grey);
border-radius: 10px;
}
.logo {
margin-right: 1.5rem;
}
#nav-menu {
border-bottom: var(--border);
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
column-gap: 2rem;
height: 90px;
padding: 1.2rem 3rem;
background-color: #005a70;
}
.menu {
position: relative;
background: #005a70;
color: #fff;
}
.menu-bar li:first-child .dropdown {
flex-direction: initial;
min-width: 480px;
}
.menu-bar li:first-child ul:nth-child(1) {
border-right: var(--border);
}
.menu-bar li:nth-child(n + 2) ul:nth-child(1) {
border-bottom: var(--border);
}
.menu-bar .dropdown-link-title {
font-weight: 600;
}
.menu-bar .nav-link {
font-size: 1rem;
font-weight: 500;
letter-spacing: -0.6px;
padding: 0.3rem;
min-width: 60px;
margin: 0 0.6rem;
}
.menu-bar .nav-link:hover,
.dropdown-link:hover {
text-decoration: underline;
}
.nav-start,
.nav-end,
.menu-bar,
.right-container,
.right-container .search {
display: flex;
align-items: center;
z-index: 1000;
}
#hamburger {
display: none;
padding: 0.1rem;
margin-left: 1rem;
font-size: 1.9rem;
}
@media (max-width: 1100px) {
#hamburger {
display: block;
color: #fff;
}
.nav-container {
padding: 1.2rem;
}
.menu {
display: none;
position: absolute;
top: 87px;
left: 0;
min-height: 100vh;
width: 100vw;
}
.menu-bar li:first-child ul:nth-child(1) {
border-right: none;
border-bottom: var(--border);
}
.dropdown {
display: none;
min-width: 100%;
border: none !important;
border-radius: 5px;
position: static;
top: 0;
left: 0;
visibility: visible;
opacity: 1;
transform: none;
box-shadow: none;
}
.menu.show,
.dropdown.active {
display: block;
}
.dropdown ul {
padding-left: 0.3rem;
}
.menu-bar {
display: flex;
flex-direction: column;
align-items: stretch;
row-gap: 1rem;
padding: 1rem;
}
.menu-bar .nav-link {
display: flex;
justify-content: space-between;
width: 100%;
font-weight: 600;
font-size: 1.2rem;
margin: 0;
}
.menu-bar li:first-child .dropdown {
min-width: 100%;
}
.menu-bar > li:not(:last-child) {
padding-bottom: 0.5rem;
border-bottom: var(--border);
}
}
.cards {
flex: 0 1 60%;
margin-right: 20px;
}
.cards h2 {
font-size: 1.5rem;
margin-bottom: 10px;
color:rgb(0, 102, 204);
}
.cards p {
font-size: 1rem;
line-height: 1.5;
}
#main {
margin: 20px;
padding: 20px;
}
.card-container {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.cards > * {
flex: 0 1 20em;
}
.card {
margin: .75em;
padding: .75em;
border-radius: 3px;
border: 2px #ccc solid;
border-radius: .6em;
background-color: white;
position: relative;
}
img {
width: 100%;
height: auto;
}
.reorder {
display: flex;
flex-direction: column;
}
.reorder img {
max-width: 100%;
order: -1;
}
.cards > * a {
display: block;
color: rgb(0, 102, 204);
}
.cards h2 > a {
text-decoration: none;
}
article:hover {
box-shadow: 0 0 0 0 0.25rem;
}
.footer {
position: relative;
bottom: 0;
width: 100%;
text-align: center;
padding: 20px 0;
margin: 0;
background-color: #007fa3;
color: #fff;
}
.footer ul li {
list-style: none;
display: inline-block;
padding: 0;
margin: 10px;
}
.footer ul li a {
font-size: 1.2rem;
color: #fff;
}
.footer ul li a:hover {
text-decoration: underline;
}
.aside {
background-color: #f2f2f2;
padding: 20px;
margin: 20px;
flex: 0 1 30%;
margin-left: 20px;
height: fit-content;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 768px) {
.cards { flex: 0 1 90%; }
}
.fld-press-release-report-item {
padding-top: 43px;
padding-left: 48px;
padding-bottom: 23px;
float: left;
}
.press-release-content-box {
display: block;
float: left;
max-width: 100%;;
}
.section-heading-content-title h2 {
font-size: 1.5rem;
font-weight: 700;
font-stretch: normal;
font-style: normal;
line-height: 1.42;
letter-spacing: 0.5px;
color: #000;
margin-right: 35px;
}
.section-heading-link-download {
padding-top: 20px;
padding-bottom: 20px;
border-top: 4px solid #ae367e;
z-index: 10;
}
.section-heading-link-download a {
position: relative;
display: inline-block;
font-size: 1rem;
font-weight: 700;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: 1px;
color: #000;
width: 100%;
}
.press-release-image-box {
display: block;
float: left;
}
.press-release-content-image {
position: relative;
height: 278px;
width: 212px;
}
.press-release-content-image img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
.press-release-content-image:after {
position: absolute;
content: "";
width: 212px;
height: 275px;
background: #fff;
border-radius: 2px;
z-index: 0;
left: 22px;
margin-top: 22px;
}
span {
font-size: 24px;
color: #fff;
}
let hamburgerBtn = document.getElementById("hamburger");
let navMenu = document.querySelector(".menu");
function toggleHamburger() {
navMenu.classList.toggle("show");
hamburgerBtn.setAttribute(
"aria-expanded",
hamburgerBtn.getAttribute("aria-expanded") === "false" ? "true" : "false"
);
}
hamburgerBtn.addEventListener("click", toggleHamburger);
Due to the nature of this demonstration, it is best
viewed full screen
.