Images
- Separate structure (HTML) from styling (CSS)
- Ensure content, structure, and links are perceivable without visuals
- Important text should be in HTML
- Include crucial images in HTML, not just CSS
- Use CSS for non-essential images (e.g., logos)
- Always use the "alt" attribute for images
- Leave "alt" empty for decorative images
- Use "alt" for images with nearby text
- Provide proper examples of image markup
Structure
- Maintain consistent semantic markup
- Use headers and proper HTML5 semantics
- Ensure content remains meaningful without CSS
Forms and tables
- Label form elements properly
- Use tables only for tabular data, not layout
- Mark up tables for screen readers
Visual means
- Combine colour with other visual indicators
- Use color combinations that are distinguishable
- Use semantic markup for meaning
Contrast
- Ensure adequate colour contrast
- Specify text colour with background color
- Follow contrast guidelines.
Resizable
- Enable text resizing up to 200%
- Exceptions for images of text
Time-based media (audio and video files)
- Provide alternatives for important content
- Control audio levels and playback
- Offer closed captions or transcripts
Graphs and charts
- Make graphs and charts accessible
Scripts, applets, plugins
- Include alternative content
Navigation
- Ensure keyboard accessibility
- Add shortcuts for functions and navigation
- Allow skipping menus
- Maintain logical tab order
- Highlight the focused element
- Avoid keyboard traps
Enough time
- Give users time for input review
- Offer options to extend or disable time limits
- Allow continuation after session expiration
Movement, blinking, auto-updating, and scrolling:
- Limit flashing to prevent seizures
- Allow user control over animations
- Use predictability in element placement and behavior
Language
- Consider translations
- Set the correct language code in HTML
Understandable text
- Ensure text makes sense for screen readers
- Use the title attribute for descriptions
- Distinguish link text from title text
- Maintain consistent link destinations with identical text
Readability
- Choose readable fonts and sizes
- Avoid excessive uppercase text
- Use left-aligned text with appropriate line lengths
- Provide adequate line spacing
- Use headings, sub-headings, and lists to break up text
Related content