Home navigation
Markup
<section class="m-module" aria-label="Services and information">
<h2 id="servicesTitle" class="u-visuallyhidden">Services and information</h2>
<div class="row">
<div class="col-sm-4">
<a href="/consumers/" class="c-teaser">
<div class="c-teaser__image-overlay">
<!-- <img class="c-teaser__image" alt=""> -->
</div>
<div class="c-teaser__text">
<h3 class="c-teaser__title">
Consumers
</h3>
<p class="c-teaser__description">Protecting passengers and the public</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="/commercial-industry/" class="c-teaser">
<div class="c-teaser__image-overlay">
<!-- <img class="c-teaser__image" alt=""> -->
</div>
<div class="c-teaser__text">
<h3 class="c-teaser__title">
Commercial industry
</h3>
<p class="c-teaser__description">Regulations and requirements for commercial aviation</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="/general-aviation/" class="c-teaser">
<div class="c-teaser__image-overlay">
<!-- <img class="c-teaser__image" alt=""> -->
</div>
<div class="c-teaser__text">
<h3 class="c-teaser__title">
General Aviation
</h3>
<p class="c-teaser__description">Information for recreational flying</p>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<a href="/licences-and-other-approvals/" class="c-teaser">
<div class="c-teaser__image-overlay">
<!-- <img class="c-teaser__image" alt=""> -->
</div>
<div class="c-teaser__text">
<h3 class="c-teaser__title">
Licences and other approvals
</h3>
<p class="c-teaser__description">Guidance for your application</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="/atol-protection/" class="c-teaser">
<div class="c-teaser__image-overlay">
<!-- <img class="c-teaser__image" alt=""> -->
</div>
<div class="c-teaser__text">
<h3 class="c-teaser__title">
ATOL protection
</h3>
<p class="c-teaser__description">Peace of mind for holidaymakers</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="/international-group/" class="c-teaser">
<div class="c-teaser__image-overlay">
<!-- <img class="c-teaser__image" alt=""> -->
</div>
<div class="c-teaser__text">
<h3 class="c-teaser__title">
International group
</h3>
<p class="c-teaser__description">Information about our vision and purpose, including CAA International</p>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<a href="/safety-initiatives-and-resources/" class="c-teaser">
<div class="c-teaser__image-overlay">
<!-- <img class="c-teaser__image" alt=""> -->
</div>
<div class="c-teaser__text">
<h3 class="c-teaser__title">
Safety initiatives and resources
</h3>
<p class="c-teaser__description">Key projects and workstreams</p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="/data-and-analysis/" class="c-teaser">
<div class="c-teaser__image-overlay">
<!-- <img class="c-teaser__image" alt=""> -->
</div>
<div class="c-teaser__text">
<h3 class="c-teaser__title">
Data and analysis
</h3>
<p class="c-teaser__description">Aviation industry data collected, analysed and published by the CAA</p>
</div>
</a>
</div>
</div>
</section>
Guidance
- Set the alt attribute value to null for all thumbnails as their purpose is purely decorative
Section navigation
Example
Services and information
Markup
<section class="m-module" aria-label="Services and information">
<h2 id="servicesTitle" class="u-visuallyhidden">Services and information</h2>
<div class="row">
<div class="col-sm-4">
<div class="c-teaser">
<h3 class="c-teaser__title"><a href="/consumers/guide-to-aviation/">Guide to aviation</a></h3>
<ul>
<li class="c-teaser__item">
<a href="/consumers/guide-to-aviation/aviation-safety/" class="c-teaser__link">Aviation safety</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/guide-to-aviation/demand-for-additional-runway-capacity/" class="c-teaser__link">Demand for additional runway capacity</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/guide-to-aviation/aircraft/" class="c-teaser__link">Aircraft</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/guide-to-aviation/who-manages-uk-airspace/" class="c-teaser__link">Who manages UK airspace?</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/guide-to-aviation/how-air-traffic-control-works/" class="c-teaser__link">How air traffic control works</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/guide-to-aviation/how-airlines-are-licensed-and-inspected/" class="c-teaser__link">How airlines are licensed and inspected</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/guide-to-aviation/how-airports-work-operationally/" class="c-teaser__link">How airports work operationally</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/guide-to-aviation/pilot-training-and-checks/" class="c-teaser__link">Pilot training and checks</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/guide-to-aviation/weather/" class="c-teaser__link">Weather</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/guide-to-aviation/consumer-challenge-board/" class="c-teaser__link">Consumer Challenge Board</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/guide-to-aviation/improving-resilience-for-uk-airports-and-airspace/" class="c-teaser__link">Improving resilience for UK airports and airspace</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/guide-to-aviation/making-sure-your-flight-is-legal/" class="c-teaser__link">Making sure your flight is legal</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="c-teaser">
<h3 class="c-teaser__title"><a href="/consumers/environment/">Environment</a></h3>
<ul>
<li class="c-teaser__item">
<a href="/consumers/environment/overview/" class="c-teaser__link">Overview</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/environment/environmental-stakeholders/" class="c-teaser__link">Environmental stakeholders</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/environment/information-on-the-environmental-impact-of-aviation/" class="c-teaser__link">Information on the environmental impact of aviation</a>
</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="c-teaser">
<h3 class="c-teaser__title"><a href="/consumers/noise/">Noise</a></h3>
<ul>
<li class="c-teaser__item">
<a href="/consumers/noise/the-creation-and-effects-of-noise/" class="c-teaser__link">The creation and effects of noise</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/noise/measuring-and-modelling-noise/" class="c-teaser__link">Measuring and modelling noise</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/noise/features-of-the-ancon-noise-modelling-process/" class="c-teaser__link">Features of the ANCON noise modelling process</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/noise/reducing-noise/" class="c-teaser__link">Reducing noise</a>
</li>
<li class="c-teaser__item">
<a href="/consumers/noise/aviation-noise-and-health/" class="c-teaser__link">Aviation noise and health</a>
</li>
</ul>
</div>
</div>
</div>
</section>
Category navigation
Example
Services and information
Markup
<section class="m-module" aria-label="Services and information">
<h2 id="servicesTitle" class="u-visuallyhidden">Services and information</h2>
<ul class="c-navigation">
<li>
<a href="/consumers/noise/the-creation-and-effects-of-noise/" class="c-navigation__link">
<h3 class="c-navigation__link-title">
The creation and effects of noise
</h3>
<p class="c-navigation__link-description">How noise is defined and information on its effects</p>
<span class="c-navigation__icon icon icon-arrow_right" aria-hidden="true">
<span class="path1"></span>
</span>
</a>
</li>
<li>
<a href="/consumers/noise/measuring-and-modelling-noise/" class="c-navigation__link">
<h3 class="c-navigation__link-title">
Measuring and modelling noise
</h3>
<p class="c-navigation__link-description">How aviation noise can be measured and modelled</p>
<span class="c-navigation__icon icon icon-arrow_right" aria-hidden="true">
<span class="path1"></span>
</span>
</a>
</li>
<li>
<a href="/consumers/noise/features-of-the-ancon-noise-modelling-process/" class="c-navigation__link">
<h3 class="c-navigation__link-title">
Features of the ANCON noise modelling process
</h3>
<p class="c-navigation__link-description">Overview of how the aircraft noise contour (ANCON) process works</p>
<span class="c-navigation__icon icon icon-arrow_right" aria-hidden="true">
<span class="path1"></span>
</span>
</a>
</li>
<li>
<a href="/consumers/noise/reducing-noise/" class="c-navigation__link">
<h3 class="c-navigation__link-title">
Reducing noise
</h3>
<p class="c-navigation__link-description">The CAA's role in reducing aviation noise</p>
<span class="c-navigation__icon icon icon-arrow_right" aria-hidden="true">
<span class="path1"></span>
</span>
</a>
</li>
<li>
<a href="/consumers/noise/aviation-noise-and-health/" class="c-navigation__link">
<h3 class="c-navigation__link-title">
Aviation noise and health
</h3>
<p class="c-navigation__link-description">The effects of aviation noise</p>
<span class="c-navigation__icon icon icon-arrow_right" aria-hidden="true">
<span class="path1"></span>
</span>
</a>
</li>
</ul>
</section>
Content navigation
Example
Markup
<nav class="m-side-nav" aria-label="Noise">
<span id="sideNavTitle" class="m-side-nav__title">
<a href="/consumers/environment/noise/" class="m-side-nav__link">Noise</a>
</span>
<ul class="m-side-nav__list">
<li class="m-side-nav__item">
<a href="/consumers/environment/noise/noise/" class="m-side-nav__link m-side-nav__link--active" aria-current="page">Noise</a>
</li>
<li class="m-side-nav__item">
<a href="/consumers/environment/noise/aviation-noise-and-health/" class="m-side-nav__link">Aviation noise and health</a>
</li>
<li class="m-side-nav__item">
<a href="/consumers/environment/noise/features-of-the-ancon-noise-modelling-process/" class="m-side-nav__link">Features of the ANCON noise modelling process</a>
</li>
<li class="m-side-nav__item">
<a href="/consumers/environment/noise/measuring-and-modelling-noise/" class="m-side-nav__link">Measuring and modelling noise</a>
</li>
<li class="m-side-nav__item">
<a href="/consumers/environment/noise/reducing-noise/" class="m-side-nav__link">Reducing noise</a>
</li>
<li class="m-side-nav__item">
<a href="/consumers/environment/noise/the-creation-and-effects-of-noise/" class="m-side-nav__link">The creation and effects of noise</a>
</li>
</ul>
</nav>
Guidance
- Apply the aria-current="page" attribute when the current page is selected in the navigation.
- Label the nav component with the relevant section title. For example, for the Noise section, ensure the nav element is labelled with aria-label="Noise".
Featured navigation
Markup
<section class="m-module" aria-label="Featured">
<h2 class="m-module__title m-module__title--category">Featured</h2>
<div class="row">
<div class="col-sm-12">
<a href="/newsroom/news/regulator-brings-enforcement-action-against-wizz-air/" class="c-teaser clearfix">
<div class="c-teaser__image-overlay c-teaser__image-overlay--feature c-teaser__image-overlay--feature-primary">
<!--
<picture>
<source srcset="/media/z2snqlyd/people-boarding-a-wizz-air-flight.jpg?anchor=center&mode=crop&width=568&height=376&rnd=133352645617870000" media="(min-width: 1024px)">
<source srcset="/media/z2snqlyd/people-boarding-a-wizz-air-flight.jpg?anchor=center&mode=crop&width=486&height=322&rnd=133352645617870000" media="(min-width: 768px)">
<source srcset="/media/z2snqlyd/people-boarding-a-wizz-air-flight.jpg?anchor=center&mode=crop&width=718&height=405&rnd=133352645617870000" media="(min-width: 480px)">
<img class="c-teaser__image" src="/media/z2snqlyd/people-boarding-a-wizz-air-flight.jpg?anchor=center&mode=crop&width=447&height=252&rnd=133352645617870000" alt="">
</picture>
-->
</div>
<div class="c-teaser__text c-teaser__text--feature c-teaser__text--feature-primary">
<div class="c-teaser__title-wrapper">
<h3 class="c-teaser__title c-teaser__title--featured">
Regulator brings enforcement action against Wizz Air
</h3>
<ul class="m-news__item-metadata">
<li>
<span class="icon icon-calendar" aria-hidden="true">
</span>
<span class="u-visuallyhidden">
Published on:
</span>
<time datetime="2023-07-27">
27 July 2023
</time>
</li>
<li>
<span class="m-news__item-metadata-separator" aria-hidden="true"></span>
<span class="u-visuallyhidden">
Category:
</span>
News Item
</li>
</ul>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<a href="/newsroom/news/regulator-praises-accessibility-improvements-across-uk-airports/" class="c-teaser">
<div class="c-teaser__image-overlay c-teaser__image-overlay--feature">
<!--
<picture>
<source srcset="/media/snzfbr5i/check-in-sign-with-plane-flying-in-distance.png?anchor=center&mode=crop&width=358&height=202&rnd=133343069962830000" media="(min-width: 1024px)">
<source srcset="/media/snzfbr5i/check-in-sign-with-plane-flying-in-distance.png?anchor=center&mode=crop&width=303&height=172&rnd=133343069962830000" media="(min-width: 768px)">
<source srcset="/media/snzfbr5i/check-in-sign-with-plane-flying-in-distance.png?anchor=center&mode=crop&width=718&height=405&rnd=133343069962830000" media="(min-width: 480px)">
<img class="c-teaser__image" src="/media/snzfbr5i/check-in-sign-with-plane-flying-in-distance.png?anchor=center&mode=crop&width=447&height=252&rnd=133343069962830000" alt="">
</picture>
-->
</div>
<div class="c-teaser__text c-teaser__text--feature">
<div class="c-teaser__title-wrapper">
<h3 class="c-teaser__title">
Regulator praises accessibility improvements across UK airports
</h3>
<ul class="m-news__item-metadata">
<li>
<span class="icon icon-calendar" aria-hidden="true">
</span>
<span class="u-visuallyhidden">
Published on:
</span>
<time datetime="2023-07-20">
20 July 2023
</time>
</li>
<li>
<span class="m-news__item-metadata-separator" aria-hidden="true"></span>
<span class="u-visuallyhidden">
Category:
</span>
News Item
</li>
</ul>
</div>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="/newsroom/news/regulator-reminds-drone-users-to-register-before-they-fly/" class="c-teaser">
<div class="c-teaser__image-overlay c-teaser__image-overlay--feature">
<!--
<picture>
<source srcset="/media/mx3j2pfc/drone-flying.jpg?anchor=center&mode=crop&width=358&height=202&rnd=133352647276300000" media="(min-width: 1024px)">
<source srcset="/media/mx3j2pfc/drone-flying.jpg?anchor=center&mode=crop&width=303&height=172&rnd=133352647276300000" media="(min-width: 768px)">
<source srcset="/media/mx3j2pfc/drone-flying.jpg?anchor=center&mode=crop&width=718&height=405&rnd=133352647276300000" media="(min-width: 480px)">
<img class="c-teaser__image" src="/media/mx3j2pfc/drone-flying.jpg?anchor=center&mode=crop&width=447&height=252&rnd=133352647276300000" alt="">
</picture>
-->
</div>
<div class="c-teaser__text c-teaser__text--feature">
<div class="c-teaser__title-wrapper">
<h3 class="c-teaser__title">
Regulator reminds drone users to register before they fly
</h3>
<ul class="m-news__item-metadata">
<li>
<span class="icon icon-calendar" aria-hidden="true">
</span>
<span class="u-visuallyhidden">
Published on:
</span>
<time datetime="2023-07-19">
19 July 2023
</time>
</li>
<li>
<span class="m-news__item-metadata-separator" aria-hidden="true"></span>
<span class="u-visuallyhidden">
Category:
</span>
News Item
</li>
</ul>
</div>
<p class="c-teaser__description">The UK Civil Aviation Authority is reminding drone users to register with the regulator as a drone operator before they fly and has launched an extensive social media campaign aimed at people who aren’t sure of the rules and requirements. </p>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="/newsroom/news/uk-government-publishes-review-of-civil-aviation-authority/" class="c-teaser">
<div class="c-teaser__image-overlay c-teaser__image-overlay--feature">
<!--
<picture>
<source srcset="/media/szplfqcq/aviation-house.jpg?center=0.840594755239937,0.50118419334986852&mode=crop&width=358&height=202&rnd=133324129439830000" media="(min-width: 1024px)">
<source srcset="/media/szplfqcq/aviation-house.jpg?center=0.840594755239937,0.50118419334986852&mode=crop&width=303&height=172&rnd=133324129439830000" media="(min-width: 768px)">
<source srcset="/media/szplfqcq/aviation-house.jpg?center=0.840594755239937,0.50118419334986852&mode=crop&width=718&height=405&rnd=133324129439830000" media="(min-width: 480px)">
<img class="c-teaser__image" src="/media/szplfqcq/aviation-house.jpg?center=0.840594755239937,0.50118419334986852&mode=crop&width=447&height=252&rnd=133324129439830000" alt="">
</picture>
-->
</div>
<div class="c-teaser__text c-teaser__text--feature">
<div class="c-teaser__title-wrapper">
<h3 class="c-teaser__title">
UK Government publishes review of Civil Aviation Authority
</h3>
<ul class="m-news__item-metadata">
<li>
<span class="icon icon-calendar" aria-hidden="true">
</span>
<span class="u-visuallyhidden">
Published on:
</span>
<time datetime="2023-07-17">
17 July 2023
</time>
</li>
<li>
<span class="m-news__item-metadata-separator" aria-hidden="true"></span>
<span class="u-visuallyhidden">
Category:
</span>
News Item
</li>
</ul>
</div>
</div>
</a>
</div>
</div>
</section>
Pagination
Example
Markup
<div class=" c-pagination-container">
<nav class="c-pagination c-pagination--simple" aria-label="pagination">
<ul class="c-pagination__list">
<li class="c-pagination__item c-pagination__item--prev">
<a href="#" class="c-pagination__link c-pagination__link--button disabled" role="button" aria-disabled="true" tabindex="-1">
<span class="icon icon-arrow_left"></span>
<span>Previous</span><span class="u-visuallyhidden"> page</span>
</a>
</li>
<li class="c-pagination__item c-pagination">
<a class="c-pagination__link c-pagination__link--number active" href="?tag=&page=1" role="button" aria-current="page">
<span class="u-visuallyhidden">Page </span>1
</a>
</li>
<li class="c-pagination__item c-pagination">
<a class="c-pagination__link c-pagination__link--number" href="?tag=&page=2" role="button">
<span class="u-visuallyhidden">Page </span>2
</a>
</li>
<li class="c-pagination__item c-pagination">
<a class="c-pagination__link c-pagination__link--number" href="?tag=&page=3" role="button">
<span class="u-visuallyhidden">Page </span>3
</a>
</li>
<li class="c-pagination__item c-pagination">
<a class="c-pagination__link c-pagination__link--number" href="?tag=&page=4" role="button">
<span class="u-visuallyhidden">Page </span>4
</a>
</li>
<li class="c-pagination__item c-pagination__item--dots">
<a href="?tag=&page=5" class="c-pagination__link c-pagination__link--button" role="button">
<span>...</span><span class="u-visuallyhidden">Next set of pages</span>
</a>
</li>
<li class="c-pagination__item c-pagination__item--next">
<a href="?tag=&page=2" class="c-pagination__link c-pagination__link--button " role="button">
<span>Next</span><span class="u-visuallyhidden"> page</span>
<span class="icon icon-arrow_right"></span>
</a>
</li>
</ul>
</nav>
</div>
Guidance
- Set the aria-disabled attribute to true when a button, (for example the Previous button on the first page of the collection) is disabled.
- Ensure disabled buttons can't receive keyboard focus by applying the tabindex attribute with a value of -1.
- Include additional hidden text content for screen reader users where necessary. For example, the horizontal ellipsis that links to the next set of pages should be labelled as such using the u-visuallyhidden class.
Provide page feedback
Please enter your comments below, or use our usual service contacts if a specific matter requires an answer.
Fields marked with an asterisk (*) are required.