Accessibility
SiteLint rules:
- A link and its image may not have duplicate text content
- A link needs a destination to function properly
- A link to another location on the page does not have a corresponding target
- A meta element must not have an http-equiv=”refresh” attribute
- A single element should only describe one form control.
- A single label element should only describe one form control.
- Accessibility an overlay has been detected on the page
- Adjacent text and image link have the same destination
- Adjacent text and images should link to the same destination
- Alt text should avoid mentioning colors unless color is essential to understanding the image
- An aria-labelledby attribute must reference an element that contains meaningful content
- Animations should not loop indefinitely
- Applet missing alt
- Applet missing body
- Applets must have a text alternative when not supported
- Area missing alt
- Aria attribute conflict
- Aria hidden true focusable descendants
- Aria labelledby association
- aria-required should only be used with form fields that are required
- Attribute title should not be empty
- Audio alternative
- Audio and video content need captions and subtitles
- Audio and video content should not play automatically
- Audio content must have a text alternative
- Audio or video should not play automatically
- Audio, video, and other media need captions or descriptions
- Avoid excessive use of italic text
- Avoid flashing or flickering content
- Avoid italic text on long content
- Avoid using CSS outline attribute because it can hide the focus state of interactive elements
- Background image should not contain important information that isn’t available elsewhere
- Body text size should be at least 16px
- Both native HTML attributes and ARIA attributes should not be used together
- Broken same page link
- Buttons must have visible, accessible content that describes their action. Empty or unreachable buttons hinder accessibility.
- Captcha should be fully accessible
- Checkboxes should be grouped together
- Click verb
- Code for writing direction must be set either ltr (left to right) or rtl (right to left) as appropriate for the language
- Code id attribute should be unique
- Code main should be toplevel landmark
- Code must be positioned properly relative to its associated form input element.
- Code or ARIA attributes must clearly describe input fields
- Code role=”contentinfo” should be defined only once
- Code should be toplevel landmark
- Content must not flash or flicker
- Content should not require scrolling in two directions (horizontally and vertically)
- Decorative images should not have a title attribute
- Do not instruct the user to reorient their device
- Do not use Adobe Flash
- Do not use Google reCAPTCHA v2
- Do not use obsolete attributes
- Do not use obsolete HTML elements
- Do not use positive tabindex
- Do not use unsupported or incorrect role attribute on an element
- Don’t rely on device motion (shake, tilt, rotate) for functionality
- Don’t use “Click” for link text
- Don’t use the CSS text-indent to hide text
- Don’t use the same target anchor text more than once
- Editable content (like form fields) need appropriate attributes for assistive technology
- Element has the same content as its title attribute
- Empty heading
- Empty label element
- Empty link element
- Ensure that content is still logically organized and understandable when CSS (styling) is disabled or unavailable.
- Ensure the element with role=”button is activated using the ENTER and SPACE keys
- ENTER or SPACE key must be usable to activate a button
- Fieldset no legend
- Flash should be avoided because it is not accessible and not all browsers support it
- Focusable elements should not be hidden from assistive technologies
- Form control should be correctly associated with its label to be accessible
- Form controls need labels
- Form fields need a label explaining what it is
- Forms must have a submit button
- General alt
- Group elements name attribute
- Grouped form controls need a defined caption or description
- Heading element (like H1) exists but has no content
- Headings (h1-h6) are essential for organizing content and creating a hierarchy
- Headings hierarchy
- Headings must be in order and not skip (e.g., H1 to H3)
- Html lang attr
- If a label is visually hidden, it should still provide useful information
- Image buttons must have an alternative description of their function
- Image descriptions (alt text) must be clear and concise
- Image inside of a link needs an alternative description
- Image map area must have a text alternative
- Images must have an alternative description
- Images need a full and clear description (like or )
- Img empty alt with empty title
- Incorrect label placement for associated input
- Information conveyed by color must also be available in text
- Input image missing alt
- Interactive elements must have an area of at least 24 by 24 pixels
- Invalid definition of input purpose
- Invalid HTML elements in the HEAD section
- Label inappropriate association
- Label visually hidden only
- Labels for form elements must be clear and sufficient
- Labels should always contain meaningful text describing the associated form control
- Link to a page in a different language should have a warning
- Link to external resource in different language should have an indicator
- Links must have a corresponding target
- Links need to be understandable and distinguishable from their surrounding text
- Links not visually evident without color vision
- Links should have descriptive, meaningful text that makes sense even when taken out of context
- Links should have meaningful, descriptive content
- Links should have meaningful, descriptive text instead of ambiguous URLs
- Links should indicate if they’re going to open in a new window
- Meaningful content sequence
- Missing alternative description that describes the image button’s function
- Missing an alternative description for an image inside a hyperlink
- Missing attribute href on link
- Missing attribute role=’textbox’ to identify an element that allows the input of free-form text.
- Missing captions or subtitles for an audio or video content
- Missing defined or incorrectly associated form control for label
- Missing label
- Missing text alternative for the object
- Missing the title attribute on iframe
- Misused aria attribute on a visible focusable element
- Misused required attribute
- Multiple text links that look the same should also link to the same content (such as “Read more”)
- No headings
- Non-text content must have an alternative description
- Object general alt
- Objects must have an alternative description
- Obsolete AngularJS 1.x detected
- Obsolete html elements
- Only use all caps for acronyms
- Outline zero
- Page needs to declare the language
- Pages must not automatically refresh or redirect without user control
- Pages should have an H1
- Pop-ups and modals must have accessible names
- Role application
- Rtl content
- Same label element associated with more than only one form control
- Scrolling both horizontally and vertically should not be required
- Set
properly to match the correct reading order of content on the page - Set properly to match the correct reading order of content on the page
- should only be used with form fields that are required.
- Sticky positioning must not affect content readability when zoomed
- SVG content must have an accessible name
- Table caption summary identical
- Table missing description
- Table row and column headers
- table-summary-and-caption-content-should-be-different
- Tables should have elements that define headers for each column or row
- Tables should include a description (using a or an additional explanation)
- The
attribute must reference an existing element - The accessible names of sibling heading elements of the same level are not unique
- The alt text of an image should describe the image’s content, not its filename
- The alt text of an image should describe the image’s content, not its filename
- The blink element should not be used
- The blink element should not be used
- The contrast ratio should be at least 4.5:1 for normal text and 3:1 for large text against a background
- The contrast ratio should be at least 4.5:1 for normal text and 3:1 for large text against a background.
- The contrast ratio should be at least 7:1 for normal text and 4.5:1 for large text against a background
- The contrast ratio should be at least 7:1 for normal text and 4.5:1 for large text against a background.
- The dir attribute for writing direction must be set either ltr (left to right) or rtl (right to left) as appropriate for the language
- The element must only contain region or search landmarks
- The element should only be defined once on a page.
- The HTML label element must be positioned properly relative to its associated form input element
- The link should have a warning before automatically opening a new window or tab
- The main element should only be defined once on a page
- The page should be clearly organized by landmarks like
- The title HTML element should clearly describe the content or purpose of the page
- The verb click must not be used in a link
- the-should-only-contain-elements-like-meta-and-link
- This link text content is unclear out of context
- Title and element content must be distinct and complementary
- Title for abbr
- Tooltip content must not be empty
- Unsupported size unit for svg
- Use attributes on input elements properly and only when they are needed
- Use
to provide additional descriptions and context for elements (e.g., images, form fields) that need it. - Use caution with aria-hidden=”false” because content may still be exposed unintentionally
- Use caution with because content may still be exposed unintentionally
- Use horizontal rule HR sparingly
- Use role=”application” with caution to avoid to be treated like a desktop application
- Use to provide additional descriptions and context for elements (e.g., images, form fields) that need it
- User must be able to zoom the page content
- Verify that the content should be organized into meaningful sequences when linearized, e.g. when style sheets are disabled or unavailable
- Visually hidden label should have additional information
- When using element to group related form controls, the element must be the first child
- When using fieldset element to group related form controls, the legend element must be the first child.