Accessible Graphics for High Pixel Density Era
•Als PPTX, PDF herunterladen•
0 gefällt mir•2,099 views
While icon fonts are widely used on the web, most of them are misused. Insights into more accessible graphics that dealing with high pixel density.
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Accessible Graphics for High Pixel Density Era
Ähnlich wie Accessible Graphics for High Pixel Density Era (20)
Mehr von Mitsue-Links Co.,Ltd. Accessibility Department
Mehr von Mitsue-Links Co.,Ltd. Accessibility Department (17)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Accessible Graphics for High Pixel Density Era
- 1. 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
- 2. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 1 Materials •http://goo.gl/su2kZw
- 3. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 2 about:me •Takeshi Kurosawa •Accessibility Engineer @ Mitsue-Links Co.,Ltd.
- 4. 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
- 5. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 4 This session will cover… •Icon fonts http://fortawesome.github.io/Font-Awesome/icon/subway/
- 6. 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
- 7. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 6 Background
- 8. 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/
- 9. 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
- 10. 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/
- 11. 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
- 12. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 11 Icon Fonts
- 13. 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
- 14. 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
- 15. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 14 http://fortawesome.github.io/Font-Awesome/
- 16. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 15 https://msdn.microsoft.com/en-US/library/windows/apps/jj841126.aspx
- 17. 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
- 18. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 17 http://kudakurage.com/ligature_symbols/
- 19. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 18 PUA Icon Fonts
- 20. 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"; }
- 21. 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
- 22. 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>
- 23. 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>
- 24. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 23 Is it enough? •For screen readers •May be ok
- 25. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 24 http://opendyslexic.org/
- 26. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 25
- 27. 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>
- 28. 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
- 29. 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
- 30. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 29 http://files.paciellogroup.com/training/CSUN2014/lessonslearned/
- 31. 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>
- 32. 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
- 33. 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
- 34. 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
- 35. 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
- 36. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 35 Ligature Icon Fonts
- 37. 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
- 38. 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>
- 39. 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>
- 40. 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>
- 41. 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
- 42. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 41 Use Scenes of Icon Fonts
- 43. 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
- 44. 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
- 45. 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, …
- 46. 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>
- 47. 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
- 48. 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>
- 49. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 48 Decorative images: example renderings •Texts are rendered twice
- 50. 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
- 51. 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
- 52. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 51 Conclusion
- 53. 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
- 54. Copyright(c) Mitsue-Links Co., Ltd. All Rights Reserved. 53 Graphics of high pixel density era •Provide beautiful and accessible graphics for everyone
Hinweis der Redaktion
- 0
- 1
- 2
- Mitsue-Links is one of Japan's top information integrators, providing unique services centered on digital content. Based on your company's own corporate strategy, we offer one stop solutions for all enterprise requirements including consulting, marketing, analysis, planning, development/production, and site operation/maintenance. Mitsue-Link is one of W3C’s Members. Mitsue-Links was established in 1990. It is 25 years old.
- In this session, I will discuss Icon Fonts.
- 5
- At first I will introduce brief background of Icon Fonts.
- Today, High Pixel Density devices have become popular. In those devices, 1 CSS pixel is represented by 2 × 2 or 3 × 3 p device or physical pixels. There are even 4 times pixel density devices such as Galaxy Note Edge. In those environments, 1 by 1 graphics will produce artifacts or be looked blurry. So how can we deal with that?
- One approach to make graphics crisp in High Pixel Density devices is creating graphics for each pixel density. For example, authors create 2 graphics when they target 1x and 2x devices. However in this approach, several graphics are required for each image. Even if you create a single graphic which targets most high pixel density devices, you’ll need a very large screen to create graphics.
- Another approach is using vector graphics. In this approach, authors create one graphic and user’s devices scale it to fit the devices. Common vector graphics include Icon Fonts and Scalable Vector Graphics (SVG). Today I will discuss Icon Fonts.
- Icon fonts are popular as they are easy to deploy and tweak with CSS. However, icon fonts tend to cause accessibility issues including the issue of alternative texts being lacked and issue of unrelated characters being displayed if specified icon fonts are not applied. Before discussing the issues, we need to learn about two types of Icon Fonts.
- So I will introduce icon fonts briefly.
- Icon fonts are fonts that glyphs represents icons. It’s usually vector fonts so that icon looks crisp in high pixel density devices. In technically, there are two types of implementations of icon fonts and difference between them impact accessibility issues. One is PUA icon fonts and the other is Ligature Icon Fonts Let’s look PUA icon fonts.
- PUA icon fonts are fonts that glyphs of Unicode Private Use Areas represent icons. Private Use Areas are Unicode’s special areas that characters will not be assigned officially. In other words PUA don’t correspond actual characters like alphabets or decimals. Fonts, software or devices can use PUA for private purpose so that characters may have different meaning across them.
- Popular icon fonts include Font Awesome
- And Segoe UI Symbols for Windows Store apps.
- The other type of icon font is ligature icon fonts. In this kind of fonts, iconic glyphs are represented as special ligatures. Ligatures are special glyph forms that consist of a series of glyphs. Typical English ligatures include small f, small f and small i or capital Q and small u. Ligature fonts extends ligatures to represent variety of icons.
- Popular ligature icons include Ligature Symbols. In this fonts, the word “cut” represent scissors icon. Those difference impacts accessibility. So let’s look each icon fonts a bit more.
- First I will discuss PUA Icon Fonts.
- PUA icon fonts are typically used with CSS pseudo-elements. CSS pseudo-elements insert PUA characters with screen and those characters represent icons.
- There are two major accessibility issues of PUA Icon Fonts. The one is lack of alternative texts. The other is unrelated characters being displayed if specified icon fonts are not used. First I will discuss the lack of alternative texts.
- This is an example of a link to setting page of a web site. The icon is represented by empty “i” element. The PUA characters is inserted by CSS pseudo-element so that there are no alternatives in HTML. Uses of screen readers can’t understand the purpose of links.
- Typical solution is adding invisible texts which are typically cropped or positioned off screen by CSS.
- Is this solution is enough? For screen readers it may work – screen readers can read out alternative texts. But there are other environments that accessibility.
- Some users require specific fonts to understand contents. For example, OpenDyslexic is a font for dyslexia users.
- And browsers provide features which allow users use user specified fonts and discard author specified fonts. Some users use this feature for ethics regardless of reading disabilities.
- In those environments, author specified icon fonts are not used. If icon fonts are not used, icon is not rendered and invisible alternative texts are invisible so that users can’t understand the purpose of the link.
- So the typical solution is not enough. The it may work for screen readers but not work for environments which specified icon fonts are not used.
- At CSUN 2014, TPG demonstrated using icon fonts with Adobe Blank font.
- The session title was “Lessons Learned: Accessibility Theory vs. Implementation Reality”.
- In this example, Adobe Blank is used to hide the alternative texts visually. Adobe Blank is special fonts that every characters invisible. So alternative texts are invisible if Adobe Blank is used. And alternative text are visible if Adobe Blank is not used, for example, users prefer user-specified fonts and discard author-specified fonts.
- So in the previous example, alternative texts are visible if user prefer user-specified fonts. However there are situations where Adobe Blank is used and icon fonts are not used or downloaded as Adobe Blank is typically inline-ed in CSS files. In this situation, alternate texts remain invisible. Additionally, issue of unrelated characters being displayed still remain. Next, I will this issue.
- The other issue of PUA icon fonts is unrelated characters being displayed if specified icon fonts are not used.
- I mentioned previously, PUA characters don’t correspond actual characters. Fonts can use PUA for private purpose so that characters may have different meaning across them. For example, Segoe UI Symbols and Linux Libertine assign different glyphs for same character.
- For example, Segoe UI Symbols assign Delete –cross– icon and Linux Libertine assign Spread Sheet –table– icon for U+E106. So users who prefer user specified fonts will see different icons than author intended this could uses lead misunderstanding. Although PUA icon fonts have those issues, the other kind of icon fonts doesn’t have issues.
- Then I will introduce ligature icon fonts.
- Ligature icon fonts use ligatures to represent iconic glyphs. Ligatures are special glyphs formed of a series of characters.
- For example, I can use the word “setting” to represent gear icon and used in a link to settings page. The word “setting” is written in HTML and ligature icon font is applied to the text to represent gear icon.
- In ligature icons, alternative texts are written in HTML. For example, screen readers can read out meaningful texts.
- If author-specified icon fonts are not used, texts written in HTML are displayed so that users in such environment can understand them.
- Thus ligature icon fonts can solve two accessibility issues. Alternative texts are written in HTML and if icon fonts are not used meaningful texts are displayed.
- Although ligature fonts can create accessible graphics, they have some weak points. Next I will discuss those weak points and uses cense of icon fonts considering those weak points.
- At first let’s see use scenes of icon fonts: How? Using ligature icon fonts and texts must be written in HTML For? Texts with a little orthographic variations and non decorative images
- Ligature fonts can create accessible graphics, they have some weak points. At first, you need a caution with orthographic variations. Second you cannot use ligature icon fonts as decorative images. Next I will discuss those weak points.
- Ligature icon fonts uses ligatures –glyph corresponding a series of characters– so that specific a series of characters must be used to represent icon. For example, “setting” and “settings” are similar but different from perspective of ligatures. Sometimes “preferences” and “options” are used instead of “setting” and other languages use other words. For example, “設定” is used in Japanese. If you support those variations, you need to create ligatures for those variations.
- For example, ligature symbols doesn’t contain ligature for “settings” while it contains ligature for “setting”. If you use the word “setting”, you’ll see “s” after gear icon. So you’ll need a caution with orthographic variations if you use ligature icon fonts.
- 2nd, Ligature icon fonts cannot be used as decorative images. If you do so, texts are rendered or read out twice.
- Let’s consider a link that contains “gear” icon and the word “setting”. In this case, “gear” is decorative image as the word “setting” represent the purpose of link. If you use ligature icon fonts, you need two “setting” texts. The one is for “gear” icon and the other is normal texts.
- If the icon fonts are not used, setting rendered twice.
- Regardless of whether the icon fonts use PUA or ligatures, icon fonts require at least one character to render icons. You need to add one or more characters and they will be displayed or read out so that it cannot behave as img elements with null alt. You can use aria-hidden to deal with screen readers. However aria-hidden cannot solve the issue of visual renderings. This is limitation of icon fonts itself.
- The most important thing is providing accessible graphics for everyone. For decorative images, You can use SVG (scalable vector graphics) which look crisp in the high pixel density devices. So Let’s use right graphics in the right place.
- Finally, let me conclude my presentation.
- In the High Pixel Density Era, vector graphics are becoming more popular. Icon Fonts are one of vector graphics. There are two types of icon fonts, PUA icon fonts and ligature icon fonts. While PUA icon fonts have number of accessibility issues, ligature icon fonts can solve the issues. You can use ligatures for non-decorative icons.
- So my conclusion is let’s provide beautiful and accessible graphics for everyone