Microsoft.com has a new home page. It uses HTML5 and ARIA. I have done a quick review of their usage. There are a few issues…
![Microsoft]()
home page accessibility
home page accessibilitylanguage – ![]()
fixed 06/10/12
fixed 06/10/12The UK home page has a lang=”de” on the HTML element. This results in the page being pronounced using the German language setting in JAWS and NVDA.
Suggest they need to use the correct lang value: lang=”en”
<html lang="en">
search form – ![]()
not fixed 06/10/12
not fixed 06/10/12The search form has a pseudo list box which displays the search choices and seach term matches.
It’s keyboard accessible via up/down arrow keys, but the presence of the list is not exposed to assistive technology, users will have no idea it is there.
Suggest, using ARIA to provide correct role, name, state and property information.
An example of a more usable autocomplete widget.
Search dropdown list with search term and search scope options
Use of ARIA roles to identify navigation links as a menu – ![]()
not fixed 06/10/12
Microsoft navigation links 'security' menu
Code snippet from the navgation links menu:
<ul role="menu" bi:parenttitle="t1"> <li role="menuitem"> <a href="http://www.microsoft.com/security/default.aspx" bi:index="0" bi:cpid="hpMenu">Security Home</a></li> ... </ul>
First thought is, even if marked up correctly, it would be better not to identify the navigation links menu as a menu with menu items as they are a list of links in a web site not a menu in a web application. Adobe have also recently implemented a new navigation menu, it uses a hybrid keyboard interaction approach: tab and up/down arrow with minimal, but effective use of ARIA to indicate the presence of sub menus to AT users and interaction hints for keyboard only users. It is suggested that Adobe’s approach is more fitting to the context in which it is used.
The Microsoft menu bar does not work as it should. If interactive content is marked up as a menu bar with menus and menu items, its interaction behaviour should be that of a menu bar, it is not. The role information provided via ARIA indicates an expected and defined set of keyboard interactions. The ‘menu bar’ on the Microsoft home page has none of these.
If you test it with a screen reader, you will find a few issues…
Example of a menu bar widget that is suitable for a web application setting (in an embedded HTML editor, for example) and works as it should.
Suggest implementing a navigation links menu that provides appropriate semantics and works for keyboard and AT users.
ARIA landmark use – ![]()
not fixed 06/10/12
The Microsoft home page, makes use of the ARIA search, navigation and contentinfo landmark roles, but for some unknown reason does not provide a role=main…
Suggest adding role=main.
<div class="grid-container" role="main"> ... </div>
HTML5 use
Uses the HTML5 doctype, section, header and footer elements and input type=search. These have minimal effect on accessibility as support for these elements is somewhat limited. The positive effect of using the HTML5 doctype is that when validating the HTML code ARIA use is not flagged as an error (maybe in this case it should be).
Conclusion
Surprised that user testing was not conducted, or if it was… Come on Microsoft you can do better. Note that this is no way an exhaustive list of issues.