タグ

accessibilityとWebComponentsに関するefclのブックマーク (3)

  • @open-wc/testing

    import { fixture, html } from '@open-wc/testing'; describe('my-test', () => { it('works', async () => { const el = await fixture(html` <my-element></my-element> `); }); }); import { expect, fixture, html } from '@open-wc/testing'; describe('Plugin - semantic-dom-diff', () => { it('can semantically compare full dom trees', async () => { const el = await fixture(`<div><!-- comment --><h1>${'Hey'} </

    @open-wc/testing
    efcl
    efcl 2021/08/25
    Web Componentsのテストライブラリ
  • How to Make Accessible Web Components — a Brief Guide — SitePoint

    This article was peer reviewed by Mallory van Achterberg. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be! In a previous article I demonstrated how to create a multiselect web component. In the comments section of that article, readers touched on the very important subject of web component accessibility. Undoubtedly, for today’s web it’s vital to be acce

    How to Make Accessible Web Components — a Brief Guide — SitePoint
    efcl
    efcl 2016/05/22
    Custom Elementで作った要素をAccessibleに実装するチュートリアル。 キーボード対応、WAI-ARIA、ハイコントラストモードでの確認など
  • Web Componentsのアクセシビリティ

    Editor's Notes#13: Web Componentsでは、1度書いたコンポーネントが再利用されます。なので、コンポーネントのアクセシビリティが、そのアプリなりサイトなりのアクセシビリティに大きく影響してきます。そう、コンポーネントのアクセシビリティが重要です。この時重要になるのは、アクセシビリティが高い、良いコンポーネントを選ぶこと、もしくは、良いコンポーネントを作ることです。#17: Web Componentsでは、1度書いたコンポーネントが再利用されます。なので、コンポーネントのアクセシビリティが、そのアプリなりサイトなりのアクセシビリティに大きく影響してきます。そう、コンポーネントのアクセシビリティが重要です。この時重要になるのは、アクセシビリティが高い、良いコンポーネントを選ぶこと、もしくは、良いコンポーネントを作ることです。#18: もう少し噛み砕いてしゃべると

    Web Componentsのアクセシビリティ
    efcl
    efcl 2015/01/27
    WebComponentsとアクセシビリティについてのスライド。 既存要素があるケースと独自要素の場合はWAI-ARIAを使うことについて
  • 1