accessible graphics for high pixel density era
TRANSCRIPT
Mitsue-Links Co.,Ltd.
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved.
Accessible Graphics for High Pixel Density Era
CSUN 2015
March 6, 2015
Team Two, Accessibility Division
Takeshi Kurosawa
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 2
about:me
•Takeshi Kurosawa
•Accessibility Engineer @ Mitsue-Links Co.,Ltd.
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 3
About Mitsue-Links
•One of Japan's top information integrators
•One stop solutions: from consulting to production
•A W3C member
•Celebrating 25th anniversary
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 4
This session will cover…
• Icon fonts
http://fortawesome.github.io/Font-Awesome/icon/subway/
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 5
Agenda
•Background
• Introduction of icon fonts
• Issues of Private Use Areas (PUA) icon fonts
•Benefits of ligature icon fonts
•Use scenes of icon fonts
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 7
High pixel density era
•High pixel density devices have become popular
•1 CSS pixel > 1 device pixel
•1× graphics will produce artifacts
http://www.apple.com/macbook-pro/features-retina/
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 8
Graphics of high pixel density era
•Create graphics for each pixel density?
http://www.w3.org/TR/respimg-usecases/#device-pixel-ratio-based-selection
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 9
Vector graphics
•Create a graphic and make devices scale it
• Icon fonts
•Scalable Vector Graphics (SVG)
http://fortawesome.github.io/Font-Awesome/icon/subway/
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 10
Icon fonts are popular but…
• Issue 1. Lack of alternative texts
• Issue 2. Unrelated characters may be displayed if specified icon fonts are not used
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 12
Icon fonts
•Glyphs = Icons
•Usually vector fonts
•Two types of implementations
•PUA Icon Fonts
•Ligature Icon Fonts
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 13
PUA icon fonts
• Iconic glyphs = Unicode’s Private Use Areas (PUA)
•PUA characters are private:
•don’t correspond to actual characters
•may have different meaning across fonts
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 14
http://fortawesome.github.io/Font-Awesome/
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 15
https://msdn.microsoft.com/en-US/library/windows/apps/jj841126.aspx
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 16
Ligature icon fonts
• Iconic glyphs = ligatures
•Ligatures are special glyph forms that consist of a series of characters
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 19
PUA icon fonts
• Iconic glyphs = PUA characters
•CSS pseudo-elements (:before/:after) inserts PUA characters
:before {font-family: iconfont;content: "\e000";
}
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 20
Issues of PUA icon fonts
• Issue 1. Lack of alternative texts
• Issue 2. Unrelated characters may be displayed if specified icon fonts are not used
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 21
Issue 1. Lack of alternative texts
•Example: a link to settings page
•No alternative texts
<a href="/setting"><i class="fa fa-cog"></i>
</a>
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 22
Typical “solution”
•Adding invisible texts
<a href="/setting"><i class="fa fa-cog"></i><span class="hidden">setting</span>
</a>
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 23
Is it enough?
•For screen readers
•May be ok
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 26
If specified icon fonts are not used
• Invisible alternative texts are invisible
<a href="/setting"><i class="fa fa-cog"></i><span class="hidden">setting</span>
</a>
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 27
Is it enough? No.
•For screen readers
•May be ok
• If specified icon fonts are not used
•No visible alternative texts
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 28
Another example at CSUN 2014
•TPG demonstrated using icon font with Adobe Blank at CSUN 2014
http://files.paciellogroup.com/training/CSUN2014/lessonslearned/demos/usecase3_5.html
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 29
http://files.paciellogroup.com/training/CSUN2014/lessonslearned/
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 30
Icon fonts with Adobe Blank
•Alternative texts are invisible if Adobe Blank is used
•Alternative texts are visible if Adobe Blank is not used
<a href="/setting"><i class="fa fa-cog"></i><span class="adobeblank">setting</span>
</a>
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 31
Remaining issues of the previous example
•Alternative texts remain invisible if Adobe Blank is used but icon fonts are not
• Issue of unrelated characters being displayed still remain
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 32
Issues of PUA icon fonts
• Issue 1. Lack of alternative texts
• Issue 2. Unrelated characters may be displayed if specified icon fonts are not used
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 33
Issue 2. Unrelated characters may be displayed
Segoe UI Symbols Linux Libertine
http://www.adamdawes.com/windows8/win8_segoeuisymbol.html
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 34
http://www.adamdawes.com/windows8/win8_segoeuisymbol.html
Issue 2. Unrelated characters may be displayed
Segoe UI Symbols Linux Libertine
U+E106: Delete U+E106: Spread Sheet
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 36
Ligature icon fonts
• Iconic glyphs = ligatures
•Ligatures: special glyphs formed of a series of characters
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 37
Example of ligature fonts
•Example: a link to settings page
<a href="/setting"><span class="lsf-icon">setting</span>
</a>
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 38
Alternative texts
•Texts are written in HTML
<a href="/setting"><span class="lsf-icon">setting</span>
</a>
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 39
If specified icon fonts are not used
•Texts written in HTML are displayed
<a href="/setting"><span class="lsf-icon">setting</span>
</a>
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 40
Benefits of ligature fonts
• Issue 1. Lack of alternative texts
texts written in HTML are used
• Issue 2. Unrelated characters may be displayed if specified icon fonts are not used
texts written in HTML are used
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 42
Use scenes of icon fonts
•How
•Using ligature icon fonts (texts must be written in HTML)
•For
•Texts with a little orthographic variations
•Non decorative images
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 43
Caveats of ligature icon fonts
•Caution with orthographic variations
•Cannot be used as decorative images
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 44
Orthographic variations/Internationalization
•Orthographic variations:
•“setting” and “settings”
•“settings”, “preferences”, “options”, and so on
• Internationalization
•Requires ligatures for each language
•“settings” in English, “設定” in Japanese, …
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 45
Orthographic variations: example
•Example: settings
<a href="/setting"><span class="lsf-icon">settings</span>
</a>
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 46
Decorative images
•Ligature icon fonts cannot be used as decorative images
• If you do so, texts are rendered/read out twice
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 47
Decorative images: example
•Example: setting
<a href="/setting"><span class="lsf-icon">setting</span>setting
</a>
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 48
Decorative images: example renderings
•Texts are rendered twice
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 49
Limitation of icon fonts
• Icon fonts require at least one character to render icons
•aria-hidden cannot solve the issues of renderings
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 50
Right graphics in the right place
•You can use SVG (Scalable Vector Graphics) for decorative images
https://www.polymer-project.org/components/core-icons/demo.html
Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 52
High pixel density era
•Vector graphics are becoming more popular
• Icon Fonts
•PUA Icon Fonts: number of issues
•Ligature Icon Fonts: suitable for non-decorative icons