Get started with Accessibility in Vue.js!

Learn about core concepts of web app accessibility, tips & tricks, best practices strategies and and how to implement inclusive components in Vue 2 and 3.

Cover Accessible Vue: Abstract illustration of A-shaped mountains, using Vue's brand colors.

What will you learn?

About the book

JavaScript frameworks have a reputation for poor accessibility. But is this an inherent problem of these tools?
Can you build accessible sites and apps with Vue, React and Angular if you respect web app idiosyncrasies? I think so.

Even more so, I think their component-based architecture, statefulness and related tooling can and should be used for "the good cause". In Accessible Vue, I gathered strategies, code snippets and and already inclusive component libraries I found when building accessible interfaces with my favorite framework, Vue.js.

Portrait of the author Marcus Herrmann.

Hi, my name is Marcus Herrmann, I'm a freelance front-end developer and Web Accessibility Specialist (IAAP) from Berlin, Germany. Among my customers is ownCloud, and together we're building their new accessible web UI – in Vue.js, of course.

You can find my blog at marcus.io and you can find me on Twitter @_marcusherrmann.

Table Of Contents

  1. Chapter 0: About this book

    1. What are the contents of this book?
    2. What are the limits of this book?
    3. Who is this book for?
    4. How do code examples in this book work?
    5. Who wrote this book?

    What can you expect from Accessible Vue?

  2. Chapter 1: Cover accessibility basics first

    1. Web app accessibility is web accessibility
    2. Law of the instrument
    3. The sad status quo
    4. The search for root causes
    5. Where to start to make a change
    6. Ask users, do User Testing
    7. A special look on screen-readers

    Web app accessibility doesn't exist in a vacuum - learn about starting points of your journey of inclusive design.

  3. Chapter 2: Basic web app accessibility concepts

    1. Disclosure widgets
    2. Focus management
    3. Modality
    4. Hiding and deactivating elements accessibly
    5. Links and Buttons
    6. WAI-ARIA Authoring practices

    Modal? Inert? Disclosure Widget? Focus Management? ARIA-what? Get familiar with core concepts.

  4. Chapter 3: Using Vue's strengths

    1. Conveying context with props
    2. Requiring props
    3. Circumventing Vue 2's one-root-element rule
    4. Facilitate focus management with $refs
    5. Visibility helper components
    6. Accessible Base Components

    Learn more about how to leverage Vue's API and component-based architecture for building apps for all.

  5. Chapter 4: Make typical components accessible

    1. Modal dialogs
    2. Skip links
    3. Slide-In Navigation
    4. Menus
    5. Tab Component
    6. Aside: Component libraries

    A deep dive into accessible modals, tab components, slide-in navigations and menus.

  6. Chapter 5: Convey changes of state to screen-readers

    1. Live regions
    2. Accessible routing

    Learn what a dynamic DOM means for screen reader users, and how to address it in your code.

  7. Chapter 6: Testing for accessibility

    1. Automated tests are no miracle workers
    2. Accessibility Testing as education
    3. Linting
    4. Checks in your browser
    5. Unit tests
    6. End-to-end, or inter-component testing
    7. The most important testing of it all

    Get familiar with (dis)advantages of automated testing. And with the most important testing of all.

  8. Chapter 7: Keep on learning

    1. Follow these people
    2. Look into React
    3. Follow the development of standards
    4. Join the accessibility community

    Our tools evolve, and so should we. Read about exciting developments and which people to follow online.

Cover Accessible Vue: Abstract illustration of A-shaped mountains, using Vue's brand colors.

Get the ebook

  • Get the ebook for free
  • or pay what you want
  • DRM-free PDF, mobi, and epub formats
Get ebook on leanpub.com