Fix a11y issue by wrapping page content in a <main> element

This commit is contained in:
clarapenn 2024-10-25 10:49:16 +01:00 коммит произвёл Alex Gibson
Родитель 99550af11a
Коммит 2dba421d9d
1 изменённых файлов: 193 добавлений и 192 удалений

Просмотреть файл

@ -22,88 +22,19 @@
{% endblock %}
{% block content %}
{% call callout(
class='mozads-header',
title='Mozilla Advertising',
desc='Powering the evolution of performance and privacy',
heading_level=1,
brand=False,
content_width='xl',
include_cta=True
) %}
<p>
<a href="https://mozilla.formstack.com/forms/advertising" rel="external noopener" target="_blank" class="mzp-c-button">
Contact
<span class="mzp-c-button-icon-end">
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g transform="translate(4.000000, 4.000000)" stroke="currentColor" stroke-width="2">
<polyline points="9 0 16 0 16 7"></polyline>
<path d="M8,8 L16,0"></path>
<path d="M4,-1.77635684e-15 L3,-1.77635684e-15 C1.34314575,-1.47199765e-15 -2.02906125e-16,1.34314575 0,3 L0,13 C2.02906125e-16,14.6568542 1.34314575,16 3,16 L13,16 C14.6568542,16 16,14.6568542 16,13 L16,12"></path>
</g>
</g>
</svg>
</span>
</a>
</p>
{% endcall %}
{% call split(
block_class='mozads-t-dark mzp-t-dark mzp-t-content-xl',
image=resp_img(
url='img/mozorg/advertising/ads-hero.png',
srcset={
'img/mozorg/advertising/ads-hero-15x.png': '1.5x'
},
optional_attributes={
'loading': 'lazy',
'width': '786',
'height': '691',
'class': 'mzp-c-split-media-asset',
},
),
body_class='mzp-l-split-v-start',
media_class='mzp-l-split-h-center mzp-l-split-v-start',
) %}
<h2>Mozilla is redefining digital advertising with privacy-first, high-performance solutions.</h2>
<p class="mozads-content-intro">Pushing the industry forward with advanced technology,
for a better + safer internet.</p>
<p>Todays digital advertising practices put personal data at risk, tracking
people across websites without their knowledge or consent.</p>
<p>Mozilla is leading the charge, creating innovative solutions that deliver
ad performance while safeguarding privacy. Our approach creates resilience
for advertisers and publishers against continuous changes, and privacy
protection to consumers.</p>
{% endcall %}
{% call split(
block_class='mzp-l-split-reversed mzp-t-content-xl mozads-anonym',
image=resp_img(
url='img/mozorg/advertising/logo-anonym.svg',
optional_attributes={
'loading': 'lazy',
'width': '142',
'height': '184',
'class': 'mzp-c-split-media-asset',
},
),
media_class='mzp-l-split-h-center mzp-l-split-v-center',
) %}
<h2>Performance, driven by privacy</h2>
<p class="mozads-content-intro">Anonym enables brands to optimize and measure
their advertising without sharing user-level data with ad platforms.</p>
<p>Were building an ecosystem that provides consumer privacy, where data-driven
marketing thrives.</p>
<main>
{% call callout(
class='mozads-header',
title='Mozilla Advertising',
desc='Powering the evolution of performance and privacy',
heading_level=1,
brand=False,
content_width='xl',
include_cta=True
) %}
<p>
<a class="mzp-c-button" href="https://www.anonymco.com/" rel="external noopener" target="_blank">
Learn more
<a href="https://mozilla.formstack.com/forms/advertising" rel="external noopener" target="_blank" class="mzp-c-button">
Contact
<span class="mzp-c-button-icon-end">
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
@ -117,118 +48,188 @@
</span>
</a>
</p>
{% endcall %}
{% endcall %}
<section>
<div class="mzp-l-content mzp-t-content-xl">
<div class="mozads-section-header">
<h2>Advertise with Mozilla</h2>
<p class="mozads-content-intro">Reach valuable audiences in premium,
privacy-first, brand-safe environments with Mozillas suite of ad solutions.</p>
{% call split(
block_class='mozads-t-dark mzp-t-dark mzp-t-content-xl',
image=resp_img(
url='img/mozorg/advertising/ads-hero.png',
srcset={
'img/mozorg/advertising/ads-hero-15x.png': '1.5x'
},
optional_attributes={
'loading': 'lazy',
'width': '786',
'height': '691',
'class': 'mzp-c-split-media-asset',
},
),
body_class='mzp-l-split-v-start',
media_class='mzp-l-split-h-center mzp-l-split-v-start',
) %}
<h2>Mozilla is redefining digital advertising with privacy-first, high-performance solutions.</h2>
<p class="mozads-content-intro">Pushing the industry forward with advanced technology,
for a better + safer internet.</p>
<p>Todays digital advertising practices put personal data at risk, tracking
people across websites without their knowledge or consent.</p>
<p>Mozilla is leading the charge, creating innovative solutions that deliver
ad performance while safeguarding privacy. Our approach creates resilience
for advertisers and publishers against continuous changes, and privacy
protection to consumers.</p>
{% endcall %}
{% call split(
block_class='mzp-l-split-reversed mzp-t-content-xl mozads-anonym',
image=resp_img(
url='img/mozorg/advertising/logo-anonym.svg',
optional_attributes={
'loading': 'lazy',
'width': '142',
'height': '184',
'class': 'mzp-c-split-media-asset',
},
),
media_class='mzp-l-split-h-center mzp-l-split-v-center',
) %}
<h2>Performance, driven by privacy</h2>
<p class="mozads-content-intro">Anonym enables brands to optimize and measure
their advertising without sharing user-level data with ad platforms.</p>
<p>Were building an ecosystem that provides consumer privacy, where data-driven
marketing thrives.</p>
<p>
<a class="mzp-c-button" href="https://www.anonymco.com/" rel="external noopener" target="_blank">
Learn more
<span class="mzp-c-button-icon-end">
<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
<g transform="translate(4.000000, 4.000000)" stroke="currentColor" stroke-width="2">
<polyline points="9 0 16 0 16 7"></polyline>
<path d="M8,8 L16,0"></path>
<path d="M4,-1.77635684e-15 L3,-1.77635684e-15 C1.34314575,-1.47199765e-15 -2.02906125e-16,1.34314575 0,3 L0,13 C2.02906125e-16,14.6568542 1.34314575,16 3,16 L13,16 C14.6568542,16 16,14.6568542 16,13 L16,12"></path>
</g>
</g>
</svg>
</span>
</a>
</p>
{% endcall %}
<section>
<div class="mzp-l-content mzp-t-content-xl">
<div class="mozads-section-header">
<h2>Advertise with Mozilla</h2>
<p class="mozads-content-intro">Reach valuable audiences in premium,
privacy-first, brand-safe environments with Mozillas suite of ad solutions.</p>
</div>
<div class="mzp-l-card-half">
{{ card(
class='mzp-c-card-medium',
heading_level=3,
title='Firefox',
ga_title='Firefox',
desc='The only major browser backed by a non-profit, Firefox has been protecting users personal data for over 20 years — without ever sacrificing performance.',
image=resp_img(
url='img/mozorg/advertising/product-firefox.png',
srcset={
'img/mozorg/advertising/product-firefox-15x.png': '1.5x'
},
optional_attributes={
'loading': 'lazy',
'class': 'mzp-c-card-image',
'width': '600',
'height': '400',
}
),
aspect_ratio='mzp-has-aspect-3-2',
link_url='https://mozilla.formstack.com/forms/advertising',
link_rel='external noopener',
link_target='_blank',
cta='Get started',
)}}
{{ card(
class='mzp-c-card-medium',
heading_level=3,
title='MDN',
ga_title='MDN',
desc='MDN (Mozilla Developer Network) seamlessly connects millions of developers with the tools and information they need to easily build projects on the open web.',
image=resp_img(
url='img/mozorg/advertising/product-mdn.png',
srcset={
'img/mozorg/advertising/product-mdn-15x.png': '1.5x'
},
optional_attributes={
'loading': 'lazy',
'class': 'mzp-c-card-image',
'width': '600',
'height': '400',
}
),
aspect_ratio='mzp-has-aspect-3-2',
link_url='https://mozilla.formstack.com/forms/advertising',
link_rel='external noopener',
link_target='_blank',
cta='Get started',
)}}
{{ card(
class='mzp-c-card-medium',
heading_level=3,
title='Fakespot',
ga_title='Fakespot',
desc='Fakespot empowers consumers to make more informed purchasing decisions by spotting potentially misleading or deceptive reviews, while highlighting safer options.',
image=resp_img(
url='img/mozorg/advertising/product-fakespot.png',
srcset={
'img/mozorg/advertising/product-fakespot-15x.png': '1.5x'
},
optional_attributes={
'loading': 'lazy',
'class': 'mzp-c-card-image',
'width': '600',
'height': '400',
}
),
aspect_ratio='mzp-has-aspect-3-2',
link_url='https://mozilla.formstack.com/forms/advertising',
link_rel='external noopener',
link_target='_blank',
cta='Get started',
)}}
{{ card(
class='mzp-c-card-medium',
heading_level=3,
title='Pocket Hits newsletter',
ga_title='Pocket Hits newsletter',
desc='Expertly curated content reaching millions of dedicated and engaged readers, enabling brands to contextually integrate and provide value to their audience.',
image=resp_img(
url='img/mozorg/advertising/product-pocket.png',
srcset={
'img/mozorg/advertising/product-pocket-15x.png': '1.5x'
},
optional_attributes={
'loading': 'lazy',
'class': 'mzp-c-card-image',
'width': '600',
'height': '400',
}
),
aspect_ratio='mzp-has-aspect-3-2',
link_url='https://mozilla.formstack.com/forms/advertising',
link_rel='external noopener',
link_target='_blank',
cta='Get started',
)}}
</div>
</div>
<div class="mzp-l-card-half">
{{ card(
class='mzp-c-card-medium',
heading_level=3,
title='Firefox',
ga_title='Firefox',
desc='The only major browser backed by a non-profit, Firefox has been protecting users personal data for over 20 years — without ever sacrificing performance.',
image=resp_img(
url='img/mozorg/advertising/product-firefox.png',
srcset={
'img/mozorg/advertising/product-firefox-15x.png': '1.5x'
},
optional_attributes={
'loading': 'lazy',
'class': 'mzp-c-card-image',
'width': '600',
'height': '400',
}
),
aspect_ratio='mzp-has-aspect-3-2',
link_url='https://mozilla.formstack.com/forms/advertising',
link_rel='external noopener',
link_target='_blank',
cta='Get started',
)}}
{{ card(
class='mzp-c-card-medium',
heading_level=3,
title='MDN',
ga_title='MDN',
desc='MDN (Mozilla Developer Network) seamlessly connects millions of developers with the tools and information they need to easily build projects on the open web.',
image=resp_img(
url='img/mozorg/advertising/product-mdn.png',
srcset={
'img/mozorg/advertising/product-mdn-15x.png': '1.5x'
},
optional_attributes={
'loading': 'lazy',
'class': 'mzp-c-card-image',
'width': '600',
'height': '400',
}
),
aspect_ratio='mzp-has-aspect-3-2',
link_url='https://mozilla.formstack.com/forms/advertising',
link_rel='external noopener',
link_target='_blank',
cta='Get started',
)}}
{{ card(
class='mzp-c-card-medium',
heading_level=3,
title='Fakespot',
ga_title='Fakespot',
desc='Fakespot empowers consumers to make more informed purchasing decisions by spotting potentially misleading or deceptive reviews, while highlighting safer options.',
image=resp_img(
url='img/mozorg/advertising/product-fakespot.png',
srcset={
'img/mozorg/advertising/product-fakespot-15x.png': '1.5x'
},
optional_attributes={
'loading': 'lazy',
'class': 'mzp-c-card-image',
'width': '600',
'height': '400',
}
),
aspect_ratio='mzp-has-aspect-3-2',
link_url='https://mozilla.formstack.com/forms/advertising',
link_rel='external noopener',
link_target='_blank',
cta='Get started',
)}}
{{ card(
class='mzp-c-card-medium',
heading_level=3,
title='Pocket Hits newsletter',
ga_title='Pocket Hits newsletter',
desc='Expertly curated content reaching millions of dedicated and engaged readers, enabling brands to contextually integrate and provide value to their audience.',
image=resp_img(
url='img/mozorg/advertising/product-pocket.png',
srcset={
'img/mozorg/advertising/product-pocket-15x.png': '1.5x'
},
optional_attributes={
'loading': 'lazy',
'class': 'mzp-c-card-image',
'width': '600',
'height': '400',
}
),
aspect_ratio='mzp-has-aspect-3-2',
link_url='https://mozilla.formstack.com/forms/advertising',
link_rel='external noopener',
link_target='_blank',
cta='Get started',
)}}
</div>
</div>
</section>
</section>
</main>
{% endblock %}