Digital accessibility - Transport for London

<!doctype html>      <html lang="en-GB" class="no-js no-touch">  <head> <script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="e601acc6-2e6f-4bed-a826-046477b39b61" data-framework="TCFv2.2" type="text/javascript" async></script> <script src="//assets.adobedtm.com/launch-ENc5e3f827edc94f2a816110524598acd7.min.js" async></script> <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async></script> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <link rel="shortcut icon" href="/cdn/static/assets/icons/favicon.ico" type="image/x-icon" /> <link rel="icon" type="image/png" href="/cdn/static/assets/icons/favicon-196x196.png" sizes="196x196"> <link rel="icon" type="image/png" href="/cdn/static/assets/icons/favicon-160x160.png" sizes="160x160"> <link rel="icon" type="image/png" href="/cdn/static/assets/icons/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/cdn/static/assets/icons/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/cdn/static/assets/icons/favicon-32x32.png" sizes="32x32"> <link rel="mask-icon" href="/cdn/static/assets/icons/mask-icon.svg" /> <link rel="apple-touch-icon" sizes="57x57" href="/cdn/static/assets/icons/apple-touch-icon.png" /> <link rel="apple-touch-icon" sizes="72x72" href="/cdn/static/assets/icons/apple-touch-icon-72.png" /> <link rel="apple-touch-icon" sizes="114x114" href="/cdn/static/assets/icons/apple-touch-icon@2x.png" /> <link rel="apple-touch-icon" sizes="144x144" href="/cdn/static/assets/icons/apple-touch-icon-72@2x.png" /> <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable=yes" /> <meta name="HandheldFriendly" content="True"> <script type="text/javascript"> var h = document.documentElement; h.className = h.className.replace(/\bno-js\b/, ''); var isTouch = !!("ontouchstart" in window) || window.navigator.msMaxTouchPoints > 0; if (isTouch) { // remove class which defines hover behavior h.className = h.className.replace(/\bno-touch\b/, ''); } </script> <noscript> <link href="/cdn/static/styles/core/min/no-js.min.85b1d9e2.css" media="screen" rel="stylesheet" /> </noscript> <title>Digital accessibility - Transport for London</title> <meta name="description" content="Website accessibility, change the way the site looks, keyboard accessibility, improving accessibility and browser support " /> <meta name="keywords" content="TfL" /> <meta name="author" content="Transport for London | Every Journey Matters" /> <meta property="og:url" content="https://www.tfl.gov.uk/corporate/website-accessibility/" /> <meta property="og:title" content="Digital accessibility" /> <meta property="og:description" content="Website accessibility, change the way the site looks, keyboard accessibility, improving accessibility and browser support " /> <meta property="og:image" content="/static/1/images/TFL_Linkinage01.png" /> <meta property="og:site_name" content="Transport for London" /> <meta property="article:publisher" content="https://facebook.com/transportforlondon" /> <meta property="article:author" content="https://facebook.com/transportforlondon" /> <meta name="twitter:creator" content="@tfl" /> <link href="/cdn/static/styles/core/min/small.min.e4e39df7.css" media="screen,print" rel="stylesheet" /><link href="/cdn/static/styles/core/min/modules.min.eb422ef4.css" media="screen,print" rel="stylesheet" /><link href="/cdn/static/styles/core/min/specifics-small.min.0c674266.css" media="screen, print" rel="stylesheet" /><link href="/cdn/static/styles/core/min/medium.min.70b90106.css" media="screen and (min-width: 580px),print" rel="stylesheet" /><link href="/cdn/static/styles/core/min/large.min.346734ea.css" media="screen and (min-width: 900px)" rel="stylesheet" /><link href="/cdn/static/styles/core/min/print.min.2dbbc696.css" media="print" rel="stylesheet" />   <script type="text/javascript"> var tfl = tfl || {}; tfl.ads = tfl.ads || { amazonSlot: 'amznslots', amazonAds: '3199' }; </script> <script type='text/plain' data-cookieconsent='marketing'> window.setTimeout(function () { tfl.logs.create('Marketing cookies accepted'); tfl.logs.create('Dispatch onLoadAds event'); var loadAdsEvent = new CustomEvent('OnLoadAds', { detail: { consent: CookieConsent.consent } }); window.dispatchEvent(loadAdsEvent); }, 50); </script> <script src='/cdn/static/scripts/jquery/1.12.4/jquery.min.js' async></script> </head> <body class="personalisation-active"> <a href="#mainnav" class="visually-hidden skip-link">Skip to navigation</a> <a href="#full-width-content" class="visually-hidden skip-link">Skip to content</a> <a href="#footer" class="visually-hidden skip-link">Skip to footer</a> <div id="c-mask" class="c-mask disable-touch-scrolling"></div> <div id="container"> <div class="message-bar-style-1 medium-large"> <div class="r mayor-logo"> <img alt="Mayor of London" height="11" src="/cdn/static/images/MoL-small.png" width="150" /> </div> </div> <header class="mainnav" id="mainnav" role="banner"> <div id="smart-banner__container"></div> <div class="top-row"> <div class="r"> <div class="logo"> <a href="/"> <span class="main-roundel"> </span> <span class="tfl-name">Transport<br />for London</span> </a> </div> <div class="top-row-extras"> <div class="texts"> </div> <form action="/search/" method="GET" role="search"> <div class="search-tools"> <label for="q" class="visually-hidden">Search the site</label> <input type="text" placeholder="Search" id="q" name="q" /> <span id="search-button" class="hide-text" data-jumpto="#full-width-content :tabbable:first"></span> </div> </form> </div> </div> </div> <div id="more-panel" class="extra-nav r" role="tabpanel" aria-hidden="true"> <div class="menu" role="navigation" aria-label="More panel main menu"> <ul class="extras clearfix"> <li class="fares-and-payments"><a href="/fares/" data-jumpback=".extras .maps a:visible,.more a:first:visible">Fares</a></li> <li class="help-and-contact"><a href="/help-and-contact/" data-jumpback="#recent-journeys a:last">Help & contacts</a></li> <li class="maps"><a href="/maps_/maps" data-jumpback=".extras .status-update a:visible,.more a:first:visible">Maps</a></li> <li class="plan-journey"><a href="/plan-a-journey/" data-jumpback=".top-row-extras .more a:first:visible">Plan a journey</a></li> <li class="status-update"><a href="/status-updates/" data-jumpback=".extras .plan-journey a:visible,.more a:first:visible">Status updates</a></li> </ul> </div> <div class="menu-sub-section" role="navigation" aria-label="Travel information menu"> <h2 class="header-two">Travel information</h2> <ul class="clearfix"> <li><a href="/travel-information/improvements-and-projects/" >Improvements & projects</a></li> <li><a href="/travel-information/safety/" >Safety</a></li> <li><a href="/travel-information/stations-stops-and-piers/" >Stations, stops & piers</a></li> <li><a href="/travel-information/timetables/" >Timetables</a></li> <li><a href="/transport-accessibility/" >Transport accessibility</a></li> <li><a href="/travel-information/visiting-london/" >Visiting London </a></li> </ul> </div> <div class="menu-sub-section getting-around" role="navigation" aria-label="Ways to get around menu"> <h2 class="header-two">Ways to get around</h2> <ul class="clearfix"> <li><a href="/modes/buses/">Buses</a></li><li><a href="/modes/coaches/">Coaches</a></li><li><a href="/modes/cycling/">Cycling</a></li><li><a href="/modes/dial-a-ride/">Dial-a-Ride</a></li><li><a href="/modes/dlr/">DLR</a></li><li><a href="/modes/driving/">Driving</a></li><li><a href="/modes/elizabeth-line/">Elizabeth line</a></li><li><a href="/modes/london-cable-car/">IFS Cloud Cable Car</a></li><li><a href="/modes/london-overground/">London Overground</a></li><li><a href="/modes/river/">River</a></li><li><a href="/modes/taxis-and-minicabs/">Taxis & minicabs</a></li><li><a href="/modes/trams/">Trams</a></li><li><a href="/modes/tube/">Tube</a></li><li><a href="/modes/walking/">Walking</a></li> </ul> </div> <div class="menu-sub-section quick-links" role="navigation" aria-label="Quick links menu"> <h2 class="header-two">Quick links</h2> <ul class="clearfix"> <li><a href="/fares/contactless-and-oyster-account">Contactless and Oyster account</a></li> <li><a href="/fares/refunds-and-replacements">Refunds and replacements</a></li> <li><a href="/modes/driving/pay-to-drive-in-london">Pay to drive in London</a></li> <li><a href="/status-updates/travel-tools" data-jumpto=".login a">Travel tools</a></li> </ul> </div> </div> </header> <main id="full-width-content">   <div class="r"> <nav class="breadcrumb-container" aria-label="Transport for London breadcrumb navigation."> <span id="breadcrumb-label" class="visually-hidden">You are here:</span> <ol class="breadcrumbs clearfix" aria-labelledby="breadcrumb-label"> <li class="home"> <a href="/"> <span class="hide-text">Home</span> </a> </li> <li><span class="last-breadcrumb" aria-current="page">Digital accessibility</span></li> </ol> </nav> </div> <div class="r"> <div class="headline-container plain"> <h1>Digital accessibility</h1> </div> </div> <div class="main-and-aside r"> <div class="main content-container"> <div class="article-teaser"> We aim to make our digital services accessible and usable for everyone. </div> <div class="on-this-page"> <p>If you are looking for information about accessibility on London's transport network, please visit <a href="/transport-accessibility/">Transport accessibility</a>.</p> <h2>Accessibility compliance and testing</h2> <p>Our websites and apps support <a href="https://www.w3.org/TR/WCAG21/">W3C's WCAG 2.1 Guidelines Level AA level</a>.</p> <p>By October 2024 our websites and apps will be compliant with <a href="https://www.w3.org/TR/WCAG22/">W3C's WCAG2.2 Guidelines Level AA level</a> as per the <a href="https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps">UK government accessibility guidelines.</a></p> <p>Our Digital team is trained in digital accessibility and regularly run user testing. We design, develop and test for accessibility any new feature released to our customer-facing digital tools - we also commission yearly external expert reviews of those tools.</p> <p>We do user testing with a wide range of people, covering varied accessibility needs (mobile, cognitive, auditory and visual) and this helps us to improve the user-experience for everyone. We also test on assistive devices and software such as screen readers and magnifiers.</p> <p>We continue to make improvements following our annual accessibility audit, consultation exercises and feedback from relevant user groups and organisations.</p> <p>We also consult with third parties.</p> <h2>Digital accessibility standards</h2> <p>All digital content and services created for TfL must meet our accessibility standards.</p> <p>These standards apply to desktop, tablet, mobile website, web app and native app experiences</p> <ul> <li><a href="/corporate/website-accessibility/digital-accessibility-standard">Digital accessibility standard</a></li> <li><a href="/corporate/website-accessibility/digital-accessibility-testing-standard">Digital accessibility testing standard</a></li> </ul> <h2>TfL accessibility statements</h2> <p>Read our digital accessibility statements.</p> <ul> <li><a href="/corporate/website-accessibility/accessibility-statement">Website accessibility statement</a></li> <li><a href="/corporate/website-accessibility/pay-to-drive-accessibility-statement">Pay to drive accessibility statement</a></li> <li><a href="/corporate/website-accessibility/santander-cycles-website-accessibility-statement">Santander Cycles website accessibility statement</a></li> <li><a href="/corporate/website-accessibility/tfl-contactless-and-oyster-app">TfL Contactless and Oyster app accessibility statement</a></li> <li><a href="/corporate/website-accessibility/tfl-go-accessibility-statement">TfL Go accessibility statement</a></li> <li><a href="/corporate/website-accessibility/school-party-travel-scheme-microsite-accessibility-statement">School Party Travel Scheme microsite accessibility statement</a></li> <li><a href="/corporate/website-accessibility/scrappage-scheme-website-accessibility-statement">Scrappage scheme website accessibility statement</a></li> </ul> <h2>Supported browsers</h2> <p>We try to develop in a way that whatever browser you use, you should be able to access core information on our site.</p> <p>Popular browsers (based on our site's usage statistics) are fully supported. If you are using an older browser, we may not be able to give you full visual and interactive richness.</p> <p>We also regularly test our website on a variety of popular tablets and mobile devices.</p> <h2>Change the way this site looks</h2> <p>If you are having trouble reading this website you can change the way it looks. The settings available differ from browser to browser, but most browsers allow you to change the text size, colour and layout:</p> <p>You can adjust the size of nearly all the text on this website by using the text size setting in your browser menu. This setting is found under View or Zoom in most browsers. Or you can use CTRL+ or CTRL- to make text bigger or smaller.</p> <p>Some browsers allow you to change the default font and background colours you use. These settings are usually found in the Options or Preferences menus.</p> <p>Many browsers allow you to remove all layout and styling by turning off the website style sheets. If your browser supports this setting you will most likely find it in the Settings or Preferences menu.</p> <h2>Keyboard access</h2> <p>Most browsers let you skip from link to link using the Tab key. The current link will be highlighted. To move backwards, hold down Shift and press the Tab key.</p> <p>We do not use access keys as they may interfere with keyboard controls of browsers and screen readers.</p> </div> </div> <div class="aside"> <div data-set="sidenav-container" class="large"> <div id="right-hand-nav" class="expandable-list moving-source-order" role="navigation" aria-labelledby="sub-menu-heading"> <a href="/corporate/website-accessibility/" class="heading"> <h2 id="sub-menu-heading">Digital accessibility<span class="visually-hidden"> navigation</span></h2> </a> <ul> <li><div class="link-wrapper"><a href="/corporate/website-accessibility/digital-accessibility-standard">Digital accessibility standard</a></div></li> <li><div class="link-wrapper"><a href="/corporate/website-accessibility/digital-accessibility-testing-standard">Digital accessibility testing standard</a></div></li> <li><div class="link-wrapper"><a href="/corporate/website-accessibility/london-dial-a-ride-accessibility-statement">London Dial-a-Ride accessibility statement</a></div></li> <li><div class="link-wrapper"><a href="/corporate/website-accessibility/pay-to-drive-accessibility-statement">Pay to drive accessibility statement</a></div></li> <li><div class="link-wrapper"><a href="/corporate/website-accessibility/santander-cycles-website-accessibility-statement">Santander Cycles website accessibility statement</a></div></li> <li><div class="link-wrapper"><a href="/corporate/website-accessibility/school-party-travel-scheme-microsite-accessibility-statement">School Party Travel Scheme microsite accessibility statement</a></div></li> <li><div class="link-wrapper"><a href="/corporate/website-accessibility/scrappage-scheme-website-accessibility-statement">Scrappage scheme website accessibility statement </a></div></li> <li><div class="link-wrapper"><a href="/corporate/website-accessibility/tfl-contactless-and-oyster-app">TfL Contactless and Oyster app accessibility statement</a></div></li> <li><div class="link-wrapper"><a href="/corporate/website-accessibility/tfl-go-accessibility-statement">TfL Go accessibility statement</a></div></li> <li><div class="link-wrapper"><a href="/corporate/website-accessibility/accessibility-statement">Website accessibility statement</a></div></li> </ul> </div> </div> <div> <div class="advert-tile unsponsored-style google-ads" aria-hidden="true"> <div class="advert-link"> <div class="advert-content"> <div class="medium-large" data-advert="/76889402/non-targeted" data-advert-sizes="300, 250"></div> <div class="small" data-advert="/76889402/non-targeted" data-advert-sizes="300, 250"></div> </div> </div> </div> </div> <div class="module-grid clearfix"> <div class="related-links"> <h2 class="h3">Also on this site</h2> <div class="vertical-button-container"> <ul> <li><a href="/transport-accessibility/" class="plain-button">Transport accessibility</a></li> <li><a href="/info-for/suppliers-and-contractors/digital-toolkit" class="plain-button">Digital toolkit</a></li> </ul> </div> </div> </div> <div data-set="sidenav-container" class="small-medium"></div> </div> </div> </main> <footer id="footer" role="contentinfo"> <div class="primary-footer r"> <div class="about-tfl-menu" role="navigation" aria-labelledby="about-tfl-heading"> <h2 id="about-tfl-heading" class="visually-hidden">About TfL</h2> <ul class="footer-links"> <li><a href="/help-and-contact/">Help & contacts</a></li> <li><a class="" href="/corporate/about-tfl/" >About TfL</a></li> <li><a class="" href="/corporate/careers/" >Careers</a></li> <li><a class="" href="/corporate/publications-and-reports/" >Publications & reports</a></li> <li><a class="" href="/corporate/safety-and-security/" >Safety & security</a></li> <li><a class="" href="/travel-information/social-media-and-email-updates/" >Social media & email updates</a></li> <li><a class="" href="/corporate/transparency/" >Transparency</a></li> <li><a href="https://www.ltmuseumshop.co.uk/">Gift Shop</a></li> <li><div id="google-translate"></div></li> </ul> </div> <div role="navigation" aria-labelledby="information-for-heading"> <h2 id="information-for-heading" class="heading">Information for...</h2> <ul class="info-for clearfix"> <li><a href="/info-for/boroughs-and-communities/">Boroughs & communities</a></li><li><a href="/info-for/bus-operators/">Bus operators</a></li><li><a href="/info-for/business-and-advertisers/">Business & advertisers</a></li><li><a href="/info-for/coach-drivers/">Coach drivers</a></li><li><a href="/info-for/deliveries-in-london/">Freight & servicing in London</a></li><li><a href="/info-for/investors/">Investors</a></li><li><a href="/info-for/media/">Media</a></li><li><a href="/info-for/open-data-users/">Open data users</a></li><li><a href="/info-for/schools-and-young-people/">Schools & young people</a></li><li><a href="/info-for/suppliers-and-contractors/">Suppliers & contractors</a></li><li><a href="/info-for/taxis-and-private-hire/">Taxi & private hire </a></li><li><a href="/info-for/urban-planning-and-construction/">Urban planning & construction</a></li> </ul> </div> <div class="footer-MOL-logo" role="navigation" aria-label="Other public bodies"> <ul class="links-list" id="gla-list" data-selected-item-id="Mayor Of London Logo" data-dropdown-target="footer-MOL-logo" data-dropdown-option="gla-dropdown"> <li class="MOL-logo-dropdown" data-item-id="Mayor Of London Logo"><img src="/static/cms/images/MoL.png" alt="Mayor of London"></li> <li data-item-id="" class="greater-london-authority-li"><img src="/static/cms/images/GLA_Logo.png" alt="Greater London Authority" /></li> <li data-item-id="MOL1"><a href="http://www.london.gov.uk/">Mayor of London</a></li> <li data-item-id="LA2"><a href="http://www.london.gov.uk/mayor-assembly/london-assembly">London Assembly</a></li> <li data-item-id="LP3"><a href="http://www.londonandpartners.com/">London and Partners</a></li> <li data-item-id="MPS4"><a href="https://www.met.police.uk/">Metropolitan Police Service</a></li> <li data-item-id="LFEPA5"><a href="https://www.london-fire.gov.uk/">London Fire Brigade</a></li> <li data-item-id="MOPC6"><a href="https://www.london.gov.uk/what-we-do/mayors-office-policing-and-crime-mopac">The Mayors Office of Policing and Crime</a></li> </ul> </div> </div> <div class="secondary-footer"> <div class="r"> <div class="terms-and-conditions-menu" role="navigation" aria-labelledby="legal-information-heading"> <h2 id="legal-information-heading" class="visually-hidden">Legal information</h2> <ul> <li><a href="/corporate/data-sources">Data sources</a></li><li><a href="/corporate/privacy-and-cookies/">Privacy & cookies</a></li><li><a href="/corporate/terms-and-conditions/">Terms & conditions </a></li><li><a href="/corporate/website-accessibility/">Digital accessibility</a></li> </ul> </div> <span class="heading">Copyright TfL</span> </div> </div> <div> </div> </footer> </div> <div class="js-panelwrapper" id="favourites-panel" role="dialog" aria-label="Favourites"> <div id="fav-panel-status" class="fav-panel fav-panel-status fav-panel-slide-right scrollable" aria-hidden="true" aria-labelledby="addFavouritesHeading"> <div class="fav-panel-header"> <div class="fav-panel-header-contents"> <div class="fav-close-icon"> <button class="fav-panel__close fav-panel-close-favicon"> <span class="fav-icon large-icon fav-panel-star hide-text"> Close Favourites </span> </button> </div> </div> </div> <div class="fav-banner"> <div class="fav-dismiss-icon"></div> <div class="clearfix"></div> <a class="fav-banner-link" href="#"> <div class="fav-banner-contents"> <div class="fav-banner-title"></div> <div class="fav-banner-description"></div> </div> </a> </div> <div class="fav-panel-details fav-panel__items"> <div id="fav-status-tube-dlr-overground-elizabeth-line-tram" class="fav-panel-item clearfix"> <div id="scroll-to-fav-panel-rainbow-list-tube-dlr-overground-elizabeth-line-tram"></div> <div> <div class="fav-status-sub-heading"> <h2>My Lines</h2> </div> <div class="fav-forward-to"> <a class="fav-forward-to-edit fav-open-edit" href="javascript:void(0);" data-mode="Tube, Overground, Elizabeth line, DLR & Tram"> <span class="fav-status-edit-link" data-track-mode="my lines">Edit<span class="visually-hidden"> my lines</span></span> </a> </div> </div> <div class="clearfix"></div> <div> <div id="fav-error-tube-dlr-overground-elizabeth-line-tram" style="display: none"> <span class="field-validation-error"><strong>Service Board</strong><br />Sorry, service board information could not be retrieved.</span> <span class="field-validation-suggestion"><strong>Service Board</strong><br />Service information is out of date. Please try reloading the page.</span> </div> <div class="fav-panel-service-status-rainbow-board board-wrapper"> <div id="fav-panel-rainbow-list-tube-dlr-overground-elizabeth-line-tram"></div> </div> </div> <div class="fav-forward-to-all"> <a href="/tube-dlr-overground/status/"> <span class="fav-status-all-link">View all statuses</span> </a> </div> </div> <div id="fav-status-bus" class="fav-panel-item clearfix"> <div id="scroll-to-fav-panel-rainbow-list-bus"></div> <div> <div class="fav-status-sub-heading"> <h2>My Buses</h2> </div> <div class="fav-forward-to"> <a class="fav-forward-to-edit fav-open-edit" href="javascript:void(0);" data-mode="Bus"> <span class="fav-status-edit-link" data-track-mode="my buses">Edit<span class="visually-hidden"> my buses</span></span> </a> </div> </div> <div class="clearfix"></div> <div> <div class="fav-panel-service-status-rainbow-board board-wrapper"> <div id="fav-panel-rainbow-list-bus"></div> </div> </div> </div> <div id="fav-status-traffic" class="fav-panel-item clearfix"> <div id="scroll-to-fav-panel-rainbow-list-roads"></div> <div> <div class="fav-status-sub-heading"> <h2>My Roads</h2> </div> <div class="fav-forward-to"> <a class="fav-forward-to-edit fav-open-edit" href="javascript:void(0);" data-mode="Traffic"> <span class="fav-status-edit-link" data-track-mode="my roads">Edit<span class="visually-hidden"> my roads</span></span> </a> </div> </div> <div class="clearfix"></div> <div> <div id="fav-error-traffic" style="display: none"> <span class="field-validation-error"><strong>Service Board</strong><br />Sorry, service board information could not be retrieved.</span> <span class="field-validation-suggestion"><strong>Service Board</strong><br />Service information is out of date. Please try reloading the page.</span> </div> <div id="fav-panel-rainbow-list-roads" class="rainbow-board roads"> </div> </div> <div class="fav-forward-to-all"> <a href="/traffic/status/"> <span class="fav-status-all-link">View all reported incidents</span> </a> </div> </div> <div id="fav-status-river-bus" class="fav-panel-item clearfix"> <div id="scroll-to-fav-panel-rainbow-list-river-bus"></div> <div> <div class="fav-status-sub-heading"> <h2>My River Buses</h2> </div> <div class="fav-forward-to"> <a class="fav-forward-to-edit fav-open-edit" href="javascript:void(0);" data-mode="River Bus"> <span class="fav-status-edit-link" data-track-mode="my river buses">Edit<span class="visually-hidden"> my river buses</span></span> </a> </div> </div> <div class="clearfix"></div> <div> <div id="fav-error-river-bus" style="display: none"> <span class="field-validation-error"><strong>Service Board</strong><br />Sorry, service board information could not be retrieved.</span> <span class="field-validation-suggestion"><strong>Service Board</strong><br />Service information is out of date. Please try reloading the page.</span> </div> <div class="fav-panel-service-status-rainbow-board board-wrapper"> <div id="fav-panel-rainbow-list-river-bus"></div> </div> </div> <div class="fav-forward-to-all"> <a href="/river/status/"> <span class="fav-status-all-link">View all statuses</span> </a> </div> </div> <div id="fav-status-cable-car" class="fav-panel-item clearfix"> <div id="scroll-to-fav-panel-rainbow-list-cable-car"></div> <div> <div class="fav-status-sub-heading"> <h2>My IFS Cloud Cable Car</h2> </div> <div class="fav-forward-to"> <a class="fav-forward-to-edit fav-open-edit" href="javascript:void(0);" data-mode="CableCar"> <span class="fav-status-edit-link" data-track-mode="my IFS Cloud Cable Car">Edit<span class="visually-hidden"> my IFS Cloud Cable Car</span></span> </a> </div> </div> <div class="clearfix"></div> <div> <div id="fav-error-cable-car" style="display: none"> <span class="field-validation-error"><strong>Service Board</strong><br />Sorry, service board information could not be retrieved.</span> <span class="field-validation-suggestion"><strong>Service Board</strong><br />Service information is out of date. Please try reloading the page.</span> </div> <div class="fav-panel-service-status-rainbow-board board-wrapper"> <div id="fav-panel-rainbow-list-cable-car"></div> </div> </div> <div class="fav-forward-to-all"> <a href="/cable-car/status/"> <span class="fav-status-all-link">View status</span> </a> </div> </div> <div id="fav-status-journey" class="fav-panel-item clearfix"> <div id="scroll-to-fav-panel-rainbow-list-journey"></div> <div> <div class="fav-status-sub-heading"> <h2>My Journeys</h2> </div> <div class="fav-forward-to"> <a class="fav-forward-to-edit fav-open-edit" href="javascript:void(0);" data-mode="Journey"> <span class="fav-status-edit-link" data-track-mode="my journeys">Edit<span class="visually-hidden"> my journeys</span></span> </a> </div> </div> <div class="clearfix"></div> <div> <div class="fav-panel-service-status-rainbow-board board-wrapper"> <div id="fav-panel-rainbow-list-journey"> </div> </div> </div> </div> <div id="fav-status-place" class="fav-panel-item clearfix"> <div id="scroll-to-fav-panel-rainbow-list-place"></div> <div> <div class="fav-status-sub-heading"> <h2>My Places</h2> </div> <div class="fav-forward-to"> <a class="fav-forward-to-edit fav-open-edit" href="javascript:void(0);" data-mode="place"> <span class="fav-status-edit-link" data-track-mode="my places">Edit<span class="visually-hidden"> my places</span></span> </a> </div> </div> <div class="clearfix"></div> <div> <div class="fav-panel-service-status-rainbow-board board-wrapper"> <div id="fav-panel-rainbow-list-place"> <ul class="fav-rainbow-list"></ul> </div> </div> </div> </div> <div id="fav-add-favourites" class="fav-panel-item js-cookiemessagecontainer"> <div> <div class="fav-status-sub-heading"> <h2 id="addFavouritesHeading" data-text-first-time="Add favourites for quick access to live status, journeys and places" data-text-add="Add favourites"> Add favourites for quick access to live status, journeys and places </h2> </div> <div class="js-cookie-warning cookie-warning-message" data-warning-message="Favourites is disabled due to your cookie preferences."> <p></p> </div> <div class="js-cookie-renew cookie-warning-link" data-cookie-message="Accept functionality cookies to use this feature"> <a class="link2"></a> </div> </div> <div class="clearfix"></div> <div class="fav-forward-to-all"> </div> <div class="fav-forward-to-all" id="add-tube-dlr-overground-elizabeth-line-tram"> <a class="fav-open-edit" href="javascript:void(0);" data-mode="Tube, Overground, Elizabeth line, DLR & Tram"> <span class="fav-add-link add-lines" data-track-mode="my lines">Lines</span> </a> </div> <div class="fav-forward-to-all" id="add-bus"> <a class="fav-open-edit" href="javascript:void(0);" data-mode="Bus"> <span class="fav-add-link add-bus" data-track-mode="my buses">Buses</span> </a> </div> <div class="fav-forward-to-all" id="add-traffic"> <a class="fav-open-edit" href="javascript:void(0);" data-mode="Traffic"> <span class="fav-add-link add-roads" data-track-mode="my roads">Roads</span> </a> </div> <div class="fav-forward-to-all" id="add-river-bus"> <a class="fav-open-edit" href="javascript:void(0);" data-mode="River Bus"> <span class="fav-add-link add-river-buses" data-track-mode="my river buses">River Buses</span> </a> </div> <div class="fav-forward-to-all" id="add-cable-car"> <a class="fav-open-edit" href="javascript:void(0);" data-mode="CableCar"> <span class="fav-add-link add-cable-car" data-track-mode="my IFS Cloud Cable Car">IFS Cloud Cable Car</span> </a> </div> <div class="fav-forward-to-all" id="add-journey"> <a class="first-time-panel-description" href="/plan-a-journey/" data-mode="Journey"> <span class="fav-add-link add-journey" data-track-mode="my journeys">Journeys<br /><span class="title-description" data-track-mode="my journeys">Plan a journey and favourite it for quick access in the future</span></span> </a> </div> <div class="fav-forward-to-all add-place" id="add-place"> <a class="fav-open-edit" href="javascript:void(0);" data-mode="place"> <span class="fav-add-link add-place" data-track-mode="my places">Places<br /><span class="title-description" data-track-mode="my places">Choose postcodes, stations and places for quick journey planning</span></span> </a> </div> </div> </div> </div> <div id="fav-panel-edit" class="fav-panel fav-panel-edit fav-panel-slide-right scrollable" aria-hidden="true" aria-label="Edit favourites"> <div class="fav-panel-header"> <div class="fav-panel-header-contents"> <div class="fav-close-icon"> <button class="fav-panel__close fav-panel-close-favicon"> <span class="fav-icon large-icon fav-panel-star hide-text"> Close edit Favourites </span> </button> </div> </div> </div> <div class="fav-panel-details-wrapper"> <div class="fav-panel-details fav-panel__items js-cookiemessagecontainer"> <div class="js-cookie-warning cookie-warning-message" data-warning-message="Favourites is disabled due to your cookie preferences."> <p></p> </div> <div class="js-cookie-renew cookie-warning-link" data-cookie-message="Accept functionality cookies to use this feature"> <a class="link2"></a> </div> <div id="fav-edit-tube-dlr-overground-elizabeth-line-tram" class="fav-panel-item fav-tube-dlr-overground-elizabeth-line-tram"> <div> <div class="fav-edit-sub-heading"> <h2 id="sub-heading-line" data-text-edit="Edit" data-text-add="Add" data-track-option="" data-track-mode="my lines">Favourite lines</h2> </div> <div class="fav-panel-close"> <button class="fav-panel__close fav-panel-done">Done<span class="visually-hidden"> updating my favourites</span></button> </div> </div> <div class="clearfix"></div> <div class="fav-service-status-rainbow-board board-wrapper"> <div id="fav-rainbow-list-tube-dlr-overground-elizabeth-line-tram"> <ul class="fav-rainbow-list"> <li class="fav-rainbow-list-item bakerloo" data-line-id="lul-bakerloo" data-mode="tube"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier bakerloo"></span> <span class="fav-service-name-or-destination"> <span>Bakerloo</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item central" data-line-id="lul-central" data-mode="tube"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier central"></span> <span class="fav-service-name-or-destination"> <span>Central</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item circle" data-line-id="lul-circle" data-mode="tube"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier circle"></span> <span class="fav-service-name-or-destination"> <span>Circle</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item district" data-line-id="lul-district" data-mode="tube"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier district"></span> <span class="fav-service-name-or-destination"> <span>District</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item dlr" data-line-id="dlr-dlr" data-mode="dlr"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier dlr"></span> <span class="fav-service-name-or-destination"> <span>DLR</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item elizabeth" data-line-id="elizabeth" data-mode="elizabeth-line"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier elizabeth-line"></span> <span class="fav-service-name-or-destination"> <span>Elizabeth line</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item hammersmith" data-line-id="lul-hammersmith-city" data-mode="tube"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier hammersmith"></span> <span class="fav-service-name-or-destination"> <span>Hammersmith & City</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item jubilee" data-line-id="lul-jubilee" data-mode="tube"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier jubilee"></span> <span class="fav-service-name-or-destination"> <span>Jubilee</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item liberty" data-line-id="raillo-liberty" data-mode="overground"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier liberty"></span> <span class="fav-service-name-or-destination"> <span>Liberty</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item lioness" data-line-id="raillo-lioness" data-mode="overground"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier lioness"></span> <span class="fav-service-name-or-destination"> <span>Lioness</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item metropolitan" data-line-id="lul-metropolitan" data-mode="tube"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier metropolitan"></span> <span class="fav-service-name-or-destination"> <span>Metropolitan</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item mildmay" data-line-id="raillo-mildmay" data-mode="overground"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier mildmay"></span> <span class="fav-service-name-or-destination"> <span>Mildmay</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item northern" data-line-id="lul-northern" data-mode="tube"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier northern"></span> <span class="fav-service-name-or-destination"> <span>Northern</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item piccadilly" data-line-id="lul-piccadilly" data-mode="tube"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier piccadilly"></span> <span class="fav-service-name-or-destination"> <span>Piccadilly</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item suffragette" data-line-id="raillo-suffragette" data-mode="overground"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier suffragette"></span> <span class="fav-service-name-or-destination"> <span>Suffragette</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item tram" data-line-id="tram-tram" data-mode="tram"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier tram"></span> <span class="fav-service-name-or-destination"> <span>Tram</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item victoria" data-line-id="lul-victoria" data-mode="tube"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier victoria"></span> <span class="fav-service-name-or-destination"> <span>Victoria</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item waterloo" data-line-id="lul-waterloo-city" data-mode="tube"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier waterloo"></span> <span class="fav-service-name-or-destination"> <span>Waterloo & City</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item weaver" data-line-id="raillo-weaver" data-mode="overground"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier weaver"></span> <span class="fav-service-name-or-destination"> <span>Weaver</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item windrush" data-line-id="raillo-windrush" data-mode="overground"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier windrush"></span> <span class="fav-service-name-or-destination"> <span>Windrush</span> </span> <span class="fav-star-container"> <span class="fav-toggle"></span> </span> </div> </li> </ul> </div> </div> </div> <div id="fav-edit-bus" class="fav-panel-item fav-bus" data-mode="bus"> <div class="fav-edit-sub-heading"> <h2 id="sub-heading-bus" data-text-edit="Edit" data-text-add="Add" data-track-option="" data-track-mode="my buses">Favourite buses</h2> </div> <div class="fav-panel-close"> <button class="fav-panel__close fav-panel-done">Done<span class="visually-hidden"> updating my favourites</span></button> </div> <div class="clearfix"></div> <div class="fav-service-status-rainbow-board board-wrapper"> <div id="fav-rainbow-list-bus"> </div> </div> <div id="fav-bus-search"> <h2 id="search-heading-bus">Add new bus</h2> <div class="clearfix"></div> <div id="fav-bus-search-filter" class="search-filter no-focus"> <form id="search-filter-form-fav" action="/disambiguation" method="GET" data-placeholder="Search" data-datasets="[["stopPoints","/maps/bus?Input={{input}}&InputGeolocation={{lat}},{{lon}}&searchBoxType=bus"],["routes","/{{mode}}/route/{{lineIds}}/"]]" data-busstopsonly="False" data-isoysteronly="False" data-display-selected-modes-only="True" data-include-geolocation="True" data-allow-geo-location-submit="True" data-current-location-submit-url="/maps/bus" data-modes = "bus" data-ajax-enabled="False" data-includehubs="True" data-isssphome="False" class="clearfix" data-typeaheadSettingsJson = "{
 "menu": "fav-suggestions-menu"
}"> <div class="text-input"> <label class="heading visually-hidden" for="InputFavBus">Search</label> <input class="tt-onpanel no-focus" data-autocorrect="off" data-placeholder-no-focus="Search" data-placeholder-on-focus="Bus stop or route" data-val="true" data-val-required="Please enter a search term." id="InputFavBus" name="Input" placeholder="Search" role="combobox" type="text" value="" /> <span class="field-validation-error geolocation-error hidden" id="InputFavBus-error"> </span> <input name="DataSetsJson" type="hidden" value="[["stopPoints","/maps/bus?Input={{input}}&InputGeolocation={{lat}},{{lon}}&searchBoxType=bus"],["routes","/{{mode}}/route/{{lineIds}}/"]]" /><input name="Modes" type="hidden" value="bus" /><input name="PlaceHolderText" type="hidden" value="Search" /> </div> <div class="submit-button"> <input type="submit" value="Search" class="secondary-button visually-hidden" /> </div> </form> </div> </div> </div> <div id="fav-edit-traffic" class="fav-panel-item fav-traffic" data-mode="traffic"> <div class="fav-edit-sub-heading"> <h2 id="sub-heading-traffic" data-text-edit="Edit" data-text-add="Add" data-track-option="" data-track-mode="my roads">Favourite roads</h2> </div> <div class="fav-panel-close"> <button class="fav-panel__close fav-panel-done">Done<span class="visually-hidden"> updating my favourites</span></button> </div> <div class="clearfix"></div> <div class="fav-service-status-rainbow-board board-wrapper"> <div id="fav-rainbow-list-traffic" class="rainbow-board roads"> <ul class="fav-rainbow-list board-good-service scrolling"> <li data-line-class="roadcorridor-a1" data-corridor-group="" data-corridor-name="a1" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a1"> <span>A1</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a10" data-corridor-group="" data-corridor-name="a10" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a10"> <span>A10</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a12" data-corridor-group="" data-corridor-name="a12" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a12"> <span>A12</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a13" data-corridor-group="" data-corridor-name="a13" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a13"> <span>A13</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a2" data-corridor-group="" data-corridor-name="a2" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a2"> <span>A2</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a20" data-corridor-group="" data-corridor-name="a20" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a20"> <span>A20</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a21" data-corridor-group="" data-corridor-name="a21" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a21"> <span>A21</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a23" data-corridor-group="" data-corridor-name="a23" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a23"> <span>A23</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a24" data-corridor-group="" data-corridor-name="a24" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a24"> <span>A24</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a3" data-corridor-group="" data-corridor-name="a3" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a3"> <span>A3</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a316" data-corridor-group="" data-corridor-name="a316" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a316"> <span>A316</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a4" data-corridor-group="" data-corridor-name="a4" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a4"> <span>A4</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a40" data-corridor-group="" data-corridor-name="a40" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a40"> <span>A40</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a41" data-corridor-group="" data-corridor-name="a41" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a41"> <span>A41</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-blackwall tunnel" data-corridor-group="" data-corridor-name="blackwall tunnel" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-blackwall tunnel"> <span>Blackwall Tunnel</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-Central London Red Routes" data-corridor-group="" data-corridor-name="Central London Red Routes" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-Central London Red Routes"> <span>Central London Red Routes</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a406" data-corridor-group="" data-corridor-name="a406" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination roadcorridor-a406"> <span>North Circular (A406)</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li data-line-class="roadcorridor-a205" data-corridor-group="" data-corridor-name="a205" class="traffic-corridor" data-mode="traffic"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier road-corridor"></span> <span class="fav-service-name-or-destination road-corridor-a205"> <span>South Circular (A205)</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> </ul> </div> </div> </div> <div id="fav-edit-river-bus" class="fav-panel-item fav-river-bus" data-mode="river-bus"> <div class="fav-edit-sub-heading"> <h2 id="sub-heading-river-bus" data-text-edit="Edit" data-text-add="Add" data-track-option="" data-track-mode="my river buses">Favourite river buses</h2> </div> <div class="fav-panel-close"> <button class="fav-panel__close fav-panel-done">Done<span class="visually-hidden"> updating my favourites</span></button> </div> <div class="clearfix"></div> <div class="fav-service-status-rainbow-board board-wrapper"> <div id="fav-rainbow-list-river-bus"> <ul class="fav-rainbow-list"> <li class="fav-rainbow-list-item rb1" data-line-id="lul-rb1" data-mode="river-bus"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier rb1"></span> <span class="fav-service-name-or-destination rb1"> <span>RB1</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item rb2" data-line-id="lul-rb2" data-mode="river-bus"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier rb2"></span> <span class="fav-service-name-or-destination"> <span>RB2</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item rb4" data-line-id="lul-rb4" data-mode="river-bus"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier rb4"></span> <span class="fav-service-name-or-destination"> <span>RB4</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item rb5" data-line-id="lul-rb5" data-mode="river-bus"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier rb5"></span> <span class="fav-service-name-or-destination"> <span>RB5</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item rb6" data-line-id="lul-rb6" data-mode="river-bus"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier rb6"></span> <span class="fav-service-name-or-destination"> <span>RB6</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> <li class="fav-rainbow-list-item woolwich-ferry" data-line-id="lul-woolwich-ferry" data-mode="river-bus"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier woolwich-ferry"></span> <span class="fav-service-name-or-destination"> <span>Woolwich Ferry</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> </ul> </div> </div> </div> <div id="fav-edit-cable-car" class="fav-panel-item fav-cable-car" data-mode="cable-car"> <div class="fav-edit-sub-heading"> <h2 id="sub-heading-cable-car" data-text-edit="Edit" data-text-add="Add" data-track-option="" data-track-mode="my IFS Cloud Cable Car"><span class="visually-hidden">Favourite IFS Cloud Cable Car</span></h2> </div> <div class="fav-panel-close"> <button class="fav-panel__close fav-panel-done">Done<span class="visually-hidden"> updating my favourites</span></button> </div> <div class="clearfix"></div> <div class="fav-service-status-rainbow-board board-wrapper"> <div id="fav-rainbow-list-cable-car"> <ul class="fav-rainbow-list"> <li class="fav-rainbow-list-item cable-car" data-line-id="lul-cable-car" data-mode="cable-car"> <div class="fav-rainbow-list-link fav-star-off" role="checkbox" aria-checked="false" tabindex="0"> <span class="fav-service-identifier cable-car"></span> <span class="fav-service-name-or-destination"> <span>IFS Cloud Cable Car</span> </span> <span class="fav-star-container "> <span class="fav-toggle"></span> </span> </div> </li> </ul> </div> </div> </div> <div id="fav-edit-journey" class="fav-panel-item fav-journey fav-journey-place" data-mode="journey"> <div class="fav-edit-sub-heading"> <h2 id="sub-heading-journey" data-text-edit="Edit" data-text-add="Add" data-text-add-recents="Add recents" data-track-option="">Favourite journeys</h2> </div> <div class="fav-panel-close"> <button class="fav-panel__close fav-panel-done">Done<span class="visually-hidden"> updating my favourites</span></button> </div> <div class="clearfix"></div> </div> <div id="fav-edit-place" class="fav-panel-item fav-place fav-journey-place" data-mode="place"> <div data-bind="visible: hasPlaces()"> <div class="fav-edit-sub-heading"> <h2 id="sub-heading-place" data-text-edit="Edit" data-text-add="Add" data-track-option="" data-track-mode="my places">My places</h2> </div> <div class="fav-panel-close"> <button class="fav-panel__close fav-panel-done">Done<span class="visually-hidden"> updating my favourites</span></button> </div> </div> <div class="clearfix"></div> <div id="fav-rainbow-list-place"> <div id="edit-place"> <ul class="fav-rainbow-list fav-places-list" data-bind="foreach: places, visible: hasPlaces()"> <li class="fav-rainbow-list-item" data-bind="attr: { 'data-place': placeName }, event: { keypress: $parent.togglePlaceKeyboard }"> <div class="fav-rainbow-list-link" data-bind="css: activeState()" tabindex="0"> <span class="fav-place-label" data-bind="text: labelValue(), visible: !labelEdit(), css: labelIsNotSet(), click: $parent.toggleLabelForEdit"></span> <label class="heading visually-hidden" for="InputEditLabel">Edit label</label> <input id="InputEditLabel" type="text" placeholder="Add label" class="custom-label-edit custom-label" data-bind="value: label, visible: labelEdit, hasFocus: labelEdit" /> <div class="clearfix"></div> <div data-bind="click: $parent.togglePlace"> <span class="fav-toggle place"></span> <div class="mode-icons" data-bind="foreach: allModeIcons()"> <span class="mode-icon" data-bind="css: $data"> </span> </div> <span class="fav-place-text" data-bind="text: placeName"></span> </div> </div> </li> </ul> </div> </div> <div class="edit-place-view"> <div class="fav-edit-sub-heading"> <h2>Add new place</h2> </div> <div data-bind="visible: !hasPlaces()"> <div class="fav-panel-close"> <button class="fav-panel__close fav-panel-done">Done<span class="visually-hidden"> updating my favourites</span></button> </div> </div> <div class="clearfix"></div> <div class="edit-place-labels" data-bind="visible: showLabels"> <span data-bind="foreach: allLabels()"> <a href="javascript:void(0)" class="secondary-button fav-place-button existing-fav-place" data-bind="attr: { 'data-fav-place-label': $data }, click: $parent.selectDefaultLabel" role="checkbox" aria-checked="false" tabindex="0"> <span class="button-text" data-bind="text: $data">Existing place</span> </a> </span> <a href="javascript:void(0)" class="secondary-button fav-place-button new-fav-place" data-bind="click: $root.selectOtherLabel" tabindex="0"> <span class="button-cross"></span> <span class="button-text"><span class="visually-hidden">Add a </span>Label</span> </a> </div> <div data-bind="visible: !showLabels()"> <div id="fav-label-search-filter" class="search-filter"> <label class="heading visually-hidden" for="InputFavLabel">Add a label</label> <input id="InputFavLabel" type="text" placeholder="Add label" data-placeholder-no-focus="Add label" class="custom-label" data-bind="value: customLabel" /> </div> </div> <div id="fav-place-search-filter" class="search-filter no-focus"> <form id="search-filter-form-fav-place" method="GET" data-placeholder="Search" data-datasets="[["stopPoints","/"],["bikePoints","/"],["placesExtra","/"]]" data-busstopsonly="False" data-isoysteronly="False" data-display-selected-modes-only="False" data-include-geolocation="False" data-allow-geo-location-submit="True" data-current-location-submit-url="/maps" data-modes = "tube,dlr,overground,elizabeth-line,bus,river-bus,tram,cable-car,national-rail" data-ajax-enabled="True" data-includehubs="True" data-isssphome="False" class="clearfix" data-typeaheadSettingsJson = "{
 "menu": "fav-place-suggestions-menu"
}"> <div class="text-input"> <label class="heading visually-hidden" for="InputFavPlace">Search</label> <input class="tt-onpanel no-focus" data-autocorrect="off" data-placeholder-no-focus="Search" data-placeholder-on-focus="Station, postcode or place" data-val="true" data-val-required="Please enter a search term." id="InputFavPlace" name="Input" placeholder="Search" role="combobox" type="text" value="" /> <span class="field-validation-error geolocation-error hidden" id="InputFavPlace-error"> </span> <input name="DataSetsJson" type="hidden" value="[["stopPoints","/"],["bikePoints","/"],["placesExtra","/"]]" /><input name="Modes" type="hidden" value="tube,dlr,overground,elizabeth-line,bus,river-bus,tram,cable-car,national-rail" /><input name="PlaceHolderText" type="hidden" value="Search" /> </div> </form> </div> </div>  <div class="edit-place-view-old"> <div class="clearfix"></div> <div class="fav-edit-sub-heading panel-section-separator"> <h2>Add places</h2> </div> <div class="fav-forward-to-all"> <a class="first-time-panel-description" href="/plan-a-journey/" data-mode="place"> <span class="fav-add-link add-place"> Places <br /> <span class="title-description">Choose postcodes, stations and places for quick journey planning</span> </span> </a> </div> </div> </div> <div id="fav-edit-journey-place" class="fav-panel-item fav-place fav-journey-place" data-mode="journey-place"> <div class="clearfix"></div> </div> </div> </div> </div> <div class="popup fav-updated"> <div class="fav-toast-notification" style="display: none"> <span class="fav-icon large-icon fav-panel-star hide-text">Favicon</span><span class="popup-text">Favourites updated</span><span class="right-float"><a href="javascript:void(0)" tabindex="0" class="link2" data-tracking-event='pers_open_panel' data-tracking='pers_open_panel_details' data-tracking-value='Notification tab|view (global)' id="view-favourites-updated">View</a></span> </div> </div> </div> <script src="/cdn/static/scripts/core/min/init.min.ff532445.js"></script> <script type="text/javascript"> var queue = [function () { tfl.settings.debug = false; }, null]; var isDebug = false; var isMapsDebug = false; var isGoogleMapsDebug = false; var predictionsAjaxPolling = false; tfl.apiUrl = "https://api-ganges.tfl.gov.uk/"; tfl.pushApiUrl = "https://push-api-ganges.tfl.gov.uk/"; tfl.appId = "8268063a"; tfl.appKey = "14f7f5ff5d64df2e88701cef2049c804"; // Api mode names tfl.modeNameBus = "bus"; tfl.modeNameCableCar = "cable-car"; tfl.modeNameDlr = "dlr"; tfl.modeNameOverground = "overground"; tfl.modeNameElizabethLine = "elizabeth-line"; tfl.modeNameRiver = "river-bus"; tfl.modeNameTrain = "national-rail"; tfl.modeNameTram = "tram"; tfl.modeNameTube = "tube"; tfl.modeNameTraffic = "traffic"; tfl.modeNameMultiModal = "hub"; tfl.modeJourney = "journey"; tfl.modePlace = "place" // Excluded modes tfl.modesToExclude = ["plane", "international-rail"] // bus stopType tfl.naptanPublicBusCoachTram = "NaptanPublicBusCoachTram"; // disambiguation datasets tfl.disambiguationDataSets = { placesExtra: "placesExtra", routes: "routes", stopPoints: "stopPoints", bikePoints: "bikePoints", taxiRanks: "taxiRanks" }; //api error message tfl.apiErrorMessage = "Sorry, there was a problem with your request. Please try again later."; //page Urls tfl.jPLandingPageUrl = "/plan-a-journey/"; tfl.jPResultsPageUrl = "/JourneyPlanner/ResultsAsync"; tfl.disambiguationUrl = "/Disambiguation/AmbiguousSearchAjax"; // Amazon TAM Publisher Id tfl.amazonPublisherId = "9547a513-f2e5-4004-bd92-dc734efe7cf2"; //Typeahead search stops tfl.stopPointsSearchPrevent = false; tfl.stopPointsSearchPreviousQueryLength=0; tfl.placesExtraSearchPrevent = false; tfl.placesExtraSearchPreviousQueryLength=0; tfl.bikePointsSearchPrevent = false; tfl.bikePointsSearchPreviousQueryLength=0; //set personalisation defaults from web config tfl.isPersonalisationActive = "True"; tfl.showBusStatusOnHomePage = "True"; //Bottom advert tfl.showBottomAdvertCloseButton = "False"; //Cookiebot text tfl.dictionary.cookiebotRecentsMessage = "Recents is disabled due to your cookie preferences."; tfl.dictionary.cookiebotJourneysMessage = "My Journeys is disabled due to your cookie preferences."; tfl.dictionary.cookiebotRecentsLink = "Accept functionality cookies to use this feature"; queue.push("/cdn/static/scripts/core/min/global.min.b55e99d7.js", null , function() { if (tfl.DisableButtonOnSubmit) { tfl.DisableButtonOnSubmit.init(null, true, null); } }); queue.push(function () { var allowCorsInIe9 = "/cdn/static/scripts/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js", l = $LAB, isie9OrLess = $("html").hasClass("lt-ie10"); if (isie9OrLess) { l.script(allowCorsInIe9); l.wait(); } }); if (isMapsDebug) { tfl.mapScriptPath = "/mapssource/packageall/packageall.js"; tfl.stealScriptPath = "/mapssource/steal/steal.js"; } else { tfl.mapScriptPath = "/cdn/static/scripts/maps/packageall/production.bc07728e.js"; tfl.stealScriptPath = "/cdn/static/scripts/maps/steal/steal.production.ed44caab.js"; } if (isGoogleMapsDebug) { tfl.isGoogleMapsDebug = true; } </script>  <script> (function (tfl) { tfl.isPersonalisationActive = true; tfl.isBusFavouritesActive = false; tfl.showBusStatusOnHomePage = true; tfl.showOnboarding = { personalisationStar: true }; tfl.showGetMeHome = { savePlace: false }; tfl.showBroadcastMessage = false; tfl.showStrikBannerOnTubemap = false; tfl.showBottomAdvertCloseButton = false; })(tfl = tfl || {}); </script> <script> queue.push("/cdn/static/scripts/modules/M020-on-this-page.min.js", null); </script> <script> queue.push("/cdn/static/scripts/modules/M032-expandable-list.min.js", function () { window.tfl.expandableList.init('#right-hand-nav', false); }); </script> <script> tfl.logs.create("tfl.favstatusbus: creating"); if (predictionsAjaxPolling || navigator.userAgent.indexOf("BlackBerry") >= 0) { tfl.logs.create("tfl.favstatusbus: blackberry"); // reverting to AJAX polling for Blackberry 7 devices queue.push( "/cdn/static/scripts/specific/stations-stops-piers/predictions-ajax.min.1f187320.js", null ); } else { tfl.logs.create("tfl.statusbus: non-blackberry"); queue.push( "/cdn/static/scripts//plugins/includes/jquery.signalR-2.2.0.min.js", null, "https://push-api-ganges.tfl.gov.uk/signalr/hubs", null, "/cdn/static/scripts//plugins/includes/knockout-2.3.0.min.js", null, "/cdn/static/scripts/specific/stations-stops-piers/predictions.min.f2498951.js", null ); } </script> <script> queue.push( function () { tfl.searchFilter.setNearUrl("/maps/bus"); }, null ); </script><script> queue.push( function () { tfl.searchFilter.setNearUrl("/maps"); }, null ); </script> <script> var $L = $LAB; for (var i = 0, len = queue.length; i < len; i++) { if (typeof queue[i] == "string") { $L = $L.script(queue[i]); } else if (!queue[i]) { $L = $L.wait(); } else if (typeof queue[i] == "function") { $L = $L.wait(queue[i]); } } </script>  <script> var tfl = tfl || {}; tfl.analytics = tfl.analytics || {}; tfl.analytics.tealiumUtagUrl = '//assets.adobedtm.com/launch-ENc5e3f827edc94f2a816110524598acd7.min.js'; </script>   <script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL }, 'google-translate'); applyAriaLabel(); removeGoogleTranslateAltTag() }; function applyAriaLabel() { var gtSelect = document.getElementsByClassName('goog-te-combo')[0]; var ariaLabel = document.createAttribute('aria-label'); ariaLabel.value = 'Select Language'; gtSelect.setAttributeNode(ariaLabel); }; function removeGoogleTranslateAltTag() { // This function is a sticking plaster fixing a bigger issue with the Google Translate library used above. var altTag = document.getElementsByClassName('goog-logo-link')[0]; if(!altTag) return; altTag.childNodes[1].remove() } </script>  </body> </html>

CINXE.COM

Digital accessibility - Transport for London