The Incredible Accessible Modal Window, Version 3

I’ve made a few minor updates to the Incredible Accessible Modal Window.

  • removed the role=”document” from the contents of the window. This was originally inserted to deal with the way NVDA interacted with role=”dialog”, but that issue has since been resolved in NVDA.
  • made the close button an actual button instead of a link. I should have done this a long time ago and don’t know why I didn’t do it sooner.

View the Incredible Accessible Modal Window, version 3.

Previous versions of the Incredible Accessible Modal Window

Note: This is edited from the original post to reflect an error in the first bullet point where it originally said role=”dialog” instead of role=”document”.


Winners of the 2014 NC State Global Accessibility Awareness Day Website Challenge

Congratulations to all of the developers who participated in the 2014 NC State Global Accessibility Awareness Day Website Challenge. Together we corrected 905,082 accessibility errors!

For each of the size categories, the Web sites that corrected the largest percentage of their errors are

  • Large Sites (1000+ pages)
    • NCSU Libraries (84% of errors corrected)
  • Medium Sites (100-999 pages)
    • African American Cultural Center (66% of errors corrected)
  • Small Sites (1-99 pages)
    • Internal Audit (25% of errors corrected)

For the ARIA Landmark portion of the challenge we had 21 sites add the main landmark to at least 80% of their pages and 23 sites add the navigation landmark to at least 80% of their pages.

Just a  note, there are actually a lot more sites on campus using those two landmarks. Because of the way the scan was run, only those sites which requested a rescan during the contest were counted in these totals.

Skip Links Shouldn’t Be This Hard

I’ve been creating skip-to links for years, like “Skip to Main Content” or “Skip Navigation”, but I recently ran into a problem with them in HTML5 pages, notably in IE with JAWS. In this one particular case they simply were not working. I would click on the skip link and I wouldn’t go anywhere – I was still at the top of the page.

<a href=”#main”>Skip to Main Content</a>
<div>Navigation goes here</div>
<div id=”main”>
  <p>Main content goes here</p>
  <a href=”#”>a link in the main body</a>

It turns out Chrome has this problem too.

So I thought I discovered a significant bug with skip links, to then discover I didn’t really discover it at all. In fact, this issue appears to have been around since about 2000 in some form starting with Internet Explorer 5, and it affects all users in IE, not just screen reader users. Sometimes skip links would work and sometimes they wouldn’t. I had noticed this in testing for quite some time but assumed I had just messed up in testing. I mean, looking at the code it’s easy enough to verify that the coding is correct for a skip link and it’s pretty straight forward functionality, so what could go wrong?

The real catch here was the intermittent nature of the problem. IE didn’t consistently fail – it just failed sometimes. To make a real long story short, it turns out that IE handles targets of internal links differently depending on if certain elements have explicit layout properties set, like certain CSS properties. If those properties were not set on the target, when you tried to target the destination with an href, the link would fail. The address bar would update, but the focus in the page would not go to the target. If the properties were set, the link would work.

If you want to read more about the details here are some readings.

Chrome’s behavior is totaly unrelated to these reasons, but the solution proposed below solves the problem for both IE and Chrome.

The Solution: tabindex="-1"

If you read through the posts above there are various solutions offered from JavaScript patches to CSS hacks to additional HTML attributes. The one I have settled on is simply assigning tabindex=”-1” to the target.

<a href=”#main”>Skip to Main Content</a>
<div>Navigation goes here</div>
<div id=”main” tabindex=”-1”>
  <p>Main content goes here</p>
  <a href=”#”>a link in the main body</a>

Or if you use the newer HTML5 elements

<a href=”#main”>Skip to Main Content</a>
<nav>Navigation goes here</nav>
<main id=”main” tabindex=”-1”>
  <p>Main content goes here</p>
  <a href=”#”>a link in the main body</a>

Once you do this everything works beautifully in Firefox, Chrome, Internet Explorer and Safari.

But this won’t work

I did some additional testing to see if the target of the skip link was already a focusable item, like a link with an ID, would the link would work correctly.

<a href=”#main”>Skip to Main Content</a>
<div>Navigation goes here</div>
  <a href=”#” id=”main”>a link in the main body</a>
  <p>Main content goes here</p>

In this case, Chrome will work, but neither IE nor Firefox will work.

The Pain of Accessible PDFs from MS Word on Mac – Test Results

I get asked this question every so often, so I did some tests to see what the current landscape is in terms of creating accessible PDFs from MS Word on Mac. I was primarily looking at the workflow for adding headings and alternative text into Word and having those features show up in a PDF generated from Word. There are other accessibility issues to contend with as well, but for this evaluation I was looking at these two very important aspects of PDF accessibility which have a high occurrence.

Anyone who has worked in this space already knows that PDF accessibility support from MS Word on Mac is non-existent, however, can we improve things by introducing LibreOffice or OpenOffice into the workflow? First, I’m going to assume that most Mac users who are already using MS Word are not going to abandon it and start using LibreOffice or OpenOffice as their principal authoring tool. However, we might be able to convince these users to at least generate the PDF from one of these two products, at least for accessibility considerations.

So what did I test?

  • Authoring a document in MS Word 2011 on Mac, using headings and providing text in both the title and description fields
  • Converting it to a PDF using LibreOffice for Mac
  • Converting it to a PDF using OpenOffice 4.0.1 for Mac

Here is what I found.


LibreOffice recognized all of the headings and image titles and descriptions entered into Word. When exporting it as a tagged PDF, the headings are preserved, but only the image titles are passed through as the alternate text for the images


OpenOffice recognized the headings but did not import the image titles or descriptions. Therefore, when you create a PDF from OpenOffice, none of the images have alternative text. If you manually enter image titles and descriptions directly in OpenOffice, then the titles are passed through to the PDF alternative text.

The Word for Windows Conundrum

If that was the end of the story then we could tell users to simply use LibreOffice to convert their MS Word files to accessible PDFs on Mac. The problem is if you take that same Word document to Word 2013 for Windows and create an accessible PDF straight from Word 2013, it’s the image descriptions that get passed through to the PDF as the alternative text. This might not be a problem if you aren’t sharing documents between Mac and Windows users who both might be creating PDFs from it. However, I would really like to be able to give one piece of advice to all of my MS Word users.


Here is the best advice I can give MS Word for Mac users. If you are the only person who will be generating PDFs from a Word file and you know the PDF will always be generated from a Mac…

  1. enter the alternative text as the image title
  2. open your Word document in LibreOffice
  3. export a tagged PDF from LibreOffice (tagged export should be selected by default)

If this file will be shared between Windows and Mac users, I would decide on a standard way of denoting your alternative text – either as a title or a description, and then based on that, decide which platform you will use to generate the PDF.

  • alternative text in the description = Windows
  • alternative text in the title = Mac, using LibreOffice

I hesitate to recommend putting the alternative text in both fields because that just seems like bad form and seems like it might cause problems in the future. It would also be cumbersome for someone with a screen reader actually editing or reading the document in MS Word itself.

Again, this analysis only looked at heading and alternative text preservation in the Word to PDF workflow. You might have to consider other accessibility issues too like tables, document reading order for floating text boxes, and document language. Ensuring heading and alternative text are preserved just saves a lot of work in any additional accessibility retrofitting that might have to occur in Adobe Acrobat.

(EDIT) Testing Files


2014 NC State Global Accessibility Awareness Day Website Challenge

The University IT Accessibility Office is once again sponsoring the NC State Global Accessibility Awareness Day Website Challenge to encourage campus website owners and designers to make accessibility improvements to their websites. Global Accessibility Awareness Day is held annually “to get people talking, thinking and learning about digital accessibility and users with different disabilities.”

The contest, which runs April 15 to May 14, includes two categories:

  • Sites that improve their overall accessibility by the greatest percentage.
  • Sites that have the ARIA roles “main” and “navigation” added to at least 80 percent of their pages.

You can view the current leader boards and see how you stack up against the competition. The winners will be announced on Global Accessibility Awareness Day, which is May 15. Sites will be considered in three size categories for determining the largest percentage of accessibility errors corrected.

  • 1000+ Pages
  • 100-999 Pages
  • 1-99 Pages

You can learn more about adding ARIA landmarks to Web pages. Also, you can come to a number of workshops and training sessions over the next month to learn how to make your Websites more accessible.

Incredible Accessible Modal Window, Version 2

UPDATE: Read about version 3 of this demonstration.

Just take me to the demo of the Incredible Accessible Modal Window, Version 2.

Rich Caloggero at MIT and I were talking recently about screen reader support in the original Incredible Accessible Modal Window and he pointed out to me that different screen readers handle virtual cursor support differently in the modal window. This sent me further down the rabbit hole of screen reader support with ARIA and what exactly is going on.

The Situation

I hesitate to call this the “problem” because I’m not sure what the real problem is yet. I’m sure it is some combination of differing interpretations of specifications, technological limitations of different screen readers, design decisions, the needs of the user, and bugs. The situation is that all screen readers, except for NVDA, can use their virtual cursor to navigate a role=”dialog”.

The root of the situation is that a role=”dialog” should be treated as an application window. This fundamentally changes the way a screen reader user interacts with an object because the default way the user is to now interact with the application window is by using the application’s defined navigation methods. In other words, the screen reader user is not supposed to use their virtual cursor.

It is clear from the spec that when a screen reader encounters an object with an application-type role, it should stop capturing keyboard events and let them pass to the application. This in essence turns off the virtual cursor for JAWS and NVDA. What is not clear is if it is permissible for the user to optionally re-enable their virtual cursor within an application. JAWS says yes and NVDA says no. (Just a note, JAWS actually requires the user to manually enable application mode instead of doing it for them automatically.)

This has real world implications. Typically for a role=”dialog” the user would use their Tab key to navigate between focusable elements and read the page that way. But what if there is text within the modal dialog that is not associated with a focusable element in the modal dialog?

The spec says that “if coded in an accessible manner, all text will be semantically associated with focusable elements.” I think this is easily achievable in many situations, however, I question if it is practical in all situations. In my experience a lot of content is being crammed into some modal dialogs, sometimes more content than can always be neatly associated with focusable elements. In theory, with enough tabindex=”0” and aria-labelledby attributes you could associate everything with a focusable element, but I wonder if this would get too unwieldy in some situations.

There is always the question of if developers should be cramming so much information into modal dialogs, but that’s another discussion for another day. I’m simply trying to deal with the fact that people are putting so much content in there.

A further real world implication of the ability or inability to use the virtual cursor is if you allow users to use their virtual cursor in some situations in an application region, are there situations where that could end up hurting the user? For example, it’s not hard for me to imagine a modal dialog where it would be useful to allow the user the ability to navigate with their virtual cursor, however, if a screen reader user is interacting with Google Docs, which is in essence one large role=”application”, the results can be disastrous. Are there certain application contexts where we would want the user to be able to enable their virtual cursor and other contexts where we would want to prevent it? That just made things a lot more complicated.

Just to complicate things more, VoiceOver and ChromeVox don’t really have a concept, to my knowledge, of turning a virtual cursor on and off. That means they can browse the contents of the role=”dialog” any way they want, and there is not much I as a developer can do about it.

A Partial Solution?

One of the things Rich and I learned in this adventure is if you include a role=”document” inside of the role=”dialog”, then NVDA allows you to use the virtual cursor. This now gives all screen reader users the ability to fully navigate all of the contents.

Is this a good thing? Based on the reality of how people are actually implementing modal dialogs, I think it is. Some modal dialogs are in essence becoming miniature versions of Web pages, not just simple forms or messages. Given the alternative of having to programmatically shoehorn every piece of text into a relationship with a focusable element, I think this is a good option for some pages.

I still think that people should revisit the overall usability of their application which might require such complex modal dialogs in the first place. There are probably better ways to design the user interactions.

So is NVDA wrong in their implementation of not allowing virtual browsing in an application? I don’t think so. That is the intention behind the application region. Is JAWS wrong for allowing the use of the virtual cursor in an application? Probably not, because it is always good to give screen reader users the option of trying to save themselves from bad coding and using the virtual cursor might be the only way they can do that. However, my guess is that using the virtual cursor in something designed to be an application will usually lead to more confusion than assistance.

VoiceOver Improvements

One additional improvement – in the original version of the Incredible Accessible Modal Window there was a shim in place for VoiceOver users so that the aria-labelledby attribute would be automatically announced. VoiceOver in OS X 10.9 fixes this problem so the shim is not needed any more.

2013 NC State World Usability Day Website Challenge Results

Congratulations to all of the NC State Website owners who participated in NC State’s 2013 World Usability Day Website Challenge. NC State users can view the detailed results of the challenge. Website owners competed in two areas.

  1. Which sites, in their respective size categories, could correct the largest percentage of their accessibility errors in the month leading up to World Usability Day.
  2. Which sites could include a skip to main content link on at least 80% of their pages.

Accessibility Errors Corrected

Together we corrected a total of 416,196 accessibility errors for this challenge. Since the Accessibility Scan started in March of 2013, we have collectively corrected 1,188,908 accessibility errors.

Skip to Main Content Links

During this challenge we added 2,661 new skip to main content links across our pages, with 128 of our sites now having skip to main content links on at least 80% of their pages.

Congratulations again to all of the NC State Website owners!

Color Contrast Analyzer for Chrome: Text in Images, Gradients, PDFs and More

There are several good color contrast analysis tools available. I’ve come to heavily depend upon some of them for analyzing text, but they all lack some functionality that I find I’m needing. I would like to be able to

  • analyze text within images, and
  • analyze text over top of background images or gradients.

To solve these problems I’ve developed a Chrome extension called the Color Contrast Analyzer for Chrome and it is now free to download in the Chrome Store. The tool analyzes screenshots of Web pages to determine, pixel-by-pixel, where the color contrast changes enough to pass a given WCAG 2 conformance level. You can choose to analyze a portion of a page, the visible portion of the page, or the entire webpage. The end result is a mask that shows outlines of all of the elements that pass the conformance level. This isn’t a tool to replace the functionality of all of the other color contrast tools I that I use – it is to compliment them.

Here is an example of a page that has a set of menus that does not have enough contrast along with the results the Color Contrast Analyzer produces.

screenshot of a web page where the menus do not have enough contrast but the rest of the page doesscreenshot of the results showing outlines around all of the items that have enough contrast but no outline around the menus

Because the menus are not outlined, that means they don’t have enough contrast to meet the given conformance level.

Because this tool examines a page pixel-by-pixel, it can analyze text over top of background images. Here is an example of some text placed over an image along with the results, showing the text does have sufficient contrast over top of the image.

screenshot of text written over top of an image

screenshot of the results of the analysis showing outlines of the text that meets the contrast requirements

It also works for text over gradients. This is an example of where the gradient eventually transitions to a color that does not provide enough contrast.
the text get help written in white over a color gradient that transitions from light gray to dark grayscreenshot of the analysis showing that the lower half of the text get help meets contrast requirements but the top half does not. The bottom half of the text is outlined but the top half is not.

In addition to analyzing webpages, it can analyze almost any file that Chrome can open from your local computer. This includes JPEG, PNG, and PDF files. With PDF files you will be limited to analyzing the entire visible portion of the document as opposed to using the other selection tools.

It is important to remember that the WCAG 2 color contrast ratios only apply to text. Additionally, there are certain types of text that WCAG 2 makes exemptions for, like logos, inactive form elements, purely decorative text, or incidental text in photos. For not-text items like borders and other graphical elements, while these ratios can be helpful in determining if items have enough contrast, the WCAG 2 ratios do not address these types of elements.

You can download the extension and read more instructions about using it. You can also watch the YouTube video demonstrating it.

For the record, here are the other color contrast tools I depend upon.

NC State Web Accessibility Challenge on World Usability Day

NC State University’s Office of IT Accessibility is sponsoring a Web Site Accessibility Challenge in conjunction with World Usability Day. World Usability Day brings people together “to ensure that the services and products important to life are easier to access and simpler to use.” In order to encourage Web site owners to help make our university Web pages more accessible, there are two challenges.

  1. To address general usability, which sites can correct the largest percentage of their accessibility errors.
  2. To address users who cannot use a mouse, which sites can add a specific accessibility feature to at least 80% of their Web pages – the ability to allow users to skip to the main content of a page using only a keyboard.

To learn more about your Web site’s accessibility and to see tutorials on how to improve its accessibility, view your Web Site Accessibility Scan.

To learn more about adding skip to main content links to a page, view the Skip To Main Content Link Tutorial in the Web Accessibility Handbook.

The contest winners will be determined by the last rescan submitted by 11:59PM on November 13 and the winners will be announced on November 14 on World Usability Day.