Site Report
This tab shows accessibility issues, indicating problems for older users, people with disabilities or accessibility needs. Automated testing cannot detect all accessibility issues, so should be used alongside human testing.
Level | WCAG 2.1 | Section 508 - 2017 | Key |
---|
A | | | Pages with level A issues are unusable for some people |
---|
AA | | | Pages with level AA issues are very difficult to use |
---|
AAA | | | Pages with level AAA issues can be difficult to use |
---|
Priority | Description and URL | Guideline and Line# | Count |
---|
Level A
4 issues on 1 pages | |
| Each a element must contain text or an img with an alt attribute. | WCAG 2.1 A F89 Section 508 (2017) A F89 | 1 pages |
|
A link name allows screen readers to voice what the links does. If there is no link text / `alt` text, or the text / image is hidden by CSS, screen readers have nothing to read, so read out the URL instead. To add a name do one of the following:
- Add text between the
a element start and end tags
- Add an
aria-label attribute
- Add an
aria-labelledby attribute
- Add an
img alt attribute if the link contains an img element
| | |
| https://imam.web.id/laptop-bisnis-terbaik-asus-berarti-bisnis-2022/ | Line 1180 1394 | |
| iframe and frame elements must have a title attribute. | WCAG 2.1 A 2.4.1 Section 508 (2017) A 2.4.1 | 1 pages |
|
Add a title attribute or ARIA label to each iframe and frame element (e.g. title='Main Content' ). Without a title some screen readers read out the frame filename, which is usually meaningless. Impact on users: - VoiceOver macOS 11.5 Safari 15.0 macOS 11.5.2 Reading: Meaningless frame title read out.
- VoiceOver macOS 10.15 Safari 14.1 macOS 10.15.7 Reading: Meaningless frame title read out.
- VoiceOver macOS 10.14 Safari 13.0 macOS 10.14.6 Reading: Meaningless frame title read out.
- VoiceOver macOS 10.13 Safari 12.1 macOS 10.13.6 Reading: Meaningless frame title read out.
| | |
| https://imam.web.id/laptop-bisnis-terbaik-asus-berarti-bisnis-2022/ | Line 918 983 1174 1188 1210 | |
| img elements must have an accessible name. | WCAG 2.1 A F65 Section 508 (2017) A F65 | 1 pages |
|
Add an alt attribute describing the image, which screen readers voice instead of the image.
Spacer images and purely decorative images should use alt="" .
Do not use alt text containing only spaces since that's voiced as an unlabeled image. Impact on users: - NVDA 2019.2 Chrome 79 Windows 10 Reading: Image unlabeled.
- NVDA 2019.2 FF68 Windows 10 Reading: Image ignored.
- NVDA 2019.2 IE11 Windows 10 Reading: Image ignored.
- NVDA 2018.4 Chrome 73 Windows 10 Reading: Image ignored.
- NVDA 2018.4 FF60 Windows 10 Reading: Image ignored.
- NVDA 2018.4 IE11 Windows 10 Reading: Image ignored.
- JAWS 2019.1912.1 Chrome 79 Windows 10 Reading: Image unlabeled.
- JAWS 2019.1912.1 FF68 Windows 10 Reading: Image ignored.
- JAWS 2019.1912.1 IE11 Windows 10 Reading: Image ignored.
- JAWS 2018.1811.2 Chrome 73 Windows 10 Reading: Image ignored.
- JAWS 2018.1811.2 FF60 Windows 10 Reading: Image ignored.
- JAWS 2018.1811.2 IE11 Windows 10 Reading: Image ignored.
- VoiceOver macOS 11.5 Safari 15.0 macOS 11.5.2 Reading: Image filename read out.
- VoiceOver macOS 10.15 Safari 14.1 macOS 10.15.7 Reading: Image filename read out.
- VoiceOver macOS 10.14 Safari 13.0 macOS 10.14.6 Reading: Image filename read out.
- VoiceOver macOS 10.13 Safari 12.1 macOS 10.13.6 Reading: Image filename read out.
- VoiceOver iOS 14.7 Safari iOS 14.7 iOS 14.7 Touch: Image filename read out.
- VoiceOver iOS 13.3 Safari iOS 13.3 iOS 13.3 Touch: Image filename read out.
- VoiceOver iOS 12.4 Safari iOS 12.4 iOS 12.4.1 Touch: Image filename read out.
- VoiceOver iOS 11.4 Safari iOS 11.4 iOS 11.4.1 Touch: Image filename read out.
| | |
| https://imam.web.id/laptop-bisnis-terbaik-asus-berarti-bisnis-2022/ | Line 1181 | |
| Use semantic markup like strong instead of using the CSS font-weight property. | WCAG 2.1 A F2 Section 508 (2017) A F2 | 1 pages |
|
Use the strong element instead of the span element for bold text. | | |
| https://imam.web.id/laptop-bisnis-terbaik-asus-berarti-bisnis-2022/ | Line 998 | |
Level AA
3 issues on 1 pages | |
| Ensure that text and background colors have enough contrast. | WCAG 2.1 AA 1.4.3 Section 508 (2017) AA 1.4.3 | 1 pages |
|
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
- The contrast ratio should be 3.0 or more for 18 point text, or larger
- The contrast ratio should be 3.0 or more for 14 point bold text, or larger
- The contrast ratio should be 4.5 or more for all other text
| | |
| The text color to background color contrast ratio after composition is: 2.81 with
color: rgb(216,216,216); background-color: rgb(127,127,127); font-size: 9.75pt; font-weight: 400; opacity: 0.7; https://imam.web.id/laptop-bisnis-terbaik-asus-berarti-bisnis-2022/ | Line 911 | |
| The CSS outline or border style on this element makes it difficult or impossible to see the dotted link focus outline. | WCAG 2.1 AA F78 Section 508 (2017) AA F78 | 1 pages |
|
Do not remove the default outline style, and change any border styles to avoid obscuring the focus outline around focusable elements.
Using a border or outline style that obscures the focus ring causes problems for keyboard-only users in:
- Chrome (obscures the focus indicator on links, buttons, dropdowns and range controls)
- Firefox (obscures the focus indicator on links)
- Internet Explorer (obscures the focus indicator on links, buttons and range controls)
| | |
| border-width: wider than outline-width: border-width: wider than outline-width: border-width: wider than outline-width: border-width: wider than outline-width: border-width: wider than outline-width: https://imam.web.id/laptop-bisnis-terbaik-asus-berarti-bisnis-2022/ | Line 999 1000 1001 1002 1003 | |
| User interface controls must have a contrast ratio of at least 3:1 against adjacent colors. | WCAG 2.1 1.4.11 | 1 pages |
|
If the control has a visible edge, make sure this has sufficient contrast against the area outside the control. | | |
| The contrast ratio between the control edge and surrounding area is: 1.37 with
border-color: rgb(220,220,220); background-color: rgb(255,255,255);
box margin rgb(255,255,255); 1.37 with
border-color: rgb(220,220,220); background-color: rgb(255,255,255);
box margin rgb(255,255,255); 1.37 with
border-color: rgb(220,220,220); background-color: rgb(255,255,255);
box margin rgb(255,255,255); 1.37 with
border-color: rgb(220,220,220); background-color: rgb(255,255,255);
box margin rgb(255,255,255); https://imam.web.id/laptop-bisnis-terbaik-asus-berarti-bisnis-2022/ | Line 1054 1060 1066 1070 | |
Level AAA
3 issues on 1 pages | |
| Avoid specifying a new window as the target of a link with target=_blank . | WCAG 2.1 AAA F22 | 1 pages |
|
Displaying new windows without warning can be very confusing to non-sighted and mobile users.
Some screen readers and mobile devices give very little indication a new tab or window has opened.
If you cannot avoid displaying a new window, insert an "opens in a new window" warning into the link text
or add the warning to the link using a title attribute or aria-label attribute. | | |
| https://imam.web.id/laptop-bisnis-terbaik-asus-berarti-bisnis-2022/ | Line 927 935 1180 1394 1612 | |
| Don't use CSS animations or transitions in interactions without giving the user a way to turn them off. | WCAG 2.1 2.3.3 | 1 pages |
|
Use the @media (prefers-reduced-motion) media query to respect user preferences. | | |
| :hover transition: all 0.25s :hover transition: all 0.075s :hover transition: all 0.075s :hover transition: all 0.075s :hover transition: all 0.075s https://imam.web.id/laptop-bisnis-terbaik-asus-berarti-bisnis-2022/ | Line 813 1224 1227 1230 1233
...
| |
| Ensure that text and background colors have a 7:1 contrast ratio. | WCAG 2.1 AAA 1.4.6 | 1 pages |
|
Some users find it hard to read light gray text on a white background, dark gray text on a black background and white text on a red background.
Note: The default link color in IE11 has poor contrast on a white background. Fix by specifying a:link and a:visited colors in CSS.
- The contrast ratio should be 4.5 or more for 18 point text, or larger
- The contrast ratio should be 4.5 or more for 14 point bold text, or larger
- The contrast ratio should be 7.0 or more for all other text
| | |
| The text color to background color contrast ratio after composition is: 5.95 with
color: rgb(96,100,106); background-color: rgb(255,255,255); font-size: 9.75pt; font-weight: 400; 5.95 with
color: rgb(96,100,106); background-color: rgb(255,255,255); font-size: 9.75pt; font-weight: 400; 5.95 with
color: rgb(96,100,106); background-color: rgb(255,255,255); font-size: 9.75pt; font-weight: 400; 5.95 with
color: rgb(96,100,106); background-color: rgb(255,255,255); font-size: 9.75pt; font-weight: 400; 5.95 with
color: rgb(96,100,106); background-color: rgb(255,255,255); font-size: 9.75pt; font-weight: 400; https://imam.web.id/laptop-bisnis-terbaik-asus-berarti-bisnis-2022/ | Line 999 1000 1001 1002 1003 | |
| Expand all 10 issues | | |