Skip to content

Enhance accessibility across the website #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
0GiS0 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Enhance accessibility across the website #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f58a79b
Enhance accessibility across the website
giselatb May 29, 2025
1b748b3
Merge branch 'main' of https://github.com/0GiS0/github-copilot-loves-…
giselatb May 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,6 @@ violations_summary.txt

# Temporary files
*.tmp
.DS_Store
.DS_Store
pa11y-report.json
.gitignore
116 changes: 41 additions & 75 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
<!DOCTYPE html>
<!-- ACCESSIBILITY ISSUE: Missing lang attribute for language declaration -->
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us - ACME Corp</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- ACCESSIBILITY ISSUE: No skip link to bypass repetitive navigation -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<header>
<div class="logo">ACME Corp</div>
<nav>
Expand All @@ -22,138 +21,108 @@
</nav>
</header>

<main>
<!-- ACCESSIBILITY ISSUE: Inconsistent heading structure - skipping from h1 to h4 -->
<main id="main-content">
<h1>About ACME Corporation</h1>
<h4>Excellence in Business Solutions Since 2010</h4>

<!-- ACCESSIBILITY ISSUE: Image without alt text -->
<img src="https://placehold.co/600x300" class="hero-image">

<!-- ACCESSIBILITY ISSUE: Non-semantic layout using divs instead of proper structure -->
<h2>Excellence in Business Solutions Since 2010</h2>
<img src="https://placehold.co/600x300" class="hero-image" alt="ACME Corporation team photo">
<section class="about-content">
<h2>Our Story</h2>

<!-- ACCESSIBILITY ISSUE: Non-semantic layout using divs -->
<div class="company-info">
<div class="info-section">
<!-- ACCESSIBILITY ISSUE: Skipping heading levels h2 to h5 -->
<h5>Our Mission</h5>
<h3>Our Mission</h3>
<p>ACME Corporation strives to provide innovative solutions that help businesses grow and succeed in today's competitive market.</p>
</div>

<div class="info-section">
<h5>Our Vision</h5>
<h3>Our Vision</h3>
<p>To be the leading provider of business solutions worldwide, empowering companies to achieve their full potential.</p>
</div>
</div>
</section>

<!-- ACCESSIBILITY ISSUE: Team section with images missing alt text -->
<section class="team-section">
<h3>Meet Our Team</h3>

<h2>Meet Our Team</h2>
<div class="team-grid">
<!-- ACCESSIBILITY ISSUE: Team member cards without proper semantic structure -->
<div class="team-member">
<!-- ACCESSIBILITY ISSUE: Image without alt text -->
<img src="https://placehold.co/200x200">
<img src="https://placehold.co/200x200" alt="John Smith, CEO & Founder">
<div class="member-info">
<h6>John Smith</h6>
<h3>John Smith</h3>
<div>CEO & Founder</div>
<!-- ACCESSIBILITY ISSUE: Contact status using color only -->
<div class="contact-status">
<span class="status-dot available"></span>
<span class="status-dot available" aria-label="Available" title="Available"></span>
Available
</div>
</div>
</div>

<div class="team-member">
<img src="https://placehold.co/200x200">
<img src="https://placehold.co/200x200" alt="Sarah Johnson, CTO">
<div class="member-info">
<h6>Sarah Johnson</h6>
<h3>Sarah Johnson</h3>
<div>CTO</div>
<div class="contact-status">
<span class="status-dot unavailable"></span>
<span class="status-dot unavailable" aria-label="In Meeting" title="In Meeting"></span>
In Meeting
</div>
</div>
</div>

<div class="team-member">
<img src="https://placehold.co/200x200">
<img src="https://placehold.co/200x200" alt="Mike Wilson, Lead Developer">
<div class="member-info">
<h6>Mike Wilson</h6>
<h3>Mike Wilson</h3>
<div>Lead Developer</div>
<div class="contact-status">
<span class="status-dot coming-soon"></span>
<span class="status-dot coming-soon" aria-label="On Leave" title="On Leave"></span>
On Leave
</div>
</div>
</div>
</div>
</section>

<!-- ACCESSIBILITY ISSUE: Poor contrast section -->
<section class="poor-contrast">
<h4>Our Achievements</h4>
<p>Over 500 satisfied clients worldwide</p>
<p>15+ years of industry experience</p>
<p>Award-winning customer service</p>
<button>View Certifications</button>
<h2 style="color:#222;">Our Achievements</h2>
<p style="color:#222;">Over 500 satisfied clients worldwide</p>
<p style="color:#222;">15+ years of industry experience</p>
<p style="color:#222;">Award-winning customer service</p>
<button style="background-color:#005a9e;color:#fff;">View Certifications</button>
</section>

<!-- ACCESSIBILITY ISSUE: Interactive tabs without keyboard navigation -->
<section class="values-section">
<h3>Our Values</h3>

<!-- ACCESSIBILITY ISSUE: Interactive tabs without keyboard navigation or proper ARIA -->
<div class="value-tabs">
<h2>Our Values</h2>
<div class="value-tabs" role="tablist">
<div class="tab-header">
<!-- ACCESSIBILITY ISSUE: Non-semantic tab buttons without proper roles -->
<div class="tab-btn active" onclick="showValue('innovation')">Innovation</div>
<div class="tab-btn" onclick="showValue('quality')">Quality</div>
<div class="tab-btn" onclick="showValue('service')">Service</div>
<button class="tab-btn active" onclick="showValue('innovation')" aria-selected="true" role="tab" tabindex="0">Innovation</button>
<button class="tab-btn" onclick="showValue('quality')" aria-selected="false" role="tab" tabindex="0">Quality</button>
<button class="tab-btn" onclick="showValue('service')" aria-selected="false" role="tab" tabindex="0">Service</button>
</div>

<div class="tab-content">
<div id="innovation" class="value-content active">
<div id="innovation" class="value-content active" role="tabpanel">
<p>We constantly push boundaries to deliver cutting-edge solutions for our clients.</p>
</div>
<div id="quality" class="value-content">
<div id="quality" class="value-content" role="tabpanel">
<p>Every project is executed with the highest standards of quality and attention to detail.</p>
</div>
<div id="service" class="value-content">
<div id="service" class="value-content" role="tabpanel">
<p>Our dedicated support team ensures exceptional customer service at every step.</p>
</div>
</div>
</div>
</section>

<!-- ACCESSIBILITY ISSUE: Timeline without proper semantic structure -->
<section class="timeline-section">
<!-- ACCESSIBILITY ISSUE: Another heading level skip h3 to h6 -->
<h6>Company Timeline</h6>

<!-- ACCESSIBILITY ISSUE: Timeline using visual indicators only -->
<h2>Company Timeline</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot founded"></div>
<div class="timeline-dot founded" aria-label="Founded" title="Founded"></div>
<div class="timeline-content">
<div class="timeline-year">2010</div>
<div>Company Founded</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot expansion"></div>
<div class="timeline-dot expansion" aria-label="Expansion" title="Expansion"></div>
<div class="timeline-content">
<div class="timeline-year">2015</div>
<div>International Expansion</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot award"></div>
<div class="timeline-dot award" aria-label="Award" title="Award"></div>
<div class="timeline-content">
<div class="timeline-year">2020</div>
<div>Industry Award Winner</div>
Expand All @@ -162,35 +131,32 @@ <h6>Company Timeline</h6>
</div>
</section>
</main>

<footer>
<div class="columns">
<div class="column">
<h6>About Us</h6>
<h3>About Us</h3>
<p>ACME Corporation is a leading provider of innovative solutions for businesses of all sizes.</p>
</div>
<div class="column">
<h6>Quick Links</h6>
<h3>Quick Links</h3>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Careers</a></li>
</ul>
</div>
<div class="column">
<h6>Follow Us</h6>
<!-- Social media icons without proper labels -->
<h3>Follow Us</h3>
<div class="social-icons">
<a href="#" class="icon facebook"></a>
<a href="#" class="icon twitter"></a>
<a href="#" class="icon instagram"></a>
<a href="#" class="icon linkedin"></a>
<a href="#" class="icon facebook" aria-label="Facebook"></a>
<a href="#" class="icon twitter" aria-label="Twitter"></a>
<a href="#" class="icon instagram" aria-label="Instagram"></a>
<a href="#" class="icon linkedin" aria-label="LinkedIn"></a>
</div>
</div>
</div>
<p class="copyright">© 2023 ACME Corporation. All rights reserved.</p>
</footer>

<script src="script.js"></script>
</body>
</html>
Loading