1. Jeremy Foster | @codefoster Michael Palermo | @palermo4
07 | Accessibility and Globalization
Jeremy Foster
Michael Palermo

2. Module Overview
Who to consider
ARIA
Multiple languages

3. Please leave this area blank to allow for picture in picture recording
Accessibility
“The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability.”

4. Something like 80% of websites and apps are not accessible.

5. Who to Consider

6. Who to Consider Visual impairment: blind, low-vision
Hearing impairment: deaf, hard-of-hearing
Mobility impairment: restricted use of hands and arms
Cognitive and learning impairments
Low literacy or fluency
No broadband access
Older browsers
New users

7. ARIA

8. ARIA
WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) by W3C
Browser compatibility

9. Semantic Content
<ul id="navigation"> <li><a href="/">Home</a></li> <li><a href="/About/">About</a></li> ... </ul>

10. Images
<img src="registernow.png" alt="Register Now!"/> <img src="businessman.png" alt=""/>

11. Roles
<ul role="navigation"> <li><a href="/">Home</a></li> <li><a href="/About/">About</a></li> ... </ul>

12. Tab Index
<ul tabindex="0"> <li tabindex="-1">Item 1 <ul> <li tabindex="-1">Item 1.1</li> <li tabindex="-1">Item 1.2</li> </ul> </li> ...

13. Live Regions
<p aria-live="polite"> Inform the user that the content in this region has changed once they are finished doing whatever they're doing. <p aria-live="assertive"> Inform the user that the content in this region has changed right away. <p aria-live="off"> Don't inform the user when the content in this region has changed.

14. Adding Multiple Languages

15. Adding Multiple Languages
Add /strings/{culture}/resources.resjson files
Add to pages…
processed: function (element) {
return WinJS.Resources.processAll(element); }
Add to HTML…
<span data-win-res="{textContent: '/Errors/AlreadyRegistered'}"></span>
or to JavaScript…
WinJS.Resources.getString('/Errors/AlreadyRegistered');

16. Using MAT Install MAT (Tools | Extensions and Updates…)
Install and prioritize Pseudo language
Enable MAT for your project
Generate machine translations for pseudo
Right click project | Add translation language…

17. Installing and Using MAT in Visual Studio

18. Summary
Who to consider
ARIA
Multiple languages