Creating Accessible SVGs Scalable Vector Graphics (SVGs) have been around since 1999, but they have seen a real resurgence in use as design interactions have become more complex and CSS/JavaScript have replaced antiquated animation programs such as Adobe Flash. There are plenty of reasons to use SVGs today including: Browser support – Increased native browser support of SVGs means better consisten
Accessible SVG test page Jump to: Content Links Buttons Notes Feel free to contribute via GitHub. "VO" is used as an abbreviation for "Voiceover". Narrator testing was done on Win 10 OS build 16299.522. For IE, the attribute focusable="false" should be added to the SVG element to ensure there's no double focus for links and buttons (implemented) and to ensure a decorative SVG is not focusable (not
かつて私たちは、画像テキストを表示するために「text-indent: -9999px;」なんてCSSを書いていました。でも、いまならもっといい方法があります。いまどきのベストな方法と、それが使えないときの解決方法を。 以前掲載された『いくつ覚えてる？いつか役に立つかもしれないCSS画像置換の手法と歴史』の中でBaljeet Rathiが紹介しているたくさんの画像置換テクニックは、どれを取っても見事に工夫されています。すべてのテクニックは、人と検索エンジンの両方に対するアクセシビリティを保ちつつ、テキストコンテンツをWeb上でいかに美しく芸術的に表現するか、という課題に焦点を当てていました。Webデザインの世界におけるこの目標を、今日手軽に使えるカスタムフォントやパワフルなCSSツールなしで達成するのはまさに偉業でした。 Rathiの記事にヒントを得て、次の課題を挙げてみました。 画像変換
やや旧聞だけども、事の発端は先月のiOS 10のリリースでそのへんのことはuser-scalable=no よさらば | 覚え書き | @kazuhitoあたりを読んでもらうとして、要は9月中旬当時ではuser-scalable=noを使うべきでないみたいなことを書いてあるW3C文書は私の知っている限りではなかった。 なかったので、Techniques for WCAG 2.0に追加する案をW3C WCAG WGに送信した。なお、英語を書いたのはMakoto Mizukamiである（もちろん日本語は私が書いた[Slack #A11YJ]し、下訳も書いた）。 なお、そのときはなかったんだけれども、stevefaulknerあたりがHTML 5.2のmeta要素にそれっぽい文言をつっこんでいる。（腐っても）規範仕様に"Authors should not suppress or limit t
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Making your SVG accessible includes adding extra steps to your workflow, but is well-worth it. By embracing clean, semantic markup and taking advantage of some of the less well-known features of CSS, you can create easily maintainable solutions that include considerations fo
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg, gif and png graphics for the well-supported SVG, too? Let’s see how this will impact users of assistive technology (AT) and what is needed
多くのウェブ制作者達が色覚多様性について考えることはまずない。せいぜいコントラストを確保したり、リンクの下線を消さないようにしたりすることで、グレースケールでもそれなりに識別できるように注意するくらいだろう。それで十分とも言えそうではあるが、それ以上考えようにも取っ掛かりがないためそれで止まっているとも言える。その取っ掛かりとして色覚多様性を再現するSVGのフィルターを作った。 Repository: Color Blindness Emulation filters.svgに含まれる8つのフィルターは、そのアルゴリズムはともかく、feColorMatrix要素を使ったごく簡単なものだ。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" version
という訳で、Web Accessibility Advent calendar 2014 9日目の記事です。私も初日から公開される記事をずっと読んで勉強しておりますが、ここまで割と仕様とかガイドラインとか、あとは制作者としての気の持ちよう(?)とか、そういった話がずっと続いている気がしましたので、ここらでひとつ箸休めというか、実装に関する軽い話題をお送りしたいと思います。 さて、今ご覧のこのサイトですが、この数日ちょこちょことリニューアルを進めております。まだ制作途中で未完成な部分もありますが、概ねこんな感じにしようという部分はだいたい完了しましたので、見切り発車で公開しつつ直していこうかなという。まあその辺は本題ではないので後々ゆっくり触れるとして。 で、今回はロゴを PNG から SVG にしたんですが、まだもう少し IE8 からのアクセスがログに見られる以上、単純に img 要素では
Jaws 15 and Internet Explorer 10 is the best combination at present, although nested SVG images are not well supported. NVDA and Internet Explorer present the role, title and desc, but support is erratic with multiple images announced and repetition of the title and desc. In all other browser/screen reader combinations the SVG is ignored. ARIA enhanced SVG accessibility It is possible to enhance t
Scalable Vector Graphics (SVG) exists in a quantum state of accessibility. Which is to say that SVG is both accessible and inaccessible at the same time. Happily, there is no SVG uncertainty principle. We know which aspects of SVG are accessible to whom, which are not, and what we can do to improve both. SVG 1.0 was released by the W3C in 2001. SVG 1.1 came along in 2003, and SVG 1.1 2nd edition i
SVG1.1 accessibility support is limited in browsers and screen readers. Things are set to improve with SVG2, but ARIA can be used now to improve the accessibility of simple SVG. SVG includes two elements for providing short and long text descriptions: The title and desc elements. <body> ... <svg xmlns=http://www.w3.org/2000/svg> <title>Circle</title> <desc>Large red circle with a black border</des
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
