Accessibility: fix WCAG structural/landmark issues

- nav.php: add aria-label="Main navigation" to navbar <nav>
- article-footer.php: h4 -> h3 in related-card (h2->h4 skipped h3)
- 6 articles: add aria-label="Table of contents" to article-toc <nav>
- index.php: move trust-signals section inside <main> (was after </main>)
- web-scraping, price-monitoring, competitive-intelligence: add <main> wrapper
- index.php: inline #179e83 colour fixes (text on tinted backgrounds)
This commit is contained in:
Peter Foster
2026-02-22 11:11:40 +00:00
committed by Peter Foster
parent 7c6e1967df
commit 611a861bdd
12 changed files with 63 additions and 51 deletions

View File

@@ -18,7 +18,7 @@ header('Content-Security-Policy: default-src \'self\'; script-src \'self\' \'uns
// SEO and performance optimizations
$page_title = "Web Scraping Services UK | Get Your Free Quote Today";
$page_description = "Custom web scraping &amp; data extraction for UK businesses. Competitor prices, property listings, market data — delivered clean, structured, on schedule. No contract. Free quote.";
$page_description = "Custom web scraping & data extraction for UK businesses. Competitor prices, property listings, market data — delivered clean, structured, on schedule. No contract. Free quote.";
$canonical_url = "https://ukdataservices.co.uk/";
$keywords = "web scraping services UK, data analytics London, web scraping UK, data extraction services, business intelligence, competitive analysis, price monitoring, data analytics Manchester, market research, web data mining, GDPR compliant scraping, enterprise data solutions, automated data collection UK";
$author = "UK Data Services";
@@ -111,7 +111,7 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- Resource Preloading for Performance -->
<link rel="preload" href="/assets/css/main.min.css?v=1.1.3" as="style">
<link rel="preload" href="/assets/css/main.min.css?v=1.1.4" as="style">
<link rel="preload" href="/assets/images/ukds-main-logo.webp" as="image">
<link rel="preload" href="/assets/js/main.min.js?v=1.1.1" as="script">
@@ -131,14 +131,14 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
.hero-title{font-size:3.5rem;font-weight:700;margin-bottom:24px;line-height:1.2}
.hero-subtitle{font-size:1.3rem;margin-bottom:40px;opacity:0.95;line-height:1.5}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;border:none;border-radius:8px;text-decoration:none;font-weight:500;font-size:16px;cursor:pointer;transition:all 0.3s ease;box-shadow:0 2px 8px rgba(0,0,0,0.1);min-height:48px}
.btn-primary{background:#179e83;color:white!important}
.btn-primary{background:#148069;color:white!important}
.btn-secondary{background:white;color:#144784!important;border:2px solid #144784}
.hero-buttons{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
</style>
<!-- Styles -->
<link rel="stylesheet" href="/assets/css/main.min.css?v=1.1.3" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="assets/css/main.min.css?v=1.1.3"></noscript>
<link rel="stylesheet" href="/assets/css/main.min.css?v=1.1.4" media="print" onload="this.media='all'">
<noscript><link rel="stylesheet" href="assets/css/main.min.css?v=1.1.4"></noscript>
<!-- Enhanced Local SEO Schema -->
<script type="application/ld+json">
@@ -679,7 +679,7 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
<section class="tools-banner" style="background: #f0f9f7; padding: 25px 20px; text-align: center;">
<div class="container" style="max-width: 900px; margin: 0 auto;">
<span style="font-size: 1.5em; margin-right: 10px;">🛠️</span>
<strong>New:</strong> Try our <a href="/tools/" style="color: #179e83; text-decoration: underline;">free web scraping tools</a> — cost calculator, scrapeability checker, and more. No signup required.
<strong>New:</strong> Try our <a href="/tools/" style="color: #148069; text-decoration: underline;">free web scraping tools</a> — cost calculator, scrapeability checker, and more. No signup required.
</div>
</section>
@@ -822,24 +822,24 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
<h3 style="text-align: center; font-size: 1.8rem; margin-bottom: 40px; color: #144784;">UK-Wide Service Coverage</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px;">
<div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 12px;">
<h4 style="color: #179e83; margin-bottom: 15px;">🏙️ London & South East</h4>
<h4 style="color: #148069; margin-bottom: 15px;">🏙️ London & South East</h4>
<p style="color: #666; margin: 0;">Financial services, fintech, and e-commerce data solutions for the capital's business district.</p>
<a href="/blog/articles/uk-property-market-data-trends" style="color: #179e83; text-decoration: none; font-weight: 500;">Property Market Analysis →</a>
<a href="/blog/articles/uk-property-market-data-trends" style="color: #148069; text-decoration: none; font-weight: 500;">Property Market Analysis →</a>
</div>
<div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 12px;">
<h4 style="color: #179e83; margin-bottom: 15px;">🏭 Manchester & North West</h4>
<h4 style="color: #148069; margin-bottom: 15px;">🏭 Manchester & North West</h4>
<p style="color: #666; margin: 0;">Manufacturing, logistics, and industrial data intelligence for the North West's business hub.</p>
<a href="/project-types" style="color: #179e83; text-decoration: none; font-weight: 500;">Data Processing Services →</a>
<a href="/project-types" style="color: #148069; text-decoration: none; font-weight: 500;">Data Processing Services →</a>
</div>
<div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 12px;">
<h4 style="color: #179e83; margin-bottom: 15px;">🏴󠁧󠁢󠁳󠁣󠁴󠁿 Edinburgh & Scotland</h4>
<h4 style="color: #148069; margin-bottom: 15px;">🏴󠁧󠁢󠁳󠁣󠁴󠁿 Edinburgh & Scotland</h4>
<p style="color: #666; margin: 0;">Energy, oil & gas, and renewable energy sector data solutions across Scotland.</p>
<a href="/blog/categories/industry-insights" style="color: #179e83; text-decoration: none; font-weight: 500;">Industry Insights →</a>
<a href="/blog/categories/industry-insights" style="color: #148069; text-decoration: none; font-weight: 500;">Industry Insights →</a>
</div>
<div style="text-align: center; padding: 20px; background: #f8f9fa; border-radius: 12px;">
<h4 style="color: #179e83; margin-bottom: 15px;">🏴󠁧󠁢󠁷󠁬󠁳󠁿 Cardiff & Wales</h4>
<h4 style="color: #148069; margin-bottom: 15px;">🏴󠁧󠁢󠁷󠁬󠁳󠁿 Cardiff & Wales</h4>
<p style="color: #666; margin: 0;">Government, public sector, and automotive industry data services throughout Wales.</p>
<a href="gdpr-compliance" style="color: #179e83; text-decoration: none; font-weight: 500;">Compliance Standards →</a>
<a href="gdpr-compliance" style="color: #148069; text-decoration: none; font-weight: 500;">Compliance Standards →</a>
</div>
</div>
</div>
@@ -1034,11 +1034,11 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
<div class="faq-item" style="background: white; border-radius: 8px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
<button class="faq-question" style="width: 100%; padding: 20px 24px; text-align: left; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 600; color: #252d3b;">
How much does web scraping cost?
<span class="faq-icon" style="font-size: 1.5rem; color: #179e83;">+</span>
<span class="faq-icon" style="font-size: 1.5rem; color: #148069;">+</span>
</button>
<div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
<p style="padding: 0 24px 20px; color: #666; line-height: 1.7;">
Our web scraping projects typically start from £500 for simple data extraction tasks. Pricing varies based on data volume, complexity, frequency of updates, and delivery format. We offer fixed-price quotes with no hidden fees. <a href="/quote" style="color: #179e83;">Request a free quote</a> for your specific requirements.
Our web scraping projects typically start from £500 for simple data extraction tasks. Pricing varies based on data volume, complexity, frequency of updates, and delivery format. We offer fixed-price quotes with no hidden fees. <a href="/quote" style="color: #148069;">Request a free quote</a> for your specific requirements.
</p>
</div>
</div>
@@ -1046,7 +1046,7 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
<div class="faq-item" style="background: white; border-radius: 8px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
<button class="faq-question" style="width: 100%; padding: 20px 24px; text-align: left; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 600; color: #252d3b;">
Is web scraping legal in the UK?
<span class="faq-icon" style="font-size: 1.5rem; color: #179e83;">+</span>
<span class="faq-icon" style="font-size: 1.5rem; color: #148069;">+</span>
</button>
<div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
<p style="padding: 0 24px 20px; color: #666; line-height: 1.7;">
@@ -1058,7 +1058,7 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
<div class="faq-item" style="background: white; border-radius: 8px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
<button class="faq-question" style="width: 100%; padding: 20px 24px; text-align: left; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 600; color: #252d3b;">
How long does a typical project take?
<span class="faq-icon" style="font-size: 1.5rem; color: #179e83;">+</span>
<span class="faq-icon" style="font-size: 1.5rem; color: #148069;">+</span>
</button>
<div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
<p style="padding: 0 24px 20px; color: #666; line-height: 1.7;">
@@ -1070,7 +1070,7 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
<div class="faq-item" style="background: white; border-radius: 8px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
<button class="faq-question" style="width: 100%; padding: 20px 24px; text-align: left; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 600; color: #252d3b;">
What data formats do you deliver?
<span class="faq-icon" style="font-size: 1.5rem; color: #179e83;">+</span>
<span class="faq-icon" style="font-size: 1.5rem; color: #148069;">+</span>
</button>
<div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
<p style="padding: 0 24px 20px; color: #666; line-height: 1.7;">
@@ -1082,7 +1082,7 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
<div class="faq-item" style="background: white; border-radius: 8px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
<button class="faq-question" style="width: 100%; padding: 20px 24px; text-align: left; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 600; color: #252d3b;">
Is the data GDPR compliant?
<span class="faq-icon" style="font-size: 1.5rem; color: #179e83;">+</span>
<span class="faq-icon" style="font-size: 1.5rem; color: #148069;">+</span>
</button>
<div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
<p style="padding: 0 24px 20px; color: #666; line-height: 1.7;">
@@ -1094,7 +1094,7 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
<div class="faq-item" style="background: white; border-radius: 8px; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.06);">
<button class="faq-question" style="width: 100%; padding: 20px 24px; text-align: left; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 1.1rem; font-weight: 600; color: #252d3b;">
Do you offer ongoing monitoring services?
<span class="faq-icon" style="font-size: 1.5rem; color: #179e83;">+</span>
<span class="faq-icon" style="font-size: 1.5rem; color: #148069;">+</span>
</button>
<div class="faq-answer" style="max-height: 0; overflow: hidden; transition: max-height 0.3s ease;">
<p style="padding: 0 24px 20px; color: #666; line-height: 1.7;">
@@ -1199,7 +1199,6 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
</div>
</div>
</section>
</main>
<!-- Trust & Security Signals -->
<section class="trust-signals" style="padding: 50px 0; background: linear-gradient(135deg, #252d3b 0%, #1a2332 100%); color: white; text-align: center;">
@@ -1229,6 +1228,7 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/ukds-main-logo
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="footer">