Skip to content

Instantly share code, notes, and snippets.

@radiocontrolled
Created July 31, 2018 13:05
Show Gist options
  • Save radiocontrolled/3ef84a6dc5deaf59f2e14f18cb0dc7b0 to your computer and use it in GitHub Desktop.
Save radiocontrolled/3ef84a6dc5deaf59f2e14f18cb0dc7b0 to your computer and use it in GitHub Desktop.
bbc-a11y 'Text styled with px unit' error
<!doctype html>
<html lang="en-GB">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="robots" content="nofollow" />
<link rel="manifest" href="manifest.json" />
<link rel="preconnect" href="https://ichef.bbci.co.uk" crossOrigin="anonymous" />
<link rel="preconnect" href="https://static.bbci.co.uk" crossOrigin="anonymous" />
<link rel="preconnect" href="https://gel.files.bbci.co.uk" crossOrigin="anonymous" />
<link rel="dns-prefetch" href="https://ichef.bbci.co.uk" />
<link rel="dns-prefetch" href="https://static.bbci.co.uk" />
<link rel="dns-prefetch" href="https://gel.files.bbci.co.uk" />
<title data-react-helmet="true">Article Headline</title>
<style type="text/css" data-styled-components="" data-styled-components-is-local="true"></style>
<style type="text/css" data-styled-components="" data-styled-components-is-local="false">
/* sc-component-id: sc-global-20939283 */
@font-face {
font-display: optional;
font-family: ReithSansNewsLight;
font-style: normal;
font-weight: 300;
src: url('https://gel.files.bbci.co.uk/r2.302/BBCReithSans_W_Lt.woff2') format('woff2'), url('https://gel.files.bbci.co.uk/r2.302/BBCReithSans_W_Lt.woff') format('woff');
}
@font-face {
font-display: optional;
font-family: ReithSansNewsRegular;
font-style: normal;
font-weight: 400;
src: url('https://gel.files.bbci.co.uk/r2.302/BBCReithSans_W_Rg.woff2') format('woff2'), url('https://gel.files.bbci.co.uk/r2.302/BBCReithSans_W_Rg.woff') format('woff');
}
@font-face {
font-display: optional;
font-family: ReithSansNewsMedium;
font-style: normal;
font-weight: 600;
src: url('https://gel.files.bbci.co.uk/r2.302/BBCReithSans_W_Md.woff2') format('woff2'), url('https://gel.files.bbci.co.uk/r2.302/BBCReithSans_W_Md.woff') format('woff');
}
@font-face {
font-display: optional;
font-family: ReithSansNewsBold;
font-style: normal;
font-weight: 700;
src: url('https://gel.files.bbci.co.uk/r2.302/BBCReithSans_W_Bd.woff2') format('woff2'), url('https://gel.files.bbci.co.uk/r2.302/BBCReithSans_W_Bd.woff') format('woff');
}
@font-face {
font-display: optional;
font-family: ReithSerifNewsLight;
font-style: normal;
font-weight: 300;
src: url('https://gel.files.bbci.co.uk/r2.302/BBCReithSerif_W_Lt.woff2') format('woff2'), url('https://gel.files.bbci.co.uk/r2.302/BBCReithSerif_W_Lt.woff') format('woff');
}
@font-face {
font-display: optional;
font-family: ReithSerifNewsRegular;
font-style: normal;
font-weight: 400;
src: url('https://gel.files.bbci.co.uk/r2.302/BBCReithSerif_W_Rg.woff2') format('woff2'), url('https://gel.files.bbci.co.uk/r2.302/BBCReithSerif_W_Rg.woff') format('woff');
}
@font-face {
font-display: optional;
font-family: ReithSerifNewsMedium;
font-style: normal;
font-weight: 600;
src: url('https://gel.files.bbci.co.uk/r2.302/BBCReithSerif_W_Md.woff2') format('woff2'), url('https://gel.files.bbci.co.uk/r2.302/BBCReithSerif_W_Md.woff') format('woff');
}
@font-face {
font-display: optional;
font-family: ReithSerifNewsBold;
font-style: normal;
font-weight: 700;
src: url('https://gel.files.bbci.co.uk/r2.302/BBCReithSerif_W_Bd.woff2') format('woff2'), url('https://gel.files.bbci.co.uk/r2.302/BBCReithSerif_W_Bd.woff') format('woff');
}
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
h1 {
font-size: 2em; /* if this is 2em, bbc-a11y will find an error */
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
-webkit-text-decoration: underline;
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none;
}
</style>
<style type="text/css" data-styled-components="ebxmQL bXtYvV" data-styled-components-is-local="true">
/* sc-component-id: sc-gqjmRU */
.sc-gqjmRU {}
.ebxmQL {
background-color: #BB1919;
height: 40px;
width: 100%;
padding: 16px;
}
/* sc-component-id: sc-chPdSV */
.sc-chPdSV {}
.bXtYvV {
color: #222222;
font-family: ReithSansNewsRegular, Arial, Helvetica, freesans, sans-serif;
font-size: 2em; /* if this is 2em, bbc-a11y will find an error */
}
</style>
</head>
<body>
<div id="root">
<header class="sc-gqjmRU ebxmQL" role="banner" aria-label="BBC News">
<a href="https://www.bbc.co.uk/news">BBC News</a>
</header>
<main role="main">
<h1 class="sc-chPdSV bXtYvV">Article Headline</h1>
</main>
</div>
<script id="server-app-state" type="application/json">{"data":{"passport":{"language":"en-gb","home":"http:\u002F\u002Fwww.bbc.co.uk\u002Fontologies\u002Fpassport\u002Fhome\u002FNews","articleType":"news","genre":null},"publishedDateTime":"2018-06-04T00:00:00.000Z","lastUpdatedDateTime":"2018-06-05T12:00:00.000Z","seoHeadline":"Curabitur risus lorem vestibulum quis magna at vulputate vehicula nibh","tags":{"about":["http:\u002F\u002Fwww.bbc.co.uk\u002Fthings\u002F3fbfd244-928b-498d-a585-9e39bd27fad3#id"],"mentions":null},"metaDescription":"Ut dictum pellentesque risus nec tristique.","model":{"blocks":[{"blockId":"21cbb616-613e-4750-8c52-8a46c39456e0","type":"headline","model":{"blocks":[{"blockId":"94e712e8-99d1-0ef5-bb61-39f68de9f5ed","type":"text","model":{"blocks":[{"type":"paragraph","blockId":"635ebabb-1b25-b334-f8f7-a1811e2665c6","model":{"text":"Lorem ipsum dolor sit amet, consectetur _adipiscing_ elit"}}]}}]}},{"blockId":"4b9ae65b-dc27-4cf1-82c6-36a24b005cbc","type":"image","model":{"blocks":[{"blockId":"f14d8799-d0dd-24d8-ca19-1cc5812b704e","type":"rawImage","model":{"width":640,"height":420,"locator":"\u002Fcpsprodpb\u002F439A\u002Fproduction\u002F_100960371_syrians_and_asylum_v2-nc.png","originCode":null,"copyrightHolder":"BBC"}},{"blockId":"0bf98a03-f289-1e2d-7750-942c9cd56ef7","type":"altText","model":{"blocks":[{"blockId":"96aef962-d69d-763f-4709-bebb15dad9b3","type":"text","model":{"blocks":[{"type":"paragraph","blockId":"6a4485f6-0d25-3ee7-6829-f24126bd5d8a","model":{"text":"ICras dapibus ligula sit amet est aliquam, nec dignissim diam gravida."}}]}}]}},{"blockId":"3afcff52-a969-3b35-d56d-ba773573ca59","type":"caption","model":{"blocks":[{"blockId":"b236c09d-498b-f0ad-f049-b4a9910852ba","type":"text","model":{"blocks":[{"type":"paragraph","blockId":"0578282b-6903-5b5e-4a7c-bc10d44090ff","model":{"text":"Praesent sagittis fringilla nibh ut vulputate. Ut _nec purus_ est. Vestibulum in eleifend nibh."}}]}}]}}]}},{"type":"text","blockId":"da00008c-fc2b-44eb-8eae-30d65b26bd70","model":{"blocks":[{"blockId":"72c50ef4-f423-c09b-ec56-78b5c53ad574","type":"paragraph","model":{"text":"Donec ut fermentum risus, eu sodales mauris. Quisque This is \u003Csup\u003Esuperscript\u003C\u002Fsup\u003E vitae est sed nisl tincidunt facilisis. Nec vulputate metus sagittis."}},{"blockId":"b2b8dbe1-8ba5-3bc1-1f59-5ac1f8158562","type":"paragraph","model":{"text":"Quisque quis libero bibendum, feugiat felis ut, dignissim tortor. Mauris metus lectus, lacinia sit amet massa ut, interdum convallis ipsum."}}]}}]},"locator":"urn:bbc:optimo:asset:c0000000002o","blockId":"1fc453a1-7758-24af-5674-f08d7e286362","type":"article"}}</script>
<script type="text/javascript" src="http://localhost:7081/static/js/bundle.js" defer=""></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment