accessible graphics for high pixel density era

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. 1

Materials

•http://goo.gl/su2kZw


about:me

•Takeshi Kurosawa

•Accessibility Engineer @ Mitsue-Links Co.,Ltd.


About Mitsue-Links

•One of Japan's top information integrators

•One stop solutions: from consulting to production

•A W3C member

•Celebrating 25th anniversary


This session will cover…

• Icon fonts

http://fortawesome.github.io/Font-Awesome/icon/subway/


Agenda

•Background

• Introduction of icon fonts

• Issues of Private Use Areas (PUA) icon fonts

•Benefits of ligature icon fonts

•Use scenes of icon fonts


Background


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/


Graphics of high pixel density era

•Create graphics for each pixel density?

http://www.w3.org/TR/respimg-usecases/#device-pixel-ratio-based-selection


Vector graphics

•Create a graphic and make devices scale it

• Icon fonts

•Scalable Vector Graphics (SVG)

http://fortawesome.github.io/Font-Awesome/icon/subway/


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


Icon Fonts


Icon fonts

•Glyphs = Icons

•Usually vector fonts

•Two types of implementations

•PUA Icon Fonts

•Ligature Icon Fonts


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


http://fortawesome.github.io/Font-Awesome/


https://msdn.microsoft.com/en-US/library/windows/apps/jj841126.aspx


Ligature icon fonts

• Iconic glyphs = ligatures

•Ligatures are special glyph forms that consist of a series of characters


http://kudakurage.com/ligature_symbols/


PUA Icon Fonts


PUA icon fonts

• Iconic glyphs = PUA characters

•CSS pseudo-elements (:before/:after) inserts PUA characters

:before {font-family: iconfont;content: "\e000";

}


Issues of PUA icon fonts



Issue 1. Lack of alternative texts

•Example: a link to settings page

•No alternative texts

<a href="/setting">

</a>

Typical “solution”

•Adding invisible texts

<a href="/setting">setting

</a>


Is it enough?

•For screen readers

•May be ok


http://opendyslexic.org/

If specified icon fonts are not used

• Invisible alternative texts are invisible

<a href="/setting">setting

</a>


Is it enough? No.

•For screen readers

•May be ok

• If specified icon fonts are not used

•No visible alternative texts


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


http://files.paciellogroup.com/training/CSUN2014/lessonslearned/

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">setting

</a>


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


Issues of PUA icon fonts




Issue 2. Unrelated characters may be displayed

Segoe UI Symbols Linux Libertine

http://www.adamdawes.com/windows8/win8_segoeuisymbol.html


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


Ligature Icon Fonts


Ligature icon fonts

• Iconic glyphs = ligatures

•Ligatures: special glyphs formed of a series of characters

Example of ligature fonts

•Example: a link to settings page

<a href="/setting">setting

</a>

Alternative texts

•Texts are written in HTML


</a>

If specified icon fonts are not used

•Texts written in HTML are displayed


</a>


Benefits of ligature fonts


texts written in HTML are used


texts written in HTML are used


Use Scenes of Icon Fonts


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


Caveats of ligature icon fonts

•Caution with orthographic variations

•Cannot be used as decorative images


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, …

Orthographic variations: example

•Example: settings

<a href="/setting">settings

</a>


Decorative images

•Ligature icon fonts cannot be used as decorative images

• If you do so, texts are rendered/read out twice

Decorative images: example

•Example: setting

<a href="/setting">settingsetting

</a>


Decorative images: example renderings

•Texts are rendered twice


Limitation of icon fonts

• Icon fonts require at least one character to render icons

•aria-hidden cannot solve the issues of renderings


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


Conclusion


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


Graphics of high pixel density era

•Provide beautiful and accessible graphics for everyone

accessible graphics for high pixel density era

Internet