<!DOCTYPE html>

<html lang="en-AU">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width,initial-scale=1" name="viewport"/>
<title>Your Web and Digital Accessibility Partner – Media Access</title>
<meta content="Media Access Australia provide services, training and solutions for web and digital accessibility. We consult on digital access projects for businesses, Government and NFPs." name="description"/>
<meta content="web accessibility, digital accessibility, WCAG, accessibility audits, inclusive design, accessible documents, accessibility training, Australia" name="keywords"/>
<link href="https://www.mediaaccess.org.au/" rel="canonical"/>
<!-- Favicons / social -->
<link href="https://www.mediaaccess.org.au/wp-content/themes/utility-maa/images/favicon.ico" rel="icon" sizes="any"/>
<link href="https://www.mediaaccess.org.au/resources/pro-tips/wp-content/uploads/2025/06/logo-1.webp" rel="apple-touch-icon"/>
<meta content="website" property="og:type"/>
<meta content="Media Access" property="og:site_name"/>
<meta content="Media Access — Web &amp; Digital Accessibility" property="og:title"/>
<meta content="Specialist services for websites, apps, processes and communications to help organisations achieve end-to-end accessibility." property="og:description"/>
<meta content="https://www.mediaaccess.org.au/" property="og:url"/>
<meta content="https://www.mediaaccess.org.au/resources/pro-tips/wp-content/uploads/2025/06/logo-1.webp" property="og:image"/>
<meta content="summary_large_image" name="twitter:card"/>
<style>
    :root{
      --bg:#0b1220;
      --bg-2:#0a0f1a;
      --surface:#ffffff;
      --surface-2:#f6f7fb;
      --text:#0b1220;
      --text-on:#ffffff;
      --muted:#6b7280;
      --muted-on:rgba(255,255,255,.72);
      --border:rgba(17,24,39,.14);
      --border-on:rgba(255,255,255,.14);
      --brand:#2c7dff;
      --brand-2:#0b5fff;
      --focus:#ffbf47;
      --radius:18px;
      --shadow:0 18px 50px rgba(0,0,0,.22);
      --max:1180px;
      --header-h:72px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
      line-height:1.55;
      color:var(--text);
      background:#fff;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }

    img{max-width:100%; height:auto}
    a{color:inherit; text-underline-offset:3px}
    a:hover{opacity:.92}
    .container{width:min(var(--max), calc(100% - 32px)); margin-inline:auto}

    :focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:10px}

    /* Skip links */
    .skip-links{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
    .skip-links a{
      display:inline-block; padding:10px 14px; background:#111827; color:#fff;
      border-radius:12px; margin:8px; text-decoration:none; font-weight:900;
    }
    .skip-links a:focus{position:fixed; left:12px; top:12px; width:auto; height:auto; z-index:10000}

    /* Header: transparent/dark -> light on scroll */
    header{
      position:sticky; top:0; z-index:60;
      height: var(--header-h);
      display:flex; align-items:center;
      background: transparent;
      border-bottom: 1px solid transparent;
      transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    header .wrap{
      width:100%;
      display:flex; align-items:center; justify-content:space-between;
      gap: 16px;
      padding: 14px 0;
    }

    .brand{
      display:flex; align-items:center; gap:12px;
      text-decoration:none;
      min-width: 190px;
    }
    .brand img{
      height: 40px;
      width: auto;
      display:block;
      filter: drop-shadow(0 10px 24px rgba(0,0,0,.15));
    }
    .logo-light{display:block}
    .logo-dark{display:none}

    /* Nav */
    nav{position:relative}
    .nav-toggle{
      display:none;
      border:1px solid var(--border-on);
      background: rgba(255,255,255,.06);
      color: var(--text-on);
      padding:10px 12px;
      border-radius:14px;
      cursor:pointer;
      font-weight:900;
    }

    .menu{
      list-style:none;
      margin:0;
      padding:0;
      display:flex;
      gap: 6px;
      align-items:center;
      flex-wrap:wrap;
    }

    .menu > li{position:relative}
    .menu > li > a{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:10px 12px;
      border-radius:14px;
      text-decoration:none;
      font-weight:850;
      font-size:14px;
      color: var(--text-on);
      background: transparent;
      border: 1px solid transparent;
      transition: background .16s ease, border-color .16s ease;
    }
    .menu > li > a:hover{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.10);
    }

    /* Dropdown */
    .menu li.menu-item-has-children > a::after{
      content: "▾";
      font-size: 12px;
      opacity:.8;
      transform: translateY(-1px);
    }
    .sub-menu{
      position:absolute;
      left:0;
      top: calc(100% + 8px);
      min-width: 280px;
      list-style:none;
      padding: 10px;
      margin:0;
      border-radius: 16px;
      background: rgba(12, 18, 32, .92);
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: var(--shadow);
      display:none;
      backdrop-filter: blur(12px);
    }
    .sub-menu a{
      display:block;
      padding: 10px 12px;
      border-radius: 12px;
      text-decoration:none;
      color: var(--text-on);
      font-weight: 750;
      font-size: 13px;
    }
    .sub-menu a:hover{background: rgba(255,255,255,.08)}

    .menu li.open > .sub-menu{display:block}

    /* Light (scrolled) state */
    header.scrolled{
      background: rgba(255,255,255,.92);
      border-bottom-color: rgba(17,24,39,.10);
      box-shadow: 0 14px 36px rgba(0,0,0,.08);
      backdrop-filter: blur(12px);
    }
    header.scrolled .menu > li > a{
      color: var(--text);
    }
    header.scrolled .menu > li > a:hover{
      background: rgba(17,24,39,.05);
      border-color: rgba(17,24,39,.08);
    }
    header.scrolled .nav-toggle{
      color: var(--text);
      background: rgba(17,24,39,.04);
      border-color: rgba(17,24,39,.12);
    }
    header.scrolled .logo-light{display:none}
    header.scrolled .logo-dark{display:block}
    header.scrolled .sub-menu{
      background: #fff;
      border-color: rgba(17,24,39,.12);
    }
    header.scrolled .sub-menu a{color: var(--text)}
    header.scrolled .sub-menu a:hover{background: rgba(17,24,39,.05)}

    /* Sections */
    main{min-height: 60vh}
    .section{padding: 72px 0}
    .section.dark{background: linear-gradient(180deg, var(--bg), var(--bg-2)); color: var(--text-on)}
    .section.light{background: var(--surface); color: var(--text)}
    .section.soft{background: var(--surface-2); color: var(--text)}

    .eyebrow{
      display:inline-flex;
      gap:10px;
      align-items:center;
      padding: 8px 12px;
      border-radius: 999px;
      font-weight: 850;
      font-size: 13px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.06);
      color: var(--muted-on);
      width: fit-content;
    }

    .hero{
      padding-top: calc(72px + var(--header-h));
      margin-top: calc(-1 * var(--header-h));
      position:relative;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        radial-gradient(900px 360px at 15% 0%, rgba(44,125,255,.35), transparent 65%),
        radial-gradient(700px 320px at 85% 10%, rgba(10,91,255,.22), transparent 62%),
        radial-gradient(800px 500px at 60% 90%, rgba(255,255,255,.06), transparent 60%);
      pointer-events:none;
    }
    
/* Hero photo (full-bleed, no card) */
.hero{
  background-image:
    radial-gradient(1100px 520px at 18% 10%, rgba(44,125,255,.18), transparent 60%),
    linear-gradient(90deg, rgba(7,11,20,.88) 0%, rgba(7,11,20,.62) 42%, rgba(7,11,20,.20) 72%, rgba(7,11,20,.06) 100%),
    url("https://www.mediaaccess.org.au/assets/hero.webp");
  background-size: cover;
  background-position: right 12% top 38%;
  background-repeat: no-repeat;
}
.hero-media{
  min-height: 420px;
}
@media (max-width: 980px){
  .hero{
    background-position: 72% top 28%;
  }
  .hero-media{ display:none; }
}
.hero-grid{
      position:relative;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 26px;
      align-items:center;
    }

    h1{
      margin: 14px 0 12px;
      font-size: clamp(30px, 3.4vw, 50px);
      line-height: 1.06;
      letter-spacing: -0.8px;
    }
    .lead{
      margin: 0 0 20px;
      color: var(--muted-on);
      font-size: 18px;
      max-width: 62ch;
    }

    .actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:18px}
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      text-decoration:none;
      font-weight: 900;
      font-size: 14px;
      border: 1px solid rgba(255,255,255,.16);
      color: var(--text-on);
      background: rgba(255,255,255,.06);
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      white-space: nowrap;
    }
    .btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.10)}
    .btn.primary{
      background: var(--brand);
      border-color: var(--brand);
      box-shadow: 0 18px 50px rgba(44,125,255,.28);
    }
    .btn.primary:hover{background: var(--brand-2); border-color: var(--brand-2)}

    .hero-card{
      border-radius: calc(var(--radius) + 6px);
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    

    .trust{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 10px;
      margin-top: 18px;
    }
    .trust .pill{
      display:flex;
      gap:10px;
      align-items:flex-start;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      padding: 12px;
      color: var(--muted-on);
      font-size: 13px;
    }
    .trust .pill strong{display:block; color:#fff; font-size: 14px; margin-bottom:2px}

    /* Cards / grids */
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap: 16px;
      margin-bottom: 18px;
    }
    .section-head h2{margin:0; font-size: 24px; letter-spacing: -.4px}
    .section-head p{margin:0; color: var(--muted); max-width: 70ch}
    .dark .section-head p{color: var(--muted-on)}

    .grid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 14px;
    }
    .card{
      border-radius: var(--radius);
      border: 1px solid rgba(17,24,39,.10);
      background: #fff;
      padding: 16px;
      box-shadow: 0 14px 34px rgba(0,0,0,.07);
      height: 100%;
    }
    .soft .card{background:#fff}
    .dark .card{
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.14);
      color: #fff;
      box-shadow: var(--shadow);
    }

    .card .icon{
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(44,125,255,.10);
      border: 1px solid rgba(44,125,255,.16);
      margin-bottom: 12px;
    }
    .dark .card .icon{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14)}
    .card .icon img{max-height: 34px; width:auto}
    .card h3{margin:0 0 8px; font-size: 16px; letter-spacing: -.2px}
    .card p{margin:0 0 12px; color: var(--muted); font-size: 14px}
    .dark .card p{color: var(--muted-on)}
    .card a{font-weight: 900; text-decoration:none}
    .card a:hover{text-decoration: underline}

    /* Simple list */
    .steps{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 16px}
    .step{
      border-radius: var(--radius);
      border:1px solid rgba(17,24,39,.10);
      background:#fff;
      padding: 16px;
    }
    .dark .step{background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14)}
    .num{
      width: 36px; height: 36px;
      border-radius: 14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-weight: 950;
      margin-bottom: 10px;
      background: rgba(44,125,255,.12);
      color: var(--brand);
      border: 1px solid rgba(44,125,255,.18);
    }
    .dark .num{background: rgba(255,255,255,.06); color:#fff; border-color: rgba(255,255,255,.14)}

    /* Footer */
    footer{
      background: #070b14;
      color: rgba(255,255,255,.86);
      padding: 44px 0;
      border-top: 1px solid rgba(255,255,255,.08);
    }
    .footer-grid{display:grid; grid-template-columns: 1.2fr .8fr; gap: 14px}
    .footer-muted{color: rgba(255,255,255,.66)}
    .footer-links{list-style:none; padding:0; margin: 10px 0 0; display:flex; gap: 12px; flex-wrap:wrap}
    .footer-links a{text-decoration:none; color: rgba(255,255,255,.78); font-weight: 850}
    .footer-links a:hover{color:#fff; text-decoration: underline}
    .footer-logos{display:flex; gap: 12px; align-items:center; margin-top: 12px}
    .footer-logos img{height: 44px; width:auto; opacity: .92}

    /* Responsive */
    @media (max-width: 980px){
      .hero-grid{grid-template-columns: 1fr; align-items:start}
      .trust{grid-template-columns: 1fr}
      .grid{grid-template-columns: 1fr}
      .steps{grid-template-columns: 1fr}
      .footer-grid{grid-template-columns: 1fr}

      .nav-toggle{display:inline-flex}
      .menu{
        display:none;
        position:absolute;
        right:0;
        top: calc(100% + 10px);
        width: min(520px, calc(100vw - 24px));
        padding: 10px;
        border-radius: 18px;
        background: rgba(12, 18, 32, .96);
        border: 1px solid rgba(255,255,255,.14);
        box-shadow: var(--shadow);
        flex-direction:column;
        align-items:stretch;
      }
      header.scrolled .menu{background:#fff; border-color: rgba(17,24,39,.12)}

      .menu.open{display:flex}
      .menu > li > a{justify-content:space-between}
      .sub-menu{
        position: static;
        display:none;
        margin-top: 6px;
        border-radius: 14px;
        box-shadow:none;
      }
      .menu li.open > .sub-menu{display:block}
    }

    @media (prefers-reduced-motion: reduce){
      *{scroll-behavior:auto !important; transition:none !important; animation:none !important}
    }
	
	/* --- HERO image: deeper / cinematic --- */
.hero-card{
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) + 10px);
  box-shadow:
    0 40px 120px rgba(0,0,0,.55),
    0 12px 40px rgba(0,0,0,.28);
  transform: translateZ(0); /* prevents blur on some GPUs */
}

.hero-card{
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) + 10px);
  box-shadow: 0 40px 120px rgba(0,0,0,.45), 0 12px 40px rgba(0,0,0,.20);
  aspect-ratio: 16 / 10; /* ключевое: задаём “рамку”, чтобы cover работал красиво */
}

.hero-card img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.98) contrast(1.04) brightness(.98); /* почти без затемнения */
}

/* мягкая виньетка как в макете, без “грязи” */
.hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 120% at 55% 40%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(90deg, rgba(7,11,20,.58) 0%, rgba(7,11,20,.32) 45%, rgba(7,11,20,.10) 100%);
}

.hero-card .cap{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px;
  color: rgba(255,255,255,.82);
  font-size: 13px;
  background: rgba(7,11,20,.45);
  border-top: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

/* vignette + blue tint like the mockup */
.hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 95% at 65% 40%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(120% 120% at 30% 30%, rgba(44,125,255,.18), transparent 55%),
    linear-gradient(90deg, rgba(7,11,20,.72) 0%, rgba(7,11,20,.40) 45%, rgba(7,11,20,.18) 100%);
}

/* caption: slightly more “glass” */
.hero-card .cap{
  background: rgba(7,11,20,.55);
  border-top: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}


.hero::before{ opacity: .95; }

  
/* Hero photo (authoritative) */
.section.dark.hero{
  background:
    radial-gradient(1100px 520px at 18% 10%, rgba(44,125,255,.18), transparent 60%),
    linear-gradient(90deg, rgba(7,11,20,.88) 0%, rgba(7,11,20,.62) 42%, rgba(7,11,20,.20) 72%, rgba(7,11,20,.06) 100%),
    url("https://www.mediaaccess.org.au/assets/hero.webp") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: right 18% center !important;
}
@media (max-width: 980px){
  .section.dark.hero{
    background-position: right 35% top 28% !important;
  }
}

</style>
</head>
<body>
<div class="skip-links">
<a href="#primary-navigation">Skip to primary navigation</a>
<a href="#content">Skip to content</a>
<a href="#footer">Skip to footer</a>
</div>
<header id="siteHeader">
<div class="container">
<div class="wrap">
<a aria-label="Media Access Home" class="brand" href="/">
<img alt="Media Access" id="brandLogo" src="https://www.mediaaccess.org.au/resources/pro-tips/wp-content/uploads/2025/06/logo.webp"/>
</a>
<nav aria-label="Main" id="primary-navigation">
<button aria-controls="mainMenu" aria-expanded="false" class="nav-toggle" id="navToggle" type="button">Menu</button>
<!-- Original menu structure (kept) -->
<ul class="menu" id="mainMenu">
<li class="menu-item current-menu-item"><a href="/">Home</a></li>
<li class="menu-item menu-item-has-children">
<a href="/about-us/">About Us</a>
<ul class="sub-menu">
<li class="menu-item"><a href="/about-us/accessibility/">Accessibility Statement</a></li>
<li class="menu-item"><a href="/about-us/who-we-are/">Who We Are</a></li>
<li class="menu-item"><a href="/about-us/our-team/">Our Team</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="/services/">Services</a>
<ul class="sub-menu">
<li class="menu-item"><a href="/services/testing/">Web Accessibility Audits and Testing</a></li>
<li class="menu-item"><a href="/services/consulting/">Consulting</a></li>
<li class="menu-item"><a href="/services/consulting/digital-accessibility-maturity-assessments/">Digital Accessibility Maturity Assessments (DAMA)</a></li>
<li class="menu-item"><a href="/services/web-and-mobile-development/">Web, Mobile &amp; App Development</a></li>
<li class="menu-item"><a href="/services/accessible-document-service/">Accessible Document Service</a></li>
<li class="menu-item"><a href="/services/inclusive-design-user-testing/">Inclusive Design - User Testing</a></li>
<li class="menu-item"><a href="/services/education-and-training/">Education and Training</a></li>
<li class="menu-item"><a href="/services/education-and-training/pcwa/">Professional Certificate in Web Accessibility</a></li>
<li class="menu-item"><a href="/services/education-and-training/accessible-content-creation/">How to Create Accessible Content</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="/our-clients/">Our Clients</a>
<ul class="sub-menu">
<li class="menu-item"><a href="/our-clients/case-studies/">Case Studies</a></li>
<li class="menu-item"><a href="/our-clients/testimonials/">Testimonials</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="/resources/">Resources</a>
<ul class="sub-menu">
<li class="menu-item"><a href="/resources/articles/">Articles</a></li>
<li class="menu-item"><a href="/resources/accessible-tip-sheets/">Fact and Tip Sheets</a></li>
<li class="menu-item"><a href="/resources/videos/">Videos</a></li>
</ul>
</li>
<li class="menu-item"><a href="/contact-us/">Contact us</a></li>
</ul>
</nav>
</div>
</div>
</header>
<main id="content">
<!-- HERO (dark) -->
<section class="section dark hero">
<div class="container">
<div class="hero-grid">
<div>
<div class="eyebrow">Digital accessibility, delivered</div>
<h1>Your digital accessibility partner</h1>
<p class="lead">
              Specialist services for websites, apps, processes and communications — helping organisations achieve end‑to‑end accessibility,
              with a clear path from assessment to capability.
            </p>
<div class="actions">
<a class="btn primary" href="/services/">Explore services</a>
<a class="btn" href="/contact-us/">Contact us</a>
</div>
<div aria-label="Trust signals" class="trust"><div class="pill"><span aria-hidden="true" class="pill-ico"><svg fill="none" height="22" viewBox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M12 3l7 4v6c0 5-3 9-7 11C8 22 5 18 5 13V7l7-4z M9 13l2 2 4-5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></span><div class="pill-txt"><strong>Practical WCAG expertise</strong><span>Audit, remediation, governance, training.</span></div></div><div class="pill"><span aria-hidden="true" class="pill-ico"><svg fill="none" height="22" viewBox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M16 11a3 3 0 1 0-6 0 3 3 0 0 0 6 0z M4 20c0-3 3-5 8-5s8 2 8 5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></span><div class="pill-txt"><strong>Inclusive by design</strong><span>User testing with diverse participants.</span></div></div><div class="pill"><span aria-hidden="true" class="pill-ico"><svg fill="none" height="22" viewBox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"><path d="M6 3v18 M6 7h8l-1-2 5 2-5 2 1-2H6 M6 13h6l-1-2 5 2-5 2 1-2H6" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path></svg></span><div class="pill-txt"><strong>Built for real teams</strong><span>Clear priorities and sustainable workflows.</span></div></div></div>
</div>
<!-- Old file had this image in posts; we use it as a hero visual (keeps the “original” asset feel) -->
<div aria-hidden="true" class="hero-media"></div>
</div>
</div>
</section>
<!-- SERVICES (light) -->
<section aria-label="Services" class="section light">
<div class="container">
<div class="section-head">
<div>
<h2>Services that move you from compliance to capability</h2>
<p>Start where you are. Prioritise what matters. Build an accessibility practice that holds up over time.</p>
</div>
</div>
<div class="grid">
<article class="card">
<div class="icon"><img alt="" src="https://www.mediaaccess.org.au/wp-content/uploads/2015/04/icon-monitor.png"/></div>
<h3>Web Accessibility Audits</h3>
<p>Find out how accessible your website is — what to fix first, and why it matters.</p>
<a href="/services/testing/">Learn more</a>
</article>
<article class="card">
<div class="icon"><img alt="" src="https://www.mediaaccess.org.au/wp-content/uploads/2015/04/icon-checklist.png"/></div>
<h3>Digital Accessibility Maturity Assessment</h3>
<p>See how your organisation’s accessibility is tracking across teams, content and processes.</p>
<a href="/services/consulting/digital-accessibility-maturity-assessments/">Learn more</a>
</article>
<article class="card">
<div class="icon"><img alt="" src="https://www.mediaaccess.org.au/wp-content/uploads/2015/04/icon-phone.png"/></div>
<h3>Mobile &amp; App Audits</h3>
<p>Ensure your mobile site and apps are usable by everyone, including assistive tech users.</p>
<a href="/services/web-and-mobile-development/">Learn more</a>
</article>
<article class="card">
<div class="icon"><img alt="" src="https://www.mediaaccess.org.au/wp-content/uploads/2015/04/icon-document.png"/></div>
<h3>Accessible PDFs &amp; Documents</h3>
<p>Send us your documents and we’ll remediate them so they work for screen readers and beyond.</p>
<a href="/services/accessible-document-service/">Learn more</a>
</article>
<article class="card">
<div class="icon"><img alt="" src="https://www.mediaaccess.org.au/wp-content/uploads/2015/04/icon-certificate.png"/></div>
<h3>Accessibility Training</h3>
<p>Build skills for teams: auditing, content creation, and sustainable accessibility practices.</p>
<a href="/services/education-and-training/">Learn more</a>
</article>
<article class="card">
<div class="icon"><img alt="" src="https://www.mediaaccess.org.au/wp-content/uploads/2015/04/icon-people.png"/></div>
<h3>Consulting</h3>
<p>Strategies, policies and governance that make accessibility part of how you work.</p>
<a href="/services/consulting/">Learn more</a>
</article>
</div>
</div>
</section>
<!-- HOW (dark) -->
<section aria-label="How we work" class="section dark">
<div class="container">
<div class="section-head">
<div>
<h2>How we work</h2>
<p>Not a one‑off report. A repeatable approach that helps teams keep accessibility alive.</p>
</div>
</div>
<div class="steps">
<div class="step">
<div aria-hidden="true" class="num">1</div>
<h3>Assess</h3>
<p>Audit your website, app, documents or process. Identify impact, risk, and quick wins.</p>
</div>
<div class="step">
<div aria-hidden="true" class="num">2</div>
<h3>Remediate</h3>
<p>Fix issues with clear prioritisation — from templates and components to content.</p>
</div>
<div class="step">
<div aria-hidden="true" class="num">3</div>
<h3>Build capability</h3>
<p>Training, governance and guidance so your team can maintain accessibility long‑term.</p>
</div>
</div>
</div>
</section>
<!-- TRAINING (soft) -->
<section aria-label="Training" class="section soft">
<div class="container">
<div class="section-head">
<div>
<h2>Training that sticks</h2>
<p>Give your teams a shared language, practical tools, and confidence that survives the next release cycle.</p>
</div>
</div>
<div class="grid">
<article class="card">
<div class="icon"><img alt="" src="https://www.mediaaccess.org.au/wp-content/uploads/2015/04/icon-book.png"/></div>
<h3>Create Accessible Content</h3>
<p>Education for Word, PDF, InDesign and more — so accessibility is built into daily work.</p>
<a href="/services/education-and-training/accessible-content-creation/">Learn more</a>
</article>
<article class="card">
<div class="icon"><img alt="" src="https://www.mediaaccess.org.au/wp-content/uploads/2015/04/icon-certificate.png"/></div>
<h3>Professional Certificate in Web Accessibility</h3>
<p>A recognised pathway to build real‑world web accessibility skills for delivery teams.</p>
<a href="/services/education-and-training/pcwa/">Learn more</a>
</article>
<article class="card">
<div class="icon"><img alt="" src="https://www.mediaaccess.org.au/wp-content/uploads/2015/04/icon-download.png"/></div>
<h3>Inclusive Design &amp; User Testing</h3>
<p>Design for all and test with a diverse range of people of all abilities.</p>
<a href="/services/inclusive-design-user-testing/">Learn more</a>
</article>
</div>
</div>
</section>
<!-- INSIGHTS (light) -->
<section aria-label="Latest insights" class="section light">
<div class="container">
<div class="section-head">
<div>
<h2>Latest insights</h2>
<p>Short, practical reads — so your team can make better decisions, faster.</p>
</div>
<div>
<a class="btn primary" href="/resources/" style="background:var(--brand);border-color:var(--brand);color:#fff">View resources</a>
</div>
</div>
<div class="grid">
<article class="card">
<h3>Media Access is Expanding Our Mission</h3>
<p>After many years advocating for digital inclusion, we’re widening our scope of work.</p>
<a href="/media-access-australia-is-expanding-our-mission/">Read</a>
</article>
<article class="card">
<h3>A recent grad’s experience of the PCWA web access course</h3>
<p>What it’s like to study one of the world’s best online web accessibility courses.</p>
<a href="/a-recent-grads-experience-of-the-pcwa-web-access-course/">Read</a>
</article>
<article class="card">
<h3>Is my website accessible? And what does that mean anyway?</h3>
<p>A practical explanation of accessibility beyond “it loads on my phone”.</p>
<a href="/is-my-website-accessible/">Read</a>
</article>
</div>
</div>
</section>
</main>
<footer id="footer">
<div class="container">
<div class="footer-grid">
<div>
<strong style="font-size:16px;">Media Access</strong>
<p class="footer-muted" style="margin:10px 0 0; max-width: 70ch;">
            Web and digital accessibility services — audits, consulting, training, inclusive design and accessible documents.
          </p>
<ul aria-label="Footer navigation" class="footer-links">
<li><a href="/about-us/accessibility/">Accessibility</a></li>
<li><a href="/privacy/">Privacy</a></li>
<li><a href="/sitemap/">Sitemap</a></li>
</ul>
<div aria-label="Partners" class="footer-logos">
<img alt="AND" src="https://www.mediaaccess.org.au/resources/pro-tips/wp-content/uploads/2025/06/AND-logo.webp"/>
<img alt="W3C" src="https://www.mediaaccess.org.au/resources/pro-tips/wp-content/uploads/2025/06/w3c_memeber-Photoroom.webp"/>
</div>
<p class="footer-muted" style="margin-top: 14px; font-size: 12px;">
            © <span id="year"></span> Media Access Australia
          </p>
</div>
<div>
<strong style="font-size:16px;">Contact</strong>
<p class="footer-muted" style="margin:10px 0 0;">
            Suite 47, 104 Bathurst Street, Sydney 2000<br/>
            Phone +61 2 9212 6242
          </p>
<ul class="footer-links" style="margin-top: 14px;">
<li><a href="/contact-us/">Contact us</a></li>
<li><a href="/services/">Services</a></li>
<li><a href="/resources/">Resources</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script>
    // Sticky header: toggle light style after scroll
    (function(){
      const header = document.getElementById('siteHeader');
      const logo = document.getElementById('brandLogo');
      const logoTop = 'https://www.mediaaccess.org.au/resources/pro-tips/wp-content/uploads/2025/06/logo.webp';
      const logoScrolled = 'https://www.mediaaccess.org.au/resources/pro-tips/wp-content/uploads/2025/06/logo-1.webp';

      const onScroll = () => {
        if (!header) return;
        const scrolled = window.scrollY > 24;
        header.classList.toggle('scrolled', scrolled);
        if (logo) logo.src = scrolled ? logoScrolled : logoTop;
      };
      onScroll();
      window.addEventListener('scroll', onScroll, { passive: true });
    })();

    // Mobile menu toggle
    (function(){
      const btn = document.getElementById('navToggle');
      const menu = document.getElementById('mainMenu');
      if(!btn || !menu) return;

      btn.addEventListener('click', () => {
        const open = menu.classList.toggle('open');
        btn.setAttribute('aria-expanded', String(open));
      });

      // Dropdowns: click-to-toggle (works on desktop too; hover is not required)
      const parents = menu.querySelectorAll('li.menu-item-has-children');
      parents.forEach(li => {
        const a = li.querySelector(':scope > a');
        if(!a) return;
        a.addEventListener('click', (e) => {
          // Allow normal navigation on second click when already open
          if(!li.classList.contains('open')){
            e.preventDefault();
            parents.forEach(x => { if (x !== li) x.classList.remove('open'); });
            li.classList.add('open');
          }
        });
      });

      // Close on outside click
      document.addEventListener('click', (e) => {
        if (!menu.contains(e.target) && e.target !== btn) {
          menu.classList.remove('open');
          btn.setAttribute('aria-expanded', 'false');
          parents.forEach(x => x.classList.remove('open'));
        }
      });

      // Close on Esc
      document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
          menu.classList.remove('open');
          btn.setAttribute('aria-expanded', 'false');
          parents.forEach(x => x.classList.remove('open'));
          btn.focus();
        }
      });
    })();

    // Year
    document.getElementById('year').textContent = new Date().getFullYear();
  </script>
  

<script type="text/javascript">
    (function(m,e,t,r,i,k,a){
        m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
        m[i].l=1*new Date();
        for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
        k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
    })(window, document,'script','https://mc.yandex.ru/metrika/tag.js', 'ym');

    ym(102620497, 'init', {clickmap:true, referrer: document.referrer, url: location.href, accurateTrackBounce:true, trackLinks:true});
</script>

</body>
</html>
