並び順

ブックマーク数

期間指定

  • から
  • まで

321 - 360 件 / 458件

新着順 人気順

WCAGの検索結果321 - 360 件 / 458件

  • ニッチ(そうだけど便利)な Figma Plugin たち

    概要 すでに便利な Figma Plugin をまとめてくれている記事は世の中にたくさんあります。 しかし、そのような記事をいくつか見てきた方たちにとっては、目新しい Figma Plugin たちをまとめてくれている記事は少ないように思います。 そこで、この記事ではタイトルにあるように 「ニッチ(そうだけど便利)な Figma Plugin たち」 をご紹介します。 対象読者 この記事は、 「もっと色んな便利な Figma Plugin が知りたい!」 というような Figma 初学者以上(?)の方に向けた記事です。 もしかしたら掘り出し物が見つかるかもしれません。 アニメーション Parallax このプラグインは、あなたの Figma デザインに美しいパララックス効果をもたらします。レイヤーを自動的に 3D パースペクティブで配置し、マウスやスクロール、ズーム・スクロールの動きを簡単

      ニッチ(そうだけど便利)な Figma Plugin たち
    • Styling Links with Real Underlines | CSS-Tricks

      Before we come to how to style underlines, we should answer the question: should we underline? In graphic design, underlines are generally seen as unsophisticated. There are nicer ways to draw emphasis, to establish hierarchy, and to demarcate titles. That’s clear in this advice from Butterick’s “Practical Typography”: If you feel the urge to underline, use bold or italic instead. In special situa

        Styling Links with Real Underlines | CSS-Tricks
      • 価値あることを「社内ボランティア」にしない - Automagic Podcast 感想|はのめぐみ

        こんにちは!はのめぐみです。 先週末に「がんばっている活動をアクセシブルにしてほしい」というポッドキャストを聴きました。約1時間の会話の中にアクセシビリティ活動に関するアプローチのヒントがたくさん詰まっていて、とてもいいポッドキャストでした。 ここで語られていたことは、たしかに「アクセシビリティ」を文脈にした内容です。私が持った印象としては、「アクセシビリティ」はあくまで変数のひとつにしか過ぎず、あらゆる場面において応用可能な組織デザイン論のような気がしました。 ポッドキャストの要旨 「ひとりで頑張る」から「チームで取り組む」に至るまでに遭遇する様々な「壁」。それを乗り越えるためにどのようなプロセスをたどればいいのか。株式会社サイバーエージェントでウェブフロントエンドデベロッパーとして働く桝田草一さんをゲストに迎え、主催の長谷川恭久さんが番組を進行します。 課題 取り組みを簡単に始められて

          価値あることを「社内ボランティア」にしない - Automagic Podcast 感想|はのめぐみ
        • Go Conference 2023 Online の Web サイトにおける工夫ポイント

          Go Conference 2023 Online の Web サイト開発チームの一員として携わらせていただいたので、使用した技術や工夫したポイントを書いていこうと思います。 ざっくり言うと Next.js の Page Router で開発して GitHub Pages でホストした静的サイトなので、特殊な技術を使っているとかではないです。また、 Go Conference の話ですが Go 言語は出てきません。 TL;DR Go Conference 2023 Online の Web サイト開発において、自分は主に以下の点を工夫しました。 🎉 react-rewards の紙吹雪を setInterval で繰り返す 🌏 react-i18next で <wbr> を使って日本語の改行箇所を制御する ⚡️ Sessionize の API レスポンスは zod でバリデーションし

            Go Conference 2023 Online の Web サイトにおける工夫ポイント
          • W3C「日本語組版の処理要件」の最新版が8月11日に公開されました

            '; collapsItems['collapsArch-2024-2:2'] = ' 米国国債の利回り変化と国債価格の値動きを調べてみた'; collapsItems['collapsArch-2023-12:2'] = ' DeepLによるHTML翻訳でタグが正しく取り扱われるか?'; collapsItems['collapsArch-2023-11:2'] = ' 骨抜き加速? 電子取引データ保存制度'; collapsItems['collapsArch-2023-10:2'] = ' Wordでマニュアルを執筆してWebマニュアルを作る 10月24日16時より電子取引データ保存についてのウェビナーを開催します。'; collapsItems['collapsArch-2023-9:2'] = ' 日本に残っている「紙と電子の間」のベルリンの壁を壊せ [XSL-FO試行錯誤]索引

              W3C「日本語組版の処理要件」の最新版が8月11日に公開されました
            • Orange You Accessible? A Mini Case Study on Color Ratio | Bounteous

              Orange You Accessible? A Mini Case Study on Color Ratio I recently completed work for a client who used orange heavily in their branding: it was in their print ads, brochures, posters, and signage, and they wanted to incorporate it on their website. This led to a comparison of orange buttons. Can you guess which button is more accessible? If you guessed the left button, congrats! You are an access

                Orange You Accessible? A Mini Case Study on Color Ratio | Bounteous
              • 【現役UIデザイナーおすすめ!】Adobe XDの無料プラグイン9選

                こんにちは! 7月に入社したデザイナーの赤沼です! 皆さんは「Adobe XD」使いこなしていますか? ニジボックスでは社内に専門のSlackチャンネルもあるほど、Adobe XDは活用されています。 その中でよく話題に出るのが「プラグイン」についてです。 「このプラグインが良かった!」 「この問題を解決できるプラグインはありませんか?」などなど。 そこで今回、 「プラグインが多すぎてどれから入れたらいいのかわからない‼︎」という方に向けて、 おすすめ無料プラグインをカテゴリーごとに紹介します! Adobe XDプラグインのインストール方法 Adobe XDのプラグインをインストールする方法は2つあります。 Adobe XD内のプラグインパネルから直接インストール Web上からダウンロードしたものをインストール 1. Adobe XD内のプラグインパネルから直接インストール Adobe X

                  【現役UIデザイナーおすすめ!】Adobe XDの無料プラグイン9選
                • WCAG 2.2 Recommendation (勧告) | Accessible & Usable

                  公開日 : 2023年10月6日 (2024年3月2日 更新) カテゴリー : アクセシビリティ W3C の WCAG (Web Content Accessibility Guidelines) の新バージョンである WCAG 2.2 が、2023年10月5日に正式な Recommendation (勧告) になりました。 Web Content Accessibility Guidelines (WCAG) 2.2 - W3C Recommendation 05 October 2023 またこれに併せて、W3C の WAI (Web Accessibility Initiative) より以下の関連文書が公開されています。 WCAG 2.2 Understanding Docs WCAG 2.2 Techniques これまでも当サイトでは WCAG 2.2 策定の道のりをウォッチし

                    WCAG 2.2 Recommendation (勧告) | Accessible & Usable
                  • ミツエーリンクスから見たアクセシビリティ界隈、この2年半 | アクセシビリティBlog | ミツエーリンクス

                    去る8月20日、オープンセミナー2022@岡山にて、「ミツエーリンクスから見たアクセシビリティ界隈、この2年半」というタイトルでセッションに登壇しました。当日参加いただいた皆さま、そして貴重な機会をいただいた実行委員会の皆さま、本当にありがとうございました。 オープンセミナー岡山には2015年から参加しており、オフラインで開催されていた頃は、名物となっている大規模な懇親会にLTという形でよく出演させていただいていました。そんななじみのあるセミナーから登壇依頼をいただき、本当にうれしく高揚した気持ちでお受けしました。 今回のセミナーは、 当方がミツエーリンクスに入社後、初の一般公開セミナーであることから、社員視点での内容にしたい。 入社前に開催していた勉強会「リーダブルな夜」がコロナ禍で延期されてから2年半が経ち、その間の情報発信を行っていない。 などの理由から、2年半分の「アクセシビリティ

                      ミツエーリンクスから見たアクセシビリティ界隈、この2年半 | アクセシビリティBlog | ミツエーリンクス
                    • v5で変更された内容

                      v5.3.0 以前のアルファ版v5.3.0から移行する場合は、このセクションに加えて、その変更点を確認してください。 Helpers カラーリンクに再び!!importantが追加され、新しく追加されたリンクユーティリティとの相性が良くなりました。 Utilities 新しい.d-inline-griddisplayユーティリティが追加されました。 v5.3.0-alpha2 v5.3.0のアルファ版から移行される方は、以下の変更点をご確認ください。 CSS variables 重複したり、使用されていないルートCSS変数を削除しました。 Color modes ダークモードの色は、特定の色合いや色合い(例えば、$blue-300)ではなく、Sassのテーマの色(例えば、$primary)から派生するようになりました。したがって、基本テーマの色をカスタマイズする時、より自動化されたダークモ

                        v5で変更された内容
                      • 従業員サーベイの簡易ウェブアクセシビリティ試験を実施しました! - SmartHR Tech Blog

                        こんにちは! SmartHRのプロダクトエンジニアのshunです。 本記事では、弊社内で実施しているアクセシビリティマスター養成講座のご紹介と、SmartHRの従業員サーベイというプロダクトで実施しているアクセシビリティ改善の取り組みについてお話しできればと思います。 SmartHRにおけるアクセシビリティの取り組み SmartHRでは、アクセシビリティの専門スキルを持つ@masuP9さんと@maverickさんを中心にアクセシビリティ改善の取り組みが行なわれています。 お二人のアクセシビリティに関する取り組みに関しては、以下の記事をご参照いただければと思います。 tech.smarthr.jp アクセシビリティマスター養成講座 2022年3月から、SmartHR社内における各プロダクトのアクセシビリティ改善の取り組みとして、アクセシビリティマスター養成講座が始まりました。 @masuP9

                          従業員サーベイの簡易ウェブアクセシビリティ試験を実施しました! - SmartHR Tech Blog
                        • 普通の書籍が読めない人のための、アクセシビリティのデザイン | Webマガジン「AXIS」 | デザインのWebメディア

                          去る11月26日、日本デイジーコンソーシアムと日本電子出版協会の共催によるオンラインセミナー「普通の書籍が読めない人に読書機会を提供する:EPUB電子書籍のアクセシビリティ」が開催された。「普通の書籍が読めない人」とは、視覚障がい者だけではなく、ディスレクシア(読字障がい)の人も含まれる。 このセミナーには小学館会長で、一般社団法人日本出版インフラセンターのABSC(アクセシブル・ブックス・サポートセンター)準備会の座長も務めている相賀昌宏氏や、ディスレクシアを患う支援技術開発機構研究員なども登壇し、業界団体の意気込みや、ディスレクシアが日常生活に及ぼす影響などが当事者の立場から語られた。SDGsの達成に向けてインクルーシブな社会を実現するには、電子書籍のアクセシビリティの向上も重要課題と考えられるため、ここでは、その概要を紹介しておきたい。 開催団体の日本デイジーコンソーシアムの名称にも

                            普通の書籍が読めない人のための、アクセシビリティのデザイン | Webマガジン「AXIS」 | デザインのWebメディア
                          • ColorShark – WCAG 2.1 AA and AAA Color Contrast Tool

                            Simulate Color BlindnessTest your colors against certain deficiencies.

                              ColorShark – WCAG 2.1 AA and AAA Color Contrast Tool
                            • 日経電子版アクセシビリティの取り組み — HACK The Nikkei

                              Introduction この記事は Nikkei Advent Calendar の 4 日目の記事です。 Web チームの伊藤です。 この記事では、電子版フロントエンドを実装する上でアクセシビリティに配慮した実装を行った箇所を具体例を挙げて紹介します。 Web アクセシビリティについて Web アクセシビリティは通常、「様々な利用者が Web サイトを使えるようにする」ものだと言われています。 具体的な手法としては、WCAG及びその達成方法集に則った実装を行うことが挙げられます。 独自にガイドラインを制定している会社もありますが、実際には、これらの基準をすべて満たすことは難しいでしょう。 比較的簡単に取り組めるところでは、Lighthouse のアクセシビリティスコアを上げることが考えられ、新規に実装する場合には、レビューなどで Lighthouse のスコアを上げる形になります。 本

                                日経電子版アクセシビリティの取り組み — HACK The Nikkei
                              • UIデザイナーを未経験から1年で育てるには|Classmethod Design Note

                                デザイナーの田中です。2022年9月に Classmethod Experience Design Center が発足してから、クラスメソッドで本格的なデザイン組織の立ち上げが始まりました。 その活動の中のひとつであるUIデザイナーの採用を進めていく過程において、私たちはUIデザイナーのそもそもの人口の少なさを改めて実感しています。 その中で私はデザイナーでありながら、デザイナーという言葉でUIデザイナー、WEBデザイナー、グラフィックデザイナーを一括りにしていた事実に気がつきました。 グラフィック・WEBデザインができるのであれば、アプリUIも変わらずできると信じていましたが、さまざまなデザイナーと関わらせていただいた中で、いろいろなギャップやストレスがある事実が表面化してきました。社内・社外でインタビューを行ってみると、それぞれのデザインの目的や役割が違うこと、面白みを感じる部分が違

                                  UIデザイナーを未経験から1年で育てるには|Classmethod Design Note
                                • HEX Contrast Ratio Calculator

                                  HEXの2色(前景色と背景色)のカラーセットからコントラスト比を計算し、WCAG2.1が定める基準を達成しているかを判定します。

                                    HEX Contrast Ratio Calculator
                                  • 改正障害者差別解消法とWebアクセシビリティをめぐる解釈

                                    2023年12月25日 著 私はGoogle アラートに「アクセシビリティ」とか「JIS X 8341-3」みたいな言葉を登録していて、Googleの検索対象にそれらを含んだコンテンツが新たに登録されるのをウォッチしているのですが、またしても改正障害者差別解消法に関して間違った解釈が掲載されているのを見つけてしまいました。あえて掲載元にリンクはしませんが、一部を引用します: 2021年の障害者差別解消法の改正により、2024年4月1日から民間事業者の合理的配慮が義務化されます。ウェブサイトの場合では「JIS X 8341-3:2016」という規格に準拠したウェブサイトを作り、ウェブアクセシビリティを確保することが義務化されます。 最初の文は、何ら問題なく、正しい内容です。問題はそのあとで......改正法のどこをどう読めば、JIS規格に準拠したWebサイトを作ることが義務化されるというので

                                      改正障害者差別解消法とWebアクセシビリティをめぐる解釈
                                    • accfes2024_torque_yamasaki

                                      アクセシビリティの祭典2024 スポンサーセッション 「発達障害当事者デザイナーとウェブアクセシビリティ」 株式会社トルク 山﨑悠

                                        accfes2024_torque_yamasaki
                                      • freee、「アクセシビリティチェックリスト」を公開 | プレスリリース | フリー株式会社

                                        障害の有無・年齢問わずだれでも利用できるプロダクトやWebサイトを開発するためのチェックリストを無料公開 freee株式会社(本社:東京都品川区、CEO:佐々木大輔、以下「freee」)は、「アクセシビリティチェックリスト」を公開しました。本シートは、プロダクトやWebサイトがアクセシビリティに対応しているかをチェックするために必要な「チェック内容、必要なツール、優先度、参考リンク、ガイドライン等」がリスト化されており、順にチェックすることでアクセシビリティの向上に活用することが可能です。これまでfreeeは独自の「アクセシビリティガイドライン」を公開していますが、更に実用的にガイドラインを活用していただくために本シートの公開をしました。 無料でどなたでもご利用いただけます。 【画像】「アクセシビリティチェックリスト一般公開用」実際のシートイメージ ■アクセシビリティとは 年齢、性別、利用

                                          freee、「アクセシビリティチェックリスト」を公開 | プレスリリース | フリー株式会社
                                        • APCAコントラスト日本語フォント検証

                                          WCAG 3.0にて 検討が進められているテキストの視覚的コントラスト基準である APCAについて、日本語フォントに適応した場合の検討を行うためのツールを提供しています。 コントラスト シミュレーター カラーを選択すると設定フォントサイズとウェイトでの表示例と、APCA基準値によるチェック結果が表示されます。 透明度なども考慮した基準値のシミュレーションはオリジナルのAPCA Contrast Calculatorを利用してください。

                                          • 新卒配属後31件のアクセシビリティ改善をした話 | CyberAgent Developers Blog

                                            このエントリーはCyberAgent Developers Advent Calendar 2021の12日目の記事です。 はじめに はじめまして、Amebaブログでエンジニアをしている21新卒のminaと申します。 突然ですが、AmebaブログのWeb Frontendチームには「Yatteiki」という横軸の活動があります。この活動ではアクセシビリティ・パフォーマンス・プロダクティビティのいずれかのチームに所属し、それぞれの観点からAmebaブログをより良くしています。 私も普段はAmebaブログのエディタ周りの開発しているのですが、Yatteikiではアクセシビリティチームに所属し、日々Amebaブログのアクセシビリティ向上に取り組んでいます。 そこで本記事では、7月にAmebaに本配属されて以降、アクセシビリティチームで取り組んできた改善について書いていこうと思います! なぜアクセ

                                              新卒配属後31件のアクセシビリティ改善をした話 | CyberAgent Developers Blog
                                            • アクセシビリティオーバーレイは銀の弾丸ではない

                                              2021年3月13日 著 昨年、後付けのアクセシビリティソリューションベンダーに向け一言を書いた時点では、accessiBeの社名が日本語圏で取り沙汰されることは(自分の観測範囲では)無かったのだけど、簡単にアクセシビリティの問題を解決する「アクセシビリティオーバレイ」のaccessiBeが約29.6億円調達という記事によって一躍、同社の知名度が上がりアクセシビリティオーバーレイの名前も広まったように感じます。 Webサイトにほとんど手を加えることなく既存のコンテンツをアクセシブルにできるという耳障りの良い謳い文句により、あたかもアクセシビリティオーバーレイが銀の弾丸のように映るかもしれません。しかし多くの識者が指摘済みの通り、この手法にはさまざまな問題があって、銀の弾丸からは程遠い存在です(少なくとも現時点においては)。どんな問題があるかはShould I Use An Accessib

                                                アクセシビリティオーバーレイは銀の弾丸ではない
                                              • Using CSS to Enforce Accessibility

                                                Using CSS to Enforce Accessibility I am a big proponent of the First Rule of ARIA (don’t use ARIA). But ARIA brings a lot to the table that HTML does not, such as complex widgets and state information that HTML does not have natively. A lot of that information can be hidden to the average developer unless they are checking the accessibility inspectors across browsers or testing with a suite of scr

                                                  Using CSS to Enforce Accessibility
                                                • Accessible Color Palette Generator | WCAG Compliant

                                                  We use essential cookies to make Venngage work. By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.

                                                    Accessible Color Palette Generator | WCAG Compliant
                                                  • (メモ)W3Cアクセシビリティ成熟度モデルの話 - 水底の血

                                                    界隈的にはWCAG 2.2 CRが話題になってると思いますけども、WCAG 2.2 CRと同じ日に、ドラフトノートとしてW3C Accessibility Maturity Model(W3Cアクセシビリティ成熟度モデル)という文書が発行されています。 これは何なのか?というのは、この文書のAbstractには次のようにあります。 The W3C Accessibility Maturity Model is a guide for organizations to evaluate and improve their business processes to produce digital products that are accessible to people with disabilities. Use of the W3C Accessibility Maturity Mod

                                                      (メモ)W3Cアクセシビリティ成熟度モデルの話 - 水底の血
                                                    • はじめに — freeeアクセシビリティー・ガイドライン Ver. 202404.0-RELEASE+4.3.7

                                                      freeeアクセシビリティー・ガイドラインは、アクセシビリティーが高いWebコンテンツの実現に必要な事項をまとめたものです。加えて、モバイル・アプリケーションにこれらの考え方を適用し、アクセシビリティーを向上させるために必要な情報についてもまとめています。フリー株式会社でのプロダクト開発において使いやすいガイドラインを提供することを目的に、Web Content Accessibility Guidelines (WCAG) 2.1に基づいて策定されています。

                                                        はじめに — freeeアクセシビリティー・ガイドライン Ver. 202404.0-RELEASE+4.3.7
                                                      • アクセシブルなフロントエンド開発のこれまでとこれから

                                                        アクセシブルな​フロントエンド開発の​これまで​と​これから 2021年11月27日に開催された JS ConfJP 2021 にて登壇してきました。このページはそこで登壇した内容をもとに書き起こした記事です。 アクセシビリティとは何か フロントエンド開発をしている人であれば「アクセシビリティ」という言葉は耳にしたことがあると思います。 では、アクセシビリティとは一体何を意味する言葉なのでしょう。 アクセシビリティはあらゆる人がアクセスできるようになることを指します。 アクセスする、というと想像しづらいのですが、なんらかの情報を得られるようになる、とある機器やサービスを利用できるようになると言い換えるとイメージしやすいかもしれません。 では「ウェブアクセシビリティ」とは何でしょうか。 外務省の定義として 「ホームページを利用している全ての人が、心身の条件や利用する環境に関係なく、ホームペー

                                                        • Testing Web Design Color Contrast  |  Articles  |  web.dev

                                                          A higher contrast ratio is scored with a higher number, like 4.5 or 7 instead of 3. To get more familiar with the scoring table, check out Polypane's Contrast Checker. Which of these color pairings do you feel contrast more? Testing contrast between colors So, now that we know what we’re looking for, how do we test this? Here are three free tools to assist you in inspecting, correcting and measuri

                                                            Testing Web Design Color Contrast  |  Articles  |  web.dev
                                                          • Vue A11y

                                                            Examples Several examples of how to apply ARIA, the techniques of WCAG and the best practices in your Vue.js components. Packages Developing and helping the most used Vue.js components to keep their components accessible. A11y contents Useful links, articles, videos, Web accessibility events, both in the context of Vue.js and in others.

                                                              Vue A11y
                                                            • Web Sustainability Guidelines (WSG) 1.0

                                                              Web Sustainability Guidelines (WSG) 1.0 Draft Community Group Report 04 March 2024 Latest published version: https://w3c.github.io/sustyweb/ Latest editor's draft:https://w3c.github.io/sustyweb/ Editors: Alexander Dawson Tim Frick (Mightybytes) Feedback: GitHub w3c/sustyweb (pull requests, new issue, open issues) Implementation: Sustainable Web Design Supplements: At A Glance Introduction to Web S

                                                              • 身近でできるアクセシブルな活動 〜 もしも同僚がロービジョンだったら

                                                                ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。アクセシビリティの第10代黒帯(ヤフー内のスキル任命制度)の中野 信です。 以前は検索サービスのUIデザインを担当していて、Yahoo! JAPAN Tech BlogではYahoo!検索の「ユーザーインターフェース設計」というエントリーを書きました。現在はヤフーのサービスとアプリのアクセシビリティを向上させるべく、ガイドラインの整備や検証・啓発活動などを行っています。 社内のエンジニアやデザイナーとアクセシビリティの改善について話をする中で、「何をどの程度までやればよいのか?」と言われることがよくあります。 ウェブはウェブアクセシビリティ方針にある通り、JIS X 8314-3:2016のレベルAとレベルAAの一部と

                                                                  身近でできるアクセシブルな活動 〜 もしも同僚がロービジョンだったら
                                                                • Accessible Target Sizes Cheatsheet — Smashing Magazine

                                                                  Practical guidelines to prevent rage taps and rage clicks with accessible tap targets for icons, links and buttons — on desktop and on mobile. With useful techniques and guidelines. Rage taps are annoying and frustrating. These wonderful occurrences in our interface when we need to tap twice or sometimes three times to continue our journeys. Of course, sometimes they happen because the website is

                                                                    Accessible Target Sizes Cheatsheet — Smashing Magazine
                                                                  • ウェブアクセシビリティ関連でウォッチしてるところとか - masuP9のScrapbox

                                                                    ブログ A List Apart – For people who make websites https://alistapart.com/ Tink - Léonie Watson – On technology, food & life in the digital age https://tink.uk/ Accessibility Wins, curated by Marcy Sutton https://a11ywins.tumblr.com/ TPG – Digital Accessibility Solutions https://developer.paciellogroup.com/ Scott O'Hara UX developer, designer & accessibility engineer | scottohara.me https://www.scott

                                                                      ウェブアクセシビリティ関連でウォッチしてるところとか - masuP9のScrapbox
                                                                    • The “dark yellow problem” in design system color palettes

                                                                      The goal was simple: to define the main colors so that their relative luminances, as defined by WCAG, are close to each other. This way, when designers swap out one status color for another, they are guaranteed by the design system that the color contrast ratio still passes the accessibility requirement. In this design, we don’t want the “in progress” tag to be any more prominent than the “finishe

                                                                        The “dark yellow problem” in design system color palettes
                                                                      • How to Section Your HTML | CSS-Tricks

                                                                        The sectioning elements in HTML5 are <nav>, <aside>, <article>, and <section>. <body> is also kind of a sectioning element since all content lying inside of it is part of the default document section. Here is a brief explanation of each sectioning element and how they are used: <nav> – Equivalent to role="navigation". Major site navigation that consistently appears frequently across the site. Exam

                                                                          How to Section Your HTML | CSS-Tricks
                                                                        • Access Guide

                                                                          Access Guide is a friendly introduction to digital accessibility based on WCAG 2.1

                                                                            Access Guide
                                                                          • Webサイトのfont-size・・・それでも僕は相対値。 - Shibajuku

                                                                            こんにちは。 どうもしばひろです。 皆さんは、Webサイトをコーディングする時、文字サイズはどうやって指定してますか? 「px」や「pt」などの絶対値ですか? それとも「rem」や「em」などの文字サイズをベースとした相対値ですか? CSSには色んな単位があり、色んな考え方があります。 一概にどれがベストだとかは言えませんが、僕は基本「rem」や「em」などの文字サイズをベースとした相対値で文字サイズを指定しています。 最近では、「もう、remやemなどの文字サイズをベースとした相対値じゃなくてpxでいいんだよ。」系のツイートやブログを目にすることが多いのですが、それでも僕は今現在は、rem や em などの文字サイズをベースとした相対値を使っています。 あ、決して 「px で font-size を指定しているサイトはダメだ!」とか、「今日から君も rem を使うんだ!」とか言うつもりは

                                                                              Webサイトのfont-size・・・それでも僕は相対値。 - Shibajuku
                                                                            • UIT Global Survey 2023 実施レポート

                                                                              こんにちは、UITサービス開発部の板井です。普段はLINEスキマニのフロントエンド開発担当や、フロントエンド開発に関するイベントの運営をしています。 UITでは社内のフロントエンドエンジニアのトレンドや周辺ツールの利用状況を調査するため、毎年社内に向けてアンケート「UIT Survey」を実施しています。(昨年度の実施レポート) 今回の調査に関しては、毎年UITで行っている世界各地のフロントエンド開発拠点が、コラボレーションして技術を共有し合う「UIT GLOBAL WORKSHOP」という社内イベントのオープニングコンテンツで、結果を発表するために行いました。 概要 対象:海外拠点を含むLINEヤフーのフロントエンドエンジニア(回答者は日本、韓国、ベトナム、台湾の組織に所属)質問および回答の言語:英語回答期間:2022/11/22-2022/12/07回答者数:121 名 調査した開発者

                                                                                UIT Global Survey 2023 実施レポート
                                                                              • 【MovableType.net】アクセシビリティチェック機能を試してみた | バシャログ。

                                                                                こんにちは、ishida です。 健康診断に行ったのですが、体重が過去最高を記録してしまいました。 ダイエット始めようと思います。 さて今回は、MovableType.netの機能として去年10月に登場したアクセシビリティチェック機能についてです。 機能があることは知っていましたが、使う機会がなかったので放置してましたがやっと使うことが出来ました。 使い方 ブログメニューから設定->全般の画面で、アクセシビリティチェックを有効にします。 あとは記事やウェブページ、テンプレートからプレビューボタンを押すと以下のようなウィンドウが表示されます。 レポートをみるをクリックすると詳細が表示されます。 適合レベルは、「WCAG2.0 (JIS X 8341-3:2016) 」レベル A 〜 AAA 準拠のチェックが可能となってます。 使ってみて MovableType.netに組み込まれているので、

                                                                                  【MovableType.net】アクセシビリティチェック機能を試してみた | バシャログ。
                                                                                • ステッパー (stepper) による数の入力 | Accessible & Usable

                                                                                  公開日 : 2020年9月7日 (2020年9月8日 更新) カテゴリー : ユーザビリティ / アクセシビリティ フォームにおいて、数 (人数、個数、年齢などのように数えたり測ったりできるもの) を入力させる場合、HTML の <input type="number"> を用いるのが基本です。ボックスに直接タイプ入力することができると同時に、ブラウザによってはスピナー (spinner) が提示されるので、それを「回す」ことで入力値を増減することもできます。 <input type="number"> の例 (Google Chrome)。ボックスの右側にスピナーが提示されている。 しかし、ブラウザ標準のスピナーは小さくて、ユーザーによっては見づらかったり使いにくかったりします。またユーザーの環境でスピナーが表示されない (ただのテキストボックスのように見える) こともあります。 比較的

                                                                                    ステッパー (stepper) による数の入力 | Accessible & Usable