Style guide / accessibility

Content links

  • Color Contrast

  • Keyboard Navigation

  • Motion Reduction

  • Screen Reader Considerations

    • Color Contrast

    Contrast must meet standards in all states.

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

    Button Text
    Light Mode

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

    Button Text
    Dark Mode

    Keyboard Navigation

    All interactive elements must be reachable and usable via keyboard.

    • Skip to main link
    • Main Navigation
    • All link elements
    • Videos
    • Footer

    Motion Reduction

    Respect reduced motion preferences.

    Screen Reader Considerations

    Semantic structure matters. Build for assistive technology from the start.

    An example image of an asset and their ALT tag description

    Below is an example of the semantic tags use throughout the website.

    ‍

    1<div class="page-wrapper">
2  <div class="..." role="banner"></div>
3  <div class="...">...</div>
4  <main id="main" class="main">
5    <section id="start" class="...">
6	  <div class="...">
7        <div class="container">
8          <h1 class="...">AI & DESIGN VISIONARY</h1>
9          <div class="..."></div>
10	    </div>
11	  </div>
12	</section>
13  </main>
14</div>