Skip to content

Instantly share code, notes, and snippets.

@parthnvaswani

parthnvaswani/AccessibilityChecklist.md

Last active June 17, 2024 12:27
Show Gist options
  • Save parthnvaswani/d1309e4d3713cc12db7ae3a9831f405f to your computer and use it in GitHub Desktop.
Save parthnvaswani/d1309e4d3713cc12db7ae3a9831f405f to your computer and use it in GitHub Desktop.
Download ZIP
Exhaustive Web Accessibility Checklist
Raw
AccessibilityChecklist.md

1. Perceivable

Text Alternatives

  • Images: Add alt text to all images that convey information.
  • Decorative Images: Use empty alt attributes (alt="") for purely decorative images.
  • Complex Images: Use longdesc or detailed descriptions for complex images like charts or infographics.
  • Icons: Provide text labels for icon-based buttons.
  • Linked images: Add alt text that details their URL destination, not a description of the image.

Time-Based Media

  • Videos: Add captions and transcripts for all video content.
  • Audio: Provide transcripts for all audio content.
  • Live Media: Offer real-time text or sign language interpretation where applicable.

Adaptable

  • Semantic HTML: Use proper HTML elements for their intended purpose (e.g., <header>, <nav>, <main>, <footer>).
  • ARIA Landmarks: Use ARIA landmarks to improve navigation (e.g., role="banner", role="navigation").
  • Headings: Use headings to create a clear document structure.
  • Lists: Use lists (<ul>, <ol>) for related items. Screen reader software can tell a user how many list items there are, and which one is being read out. Otherwise, screen reader users miss out on that information.
  • Emphasis: Emphasize text with bold or italic text to make it stand out. Bold is preferable.

Distinguishable

  • Color Contrast: Ensure text has sufficient color contrast (minimum 4.5:1 for normal text, 3:1 for large text).
  • Color Indicators: Do not rely solely on color to convey information (e.g., error messages).
  • Resizable Text: Ensure text can be resized up to 200% without loss of content or functionality.
  • Accessibility Media Queries: Use media queries like prefers-contrast, prefers-reduced-transparency, prefers-color-scheme, inverted-colors, and forced-colors to enhance accessibility.
  • Custom Selection Colors: Check custom ::selection colors to ensure readability.

2. Operable

Keyboard Accessibility

  • Navigation: Ensure all interactive elements (links, buttons, form fields) are accessible via keyboard (tab, enter, space, etc.).
  • Focus: Use visible focus indicators for all interactive elements.
  • Skip Links: Provide skip navigation links to bypass repetitive content.
  • Invisible Focusable Elements: Remove invisible focusable elements.
  • Focus Order: Ensure keyboard focus order matches the visual layout.
  • Focus Management: Ensure focus is properly managed in modal dialogs, ensuring that it traps focus within the modal until it is closed.

Enough Time

  • Time Limits: Allow users to extend, adjust, or disable time limits.
  • Animations: Provide controls to pause, stop, or hide moving or blinking content.

Seizures and Physical Reactions

  • Flashing Content: Avoid content that flashes more than three times per second.
  • Motion: Use prefers-reduced-motion media query to reduce or disable motion effects like transitions and animations.

Navigable

  • Headings: Use a logical heading structure with <h1> for the main title, followed by <h2>, <h3>, etc.
  • Links: Ensure links are descriptive and indicate their purpose.
  • Breadcrumbs: Use breadcrumbs for complex navigation.

3. Understandable

Readable

  • Language: Specify the primary language of the page using the lang attribute.
  • Language Changes: Indicate changes in language for specific sections using lang attributes.
  • Content:
    • Use plain language and avoid figures of speech, idioms, and complicated metaphors.
    • Ensure button, a, and label element content is unique and descriptive.
    • Use left-aligned text for left-to-right (LTR) languages, and right-aligned text for right-to-left (RTL) languages.
  • Font Size: Use relative units like em, rem, or percentages for font sizes. Some users may have their own default font size set in their browser, and using relative units allows your site to adapt to this setting.
  • Accessible Fonts: Use accessible and readable fonts; avoid overly decorative fonts.

Predictable

  • Consistent Navigation: Maintain consistent navigation across pages.
  • No Unexpected Actions: Avoid unexpected changes in context (e.g., auto-submission of forms).

Input Assistance

  • Labels: Ensure all form fields have associated labels.
  • Instructions: Provide clear instructions for completing forms.
  • Error Messages: Provide descriptive error messages and suggestions for correction.

4. Robust

Compatibility

  • HTML Validation: Use valid HTML5 and CSS code.
  • ARIA: Use ARIA roles, states, and properties appropriately to enhance accessibility.
  • Assistive Technologies: Test the website with different assistive technologies (e.g., screen readers).
  • Global Code:
    • Provide a unique title for each page or view.
    • Ensure that viewport zoom is not disabled.
    • Ensure a linear content flow.
    • Avoid using the autofocus attribute.
    • Remove title attribute tooltips.

5. Testing and Validation

Automated Testing

  • Tools: Use automated testing tools like Axe, WAVE, or Lighthouse to identify and fix accessibility issues.

Manual Testing

  • Screen Reader: Test the website with screen readers (e.g., NVDA, JAWS, VoiceOver).
  • Keyboard-Only: Navigate the website using only the keyboard.
  • Color Contrast: Check color contrast manually using tools like Contrast Checker available in most browser developer tools.
  • Specialized Browsing Modes: Check your content in high-contrast mode or with an inverted color scheme.
  • CSS Disabled: Test your website with CSS disabled to ensure that the content is still accessible.
  • Zoom Levels: Test using different zoom levels to ensure that the content remains accessible.

Additional Considerations

Responsive Design

  • Media Queries: Use media queries to ensure the website is responsive and works on different screen sizes.
  • Touch Targets: Ensure touch targets are large enough for users with motor impairments.
  • Orientation: Check that the site can be rotated to any orientation.
  • Horizontal Scrolling: Remove horizontal scrolling.
  • Interactive Item Spacing: Ensure sufficient space between interactive items to provide a scroll area.

Forms

  • Accessible Forms: Ensure all form fields are accessible, with proper labels and focus order.
  • Error Prevention: Implement client-side validation to prevent errors before form submission.

Multimedia

  • Controls: Provide accessible controls for multimedia content (play, pause, stop, volume).
  • Autoplay: Ensure that media does not autoplay.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment