Please enable JavaScript.

Coggle requires JavaScript to display documents.

Accessibility - Coggle Diagram

- - - - Plain Old Semantic HTML
  - - - Prefer to over a hyphen if possible
      - Expand abbreviations if possible
      - Expand acronyms in the first instance
  - - - <caption> element is preferred because it's available to sighted users as well
      - summary attribute of <table> element
    - - Defined using <th> elements
      - Set the scope attribute
  - - - Should be given meaningful filenames if possible
      - Extra contextual information can be placed in surrounding text or in the title attribute of <img> element
    - - alt attribute of <img> element
      - Should be descriptive
      - aria-labelledby attribute on the <img> element with a linked description
        
        Useful for multiple images with the same description
      - Other methods
        
        longdesc attribute on <img> elements
        
        <figure> and <figcaption> elements
        
        Not widely supported yet
    - - Prefer CSS to include purely decorative images
      - Set role="presentation" attribute on the <img> element or provide an alt attribute with an empty string
  - - - Colour should not be the only distinction between a link and non-linking content
      - Link text colour to background colour contrast should be 4.5:1
      - Link text colour to surrounding text contrast should be 3:1
    - - An <a> element placed at the top of the <body> element
      - Allows the user to skip header content and skip to the main content of the page
- - - - Slow network connections
      - Keyboard, mouse, and touchscreen users
      - Screen reader and voice assistant users
    - - Auditory, visual, physical, and cognitive disabilities
      - Motion sensitivity
  - - - Colour blindness
      - Assistive technologies
        
        Physical screen magnifiers or software zoom
        
        Screen readers
      - Low-level vision
      - Blindness
    - - Alternatives
        
        Captions for video
        
        Simplified language
        
        Transcripts for audio
      - Deaf and hard-of-hearing
      - High level of language deprivation
    - - Hardware limitations
      - Alternatives
        
        Keyboard support
      - Physical conditions, trauma, or old age
    - - Solutions
        
        Easily understood content delivered in more than one medium
        
        Highlighting important information and minimizing distractions
        
        Consistency and familiarity
      - Intellectual disabilities, learning disabilities, mental illnesses, and old age
  - - - Used by browsers to maintain accessibility information
      - Generated from the DOM tree
      - Mostly contains semantic information
- - - - tabindex="-1"
        
        Allows non-focusable elements to be programmatically focussed using JavaScript
      - tabindex="0"
        
        Allows non-tabbable elements to be tabbed into
      - Achieved using special values for the tabindex attribute
    - - Provided with the role attribute
      - Roles should be set for non-semantic landmarks such as search forms
      - Roles can also be defensively set on semantic elements for older or unsupported browsers such as IE8
      - aria-label can be used on elements such as search inputs that aren't labeled due to stylistic reasons
    - - aria-live attribute
        
        off
        
        Default
        
        polite
        
        assertive
      - Live regions should be marked as such
      - aria-atomic="true" instructs the content of the whole element to be announced
      - aria-relevant can be used to control what gets announced
    - - Validations and errors
        
        Set role=alert attribute to turn an element into a live region and mark it as important
        
        Set aria-relevant="all" attribute to announce all information (all remaining errors)
        
        aria-required
        
        Set the placeholder attribute instead of aria-valuemin and aria-valuemax which aren't well supported
        
        Use aria-describedby to associate additional information with a form control
        
        Set aria-disabled with along with a live region message to announce changes to form control disabled states
      - Complex controls
        
        States should be updated using JavaScript as the user interacts with the page
        
        aria-selected
        
        aria-hidden
        
        Prevent hidden elements from being announced
        
        Use related roles to define semantic elements of a control
        
        tablist
        
        tab
        
        tabpanel
  - - - Indicates what an element does
      - Replicate or go beyond HTML5 semantic elements
      - role="navigation" and role="banner"
    - - Indicates an attribute of an element
      - aria-required
      - aria-labelledby
      - Don't change through the lifecycle of an app
    - - Indicates the current condition of an element
      - aria-disabled
      - Change throughout the lifecycle of an app (mostly through JavaScript)
  - - - Legacy patterns that predate HTML5
      - Complex JavaScript-based widgets and solutions
- - - - Text to background colour contrast should be acceptable
      - Also aids people using glossy screens in bright environments
- - - - click event supports keyboard and touch manipulation by default
      - Handle touch events manually for mouse or keyboard interactions
    - - Prefer <select> element over text inputs whenever possible
      - Prefer HTML5 form inputs (date, time, tel) as they are well-supported on mobile platforms
    - - Implement responsive layouts
      - Deliver smaller-sized and/or high-resolution images depending on the device
      - Don't disable zoom using the viewport meta tag
      - Menus and menu buttons should be accessible and unobstructed