<div class="resize">
  <div aria-label="Accessibility tools" class="accessibility-tools">
    <div class="wrapper wrapper--accessibility-tools">
       <fieldset class="accessibility-tools__font-family">
        <div class="sub-grid">
          <legend><span class="visually-hidden">Select </span>Font family</legend>
          <button class="button button--ally button--ally--active" id="default-font" type="button"  aria-label="Change font to      Verdana">Really long Button content</button>
          <button class="button button--ally" id="dyslexic-font" type="button" aria-label="Change font to Open Dyslexic">Open Dyslexic</button>
      <fieldset class="accessibility-tools__colour-theme">
        <div class="sub-grid">
          <legend><span class="visually-hidden">Select </span>Colour theme</legend>
          <button id="theme-default" class="button button--ally button--ally--active" type="button">Default</button>
          <button id="theme-contrast" class="button button--ally" type="button">Contrast              </button>


:root {
  --colour-black: #1f1f1f;
  --colour-black-light: #2F2F2F;
  --colour-white: #ffffff;

  --colour-grey: hsl(0, 0%, 79%);
  --colour-grey-light: #f3f3f3;

  --colour-pink: hsl(346, 100%, 60%);
  --colour-pink-light: #FF4370;

.resize {
  resize: both;
  overflow: auto;
  background: hotpink;
  padding: 2rem;
  min-width: 450px;

  ----------------------------------- */

  .button {
    padding: .5rem;
    color: var(--colour-black);
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    background: var(--colour-pink-light);
    border: solid 1px var(--colour-pink-light);
    margin: .5em 0;
    height: 100%;
  .button:focus {
    text-decoration: underline;
    background: var(--colour-white);

.accessibility-tools {
  color: var(--colour-white);
  background: var(--colour-black);
  border-bottom: solid 4px var(--colour-pink);
  padding: .5rem 1rem;

.wrapper--accessibility-tools {
  display: flex;
  flex-wrap: wrap;

 @supports (grid-template-columns: subgrid) {
  .wrapper--accessibility-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    grid-gap: 10px;
  .sub-grid {
    display: grid;
    grid-column: span 3;
    grid-template-columns: subgrid;
    align-items: center;
  .accessibility-tools fieldset {
   display: contents;

.accessibility-tools fieldset {
   border: 0;


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.