Learn Accessibility | web.devStay organized with collections Save and categorize content based on your preferences.
日経電子版アクセシビリティの取り組み — HACK The Nikkei
Introduction この記事は Nikkei Advent Calendar の 4 日目の記事です。 Web チームの伊藤です。 この記事では、電子版フロントエンドを実装する上でアクセシビリティに配慮した実装を行った箇所を具体例を挙げて紹介します。 Web アクセシビリティについて Web アクセシビリティは通常、「様々な利用者が Web サイトを使えるようにする」ものだと言われています。 具体的な手法としては、WCAG及びその達成方法集に則った実装を行うことが挙げられます。 独自にガイドラインを制定している会社もありますが、実際には、これらの基準をすべて満たすことは難しいでしょう。 比較的簡単に取り組めるところでは、Lighthouse のアクセシビリティスコアを上げることが考えられ、新規に実装する場合には、レビューなどで Lighthouse のスコアを上げる形になります。 本
アクセシブルなサイトリニューアルのチェック項目
検討したり、例外を適切に設けるために使うものです。 要件定義 バックエンドシステム・CMSが以下に対応している 入力フォームに時間制限はない 入力フォームの入力チェック機能は適切なエラーメッセージがでる 出力されるHTMLが仕様に準拠したHTML 画像に代替テキスト(alt属性)が入れられる 動画にクローズドキャプションを追加できる 自動的に生成されるウィジェットがアクセシブルになっている 画像のポップアップ（モーダル）機能など 3rdパーティのウィジェットやASPがアクセシブルである 動画埋め込み 地図埋め込み サイト内検索 自動翻訳機能 チャットボット 情報設計 情報設計に問題がない・情報を管理できている ナビゲーション設計が適切でどのページにもたどり着ける リンクテキストとリンク先ページタイトル・見出しに乖離がない ページタイトルとh1見出しに乖離がない サイト内でページタイトルに重
Automating the accessibility tests of your source code with GitHub Actions | Adrián Bolonio - Accessibility Software Engineering
Automating the accessibility tests of your source code with GitHub Actions Automating your accessibility tests with libraries like axe, pa11y, lighthouse, or unit tests directly in your GitHub repository is really easy with GitHub Actions. GitHub Actions allow you to automate, customize, and execute your software development workflows right in your repository with GitHub Actions. With GitHub Actio
Contraste
Contraste is a simple app for checking the accessibility of text against the Web Content Accessibility Guidelines (WCAG). Contraste allows you to quickly know if a combination of colors, for a text and a background, passes accessibility thresholds defined by the W3C, and thus is accessible to users with visual impairements.
Accessibility – React
Why Accessibility? Web accessibility (also referred to as a11y) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages. React fully supports building accessible websites, often by using standard HTML techniques. Standards and Guidelines WCAG The Web Content Accessibility Guidelines provides guidel
Vox Product Accessibility Guidelines
Making work accessible creates a better experience across the board. Use this checklist to help build accessibility into your process no matter your role or stage in a project. The Checklist Check the boxes of the guidelines that apply to your project Preview and copy the checklist to your clipboard Paste the checklist into a document, Slack, Trello—or however else your team organizes projects Des
Accessibility Testing Tools | CSS-Tricks
There is a sentiment that accessibility isn’t a checklist, meaning that if you’re really trying to make a site accessible, you don’t just get to check some things off a list and call it perfect. The list may be imperfect and worse, it takes the user out of the equation, so it is said. Karl Groves once argued against this: I’d argue that a well-documented process which includes checklist-based eval
入門者向け alt属性の書き方アドバイス
入門者向け alt属性の書き方アドバイス Web Accessibility Advent Calendar 2017
PDF版 JIS X 8341-3:2016, WCAG 2.0早見表／逆引き表作成裏話 (Web Accessibility Advent Calendar 2017) - 有限会社時代工房
PDF版 JIS X 8341-3:2016, WCAG 2.0早見表／逆引き表作成裏話 (Web Accessibility Advent Calendar 2017) 2017年12月01日 更新 | タグ: アクセシビリティ, 技術情報 Web Accessibility Advent Calendar 2017の12月1日を担当させていただきます、有限会社時代工房の柴田です。 印刷の「ポイント」の使い道 時代工房は、ウェブ制作会社なのですが、印刷物の作成も行なっています。で、印刷会社さんに入稿をするのですが、たくさんの印刷物を入稿していたら、なんといつのまにか印刷会社さんのポイントが随分と溜まっていたのです。 「何か良いポイントの使い道はないか」と仲間で話し合った結果、今回の早見表が生まれることになりました。 僕は、恥ずかしながらどうも物覚えが悪く、原則、ガイドライン、達成基準を覚
ポッドキャスト｜第126回: 「実装者ならまだ……ギリだめなんですけど (笑)」
今回は、ますぴーこと株式会社サイバーエージェントの桝田 草一さんをゲストにお迎えして、同社でのアクセシビリティー向上のための取り組み、11月11日に開催が予定されているJapan Accessibility Conferenceなどについてお話をうかがっています。 Podcast 約67分：68.1MB ポッドキャスト第126回: 「実装者ならまだ……ギリだめなんですけど (笑)」をダウンロードする YouTubeで再生する 写真：ゲストの桝田さんが主催している「WCAGもくもく会」の開催時の風景。1テーブルにだいたい4人が座ってみんなもくもく仕様書を読んでる先に、植木さんと太田さんの姿も。 オープニング・トーク 最近パスポートが失効していることに気づいたというizuizuからの今回のお題は、「冷凍食品」です。 桝田 草一さんを交えて まず、枡田さんの現在のお仕事の内容、アクセシビリティー
a11y - Accessibility Audits For The Web
A11y Command-line ToolsWeb accessibility audits powered by the Chrome Accessibility Developer Tools.TweetWhy?Accessible web sites need to work across multiple devices with varying screen-sizes and different kinds of input. Moreover, sites should be usable by the broadest group of users, including those with disabilities. When designing for accessibility, there are four key areas of disability to c
AcceCSS
AcceCSS A Sass Mixin That debugs & checks the accessibility of your designs This mixin will allow you to get an overview of all the zones of your layout, get a grayscaled version to check the contrast, as well as 8 different filters to emulate the most common coloblindness types Find it on Github! What we can call "The API" is the few parameters you will be able to change or combine to use the Acc
アクセシビリティがGoogleのランキングシグナルになる日
2015年3月3日 著 Googleが「モバイル フレンドリー」かどうかをンキング要素として使い始める件（Google ウェブマスター向け公式ブログ: 検索結果をもっとモバイル フレンドリーに）、自分の感覚からすると「やっとか」という感じなのですが、世の中的にはそうでもないのでしょうか。このニュースに接し、ようやく重い腰を上げてモバイル対応を検討し始める�Webサイトというのも、まったくのゼロではないのでしょうけれど......しかしモバイルシフトが誰の目にも明らかな昨今、 速報!! 4/21よりスマホ対応してないサイトはスマホでの検索順位が下がる | More Access! More Fun! Googleのルール改正でスマホからの検索で下位に吹っ飛ばされる官公庁たち | More Access! More Fun! などで煽られるまでもなく、何かしらモバイル向けに手を打っているものだ
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
(Not so) Simple ARIA Tree Views and Screen Readers | Articles | Accessible Culture
I started testing a number of screen readers with different ARIA tree views. It turns out there's a bit going on with screen readers and tree views, so the research got a little lengthy. It also turns out that there's significant variability across screen readers in how they handle different ARIA tree views. I found no single way to build a simple tree view that provides what I'd call a fully dece
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How-to: Accessible heading structure - The A11Y Project
tota11y – an accessibility visualization toolkit by Khan Academy