Accessibility Help
Tips, references, and tutorials for making websites accessible
64 articles
- Types of Accessibility Testing to Do
- Using Headings in webpage content
- Color Contrast: The BasicsMaintaining a high color contrast ratio is an important step to making a website accessible
- Color Contrast Issues: Correcting
- Titles for iframes and framesFrames must have an accessible title.
- Readable (Discernible) Link Text: The BasicsLinks must have text readable by screen readers.
- Readable (Discernible) Link Text: CorrectingSuggestions for correcting No readable (discernible) link text flags.
- Readable (Discernible) Button Text: The Basics
- Readable (Discernible) Button Text Issues: Correcting
- Accessible Tables
- Focus - Best Practices
- Using Hidden Content in an Accessible WayKnow how and when to use hidden content to make sure accessibility remains a priority
- Scrollable Regions must have Keyboard Access
- Semantically Correct Lists: The BasicsInformation on semantics, types of lists, and why it matters.
- Semantically Correct Lists: CorrectingHelp with correcting <ul>,<ol>,<li>, and <dl> issues.
- Interactive Controls must not be Nested
- Nested Interactive Controls Issues: Correcting
- Using tabindex
- Alternative Text for Images: The Basics
- Alternative Text for Images: CorrectingTips for creating alt text for various image types.
- Captions versus SubtitlesProviding a text alternative for media on websites
- Image Buttons must have Alternate Text: CorrectingEnsure <input type="image"> elements have accessible alternative text.
- What is ARIA?
- ARIA Attributes: The Basics
- ARIA Landmarks: The Basics
- Landmarks Need Unique Roles or NamesBest Practice: Ensure Landmarks are Unique
- Landmarks That Can Only Be Used OnceBest Practices: Banner, Content info, and Main can only occur once per page.
- Landmarks That Should Be at Top-LevelBest Practices: Banner, Complementary, Content Info, and Main.
- ARIA Roles: The Basics
- ARIA Hidden and Focusable Elements: The BasicsFoundational information on focus and aria-hidden.
- Elements and Supported ARIA Attribute Issues: Correcting
- YouTube Embeds Causing Flag for "Elements must only use permitted ARIA attributes."An explanation of the flag on embedded YouTube videos; "Elements must only use permitted ARIA attributes".
- ARIA Roles and Parent-Child Relationships: The BasicsCertain ARIA roles have special requirements.
- ARIA Roles and Parent-Child Issues: Correcting
- Using role="presentation" to Resolve ARIA Parent-Child IssuesHiding HTML Semantics with role=presentation
- Parent-Child Required Roles Quick Reference
- ARIA Attributes must use Valid ValuesARIA attributes can only be assigned allowed values.
- ARIA Attributes must Conform to Valid Names: CorrectingARIA attributes that start with aria- must be defined in the ARIA specs.
- ARIA Roles with Invalid Values: CorrectingARIA roles used must conform to valid values. You can't create your own.
- Required ARIA Attribute Issues: Correcting
- Roles with Required ARIA Attributes Quick Reference
- Valid ARIA Attribute Names Quick ReferenceListing of ARIA attributes starting with 'aria-' with links for more information.
- Valid ARIA Roles Quick ReferenceList of ARIA roles with links to more in-depth information
- ARIA Hidden and Focusable Elements Issues: CorrectingTips on fixing issues with the aria-hidden attribute.
- Using tabindex to Solve Focusable Content FlagsExamples of aria-hidden flags and how to fix them using the tabindex attribute.
- Elements must only use permitted ARIA attributes
- Dialog and Alertdialog RolesBest Practice: These roles should have accessible names.
- Each HTML page must have a valid HTML lang attributeOpening <html> element needs to relay the primary language of content.
- Skip to Main Content LinkThe importance of this link for accessible technology users.
- Tracking Pixel Code - Accessibility IssueTracking pixels like Facebook's and Google's should be implemented with care.
- 404 Pages: Using Correct Link TypesUsing correct link types on your 404 page will ensure your site is accessible and SEO-friendly!
- Allow Zooming and Scaling on WebpagesZooming and scaling must not be disabled in the viewport meta tag.
- Ensure focus is visibleMake sure focus is visible for your keyboard users.
- ID Attribute Value Should be UniqueBest practice is that no more than one element with the same id in an HTML document.
- Form Element Labels: The BasicsWhat form labels are and why they are essential.
- Form Element Labels: CorrectingOptions for adding form labels
- Grouping Checkboxes in FormsGrouping checkboxes allows visitors who utilize screen readers to know the options are all part of one form field
- Ensure Proper Tab Order within Forms
- <select> HTML Element and Labels: The Basics