Topics

Tutorial: all about emoji panel #backstagetour #wintendev


 

Hi all,

 

Preface: this forum uses hashtags extensively. The #BackstageTour is mostly reserved for documentation on internals of Windows 10 and its features, and #WinTenDev denotes features under active development.

 

Now that all major screen readers support emoji panel (part of a suite of modern input features), coupled with latest blog post from NV Access on using emoji panel, I figured it is the right time to write up a tutorial (or two) describing what emoji panel is and how to use it. For those who’ve been using emoji panel for a while, you can ignore most of this.

 

Note: the reason for putting #WinTenDev hashtag will become clear in the end.

 

Before talking about how to use emoji panel with major screen readers (Narrator, JAWS, NVDA and others), it is helpful to learn what emoji is and how it came about, as well as related concepts of Unicode and emoticons. Only then the purpose behind emoji panel and how to navigate this screen should make sense. Throughout this tutorial, I’ll try my best to present this screen from screen reader agnostic viewpoint, although from time to time I may need to provide screen reader specific information.

 

Human history is filled with different means and ways of expressing ourselves. Beginning with pictorial characters used in Egypt, China and elsewhere thousands of years ago, different civilizations cultivated different writing systems and artifacts of writing such as Rosetta Stone (which enabled deciphering of Egyptian writing system), Latin letters, and recently, emoticons and emojis.

 

An emoticon (emotion icon) is a character-based representation of one’s emotions, typically employing punctuation characters. For example, a commonly encountered emoticon is “:>” (without quotes), which is commonly interpreted as a smiling face. Popularized in 1980’s, emoticons are used in instant messaging, emails, and sometimes, in ads.

 

In recent years, two distinct variations of emoticons has emerged, both developed in Japan: emoji and kaomoji. Emoji (meaning “picture character” in Japanese, which is sort of cognate with “emotion characters”) is an actual pictorial (picture) form of emoticons. Not only they can represent emotions, emojis are employed to represent other characters and situations such as events, people and jobs, religious symbols and so on. In contrast, kaomoji (meaning “facial characters” in Japanese) is same as emoticons (punctuation characters) except they are horizontal (as opposed to emoticons which require tilting your face to the left.

 

So how does emoji characters work internally? As they are pictures, they are defined in Unicode (pronounced “uni-code”), a database of characters from many languages, contexts, and representations. Each emoji character is represented internally as a set of two characters joined together (the internals of how that is possible is beyond the scope of this tutorial, but suffice to say that programmers have managed to condense Unicode representations into different encodings such as UTF-8 (Unicode Transformation Format, 8-bit), a very compact encoding used in many places).

 

But how about representing people with different skin colors? This question was answered with what’s called “skin tone modifier”, an additional character tag that represents different skin tones. By adding this tag on top of people emojis, different skin color representations become possible. We’ll see why skin tone modifier is important shortly.

 

So how do we browse through and select emojis in Windows 10? Although different Windows 10 releases (starting with Version 1709/Fall Creators Update) have different interfaces for emoji panel (a screen displaying many emojis and categories to choose from), the basic steps are:

 

  1. From anywhere where you wish to insert one or more emojis, press Windows+period (.) or semicolon (;.
  2. Use the arrow keys to browse through emojis (typically, most recently used emojis are shown; not anymore in Insider Preview builds at the moment; see notes).
  3. If the emoji you’re looking for isn’t a recently used item, you can switch between categories or search for it. In 1709 and 1803, you can press Tab or Shift+Tab to switch between emoji categories; in 1809 and later, pressing Tab will move you between emojis and categories (and in case of people emoji, between emojis, categories, and skin tone modifiers) and you need to press Enter to select a category (changed significantly in Insider Preview builds at the moment).
  4. If you don’t have time to go through different emoji categories (or in people category in 1809 and later, skin tone modifiers also), you can type the name of the emoji and the panel will present search results (or nothing).
  5. To enter emojis (either after browsing through categories and selecting it or searching for one), press Enter. To close the panel without inserting emojis, press Escape. You can also ask the emoji panel to stay open in more recent Windows 10 releases (1809, for example).

 

So Joseph, you’ve been mentioning that all this changes significantly in Insider Preview builds at the moment. Why? For two reasons, all tied to a major paradigm shift in emoji panel and its purpose:

 

Until Version 1809 (October 2018 Update), emoji panel is used strictly for dealing with emojis. In recent Insider Preview builds (18298 and higher), emoji panel is used not only to browse through emojis, but adds two new grand categories: kaomoji and symbols. Remember that kaomoji is similar to emoticons but shown horizontally; symbols, as the name implies, is a collection of all sorts of Unicode symbols (general punctuation, currency signs, and other symbols).

 

At the same time, the paradigm of “recent emojis first” is changing. Several months ago an Insider Preview build introduced ability for emoji panel to remember last shown emojis instead of last inserted emojis. For example, if you were browsing people emojis before closing the emoji panel, the panel will show people emojis the next time you open emoji panel (whereas in Version 1809 and earlier, most recently used emojis are displayed).

 

What happens if we combine both changes? This results in:

 

  1. When you press Tab or Shift+Tab, instead of just cycling between emojis and categories (and in case of people emojis, skin tone modifiers list), an additional control, dubbed “input category” is shown with three input possibilities: emoji, kaomoji, and symbols.
  2. To select a kaomoji or a symbol, go to input categories list and press Enter on the grand category you wish to browse.
  3. Just like emojis, kaomoji and symbols browser will remember the last category you browsed. For example, after selecting kaomoji input category and selectin “happy” group, and subsequently close and reopen the panel and select kaomoji, “happy” kaomoji symbols will be displayed.

 

All these changes comes down to this: emoji panel is no longer just used to browse emojis – it is now a screen to select additional symbols beyond the reach of your keyboard (hence the #WinTenDev hashtag).

 

Screen reader specific information:

 

  • Narrator: works with emoji panel (and the newly expanded input panel in Insider Preview) out of the box and provides best support among major screen readers.
  • NVDA: supported since July 2017 via Windows 10 App Essentials add-on, with native support introduced in 2018.3 (September 17, 2018); changes to emoji panel in Insider Preview are supported via Windows 10 App Essentials add-on (currently investigating panel opening issues in Insider Preview builds). 2018.4 (December 17, 2018) introduced a setting to read emojis across speech synthesizers.
  • JAWS: support has been added in 2019.1812.49 (December 17, 2018). At the moment JAWS does not announce skin tone modifiers correctly (I expect this to be rectified in 2019).
  • Other screen readers: please ask the vendor for more information.

 

Hope this helps.

Cheers,

Joseph


 

Hi,

By the way, I hereby give you permission to post the below material in other places (mailing lists, websites, etc.). Enjoy.

Cheers,

Joseph

 

From: win10@win10.groups.io <win10@win10.groups.io> On Behalf Of Joseph Lee via Groups.Io
Sent: Tuesday, December 18, 2018 9:49 AM
To: win10@win10.groups.io
Subject: [win10] Tutorial: all about emoji panel #BackstageTour #WinTenDev

 

Hi all,

 

Preface: this forum uses hashtags extensively. The #BackstageTour is mostly reserved for documentation on internals of Windows 10 and its features, and #WinTenDev denotes features under active development.

 

Now that all major screen readers support emoji panel (part of a suite of modern input features), coupled with latest blog post from NV Access on using emoji panel, I figured it is the right time to write up a tutorial (or two) describing what emoji panel is and how to use it. For those who’ve been using emoji panel for a while, you can ignore most of this.

 

Note: the reason for putting #WinTenDev hashtag will become clear in the end.

 

Before talking about how to use emoji panel with major screen readers (Narrator, JAWS, NVDA and others), it is helpful to learn what emoji is and how it came about, as well as related concepts of Unicode and emoticons. Only then the purpose behind emoji panel and how to navigate this screen should make sense. Throughout this tutorial, I’ll try my best to present this screen from screen reader agnostic viewpoint, although from time to time I may need to provide screen reader specific information.

 

Human history is filled with different means and ways of expressing ourselves. Beginning with pictorial characters used in Egypt, China and elsewhere thousands of years ago, different civilizations cultivated different writing systems and artifacts of writing such as Rosetta Stone (which enabled deciphering of Egyptian writing system), Latin letters, and recently, emoticons and emojis.

 

An emoticon (emotion icon) is a character-based representation of one’s emotions, typically employing punctuation characters. For example, a commonly encountered emoticon is “:>” (without quotes), which is commonly interpreted as a smiling face. Popularized in 1980’s, emoticons are used in instant messaging, emails, and sometimes, in ads.

 

In recent years, two distinct variations of emoticons has emerged, both developed in Japan: emoji and kaomoji. Emoji (meaning “picture character” in Japanese, which is sort of cognate with “emotion characters”) is an actual pictorial (picture) form of emoticons. Not only they can represent emotions, emojis are employed to represent other characters and situations such as events, people and jobs, religious symbols and so on. In contrast, kaomoji (meaning “facial characters” in Japanese) is same as emoticons (punctuation characters) except they are horizontal (as opposed to emoticons which require tilting your face to the left.

 

So how does emoji characters work internally? As they are pictures, they are defined in Unicode (pronounced “uni-code”), a database of characters from many languages, contexts, and representations. Each emoji character is represented internally as a set of two characters joined together (the internals of how that is possible is beyond the scope of this tutorial, but suffice to say that programmers have managed to condense Unicode representations into different encodings such as UTF-8 (Unicode Transformation Format, 8-bit), a very compact encoding used in many places).

 

But how about representing people with different skin colors? This question was answered with what’s called “skin tone modifier”, an additional character tag that represents different skin tones. By adding this tag on top of people emojis, different skin color representations become possible. We’ll see why skin tone modifier is important shortly.

 

So how do we browse through and select emojis in Windows 10? Although different Windows 10 releases (starting with Version 1709/Fall Creators Update) have different interfaces for emoji panel (a screen displaying many emojis and categories to choose from), the basic steps are:

 

  1. From anywhere where you wish to insert one or more emojis, press Windows+period (.) or semicolon (;.
  2. Use the arrow keys to browse through emojis (typically, most recently used emojis are shown; not anymore in Insider Preview builds at the moment; see notes).
  3. If the emoji you’re looking for isn’t a recently used item, you can switch between categories or search for it. In 1709 and 1803, you can press Tab or Shift+Tab to switch between emoji categories; in 1809 and later, pressing Tab will move you between emojis and categories (and in case of people emoji, between emojis, categories, and skin tone modifiers) and you need to press Enter to select a category (changed significantly in Insider Preview builds at the moment).
  4. If you don’t have time to go through different emoji categories (or in people category in 1809 and later, skin tone modifiers also), you can type the name of the emoji and the panel will present search results (or nothing).
  5. To enter emojis (either after browsing through categories and selecting it or searching for one), press Enter. To close the panel without inserting emojis, press Escape. You can also ask the emoji panel to stay open in more recent Windows 10 releases (1809, for example).

 

So Joseph, you’ve been mentioning that all this changes significantly in Insider Preview builds at the moment. Why? For two reasons, all tied to a major paradigm shift in emoji panel and its purpose:

 

Until Version 1809 (October 2018 Update), emoji panel is used strictly for dealing with emojis. In recent Insider Preview builds (18298 and higher), emoji panel is used not only to browse through emojis, but adds two new grand categories: kaomoji and symbols. Remember that kaomoji is similar to emoticons but shown horizontally; symbols, as the name implies, is a collection of all sorts of Unicode symbols (general punctuation, currency signs, and other symbols).

 

At the same time, the paradigm of “recent emojis first” is changing. Several months ago an Insider Preview build introduced ability for emoji panel to remember last shown emojis instead of last inserted emojis. For example, if you were browsing people emojis before closing the emoji panel, the panel will show people emojis the next time you open emoji panel (whereas in Version 1809 and earlier, most recently used emojis are displayed).

 

What happens if we combine both changes? This results in:

 

  1. When you press Tab or Shift+Tab, instead of just cycling between emojis and categories (and in case of people emojis, skin tone modifiers list), an additional control, dubbed “input category” is shown with three input possibilities: emoji, kaomoji, and symbols.
  2. To select a kaomoji or a symbol, go to input categories list and press Enter on the grand category you wish to browse.
  3. Just like emojis, kaomoji and symbols browser will remember the last category you browsed. For example, after selecting kaomoji input category and selectin “happy” group, and subsequently close and reopen the panel and select kaomoji, “happy” kaomoji symbols will be displayed.

 

All these changes comes down to this: emoji panel is no longer just used to browse emojis – it is now a screen to select additional symbols beyond the reach of your keyboard (hence the #WinTenDev hashtag).

 

Screen reader specific information:

 

  • Narrator: works with emoji panel (and the newly expanded input panel in Insider Preview) out of the box and provides best support among major screen readers.
  • NVDA: supported since July 2017 via Windows 10 App Essentials add-on, with native support introduced in 2018.3 (September 17, 2018); changes to emoji panel in Insider Preview are supported via Windows 10 App Essentials add-on (currently investigating panel opening issues in Insider Preview builds). 2018.4 (December 17, 2018) introduced a setting to read emojis across speech synthesizers.
  • JAWS: support has been added in 2019.1812.49 (December 17, 2018). At the moment JAWS does not announce skin tone modifiers correctly (I expect this to be rectified in 2019).
  • Other screen readers: please ask the vendor for more information.

 

Hope this helps.

Cheers,

Joseph


Tyler Wood
 

Hi Joseph,

You said:

You can also ask the emoji panel to stay open in more recent Windows 10 releases (1809, for example).


How does this work? I also notice that when I type in a search result and repeatedly press backspace, this also closes the panel.


thanks for that explanation.

On 2018-12-18 11:48 a.m., Joseph Lee wrote:

Hi all,

 

Preface: this forum uses hashtags extensively. The #BackstageTour is mostly reserved for documentation on internals of Windows 10 and its features, and #WinTenDev denotes features under active development.

 

Now that all major screen readers support emoji panel (part of a suite of modern input features), coupled with latest blog post from NV Access on using emoji panel, I figured it is the right time to write up a tutorial (or two) describing what emoji panel is and how to use it. For those who’ve been using emoji panel for a while, you can ignore most of this.

 

Note: the reason for putting #WinTenDev hashtag will become clear in the end.

 

Before talking about how to use emoji panel with major screen readers (Narrator, JAWS, NVDA and others), it is helpful to learn what emoji is and how it came about, as well as related concepts of Unicode and emoticons. Only then the purpose behind emoji panel and how to navigate this screen should make sense. Throughout this tutorial, I’ll try my best to present this screen from screen reader agnostic viewpoint, although from time to time I may need to provide screen reader specific information.

 

Human history is filled with different means and ways of expressing ourselves. Beginning with pictorial characters used in Egypt, China and elsewhere thousands of years ago, different civilizations cultivated different writing systems and artifacts of writing such as Rosetta Stone (which enabled deciphering of Egyptian writing system), Latin letters, and recently, emoticons and emojis.

 

An emoticon (emotion icon) is a character-based representation of one’s emotions, typically employing punctuation characters. For example, a commonly encountered emoticon is “:>” (without quotes), which is commonly interpreted as a smiling face. Popularized in 1980’s, emoticons are used in instant messaging, emails, and sometimes, in ads.

 

In recent years, two distinct variations of emoticons has emerged, both developed in Japan: emoji and kaomoji. Emoji (meaning “picture character” in Japanese, which is sort of cognate with “emotion characters”) is an actual pictorial (picture) form of emoticons. Not only they can represent emotions, emojis are employed to represent other characters and situations such as events, people and jobs, religious symbols and so on. In contrast, kaomoji (meaning “facial characters” in Japanese) is same as emoticons (punctuation characters) except they are horizontal (as opposed to emoticons which require tilting your face to the left.

 

So how does emoji characters work internally? As they are pictures, they are defined in Unicode (pronounced “uni-code”), a database of characters from many languages, contexts, and representations. Each emoji character is represented internally as a set of two characters joined together (the internals of how that is possible is beyond the scope of this tutorial, but suffice to say that programmers have managed to condense Unicode representations into different encodings such as UTF-8 (Unicode Transformation Format, 8-bit), a very compact encoding used in many places).

 

But how about representing people with different skin colors? This question was answered with what’s called “skin tone modifier”, an additional character tag that represents different skin tones. By adding this tag on top of people emojis, different skin color representations become possible. We’ll see why skin tone modifier is important shortly.

 

So how do we browse through and select emojis in Windows 10? Although different Windows 10 releases (starting with Version 1709/Fall Creators Update) have different interfaces for emoji panel (a screen displaying many emojis and categories to choose from), the basic steps are:

 

  1. From anywhere where you wish to insert one or more emojis, press Windows+period (.) or semicolon (;.
  2. Use the arrow keys to browse through emojis (typically, most recently used emojis are shown; not anymore in Insider Preview builds at the moment; see notes).
  3. If the emoji you’re looking for isn’t a recently used item, you can switch between categories or search for it. In 1709 and 1803, you can press Tab or Shift+Tab to switch between emoji categories; in 1809 and later, pressing Tab will move you between emojis and categories (and in case of people emoji, between emojis, categories, and skin tone modifiers) and you need to press Enter to select a category (changed significantly in Insider Preview builds at the moment).
  4. If you don’t have time to go through different emoji categories (or in people category in 1809 and later, skin tone modifiers also), you can type the name of the emoji and the panel will present search results (or nothing).
  5. To enter emojis (either after browsing through categories and selecting it or searching for one), press Enter. To close the panel without inserting emojis, press Escape. You can also ask the emoji panel to stay open in more recent Windows 10 releases (1809, for example).

 

So Joseph, you’ve been mentioning that all this changes significantly in Insider Preview builds at the moment. Why? For two reasons, all tied to a major paradigm shift in emoji panel and its purpose:

 

Until Version 1809 (October 2018 Update), emoji panel is used strictly for dealing with emojis. In recent Insider Preview builds (18298 and higher), emoji panel is used not only to browse through emojis, but adds two new grand categories: kaomoji and symbols. Remember that kaomoji is similar to emoticons but shown horizontally; symbols, as the name implies, is a collection of all sorts of Unicode symbols (general punctuation, currency signs, and other symbols).

 

At the same time, the paradigm of “recent emojis first” is changing. Several months ago an Insider Preview build introduced ability for emoji panel to remember last shown emojis instead of last inserted emojis. For example, if you were browsing people emojis before closing the emoji panel, the panel will show people emojis the next time you open emoji panel (whereas in Version 1809 and earlier, most recently used emojis are displayed).

 

What happens if we combine both changes? This results in:

 

  1. When you press Tab or Shift+Tab, instead of just cycling between emojis and categories (and in case of people emojis, skin tone modifiers list), an additional control, dubbed “input category” is shown with three input possibilities: emoji, kaomoji, and symbols.
  2. To select a kaomoji or a symbol, go to input categories list and press Enter on the grand category you wish to browse.
  3. Just like emojis, kaomoji and symbols browser will remember the last category you browsed. For example, after selecting kaomoji input category and selectin “happy” group, and subsequently close and reopen the panel and select kaomoji, “happy” kaomoji symbols will be displayed.

 

All these changes comes down to this: emoji panel is no longer just used to browse emojis – it is now a screen to select additional symbols beyond the reach of your keyboard (hence the #WinTenDev hashtag).

 

Screen reader specific information:

 

  • Narrator: works with emoji panel (and the newly expanded input panel in Insider Preview) out of the box and provides best support among major screen readers.
  • NVDA: supported since July 2017 via Windows 10 App Essentials add-on, with native support introduced in 2018.3 (September 17, 2018); changes to emoji panel in Insider Preview are supported via Windows 10 App Essentials add-on (currently investigating panel opening issues in Insider Preview builds). 2018.4 (December 17, 2018) introduced a setting to read emojis across speech synthesizers.
  • JAWS: support has been added in 2019.1812.49 (December 17, 2018). At the moment JAWS does not announce skin tone modifiers correctly (I expect this to be rectified in 2019).
  • Other screen readers: please ask the vendor for more information.

 

Hope this helps.

Cheers,

Joseph


 

Hi,
Emoji panel staying open: this can be configured via Settings/Devices/Typing/Advanced/Emoji Panel group under “Don’t close the panel automatically after an emoji has been entered”.

Cheers,

Joseph

 

From: win10@win10.groups.io <win10@win10.groups.io> On Behalf Of Tyler Wood
Sent: Tuesday, December 18, 2018 11:05 AM
To: win10@win10.groups.io
Subject: Re: [win10] Tutorial: all about emoji panel #BackstageTour #WinTenDev

 

Hi Joseph,

You said:

You can also ask the emoji panel to stay open in more recent Windows 10 releases (1809, for example).

 

How does this work? I also notice that when I type in a search result and repeatedly press backspace, this also closes the panel.

 

thanks for that explanation.

On 2018-12-18 11:48 a.m., Joseph Lee wrote:

Hi all,

 

Preface: this forum uses hashtags extensively. The #BackstageTour is mostly reserved for documentation on internals of Windows 10 and its features, and #WinTenDev denotes features under active development.

 

Now that all major screen readers support emoji panel (part of a suite of modern input features), coupled with latest blog post from NV Access on using emoji panel, I figured it is the right time to write up a tutorial (or two) describing what emoji panel is and how to use it. For those who’ve been using emoji panel for a while, you can ignore most of this.

 

Note: the reason for putting #WinTenDev hashtag will become clear in the end.

 

Before talking about how to use emoji panel with major screen readers (Narrator, JAWS, NVDA and others), it is helpful to learn what emoji is and how it came about, as well as related concepts of Unicode and emoticons. Only then the purpose behind emoji panel and how to navigate this screen should make sense. Throughout this tutorial, I’ll try my best to present this screen from screen reader agnostic viewpoint, although from time to time I may need to provide screen reader specific information.

 

Human history is filled with different means and ways of expressing ourselves. Beginning with pictorial characters used in Egypt, China and elsewhere thousands of years ago, different civilizations cultivated different writing systems and artifacts of writing such as Rosetta Stone (which enabled deciphering of Egyptian writing system), Latin letters, and recently, emoticons and emojis.

 

An emoticon (emotion icon) is a character-based representation of one’s emotions, typically employing punctuation characters. For example, a commonly encountered emoticon is “:>” (without quotes), which is commonly interpreted as a smiling face. Popularized in 1980’s, emoticons are used in instant messaging, emails, and sometimes, in ads.

 

In recent years, two distinct variations of emoticons has emerged, both developed in Japan: emoji and kaomoji. Emoji (meaning “picture character” in Japanese, which is sort of cognate with “emotion characters”) is an actual pictorial (picture) form of emoticons. Not only they can represent emotions, emojis are employed to represent other characters and situations such as events, people and jobs, religious symbols and so on. In contrast, kaomoji (meaning “facial characters” in Japanese) is same as emoticons (punctuation characters) except they are horizontal (as opposed to emoticons which require tilting your face to the left.

 

So how does emoji characters work internally? As they are pictures, they are defined in Unicode (pronounced “uni-code”), a database of characters from many languages, contexts, and representations. Each emoji character is represented internally as a set of two characters joined together (the internals of how that is possible is beyond the scope of this tutorial, but suffice to say that programmers have managed to condense Unicode representations into different encodings such as UTF-8 (Unicode Transformation Format, 8-bit), a very compact encoding used in many places).

 

But how about representing people with different skin colors? This question was answered with what’s called “skin tone modifier”, an additional character tag that represents different skin tones. By adding this tag on top of people emojis, different skin color representations become possible. We’ll see why skin tone modifier is important shortly.

 

So how do we browse through and select emojis in Windows 10? Although different Windows 10 releases (starting with Version 1709/Fall Creators Update) have different interfaces for emoji panel (a screen displaying many emojis and categories to choose from), the basic steps are:

 

  1. From anywhere where you wish to insert one or more emojis, press Windows+period (.) or semicolon (;.
  2. Use the arrow keys to browse through emojis (typically, most recently used emojis are shown; not anymore in Insider Preview builds at the moment; see notes).
  3. If the emoji you’re looking for isn’t a recently used item, you can switch between categories or search for it. In 1709 and 1803, you can press Tab or Shift+Tab to switch between emoji categories; in 1809 and later, pressing Tab will move you between emojis and categories (and in case of people emoji, between emojis, categories, and skin tone modifiers) and you need to press Enter to select a category (changed significantly in Insider Preview builds at the moment).
  4. If you don’t have time to go through different emoji categories (or in people category in 1809 and later, skin tone modifiers also), you can type the name of the emoji and the panel will present search results (or nothing).
  5. To enter emojis (either after browsing through categories and selecting it or searching for one), press Enter. To close the panel without inserting emojis, press Escape. You can also ask the emoji panel to stay open in more recent Windows 10 releases (1809, for example).

 

So Joseph, you’ve been mentioning that all this changes significantly in Insider Preview builds at the moment. Why? For two reasons, all tied to a major paradigm shift in emoji panel and its purpose:

 

Until Version 1809 (October 2018 Update), emoji panel is used strictly for dealing with emojis. In recent Insider Preview builds (18298 and higher), emoji panel is used not only to browse through emojis, but adds two new grand categories: kaomoji and symbols. Remember that kaomoji is similar to emoticons but shown horizontally; symbols, as the name implies, is a collection of all sorts of Unicode symbols (general punctuation, currency signs, and other symbols).

 

At the same time, the paradigm of “recent emojis first” is changing. Several months ago an Insider Preview build introduced ability for emoji panel to remember last shown emojis instead of last inserted emojis. For example, if you were browsing people emojis before closing the emoji panel, the panel will show people emojis the next time you open emoji panel (whereas in Version 1809 and earlier, most recently used emojis are displayed).

 

What happens if we combine both changes? This results in:

 

  1. When you press Tab or Shift+Tab, instead of just cycling between emojis and categories (and in case of people emojis, skin tone modifiers list), an additional control, dubbed “input category” is shown with three input possibilities: emoji, kaomoji, and symbols.
  2. To select a kaomoji or a symbol, go to input categories list and press Enter on the grand category you wish to browse.
  3. Just like emojis, kaomoji and symbols browser will remember the last category you browsed. For example, after selecting kaomoji input category and selectin “happy” group, and subsequently close and reopen the panel and select kaomoji, “happy” kaomoji symbols will be displayed.

 

All these changes comes down to this: emoji panel is no longer just used to browse emojis – it is now a screen to select additional symbols beyond the reach of your keyboard (hence the #WinTenDev hashtag).

 

Screen reader specific information:

 

  • Narrator: works with emoji panel (and the newly expanded input panel in Insider Preview) out of the box and provides best support among major screen readers.
  • NVDA: supported since July 2017 via Windows 10 App Essentials add-on, with native support introduced in 2018.3 (September 17, 2018); changes to emoji panel in Insider Preview are supported via Windows 10 App Essentials add-on (currently investigating panel opening issues in Insider Preview builds). 2018.4 (December 17, 2018) introduced a setting to read emojis across speech synthesizers.
  • JAWS: support has been added in 2019.1812.49 (December 17, 2018). At the moment JAWS does not announce skin tone modifiers correctly (I expect this to be rectified in 2019).
  • Other screen readers: please ask the vendor for more information.

 

Hope this helps.

Cheers,

Joseph


David Moore
 

Hi Joseph!

Thank you so very much for putting this text tutorial right in an email.

I vote for this definitely!

It really helped me to navigate and use the Emoticon’s better. With Facebook!

I love using this feature on social media!

Very powerful that JAWS is coming around to support this LOL!

Narrator is so great, especially in the insider builds.

I am so excited about all of this accessibility!

David Moore

 

                                                                                                                                                                                                                Sent from Mail for Windows 10

 

From: Joseph Lee
Sent: Tuesday, December 18, 2018 2:55 PM
To: win10@win10.groups.io
Subject: Re: [win10] Tutorial: all about emoji panel #BackstageTour #WinTenDev

 

Hi,
Emoji panel staying open: this can be configured via Settings/Devices/Typing/Advanced/Emoji Panel group under “Don’t close the panel automatically after an emoji has been entered”.

Cheers,

Joseph

 

From: win10@win10.groups.io <win10@win10.groups.io> On Behalf Of Tyler Wood
Sent: Tuesday, December 18, 2018 11:05 AM
To: win10@win10.groups.io
Subject: Re: [win10] Tutorial: all about emoji panel #BackstageTour #WinTenDev

 

Hi Joseph,

You said:

You can also ask the emoji panel to stay open in more recent Windows 10 releases (1809, for example).

 

How does this work? I also notice that when I type in a search result and repeatedly press backspace, this also closes the panel.

 

thanks for that explanation.

On 2018-12-18 11:48 a.m., Joseph Lee wrote:

Hi all,

 

Preface: this forum uses hashtags extensively. The #BackstageTour is mostly reserved for documentation on internals of Windows 10 and its features, and #WinTenDev denotes features under active development.

 

Now that all major screen readers support emoji panel (part of a suite of modern input features), coupled with latest blog post from NV Access on using emoji panel, I figured it is the right time to write up a tutorial (or two) describing what emoji panel is and how to use it. For those who’ve been using emoji panel for a while, you can ignore most of this.

 

Note: the reason for putting #WinTenDev hashtag will become clear in the end.

 

Before talking about how to use emoji panel with major screen readers (Narrator, JAWS, NVDA and others), it is helpful to learn what emoji is and how it came about, as well as related concepts of Unicode and emoticons. Only then the purpose behind emoji panel and how to navigate this screen should make sense. Throughout this tutorial, I’ll try my best to present this screen from screen reader agnostic viewpoint, although from time to time I may need to provide screen reader specific information.

 

Human history is filled with different means and ways of expressing ourselves. Beginning with pictorial characters used in Egypt, China and elsewhere thousands of years ago, different civilizations cultivated different writing systems and artifacts of writing such as Rosetta Stone (which enabled deciphering of Egyptian writing system), Latin letters, and recently, emoticons and emojis.

 

An emoticon (emotion icon) is a character-based representation of one’s emotions, typically employing punctuation characters. For example, a commonly encountered emoticon is “:>” (without quotes), which is commonly interpreted as a smiling face. Popularized in 1980’s, emoticons are used in instant messaging, emails, and sometimes, in ads.

 

In recent years, two distinct variations of emoticons has emerged, both developed in Japan: emoji and kaomoji. Emoji (meaning “picture character” in Japanese, which is sort of cognate with “emotion characters”) is an actual pictorial (picture) form of emoticons. Not only they can represent emotions, emojis are employed to represent other characters and situations such as events, people and jobs, religious symbols and so on. In contrast, kaomoji (meaning “facial characters” in Japanese) is same as emoticons (punctuation characters) except they are horizontal (as opposed to emoticons which require tilting your face to the left.

 

So how does emoji characters work internally? As they are pictures, they are defined in Unicode (pronounced “uni-code”), a database of characters from many languages, contexts, and representations. Each emoji character is represented internally as a set of two characters joined together (the internals of how that is possible is beyond the scope of this tutorial, but suffice to say that programmers have managed to condense Unicode representations into different encodings such as UTF-8 (Unicode Transformation Format, 8-bit), a very compact encoding used in many places).

 

But how about representing people with different skin colors? This question was answered with what’s called “skin tone modifier”, an additional character tag that represents different skin tones. By adding this tag on top of people emojis, different skin color representations become possible. We’ll see why skin tone modifier is important shortly.

 

So how do we browse through and select emojis in Windows 10? Although different Windows 10 releases (starting with Version 1709/Fall Creators Update) have different interfaces for emoji panel (a screen displaying many emojis and categories to choose from), the basic steps are:

 

  1. From anywhere where you wish to insert one or more emojis, press Windows+period (.) or semicolon (;.
  2. Use the arrow keys to browse through emojis (typically, most recently used emojis are shown; not anymore in Insider Preview builds at the moment; see notes).
  3. If the emoji you’re looking for isn’t a recently used item, you can switch between categories or search for it. In 1709 and 1803, you can press Tab or Shift+Tab to switch between emoji categories; in 1809 and later, pressing Tab will move you between emojis and categories (and in case of people emoji, between emojis, categories, and skin tone modifiers) and you need to press Enter to select a category (changed significantly in Insider Preview builds at the moment).
  4. If you don’t have time to go through different emoji categories (or in people category in 1809 and later, skin tone modifiers also), you can type the name of the emoji and the panel will present search results (or nothing).
  5. To enter emojis (either after browsing through categories and selecting it or searching for one), press Enter. To close the panel without inserting emojis, press Escape. You can also ask the emoji panel to stay open in more recent Windows 10 releases (1809, for example).

 

So Joseph, you’ve been mentioning that all this changes significantly in Insider Preview builds at the moment. Why? For two reasons, all tied to a major paradigm shift in emoji panel and its purpose:

 

Until Version 1809 (October 2018 Update), emoji panel is used strictly for dealing with emojis. In recent Insider Preview builds (18298 and higher), emoji panel is used not only to browse through emojis, but adds two new grand categories: kaomoji and symbols. Remember that kaomoji is similar to emoticons but shown horizontally; symbols, as the name implies, is a collection of all sorts of Unicode symbols (general punctuation, currency signs, and other symbols).

 

At the same time, the paradigm of “recent emojis first” is changing. Several months ago an Insider Preview build introduced ability for emoji panel to remember last shown emojis instead of last inserted emojis. For example, if you were browsing people emojis before closing the emoji panel, the panel will show people emojis the next time you open emoji panel (whereas in Version 1809 and earlier, most recently used emojis are displayed).

 

What happens if we combine both changes? This results in:

 

  1. When you press Tab or Shift+Tab, instead of just cycling between emojis and categories (and in case of people emojis, skin tone modifiers list), an additional control, dubbed “input category” is shown with three input possibilities: emoji, kaomoji, and symbols.
  2. To select a kaomoji or a symbol, go to input categories list and press Enter on the grand category you wish to browse.
  3. Just like emojis, kaomoji and symbols browser will remember the last category you browsed. For example, after selecting kaomoji input category and selectin “happy” group, and subsequently close and reopen the panel and select kaomoji, “happy” kaomoji symbols will be displayed.

 

All these changes comes down to this: emoji panel is no longer just used to browse emojis – it is now a screen to select additional symbols beyond the reach of your keyboard (hence the #WinTenDev hashtag).

 

Screen reader specific information:

 

  • Narrator: works with emoji panel (and the newly expanded input panel in Insider Preview) out of the box and provides best support among major screen readers.
  • NVDA: supported since July 2017 via Windows 10 App Essentials add-on, with native support introduced in 2018.3 (September 17, 2018); changes to emoji panel in Insider Preview are supported via Windows 10 App Essentials add-on (currently investigating panel opening issues in Insider Preview builds). 2018.4 (December 17, 2018) introduced a setting to read emojis across speech synthesizers.
  • JAWS: support has been added in 2019.1812.49 (December 17, 2018). At the moment JAWS does not announce skin tone modifiers correctly (I expect this to be rectified in 2019).
  • Other screen readers: please ask the vendor for more information.

 

Hope this helps.

Cheers,

Joseph

 


 

Hi,

Update: I found a potential fix for a problem where NVDA might not announce clipboard status or first selected emoji in recent Insider Preview builds. Once the fix is verified as working (along with looking for alternatives), I’ll publish it as part of the next version of Windows 10 App Essentials add-on, and eventually to be made available natively in NVDA in 2019 (I’ll describe the internals of this fix and alternatives on Insiders subgroup, as the fix isn’t applicable in Version 1809 stable release).

Cheers,

Joseph

 

From: win10@win10.groups.io <win10@win10.groups.io> On Behalf Of David Moore
Sent: Tuesday, December 18, 2018 4:03 PM
To: win10@win10.groups.io
Subject: Re: [win10] Tutorial: all about emoji panel #BackstageTour #WinTenDev

 

Hi Joseph!

Thank you so very much for putting this text tutorial right in an email.

I vote for this definitely!

It really helped me to navigate and use the Emoticon’s better. With Facebook!

I love using this feature on social media!

Very powerful that JAWS is coming around to support this LOL!

Narrator is so great, especially in the insider builds.

I am so excited about all of this accessibility!

David Moore

 

                                                                                                                                                                                                                Sent from Mail for Windows 10

 

From: Joseph Lee
Sent: Tuesday, December 18, 2018 2:55 PM
To: win10@win10.groups.io
Subject: Re: [win10] Tutorial: all about emoji panel #BackstageTour #WinTenDev

 

Hi,
Emoji panel staying open: this can be configured via Settings/Devices/Typing/Advanced/Emoji Panel group under “Don’t close the panel automatically after an emoji has been entered”.

Cheers,

Joseph

 

From: win10@win10.groups.io <win10@win10.groups.io> On Behalf Of Tyler Wood
Sent: Tuesday, December 18, 2018 11:05 AM
To: win10@win10.groups.io
Subject: Re: [win10] Tutorial: all about emoji panel #BackstageTour #WinTenDev

 

Hi Joseph,

You said:

You can also ask the emoji panel to stay open in more recent Windows 10 releases (1809, for example).

 

How does this work? I also notice that when I type in a search result and repeatedly press backspace, this also closes the panel.

 

thanks for that explanation.

On 2018-12-18 11:48 a.m., Joseph Lee wrote:

Hi all,

 

Preface: this forum uses hashtags extensively. The #BackstageTour is mostly reserved for documentation on internals of Windows 10 and its features, and #WinTenDev denotes features under active development.

 

Now that all major screen readers support emoji panel (part of a suite of modern input features), coupled with latest blog post from NV Access on using emoji panel, I figured it is the right time to write up a tutorial (or two) describing what emoji panel is and how to use it. For those who’ve been using emoji panel for a while, you can ignore most of this.

 

Note: the reason for putting #WinTenDev hashtag will become clear in the end.

 

Before talking about how to use emoji panel with major screen readers (Narrator, JAWS, NVDA and others), it is helpful to learn what emoji is and how it came about, as well as related concepts of Unicode and emoticons. Only then the purpose behind emoji panel and how to navigate this screen should make sense. Throughout this tutorial, I’ll try my best to present this screen from screen reader agnostic viewpoint, although from time to time I may need to provide screen reader specific information.

 

Human history is filled with different means and ways of expressing ourselves. Beginning with pictorial characters used in Egypt, China and elsewhere thousands of years ago, different civilizations cultivated different writing systems and artifacts of writing such as Rosetta Stone (which enabled deciphering of Egyptian writing system), Latin letters, and recently, emoticons and emojis.

 

An emoticon (emotion icon) is a character-based representation of one’s emotions, typically employing punctuation characters. For example, a commonly encountered emoticon is “:>” (without quotes), which is commonly interpreted as a smiling face. Popularized in 1980’s, emoticons are used in instant messaging, emails, and sometimes, in ads.

 

In recent years, two distinct variations of emoticons has emerged, both developed in Japan: emoji and kaomoji. Emoji (meaning “picture character” in Japanese, which is sort of cognate with “emotion characters”) is an actual pictorial (picture) form of emoticons. Not only they can represent emotions, emojis are employed to represent other characters and situations such as events, people and jobs, religious symbols and so on. In contrast, kaomoji (meaning “facial characters” in Japanese) is same as emoticons (punctuation characters) except they are horizontal (as opposed to emoticons which require tilting your face to the left.

 

So how does emoji characters work internally? As they are pictures, they are defined in Unicode (pronounced “uni-code”), a database of characters from many languages, contexts, and representations. Each emoji character is represented internally as a set of two characters joined together (the internals of how that is possible is beyond the scope of this tutorial, but suffice to say that programmers have managed to condense Unicode representations into different encodings such as UTF-8 (Unicode Transformation Format, 8-bit), a very compact encoding used in many places).

 

But how about representing people with different skin colors? This question was answered with what’s called “skin tone modifier”, an additional character tag that represents different skin tones. By adding this tag on top of people emojis, different skin color representations become possible. We’ll see why skin tone modifier is important shortly.

 

So how do we browse through and select emojis in Windows 10? Although different Windows 10 releases (starting with Version 1709/Fall Creators Update) have different interfaces for emoji panel (a screen displaying many emojis and categories to choose from), the basic steps are:

 

  1. From anywhere where you wish to insert one or more emojis, press Windows+period (.) or semicolon (;.
  2. Use the arrow keys to browse through emojis (typically, most recently used emojis are shown; not anymore in Insider Preview builds at the moment; see notes).
  3. If the emoji you’re looking for isn’t a recently used item, you can switch between categories or search for it. In 1709 and 1803, you can press Tab or Shift+Tab to switch between emoji categories; in 1809 and later, pressing Tab will move you between emojis and categories (and in case of people emoji, between emojis, categories, and skin tone modifiers) and you need to press Enter to select a category (changed significantly in Insider Preview builds at the moment).
  4. If you don’t have time to go through different emoji categories (or in people category in 1809 and later, skin tone modifiers also), you can type the name of the emoji and the panel will present search results (or nothing).
  5. To enter emojis (either after browsing through categories and selecting it or searching for one), press Enter. To close the panel without inserting emojis, press Escape. You can also ask the emoji panel to stay open in more recent Windows 10 releases (1809, for example).

 

So Joseph, you’ve been mentioning that all this changes significantly in Insider Preview builds at the moment. Why? For two reasons, all tied to a major paradigm shift in emoji panel and its purpose:

 

Until Version 1809 (October 2018 Update), emoji panel is used strictly for dealing with emojis. In recent Insider Preview builds (18298 and higher), emoji panel is used not only to browse through emojis, but adds two new grand categories: kaomoji and symbols. Remember that kaomoji is similar to emoticons but shown horizontally; symbols, as the name implies, is a collection of all sorts of Unicode symbols (general punctuation, currency signs, and other symbols).

 

At the same time, the paradigm of “recent emojis first” is changing. Several months ago an Insider Preview build introduced ability for emoji panel to remember last shown emojis instead of last inserted emojis. For example, if you were browsing people emojis before closing the emoji panel, the panel will show people emojis the next time you open emoji panel (whereas in Version 1809 and earlier, most recently used emojis are displayed).

 

What happens if we combine both changes? This results in:

 

  1. When you press Tab or Shift+Tab, instead of just cycling between emojis and categories (and in case of people emojis, skin tone modifiers list), an additional control, dubbed “input category” is shown with three input possibilities: emoji, kaomoji, and symbols.
  2. To select a kaomoji or a symbol, go to input categories list and press Enter on the grand category you wish to browse.
  3. Just like emojis, kaomoji and symbols browser will remember the last category you browsed. For example, after selecting kaomoji input category and selectin “happy” group, and subsequently close and reopen the panel and select kaomoji, “happy” kaomoji symbols will be displayed.

 

All these changes comes down to this: emoji panel is no longer just used to browse emojis – it is now a screen to select additional symbols beyond the reach of your keyboard (hence the #WinTenDev hashtag).

 

Screen reader specific information:

 

  • Narrator: works with emoji panel (and the newly expanded input panel in Insider Preview) out of the box and provides best support among major screen readers.
  • NVDA: supported since July 2017 via Windows 10 App Essentials add-on, with native support introduced in 2018.3 (September 17, 2018); changes to emoji panel in Insider Preview are supported via Windows 10 App Essentials add-on (currently investigating panel opening issues in Insider Preview builds). 2018.4 (December 17, 2018) introduced a setting to read emojis across speech synthesizers.
  • JAWS: support has been added in 2019.1812.49 (December 17, 2018). At the moment JAWS does not announce skin tone modifiers correctly (I expect this to be rectified in 2019).
  • Other screen readers: please ask the vendor for more information.

 

Hope this helps.

Cheers,

Joseph