ツイッターでアクセシビリティ向上日誌２【目視試験編】‐Akira Tsuda Portfolio and Blogというのを見かけて、そういえばアクセシビリティチェックって何をどうしているのかという話をウェブ上でほとんど見かけない（というか自分は知らない）ので、思い切ってチェックの過程や考え方を書いてみようかなと。 チェック対象のサイトを作った@HeldaForStudy氏に尋ねたところ、題材として使ってよいという返事をいただいたので、「アトリエ金工やまぐち」のサイト1ページをチェックしてみることにします。 対象ページはBasic認証がかかっているので、アクセシビリティ向上日誌１【各種ツール評価編】からたどってください。 @HeldaForStudy氏はレベルはA*1でチェックしたとのことなので、チェック基準はWCAG 2.1レベルAでチェックすることにしましょう。 わたしは普段はCOB-
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
先日「ドクセル」というサービスをリリースしたので技術的な振り返りをQiitaにも投稿します。 追記：Qiitaにドクセルの埋め込み機能が対応しました！ モチベーション SlideShareが親会社をころころ変えるわりに中身が進化してなくてやる気ない SpeakerDeckが日本語のファイルをアップするとSlugを勝手に中国語読みにする なんか個人サービス作りたい 作ったもの https://www.docswell.com ドクセル と読ませるようにしている シンプルなスライド共有サービス Laravelベース 特徴 画質がいい（長辺1920px・Full HD相当のプロジェクターにも耐えうる） URL（Slug）をある程度自分で決めることができる マウスオーバーに頼らない（タッチデバイスを意識） アーキテクチャ アーキテクチャはこんな感じです。初期バージョンとしては、PHPなので共用サー
【最新バージョン4】Splideの使い方やオプションを解説！14個のデモ付き 更新日：2024/05/10 WEBサイトにスライダーを実装したことがある人は多いですよね。 そんなときいつも何を使用していますか？ スライダーのJSライブラリで有名どころとして以下の3つがあります。 ・slick ・Swiper ・keen-slider 私は今までslickを使っていました。 Swiperは機能がありすぎてよくわからないのと、slickよりも容量が重いからという理由もあります。 keen-sliderはカスタマイズ前提のライブラリで、アクセシビリティ(a11y)のサポートもされていないため使っていません。（slickとSwiperはアクセシビリティのサポートがされています。） … というような理由で、私はslick推しでした。 しかし、slickの操作感（いわゆるUX）があまり良くないと思って
Splide - The lightweight, flexible and accessible slider/carousel
Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
はじめに Webページ制作において、スライダーの登場頻度は異常に高いですよね。 cssでanimationプロパティを書くより、スライダーを実装する方が多いまであります。 その上、地味に仕様決めをちゃんとしておかないと、後であーだこーだなって実装コストが高くなることも往々にしてあるかと思います。 そのため、大体の仕様を満たすことができるようにライブラリを使って実装している方がほとんどかと思います。 そして、そのスライダーライブラリのデファクトスタンダードとなっているのが、slickとSwiperでしょう。 そこに第三の選択肢として、Splideを推したいのです。 Qiitaで「Splide」と検索しても意外と記事がなかったので、おすすめポイントをまとめてみたいと思います。 Splideとは Splideは、MITライセンス下でリリースされたアクセシビリティに配慮された軽量で高機能なスライダ
スライダープラグインは何を使うべきか フロントエンドエンジニアのおとのです🙆♂️ Webサイトに以下のようなスライダーを埋め込む際、Web制作のコーダーやマークアップエンジニア、フロントエンドエンジニアは外部プラグインを利用して実装することが多いかと思われます。 jQueryが全盛期だった時には、Slickが多く利用されていた印象です。あらゆるオプションが用意されており、さまざまなカスタマイズが可能で、私もよく使ってきました。 また、IEのサポートが終了してからSwiperが利用されるようになった印象があります。こちらも複数のオプションがあり、比較的モダンなCSS（flex等）が組み込まれていることから、slickよりもカスタマイズが容易であるように思えます。jQueryに依存していないのも大きなメリットですね。 今までのスライダープラグインの問題 ただ、スライダープラグインは決して容
GitHub - Splidejs/splide: Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
2024.01.06 2024.07.15 Webデザイン 【最新版】jsスライダーライブラリ「Splide」の使い方を徹底解説！ 粟飯原匠 |プロデューサー マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アクセシビリティチェックってどうやってるの？ということで、実際にやってみた。（その1） - 水底の血
Splide - アクセシビリティに配慮した軽量・高機能スライダー
海外のスライド共有サービスがやる気ないので自分で作ってみた - Qiita
【最新バージョン4】Splideの使い方やオプションを解説！14個のデモ付き | 東京のホームページ制作 / WEB制作会社 BRISK
Splideをスライダーの新たな定番としたく - Qiita
Next.js(React)に最軽量＆高機能スライダープラグインSplideを導入してみる
【最新版】jsスライダーライブラリ「Splide」の使い方を徹底解説！ - 株式会社PENGIN