Scroll

Dynamically assign HTML language tags to your surveys for better screen reader compatibility

Dynamically assign HTML language tags to your surveys for better screen reader compatibility

Follow
Summary This article demonstrates how to design your surveys for better screen reader compatibility for respondents who may be blind
Applies to Askia Design
Written for Survey Programmers, Scripters, Web Designers
Keywords HTML ; TAG ; LANG ; LANGUAGE ; TTS ; TEXT-TO-SPEECH ; BLIND ; SCREEN READER ;

 

 

If you have blind respondents taking your surveys, this article may be helpful to you if you'd like to design your surveys for better screen reader compatibility.

Blind respondents will typically use some sort of "Text-To-Speech" or "Screen Reader" software that allows them the freedom to have the text on the screen read aloud to them, and allows them to dictate text with their voice.

This type of software requires that the HTML content tags be properly tagged with the correct language. Since every language has its own pronunciation rules, the screen reader needs to know which language it should “speak.” Web pages specify document language with a "lang" attribute on the <html> tag, in order to encompass the entire document. 

If you're interested in reading more about the different best-practices for designing a web page that caters to the visually impaired, please read this article: https://webaim.org/techniques/screenreader/

In this article, we'll just show how to dynamically referencing different language tags in the < html > tag.

 

Step 1:

Create your "Select Language" variable. This can be an import from sample, or a visible variable shown to the respondent. However you code it, it should also have accompanying routing that sets the language to that specified language.

In my example, I have three languages added to my survey (English, French, and Spanish), along with three language responses a respondent can choose from:

SelectLanguage.png

 

Step 2:

Create a hidden "SelectedLanguage" variable that includes the following responses with full < html > tag code:

SelectedLanguage.png

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<html lang="fr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<html lang="es" xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">

All language codes can be found here: https://www.w3schools.com/tags/ref_language_codes.asp

 

Step 3:

After the language is selected, I'm running one AskiaScript (for simplicity - no need to have multiple "set value" routings when one AskiaScript routing can do the same thing) that allows me to set the interview language AND sets a value to my hidden "SelectedLanguage" variable:

SetSelectedLanguage.png

If SelectLanguage = 1 Then
Interview.SetLanguage("ENG")
SelectedLanguage.SetValue(1)
ElseIf SelectLanguage = 2 Then
Interview.SetLanguage("FRA")
SelectedLanguage.SetValue(2)
ElseIf SelectLanguage = 3 Then
Interview.SetLanguage("ESM")
SelectedLanguage.SetValue(3)
EndIf

 

Step 4:

Now that you have the routing enabled to set a value to your hidden "SelectedLanguage" variable, the last thing you'll need to do is pipe in that value into the "HTML Tag" section of your "Internet Options":

Design > Options > Internet Options > Header/Footer > HTML Tag:

HTMLTagLanguage.png

!!SelectedLanguage.Answers.Caption!!

 

Conclusion:

After the language variable has been answered, your survey pages should now be encoded to whatever language the respondent selected, which should let their TTS/Screen Reader software speak back the text in the correct language and pronunciation:

FR_HTMLTag.pngES_HTMLTag.pngEN_HMTLTag.png

 

You can also do this to the < body > tag, and any other < p > paragraph or < span > tag within the survey. I've found that if you at least specify the language in the < html > tag, most screen reader software will automatically read everything else in that language.

 

Note:

This method does not currently work with any of our ADP (Matter, One, Chroma) controls, as we do not currently have a string section within the controls that allows you to manipulate your own HTML tag.

This only works with the "Legacy" Internet templates for now.

Attached is a working 5.4.9 QEX example.

Have more questions? Submit a request

Comments