Jeremy Foster | @codefoster Michael Palermo | @palermo4 07 | Accessibility and Globalization Jeremy Foster | @codefoster Michael Palermo | @palermo4
Module Overview Who to consider ARIA Multiple languages
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.”
Something like 80% of websites and apps are not accessible.
Who to Consider
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
ARIA
ARIA WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) by W3C Browser compatibility
Semantic Content <ul id="navigation"> <li><a href="/">Home</a></li> <li><a href="/About/">About</a></li> ... </ul>
Images <img src="registernow.png" alt="Register Now!"/> <img src="businessman.png" alt=""/>
Roles <ul role="navigation"> <li><a href="/">Home</a></li> <li><a href="/About/">About</a></li> ... </ul>
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> ...
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.
Adding Multiple Languages
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');
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…
Installing and Using MAT in Visual Studio
Summary Who to consider ARIA Multiple languages