htmlfreecodes.
Menu

A good first building block

Keyboard-accessible scrollbox

A constrained reading region with natural scrolling, a visible focus ring and a useful accessible name.

HTMLCSSNo dependencies
Edit in playground

Live preview

Explore the result below

HTML

<main>
  <h1>A scrollbox you can use with a keyboard</h1>
  <p id="scroll-help">Focus the reading box, then use the arrow keys, Page Down or Page Up. The surrounding page still scrolls normally.</p>
  <section class="scrollbox" tabindex="0" role="region" aria-label="A short reading list" aria-describedby="scroll-help">
    <h2>Small steps for a useful page</h2>
    <p>1. Give the page one clear purpose and a descriptive main heading.</p>
    <p>2. Use paragraphs and lists to make the content easy to scan.</p>
    <p>3. Choose links that describe their destinations.</p>
    <p>4. Keep text readable at different screen widths.</p>
    <p>5. Test the page with a keyboard as well as a pointer.</p>
    <p>6. Respect reduced-motion preferences when adding animation.</p>
    <p>7. Open the copied file and check that it works without missing assets.</p>
    <p>8. Keep short text on the page when a nested scrollbox is unnecessary.</p>
  </section>
</main>
Read the complete HTML document
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root{font-family:system-ui,sans-serif;color:#18223b}*{box-sizing:border-box}body{margin:0;min-height:100vh;padding:24px;background:#edf1ff;display:grid;place-items:center}main{min-width:0;width:min(100%,600px);background:white;border-radius:20px;padding:clamp(20px,5vw,32px)}h1{font-size:clamp(24px,5vw,32px);line-height:1.2;margin:0 0 16px}h2{font-size:20px;margin:24px 0 12px}p,li{line-height:1.65}a{color:#2545a8;text-underline-offset:3px}button,input,select,textarea{font:inherit}button{min-height:44px;border:1px solid #9eaed0;border-radius:10px;padding:10px 14px;background:#eff3ff;color:#18223b;cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #3658bf;outline-offset:3px}pre{max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#eef2fa;padding:16px;border-radius:10px}code{font-family:ui-monospace,monospace}
.scrollbox{max-height:220px;overflow:auto;overscroll-behavior:auto;border:1px solid #9eaed0;border-radius:12px;padding:20px;scrollbar-gutter:stable}.scrollbox h2{margin-top:0}
</style>
</head>
<body>
<main>
  <h1>A scrollbox you can use with a keyboard</h1>
  <p id="scroll-help">Focus the reading box, then use the arrow keys, Page Down or Page Up. The surrounding page still scrolls normally.</p>
  <section class="scrollbox" tabindex="0" role="region" aria-label="A short reading list" aria-describedby="scroll-help">
    <h2>Small steps for a useful page</h2>
    <p>1. Give the page one clear purpose and a descriptive main heading.</p>
    <p>2. Use paragraphs and lists to make the content easy to scan.</p>
    <p>3. Choose links that describe their destinations.</p>
    <p>4. Keep text readable at different screen widths.</p>
    <p>5. Test the page with a keyboard as well as a pointer.</p>
    <p>6. Respect reduced-motion preferences when adding animation.</p>
    <p>7. Open the copied file and check that it works without missing assets.</p>
    <p>8. Keep short text on the page when a nested scrollbox is unnecessary.</p>
  </section>
</main>
<script>

</script>
</body>
</html>

A little guide to making it yours

  1. Copy the code and save it in a file named example.html.
  2. Open the file in your browser to see the complete example.
  3. Change the text and structure in the HTML.
  4. Adjust the colors and spacing in the CSS, or experiment in the playground.

How it works

The recovered 2014 HTML_Scrollbox.htm detail establishes a fixed-size div with overflow:auto as the historical purpose. This new implementation uses a labelled, focusable section and a maximum height. It needs no JavaScript, remote script or copied archive code.

Historical purpose: Recovered 2014-09-15 detail and embedded overflow:auto purpose; original new implementation. No archived code or numeric preview association is reused.

Troubleshooting and limits

Avoid nested scrolling for short content. Keep the focus ring visible and describe the region. Browser and assistive-technology scrolling behavior varies, so test your actual content with a keyboard. Do not trap focus or block the surrounding page scroll.

This is newly authored code. It uses system fonts and no external assets.

Keep the ideas going