Fix: achieve 100 Lighthouse accessibility score

- Improve color contrast: bg-brand-600 → bg-brand-700 (3 elements)
- Fix heading order: h4 → h3 after h2 (2 elements)
- Fix label-content mismatch: aria-label includes visible text (2 elements)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
kappa
2026-01-21 00:13:36 +09:00
parent b9df16241d
commit bdf7399614
2 changed files with 6 additions and 6 deletions

View File

@@ -62,7 +62,7 @@
<a href="#automation" class="hover:text-white transition">자동화</a> <a href="#automation" class="hover:text-white transition">자동화</a>
</div> </div>
</div> </div>
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" aria-label="텔레그램 봇으로 콘솔 시작" class="px-4 py-2 bg-brand-600 hover:bg-brand-500 text-white text-sm font-bold rounded-lg transition shadow-lg shadow-brand-500/20 flex items-center gap-2"> <a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" aria-label="Console 시작 - 텔레그램 봇으로 이동" class="px-4 py-2 bg-brand-700 hover:bg-brand-500 text-white text-sm font-bold rounded-lg transition shadow-lg shadow-brand-500/20 flex items-center gap-2">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg> <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.64 6.8c-.15 1.58-.8 5.42-1.13 7.19-.14.75-.42 1-.68 1.03-.58.05-1.02-.38-1.58-.75-.88-.58-1.38-.94-2.23-1.5-.99-.65-.35-1.01.22-1.59.15-.15 2.71-2.48 2.76-2.69a.2.2 0 00-.05-.18c-.06-.05-.14-.03-.21-.02-.09.02-1.49.95-4.22 2.79-.4.27-.76.41-1.08.4-.36-.01-1.04-.2-1.55-.37-.62-.2-1.12-.31-1.15-.63.03-.37.59-.75 1.5-.95 6.07-2.64 10.12-4.38 12.15-5.21 2.91-1.2 3.51-1.4 3.91-1.41.09 0 .28.02.41.09.11.06.23.14.3.24.08.12.12.33.09.57z"/></svg>
Console 시작 Console 시작
</a> </a>
@@ -97,7 +97,7 @@
<div class="flex flex-col sm:flex-row gap-4"> <div class="flex flex-col sm:flex-row gap-4">
<div class="relative"> <div class="relative">
<button @click="openLauncher()" :aria-expanded="launcherOpen" aria-haspopup="dialog" aria-label="서버 런처 열기" class="btn-glow relative w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-white to-slate-100 text-dark-900 font-bold rounded-xl flex items-center justify-center gap-3 transition-all active:scale-95 group"> <button @click="openLauncher()" :aria-expanded="launcherOpen" aria-haspopup="dialog" aria-label="인스턴스 즉시 배포 - 서버 런처 열기" class="btn-glow relative w-full sm:w-auto px-8 py-4 bg-gradient-to-r from-white to-slate-100 text-dark-900 font-bold rounded-xl flex items-center justify-center gap-3 transition-all active:scale-95 group">
<span class="text-xl">🚀</span> <span class="text-xl">🚀</span>
<span>인스턴스 즉시 배포</span> <span>인스턴스 즉시 배포</span>
<svg class="w-4 h-4 text-brand-600 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg> <svg class="w-4 h-4 text-brand-600 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
@@ -515,7 +515,7 @@
<span class="text-brand-400 font-bold">₩27,800 / ₩31,300</span> <span class="text-brand-400 font-bold">₩27,800 / ₩31,300</span>
</div> </div>
</div> </div>
<a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="mt-8 w-full py-3 bg-brand-600 hover:bg-brand-500 text-white font-bold rounded-lg transition text-center block"> <a href="https://t.me/AnvilForgeBot" target="_blank" rel="noopener noreferrer" class="mt-8 w-full py-3 bg-brand-700 hover:bg-brand-500 text-white font-bold rounded-lg transition text-center block">
🌐 도메인 검색 시작하기 🌐 도메인 검색 시작하기
</a> </a>
</div> </div>
@@ -621,14 +621,14 @@
<div class="glass-card p-6 rounded-2xl flex items-start gap-4 group"> <div class="glass-card p-6 rounded-2xl flex items-start gap-4 group">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500/20 to-purple-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🌍</div> <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500/20 to-purple-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🌍</div>
<div> <div>
<h4 class="font-bold text-white mb-2">글로벌 4개 리전 운영</h4> <h3 class="font-bold text-white mb-2">글로벌 4개 리전 운영</h3>
<p class="text-sm text-slate-400 leading-relaxed">도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다.</p> <p class="text-sm text-slate-400 leading-relaxed">도쿄(JP-East), 오사카(JP-West), 싱가포르(SG-Core), 홍콩(HK-Hub)에서 즉시 서버를 생성할 수 있습니다.</p>
</div> </div>
</div> </div>
<div class="glass-card p-6 rounded-2xl flex items-start gap-4 group border-brand-500/20"> <div class="glass-card p-6 rounded-2xl flex items-start gap-4 group border-brand-500/20">
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500/20 to-brand-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🛡️</div> <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-green-500/20 to-brand-500/20 flex items-center justify-center text-2xl group-hover:scale-110 transition-transform">🛡️</div>
<div> <div>
<h4 class="font-bold text-white mb-2">프리미엄 DDoS 방어</h4> <h3 class="font-bold text-white mb-2">프리미엄 DDoS 방어</h3>
<p class="text-sm text-slate-400 leading-relaxed">모든 리전에 엔터프라이즈급 DDoS 방어 옵션(₩99,000, VAT 포함)을 추가하여 L7 공격까지 완벽하게 방어할 수 있습니다.</p> <p class="text-sm text-slate-400 leading-relaxed">모든 리전에 엔터프라이즈급 DDoS 방어 옵션(₩99,000, VAT 포함)을 추가하여 L7 공격까지 완벽하게 방어할 수 있습니다.</p>
</div> </div>
</div> </div>

View File

@@ -80,7 +80,7 @@ textarea:focus-visible,
position: absolute; position: absolute;
top: -40px; top: -40px;
left: 0; left: 0;
background: var(--color-brand-600); background: var(--color-brand-700);
color: white; color: white;
padding: 8px; padding: 8px;
z-index: 100; z-index: 100;