Scanned URL: https://scrup.com
Final Accessibility Score: 83 / 100
❌ Accessibility Violations
Elements must meet minimum color contrast ratio thresholds (Impact: serious)
Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Failing Elements (1):
<h1>Ringtones</h1>
Document should have one main landmark (Impact: moderate)
Ensures the document has a main landmark
Failing Elements (1):
<html lang="en-US" class="js js cssanimations csstransforms csstransitions">
Zooming and scaling must not be disabled (Impact: critical)
Ensures does not disable text scaling and zooming
Failing Elements (1):
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
All page content should be contained by landmarks (Impact: moderate)
Ensures all page content is contained by landmarks
Failing Elements (1):
<div id="left-area">✅ Passed Audits
aria-hidden=”true” must not be present on the document body
Ensures aria-hidden=”true” is not present on the document body.
Page must have means to bypass repeated blocks
Ensures each page has at least one mechanism for a user to bypass navigation and jump straight to the content
Elements must meet minimum color contrast ratio thresholds
Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Documents must have element to aid in navigation</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensures each HTML document contains a non-empty <title> element</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong>Headings should not be empty</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensures headings have discernible text</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong>Heading levels should only increase by one</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensures the order of headings is semantically correct</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong><html> element must have a lang attribute</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensures every HTML document has a lang attribute</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong><html> element must have a valid value for the lang attribute</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensures the lang attribute of the <html> element has a valid value</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong>Images must have alternate text</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensures <img> elements have alternate text or a role of none or presentation</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong>Alternative text of images should not be repeated as text</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensure image alternative is not repeated as text</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong>Banner landmark should not be contained in another landmark</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensures the banner landmark is at top level</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong>Contentinfo landmark should not be contained in another landmark</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensures the contentinfo landmark is at top level</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong>Document should not have more than one banner landmark</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensures the document has at most one banner landmark</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong>Document should not have more than one contentinfo landmark</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensures the document has at most one contentinfo landmark</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong>Ensures landmarks are unique</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Landmarks should have a unique role or role/label/title (i.e. accessible name) combination</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong>Links must have discernible text</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensures links have discernible text</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong>Users should be able to zoom and scale the text up to 500%</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensures <meta name=”viewport”> can scale a significant amount</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong>Interactive controls must not be nested</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong>Page should contain a level-one heading</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensure that the page, or at least one of its frames contains a level-one heading</p><br />
</div><div style=”padding:15px; margin-bottom:15px; border:1px solid #ddd; border-left:5px solid #2e7d32; background:#f1f8e9;”><br />
<strong>All page content should be contained by landmarks</strong><br />
<p style=”margin: 4px 0 0 0; font-size: 0.85em; color: #555;”>Ensures all page content is contained by landmarks</p><br />
</div></div>