Notes on accessibility of Microsoft.com’s new home page
home page accessibility – updated 05/02/13
language – fixed 06/10/12
The 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”
search form – not fixed 05/02/13
The 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.
Use of ARIA roles to identify navigation links as a menu – not fixed 05/02/13
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 05/02/13
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>
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).
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.