Adaptable

/ What Is, How To / By

Adaptable word is sitting at the bottom of some cogs.

The Adaptable guideline in the Perceivability Principle of the Web Content Accessibility Guidelines (WCAG) ensures that digital content can be presented in different ways without losing information or structure. This helps people with various disabilities access and understand web content effectively.

5 Superwomen with disability

What Disabilities Does It Cover?

 

The Adaptable guideline primarily supports users with:

    • Vision impairments such as blindness, low vision, and colour blindness.
    • Cognitive and learning disabilities such as dyslexia, ADHD, Autism Spectrum.
    • Motor disabilities including those users relying on keyboard navigation or assistive technologies.
    • Epilepsy and other physical reactions ensuring content does not trigger seizures.

 

A signpost with the words, Perception and Reality on different arrows.

Who Else Benefits?

Adaptability doesn’t just help people with disabilities. It improves the digital experience for everyone. For example:

  • A well-structured website that supports text resizing helps older adults with declining vision.
  • Content that adjusts to different screen sizes makes browsing easier on smartphones and tablets.
  • Clear, well-organized pages help people in noisy or low-light environments who might struggle to read small or cluttered text.
  • Users with temporary impairments, such as a broken arm or eye strain, can still navigate content efficiently.

By making content adaptable, you’re not just meeting accessibility standards, you’re creating a better user experience for all.

A hand is writing the word, Goals. It is surrounded by a red circle and there are arrows pointing to the word.  

What Is the Goal?

 

The goal of the Adaptable guideline is to ensure that content remains clear, flexible, and meaningful regardless of how a person interacts with it. This means:

  • Ensuring content can be resized or rearranged without breaking its structure
  • Providing text alternatives for non-text content
  • Supporting multiple ways to enter and use information

Adaptable sign asking, Are You Open To change?

10 Tips to Improve Adaptability

  1. Use Semantic HTML – Properly use headings (<h1> to <h6>), lists, and landmarks so screen readers can navigate easily.
  2. Alternate Text: Ensure that all images have alternate text.  If the image is decorative only set Alt Text to null quotes.
  3. Add labels to input fields – Add labels to all input fields.  Never rely on placeholders.  This assists those with cognitive impairments or those who just forget what is required in the field to be able to enter the required information.
  4. Associate Input fields to labels: Ensure that all labels are programmatically associated with the associated input field.  Use the “for” attribute or the ARIA “DescribedBy” attribute.
  5. Ensure Reflow and Responsive Design – Content should adapt to different screen sizes without horizontal scrolling.
  6. Allow Text Resizing – Make sure users can increase text size by at least 200% without breaking the layout.
  7. Provide Meaningful Sequence – Ensure the reading order makes sense when CSS or layout changes.
  8. Use Sufficient Contrast – Text should be easy to read against its background, even in different lighting conditions.
  9. Support Multiple Input Methods – Users should be able to navigate with a keyboard, touchscreen, or assistive technologies.
  10. Orientation: Never lock the orientation of a website or app.  This helps those who have little or no fine motor skills or vision impairments to be able to enter information on a mobile phone.

The words, Helpful Tips written on paper.

7 Don’ts for Adaptability

  1. Don’t Use Fixed Layouts – Avoid absolute positioning that prevents resizing or reflow.
  2. Don’t Rely on Colour Alone – Use text labels, icons, or patterns to convey information.
  3. Don’t Use Images of Text – Use actual text instead of embedding it in images.
  4. Don’t Disable Zooming – Ensure users can enlarge content without restrictions.
  5. Don’t Ignore Keyboard Users – Every interactive element should be accessible without a mouse.
  6. Don’t Overuse Animations – Avoid excessive motion that can be distracting or trigger seizures.
  7. Don’t Hide Content from Assistive Tech – Ensure all important content is visible and readable by screen readers.

Adaptable word is sitting at the bottom of some cogs.

Moving Forward

Ensuring adaptability in web content is a fundamental step toward creating an inclusive digital experience. By following the WCAG Adaptable Guideline, documents, websites and applications become more usable, flexible, and accessible for people with disabilities. More importantly, these improvements benefit all users, including older adults, mobile users, and those with temporary impairments. Adaptability is about empowering users to access content in a way that works best for them.