Accessibility
· 24 checks — Landmarks, headings, alt text, forms, and link quality rolled into one auditable list.DLandmark StructureAction33 landmarksFIX
Screen reader users cannot quickly navigate to the primary content. Wrap your main content in <main>.
Without a <main> landmark, screen-reader users can't skip past the navigation to the page content — every page starts with re-reading the menu.
Learn more ▾ ▴
The <main> element marks the page's primary content area. Assistive tech offers a 'jump to main' shortcut — but only if <main> exists. Without it, every page navigation forces re-reading the header. Wrap your primary content in a single <main>.
Source: WAI-ARIA / WCAG 2.4.1
Multiple navigations need aria-label to distinguish them for screen readers.
Some <nav> elements lack aria-label — screen-reader users hear 'navigation' multiple times with no way to distinguish them.
Learn more ▾ ▴
When a page has multiple <nav> regions (primary, footer, breadcrumb), each needs aria-label or aria-labelledby. AT users navigate by landmark; identical 'navigation' announcements force them to enter each one to discover purpose.
Source: WAI-ARIA Authoring Practices
Add a skip link as the first focusable element so keyboard users can bypass repeated navigation.
Without a skip-nav link, keyboard users tab through every nav item before reaching content — every page, every visit.
Learn more ▾ ▴
WCAG 2.4.1 (Bypass Blocks) requires a mechanism to skip past repeated content. The standard implementation is a 'Skip to main content' link that's the first focusable element, visually hidden until focused. Three lines of HTML + four of CSS.
Source: WCAG 2.1 SC 2.4.1
FFavicon & BrandingAction1 icon(s) detectedFIX
DWeb ManifestActionNot foundFIX
No web manifest found.
DDark Mode SupportActionNo dark mode signalsFIX
Detection limited to meta tags and inline styles.
DPrint StylesheetActionNo print stylesFIX
BLink & Button Quality1 issue(s) across 239 links and 18 buttonsREVIEW
| Element | Text | Issue | Suggested Fix |
|---|---|---|---|
| #blog | (empty) | empty | Add link text or aria-label |
| https://facebook.com/timhopam | Facebook/timhopam Theo dõi tr… | new tab | Add '(opens in new tab)' to text |
| https://x.com/timhopam | X (Twitter)/timhopam Cập nhá… | new tab | Add '(opens in new tab)' to text |
| https://youtube.com/@timhopamguitar | YouTube/@timhopamguitar Xem vi… | new tab | Add '(opens in new tab)' to text |
| https://facebook.com/groups/timhopam | Facebook Group/timhopam Tham g… | new tab | Add '(opens in new tab)' to text |
| https://facebook.com/timhopam | new tab | Add '(opens in new tab)' to text | |
| https://youtube.com/@timhopamguitar | YouTube | new tab | Add '(opens in new tab)' to text |
| https://x.com/timhopam | X | new tab | Add '(opens in new tab)' to text |
| https://facebook.com/groups/timhopam | Group | new tab | Add '(opens in new tab)' to text |
Links without text are announced as raw URLs by screen readers.
#blog
Links with no accessible text (empty <a></a>, image-only no alt, icon-only no aria-label) are unidentifiable to screen readers.
Source: WCAG 2.1 SC 2.4.4
Add '(opens in new tab)' to link text or aria-label.
https://facebook.com/timhopam; https://x.com/timhopam; https://youtube.com/@timhopamguitar; https://facebook.com/groups/timhopam; https://facebook.com/timhopam; https://youtube.com/@timhopamguitar; https://x.com/timhopam; https://facebook.com/groups/timhopam
Links with target="_blank" without rel="noopener" leak the originating page's window context — security and UX issue.
Learn more ▾ ▴
Without rel="noopener", the new tab can navigate the original tab via window.opener (tab-nabbing attack). Modern browsers default to noopener for target=_blank but only since recent versions. Always set rel="noopener noreferrer" explicitly.
Source: MDN target / OWASP
BMobile-Readable Font Sizes93% of visible text renders at >= 12 CSS px (16 below threshold)REVIEW
C404 Error PageActionCould not testREVIEW
404 page quality check not available.
A+Heading Hierarchy30 headingsPASS
- H1 HỢP ÂM GUITAR
- H2 KHÁM PHÁ
- H3 Bài xem nhiều nhất
- H3 ⭐ Bài hát dành cho bạn
- H3 Hợp âm bài hát mới đăng
- H2 Nhớ anh
- H2 Màu tím hoa sim
- H2 Định mệnh
- H2 Kỷ niệm xa bay
- H2 Xoá tên anh đi
- H2 Từ nơi tôi sinh ra
- H2 Thì ra mình đã yêu nhau xong rồi
- H2 Tam thái tử
- H2 Người dưng
- H2 Nếu phải giữ cho em
- H2 Nát tan cõi lòng
- H2 Mỗi lần nhớ em là một ngày mưa
- H2 Lào công tử
- H2 Hướng dương bất tức
- H2 Phân trang bài viết
- H3 🎸 Ca khúc ngẫu nhiên
- H2 Mong chờ
- H2 Rơi về nhau
- H2 Quán chiều mưa
- H2 Bông vạn thọ
- H2 Bản đàn xuân
- H2 Kiếp hoa
- H3 Nghệ Sĩ Việt
- H3 Bài Viết Mới
- H3 Máy đếm nhịp (Metronome)
A+Heading Text Quality1 heading-text-quality issue(s) detectedPASS
A+Alt Text QualityAll 49 images OKPASS
AForm Accessibility1 of 2 controls have issuesPASS
| Control | Type | Label | Method |
|---|---|---|---|
| #bpmRange | range | Tốc độ đếm nhịp, số nhịp mỗi phút | aria-label |
| #hopam-input | text | (Nhập tên bài hát... ca sĩ, nhạc sĩ...) | placeholder only |
Placeholder text disappears on focus and is not a reliable label.
<input type="text" id="hopam-input">
Placeholder-only labels disappear when the user starts typing — they must remember what the field was for.
Learn more ▾ ▴
Placeholders are NOT labels. They vanish on input, fail color contrast checks (most are gray), and don't satisfy WCAG SC 3.3.2. Always use a real <label> alongside (or aria-labelledby).
Source: WCAG 2.1 SC 3.3.2 / Nielsen Norman
A+Form Input Types2 form control(s) checked, no type mismatchesPASS
A+Form Input Quality2 form control(s) checked, no input-semantic issuesPASS
A+Mobile Keyboard & AutofillNo autofill-eligible form controlsPASS
A+Document LanguageLang attribute set to "vi"PASS
A+Tabindex Anti-Patterns1 explicit tabindex attribute(s) checked, no anti-patternsPASS
A+Iframe AccessibilityNo iframes on this pagePASS
A+Tap Target AdequacyAll tap targets meet WCAG 2.5.5/2.5.8 sizingPASS
A+PWA DepthNo PWA depth issues detectedPASS
A+Mobile UX Depth1 mobile-depth signal(s) detectedPASS
A+Color Contrast (Screenshot)20 text elements analyzed, 0 fail WCAG AAPASS
Analyzes text contrast against the actual rendered page, including background images, gradients, and overlays that CSS-based tools cannot detect.
Show all checked elements (20)
| Element | Ratio | Required | FG | BG | Result |
|---|---|---|---|---|---|
| h2 KHÁM PHÁ | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h2 Phân trang bài viá… | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h3 Bài xem nhiều nhá… | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h3 ⭐ Bài hát dành … | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h3 Hợp âm bài hát … | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h3 🎸 Ca khúc ngẫu… | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h3 Nghệ Sĩ Việt | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h3 Bài Viết Mới | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| h3 Máy đếm nhịp (… | 21.00:1 | 3.0:1 | #000000 | #FFFFFF | Pass |
| title Danh sách hợp âm… | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
| a HỢP ÂM GUITAR | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
| a Giới thiệu | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
| a Thể Loại | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
| a Nhạc Trẻ | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
| a Nhạc Đỏ | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
| a Nhạc Vàng | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
| a Nhạc Học Trò | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
| a Nhạc Trữ Tình | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
| a Nhạc Quê Hương | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
| a Nhạc Thiếu Nhi | 21.00:1 | 4.5:1 | #000000 | #FFFFFF | Pass |
Methodology: The top 20 text elements by font size were checked. Background color was sampled from the desktop screenshot using a 5-point pattern. WCAG 2.1 AA requires 4.5:1 for normal text and 3:1 for large text.
A+Lighthouse Accessibility AuditsScore 95/100 — 3 failing, 25 passedPASS
Accessibility
These checks highlight opportunities to improve the accessibility of your web app. Automatic detection can only detect a subset of issues and does not guarantee the accessibility of your web app, so manual testing is also encouraged.
Contrast
Low-contrast text is difficult or impossible for many users to read. Learn how to provide sufficient color contrast.
Performance issues directly impact user engagement and conversion rates.
| Failing Elements |
|---|
Ballad div#content_box > section.hopam-discover > nav.hopam-rhythm-list > a.hopam-rhythm |
01 ol.hopam-top-viewed > li > a.hopam-top-link > span.hopam-rank |
02 ol.hopam-top-viewed > li > a.hopam-top-link > span.hopam-rank |
04 ol.hopam-top-viewed > li > a.hopam-top-link > span.hopam-rank |
⭐ BÀI HÁT DÀNH CHO BẠN div#content_box > section.tha-foryou > div.tha-foryou-head > h3.featured-category-title |
HỢP ÂM BÀI HÁT MỚI ĐĂNG div.article > div#content_box > section.hopam-home-section > h3.featured-category-title |
Song Ngọc article.latestPost > header > div.post-info > a |
Song Ngọc article.latestPost > header > div.post-info > a |
Song Ngọc article.latestPost > header > div.post-info > a |
Nguyễn Vũ article.latestPost > header > div.post-info > a |
JACK - J97 article.latestPost > header > div.post-info > a |
JACK - J97 article.latestPost > header > div.post-info > a |
JACK - J97 article.latestPost > header > div.post-info > a |
JACK - J97 article.latestPost > header > div.post-info > a |
JACK - J97 article.latestPost > header > div.post-info > a |
JACK - J97 article.latestPost > header > div.post-info > a |
JACK - J97 article.latestPost > header > div.post-info > a |
JACK - J97 article.latestPost > header > div.post-info > a |
JACK - J97 article.latestPost > header > div.post-info > a |
JACK - J97 article.latestPost > header > div.post-info > a |
2.585 div.pagination-wrapper > nav.navigation > div.nav-links > a.page-numbers |
Next div.pagination-wrapper > nav.navigation > div.nav-links > a.next |
🎸 CA KHÚC NGẪU NHIÊN div.article > div#content_box > section.hopam-home-section > h3.featured-category-title |
Nguyễn Đình Chương article.latestPost > header > div.post-info > a |
thơ Diễm article.latestPost > header > div.post-info > a |
Trần Duy Đức article.latestPost > header > div.post-info > a |
thơ Đặng Kim Côn article.latestPost > header > div.post-info > a |
Vũ Vĩnh Phúc article.latestPost > header > div.post-info > a |
Võ Thiện Thanh article.latestPost > header > div.post-info > a |
Lê Thương article.latestPost > header > div.post-info > a |
Dương Thiệu Tước article.latestPost > header > div.post-info > a |
Xem tất cả › div#block-26 > section.tha-explore-widget > div.tha-explore-head > a#thaExploreAllLink |
Nhạc sĩ section.tha-explore-widget > div.tha-explore-controls-row > div.tha-tabs-nav > button.tha-tab-btn |
Ca sĩ section.tha-explore-widget > div.tha-explore-controls-row > div.tha-tabs-nav > button.tha-tab-btn |
NHẠC SĨ div.tha-track > div.tha-slide-item > a.tha-artist-item > span.tha-artist-role |
Hơn 150 sáng tác div.tha-track > div.tha-slide-item > a.tha-artist-item > span.tha-artist-count |
NHẠC SĨ div.tha-track > div.tha-slide-item > a.tha-artist-item > span.tha-artist-role |
Hơn 20 sáng tác div.tha-track > div.tha-slide-item > a.tha-artist-item > span.tha-artist-count |
NHẠC SĨ div.tha-track > div.tha-slide-item > a.tha-artist-item > span.tha-artist-role |
Hơn 170 sáng tác div.tha-track > div.tha-slide-item > a.tha-artist-item > span.tha-artist-count |
Kết nối cùng cộng đồng yêu nhạc div.th-social > div.th-social-title > div > small |
Facebook/timhopam div.th-social > a.th-social-item > span.th-social-text > b |
Theo dõi trang div.th-social > a.th-social-item > span.th-social-text > small |
YouTube/@timhopamguitar div.th-social > a.th-social-item > span.th-social-text > b |
Xem video hướng dẫn div.th-social > a.th-social-item > span.th-social-text > small |
Tham gia cộng đồng yêu Guitar div.th-social > a.th-social-item > span.th-social-text > small |
Bắt đầu đếm div.metro-box > div.metro-btn-row > button#btnToggle > span#btnLabel |
These are opportunities to improve the legibility of your content.
Best practices
One main landmark helps screen reader users navigate a web page. Learn more about landmarks.
Performance issues directly impact user engagement and conversion rates.
| Failing Elements |
|---|
html.js html.js |
These items highlight common accessibility best practices.
Visible text labels that do not match the accessible name can result in a confusing experience for screen reader users. Learn more about accessible names.
Performance issues directly impact user engagement and conversion rates.
| Failing Elements |
|---|
NHẠC VÀNG TUYỂN CHỌN aside#sidebar > div#block-16 > div.sidebar-playlist-grid > a.playlist-item |
NGƯỜI MỚI TẬP CHƠI aside#sidebar > div#block-16 > div.sidebar-playlist-grid > a.playlist-item |
HƠP ÂM INDIE NHẠC VIỆT aside#sidebar > div#block-16 > div.sidebar-playlist-grid > a.playlist-item |
NHẠC XUÂN HAY NHẤT aside#sidebar > div#block-16 > div.sidebar-playlist-grid > a.playlist-item |
TUYỆT PHẨM BOLERO aside#sidebar > div#block-16 > div.sidebar-playlist-grid > a.playlist-item |
CA KHÚC HAY VỀ MẸ aside#sidebar > div#block-16 > div.sidebar-playlist-grid > a.playlist-item |
TOP 100 NHẠC TRỮ TÌNH aside#sidebar > div#block-16 > div.sidebar-playlist-grid > a.playlist-item |
NHẠC ĐÁM CƯỚI aside#sidebar > div#block-16 > div.sidebar-playlist-grid > a.playlist-item |