Dynamically assign HTML language tags to your surveys for better screen reader compatibility
| Summary | This article demonstrates how to design your surveys for better screen reader compatibility for respondents who may be visually impaired |
| Applies to | AskiaDesign |
| Written for | Survey Programmers, Scripters, Web Designers |
| Keywords | HTML; TAG; LANG; LANGUAGE; TTS; TEXT-TO-SPEECH; BLIND; SCREEN READER; |
- https://www.w3schools.com/tags/att_lang.asp
- https://www.freedomscientific.com/products/software/jaws/
If you have visually impaired respondents taking your surveys, this article may be helpful to you, if you'd like to design your surveys for better screen reader compatibility.
Visually impaired 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:
Step 2
Create a hidden "SelectedLanguage" variable that includes the following responses with full < html > tag code:
<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:
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:
!!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:
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 ADPs (Matter, One, Chroma), 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.