Skip to content
DigitalA11y logo blue fill

DigitalA11Y

Your Accessibility Partner

  • Home
  • About
  • Blog
  • ResourcesExpand
    • WAI-ARIA
    • WCAG
    • Cheat Sheets
    • A11Y Blogs
  • Contact
DigitalA11y logo blue fill
DigitalA11Y
Your Accessibility Partner

Demos

Home » Demos

Avatar for Raghavendra Satish PeriAuthored By :Raghavendra Satish Peri Last Updated :January 27, 2023

[contact-form-7 id=”22097″ title=”Contact form 1″]

  • General
  • Media
  • Forms
  • Structure
  • Navigation
  • Custom

  • ·  Form validation with messages on top
  • ·   Form validation with messages next to controls
  • ·   Non-related checkboxes
  • ·   Grouped and differentiated form controls
  • ·   Required input with hidden asterisks and ARIA
  • ·   Required input with asterisk and ARIA
  • ·   Form controls with labels in a table
  • ·   Form controls without labels in a table, fixed with ARIA
  • ·   Form controls without labels in a table
  • ·   HTML 5 client-side validations with untitled pattern
  • ·   HTML 5 client-side validations
  • ·   Required input with asterisks as icons
  • ·   Required inputs with HTML 5 and ARIA
  • ·   Associating Content to Form Inputs Using Multiple Labels
  • ·   Giving clues about additional content in a form
  • ·   Associating too much content to form controls using ARIA
  • ·   Associating content to form controls using ARIA
  • ·   Additional content in form labels
  • ·   General Form Inputs Example
  • ·   Headings mixed into a form as children of legends
  • ·   Headings mixed into a form using ARIA
  • ·   Grouped form controls with the too-long legend
  • ·   Nested fieldset/legend structures
  • ·   Grouped thematically related form controls
  • ·   Grouped checkboxes
  • ·   Grouped Radio Buttons
  • Faked fieldset/legend using ARIA
  • Generally bad form
  • ·   Generally good form
  • Headings
  • Tables
  • Lists
  • Landmarks
  • HTML 5 headings outline with ARIA-level fixes
  •  HTML 5 headings outline with traditionally numbered headings
  •  HTML 5 headings outline
  •  Generally bad headings
  •  Generally good headings
  •  Page with only one h1 on top of the main content
  •  Page with only one h1 on top of the page
  •  Headings Example with ARIA labeled Page Regions
  •  Page with additional page regions, with headings
  •  Browsing headings
  • Page with HTML5 structural elements, labelled with ARIA, and visually hidden headings
  •  Page with HTML5 structural elements, labelled with ARIA
  •  Page with HTML5 structural elements
  •  Page with HTML5 structural elements and visually hidden headings
  •  Page with additional page regions, with visually hidden headings
  •  Page with additional page regions, without headings

  • Table with fixed headers
  •  Table with hidden headers
  •  Table with smaller elements in a narrow view
  •  Table with block elements in a narrow view
  •  Table with fixed headers
  •  Table with a hidden column in a narrow view
  •  Table with added headers in a narrow view
  •  Table with visually hidden headers in a narrow view
  •  Fixed table of divs
  •  Faking Table Using ARIA And Invalid Structure
  •  Invalid table of divs
  •  Table with block elements, fixed with ARIA
  •  Table with block elements
  •  Table of divs using ARIA
  •  Table of divs with flexbox
  •  Table spanning multiple rows and columns
  •  Table with multiple header cells
  •  Table with unique IDs
  •  Table with ambiguous data
  •  Generally a bad table, with only horizontal headers
  •  Generally a bad table, without headers
  •  Generally a good table
  •  Table with hidden headers
  •  Table of divs using ARIA
  • Simple Dropdown
  • Multi-level Dropdown
  • Multi-level dropdown with sub-levels always open
  • Mega Dropdown
  • Double-Purpose Dropdown
  • Marking an element toggleable using a checkbox
  • Marking an element expandable using a checkbox
  • Manually displayed tooltip
  • Autocomplete with radio buttons
  • Accordion with Radio Buttons
  • Automatically displayed tooltip
  • Tab list with radio buttons
  • Non-modal Dialog
  • Modal Dialog
  • Accordion with ARIA
  • Carousel with radio buttons
  • Multi-accordion with checkboxes
  • Datepicker with Radio Buttons
  •  Autosuggest with Radio Buttons
  • Hiding an element with a focusable child
  • Trying to unhide an aria-hidden child
  • Elements hidden with aria-hidden are not hidden when referenced
  • Removing semantics using presentation role
  • Marking elements using different aria-current values
  • Marking an element as current using aria-current
  • Iframe embedding problematic headings
  • General Iframe example
  • Hiding elements from all devices using visibility hidden
  • Hiding elements from all devices using display none
  • Marking elements using visually hidden text
  • Adding multiple descriptions to an element using aria-describedby
  • Adding a description to an element using aria-describedby
  • Labeling an element using aria-labelledby
  • Making content focusable
  • Hiding elements only visually: iOS peculiarities alternative
  • Hiding an element visually
  • Hiding elements from all devices using the hidden attribute
  • Toggling visibility of a hidden element on focus
  • Hiding elements only visually

Services

  • Accessibility Audits
  • Accessibility Consulting
  • Accessibility Training

Resources

  • Understanding WCAG
  • Understanding WAI ARIA
  • WCAG 2.1 Checklist

Terms & Conditions

Privacy Policy

Accessibility Statement

Disclaimer

© 2023 DigitalA11Y
All Rights Reserved

Linkedin Twitter Facebook
DigitalA11Y

Plot No 108, 3rd Cross Rd, Saipuri Colony,
Hastinapuri Colony, Sainikpuri, Secunderabad

500094
Telangana, India

Tel:(+91)99082 66680,
E-mail: [email protected]

Scroll to top
  • Home
  • About
  • Blog
  • Resources
    • WAI-ARIA
    • WCAG
    • Cheat Sheets
    • A11Y Blogs
  • Contact
Search