Mike specifically asked about the Section 508 requirement 1194.21(c) “A well-defined on-screen indication of the current focus shall be provided that moves among interactive interface elements as the input focus changes. The focus shall be programmatically exposed so that assistive technology can track focus and focus changes.”

Mike wanted to apply this subpart to a log in page where he felt that focus should be forced to one of the input controls for the log in information. His colleague was arguing that it was not necessary to do this to conform to the Section 508 requirements.

What do you think? I have included my answer to Mike Jr below for your review as it contains (in my opinion) a lot of food for thought.

[Start of my reply to Mike Jr]
Hi Mike Jr,

First off 1194.21 is the subpart of Section 508 that is dealing with Software Applications and Operating Systems. So “technically” it would not apply to Web-based intranet and Internet information and applications that are only HTML based.

That being said, the common approach today is to apply the Section 508 requirements across the board to whatever you are evaluating for conformance. This is because Section 508 is outdated, so for those standards to be beneficial in today’s world the blanket approach of applying to them to everything, regardless of category, is often employed.

As the Section 508 refresh in the process of being adopted it appears that Section 508 will most likely use, or closely follow, the WCAG 2.0 Level A, AA guidelines. So if you are looking to conform with the future refreshed requirements as well, shoot for the level AA guidelines of WCAG 2.0.

In answer your question about 1194.21 (c), that requirement is focusing on ensuring that the current focus is visible to the eye as well as visible to an assistive technology. So you must be able to discern where the current focus is visually as well as programmatically. This is true even if you are only applying this requirement to a web page, as you stated is the case.

In your example of a log in page loaded in a browser window it is not necessary to set the focus to one of the input controls on page load (initially opened) for conformance to Section 508, as long as the user can tab to those controls and visually discern the current focus and as long as that focus is also identifiable programmatically for the AT software. It doesn’t hurt to add that type of functionality as it does improve usability for everyone, but it not required for accessibility. See the guide to “Guide to the Standards” for Section 508, 1194.21 (c) at this link: http://www.access-board.gov/sec508/guide/1194.21.htm#(c))

Additionally you can refer to the WCAG 2.0 level AA 2.4.7 guideline on understanding making focus visible. That link is: http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html.

To be clear, if we were talking about a software application window and not an Internet browser window then making sure a control had default focus when that application window is loaded would be necessary. You will notice that in a browser window if the web content does not have focus by default at least the one control that is part of the browser does have focus. I do not think this detail is actually covered under any of the accessibility guidelines but my guess is that it is outlined somewhere in the accepted standards for application/software, but I could not tell you where.

Anyway, kudos to you for wanting to improve the overall user experience along with your efforts for accessible access! Too many times developers only want to do the bare minimum to get the code ‘out the door’. A good user experience is important and ensuring that your content is designed for accessibility only helps to improve that user experience. Keep up the good fight!

[End of my reply to Mike Jr]

Mike Jr’s orginal question can be found here: http://stackoverflow.com/q/9896700/1301573

Ironically I ran this same PDF through JAWS and while the tab order wasn’t ideal I was at least able to arrow down through all the text…

http://www.upassoc.org/upa_publications/jus/2012february/JUS_Lazar_February_2012.pdf

I recently came across a tool I hadn’t used before and wanted to share it and another resource for analyzing color contrasts. If we look at 1.4.3 within WCAG 2.0 it lays out the groundwork but having a tool to use is such a nice resource to have.

Per the W3C:

“1.4.3 Contrast (Minimum):The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

•Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

•Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

•Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.”

Additional contrast items are addressed in 1.4.6:

“1.4.6 Contrast (Enhanced):The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

?Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;

?Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

?Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.”

(http://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast)

There are two free tools I’m listing for use though surely there are more available:

1. Luminosity Colour Contrast Ratio Analyzer-Juicy Studios

This seems like a very usable resource and operates directly from the website of Juicy Studios. I’m impressed at the simplicity of it and appreciate the efforts to make it not just a tool for usability and accessibility but accessible in itself. http://juicystudio.com/services/luminositycontrastratio.php#specify

2. Contrast Analyser -The Paciello Group

I’ve used this many times and you get a simple interface that allows you to enter the html for your colors or switch modes and use a mouse pointer to select given colors that are currently on your screen. This is a nice touch when actively looking at a page. It does however require you to download it and run it from your desktop. http://www.paciellogroup.com/resources/contrast-analyser.html

Depending on your needs I’d expect either of these will work well for you and encourage you to meet the guidelines for easier use by all.

http://www.w3.org/WAI/intro/wcag

I have found that even on the W3C sites there is a contradiction on this topic. For example the WCAG 2.0 H42 Technique uses an example (example 2) which shows using heading tags that are not properly nested. Under the resource links on that page there are two blog posts that indicate this as well, Pick a Heading and Quick tips for accessible headings. Yet if you look at the WCAG 2.0 G141 Technique it is clearly states that, “To facilitate navigation and understanding of overall document structure, authors should use headings that are properly nested (e.g., h1 followed by h2, h2 followed by h2 or h3, h3 followed by h3 or h4, etc.).”

I’d like to get your thoughts on this and how you think heading levels should be used…especially if you are a screen reader user and rely on the heading tags.

-Jeff

Today I sat in on the the “Assistive Technology Access to Flash and PDF” session presented by Matt May from Adobe Systems.

There it was announced that the next release of Acrobat, Acrobat Reader, Flash Player and Flex will support the iAccessible2 API. MSAA is what these products currently use which limits the accessible API to Windows platforms. This is great news as this will expand accessibility for these products beyond the Windows platform and allow users of OS2 and Linux to make use of the accessibility features in these products.

If you are not sure what iAccessible2 is, Peter Korn’s Weblog has a great explanation at: http://blogs.sun.com/korn/entry/completing_the_accessibility_picture_iaccessible2.

In addition to the support of iAccessible2, Adobe is planning on including support for the ARIA specifications in the near future for Flash Player and Flex. This will make it easier for developers to expose Flash content to assistive technologies.

It sure is nice to see advancements like this being made in these products. The hope is that the industry as a whole will follow Adobe’s example!

If you happen to be at this conference, feel free to stop by the HiSoftware booth #108 and say ‘hello’ as that is where I’ll be hanging out!

The Access Board has just released the draft of the refresh for the Section 508 standards. You can view them at this link: http://access-board.gov/sec508/refresh/draft-rule.htm

The guidance on this site seemed very detailed and in depth so I thought I would review it in case I could pick up something new.

The Problem

As I read through the site I came across a statement that said the style for Header 1 (that is heading level 1) should only be used once in a document and that it should be used as a title. I am not sure why this advice was being given because Word provides a style for the title of a document. The style is called, oddly enough, ‘Title’. In fact, using the ‘Header 1′ style for a title is going to cause problems with your table of contents, if you choose to use a TOC.

The site went on to describe how to remove the Header 1 style from the TOC outline. I thought to myself, “Hmmm. Why would they do that? Maybe they don’t like the way the Title style is formatted. If that is the case why don’t they just modify the style to look the way they want?”

As I continued to read it was mentioned that there is a bug with the TOC in Word 2003 and that a after the TOC is created in a document the user should cut and paste the TOC into Notepad. Then after that they should copy the TOC from Notepad and paste it back into the Word document. What?!

All the advice this site had given was pretty accurate so far. This business about using Heading 1 as a title was a bit odd but now this TOC stuff was just plain ridiculous. If I follow the advice on the TOC all I have done is negated the benefit of having a TOC in the document! For example the bookmark links were automatically generated are now gone. Any formatting that the TOC had is now gone. I also no longer have the ability to update the TOC should I make changes to my document. If I do make changes to the document I have to recreate the TOC, paste it into Notepad and then back into Word and manually reformat the entire TOC. Why would they give such crazy advice?

The “Ah-Ha!” Moment

Now at this moment I would usually just close my browser and say, “What is wrong with the people who created that site?” But something was nagging at me to look further into what they really were trying to accomplish. The site mentioned that this TOC workaround needed to be done because there was a bug in Word 2003 and the way it handled the table of contents. It also said that this issue had been fixed in Word 2007. The site didn’t go into detail about this mysterious issue that caused them give such nonsensical advice.

So I decided to break out my install of Office 2003 and poke around a little to see what I could figure out. As I tried different things I quickly discovered an issue with the TOC. Some of the heading levels were not showing up in the TOC! I tried the same steps in Office 2007 and found that this behavior was not happening in that version. Could this be the reason for the strange advice being given?

I am not sure if this is the reason, but it does tie the header and TOC advice together or at least places them both at the scene of the crime. I am going to assume this must be the apparent ‘bug’ that was referenced.

The Fix!

As I contemplated why the TOC in Word 2003 was not including all the headers in the document I discovered the reason by showing the formatting marks in the document. This is done using the Show/Hide command button while in the Normal (Print Layout in Word 2007), Web Layout or Draft Layout views.

To turn this feature on and off you select the button with the paragraph mark on it  or use the keyboard shortcut which is Alt+Shift+*. When it is on your document will include the various formatting marks demonstrated in this screen shot:

What I noticed is if a page break was used and there was no carriage return just before the break then the heading that followed on the next page would not show up in the TOC.

How could this happen? An example would be that you are typing in Print Layout view and you have inserted a page break. You notice that there appears to be an extra line below the last paragraph on the page. It looks this way because the cursor is sitting there flashing at you (this is due to the carriage return).

So you use the backspace key to remove that apparent extra empty line. When you do this you have effectively removed the carriage return. Now the paragraph and page break no longer have a carriage return to separate the two.

Here is an image of how the document would look with the the carriage return properly located between the end of the paragraph and the page break:

When the carriage return is removed this creates the situation as demonstrated in the image below:

That carriage return is essential if you want the header style at the top of the next page to be included in the TOC.

If you are a user of Word 2003 go give it a try and see for yourself! If you find that the header does not get added back to the TOC after you re-add the carriage return, then select the header text and reapply the style.

Summary

Now I am not sure if this is in fact the issue that was being discussed on the site I mentioned earlier. If it is or is not the fact is the advice that was given on that site is just plain bad advice.

By using the proper styles and other features in Word such, as the Table of Contents, correctly your document will be better structured as an accessible document. Then if you export your document to a PDF format that structure will be exported also which again provides better accessibility.

Now I don’t want to knock the effort that was put into creating the content on the site mentioned above because the majority of it was correct. I want to encourage more effort to share this type of knowledge. This way we can help to ensure that content is accessible to all users.

That being said, I also want to encourage that any advice that is given be as accurate as possible. If you run into issues like that demonstrated in this blog post please don’t just make things up. Take the time to do your own research and post comments and questions on blogs like this one. You may find someone who can provide you the solution.

Most importantly do not assume that everything you read online as correct. Do your due dillegence! As mentioned in the title of the post, when it comes to free accessibility advice…caveat emptor!

If you disagree with my comments, have run into similar situations or have any questions on accessibility issue s please post your comments and questions here.

I’m sure most everyone that has used an ATM can identify the braille on the buttons of the machine, but what about all text and questions that appear on the screen…none of which are accessible?  As the US continues to play catchup in the world of electronic accessibility even countries such as the Philippines are making efforts… http://businessmirror.com.ph/home/banking-a-finance/15664-bill-pushes-accessibility-of-atms-to-the-blind.html

I first became aware of the new version of this editor from the following news article: FCKEditor drops the F. This article mentioned that the editor was now ‘fully’ accessible to screen readers and keyboard only users. Even the main page for the CKeditor website (http://ckeditor.com/) makes the claim that it has full accessibility support.

This editor is open source and versatile when it comes to implementation so it is has a large install base. You may have used this editor yourself without even knowing it. With the growing attention to accessibility and the legal requirements around this topic an updated ‘accessible’ version of this editor is very timely.

I have done some testing in the past with the FCKEditor in regards to accessibility and was curious if this new version was really accessible. So I took a ‘quick’ peek to see for myself. My focus for this quick test was not if the editor created accessible content, but on if the editor itself was accessible.

Keyboard Only

I was pleasantly surprised to find that the CKEditor does in fact support the use of only a keyboard! Many of the past keyboard problems with the FCKEditor have been fix. I honestly did not expect the level of keyboard support that I found in the new version of this editor.

To say the least I was very pleased! The one drawback was finding the reference to the keyboard only commands. It wasn’t that hard to find but did take me a few minutes. What would be nice is to have a link or easily discoverable way to allow a user to get this information from within the editor itself.

You can find the reference for the most common supported keyboard commands and navigation shortcuts in the CKEditor Accessibility topics document.

Screen Reader

When it came to using a screen reader like JAWS with the CKEditor I was sure I would discover some major issues. Again, to my surprise JAWS and the CKEditor worked fairly well together. There is still a steep learning curve and at times JAWS got lost which required some screen refreshing and rediscovering of current focus to get my bearings. Compared to the way JAWS and the FCKEditor worked (or should I say did not work) together in the past this was a tremendous improvement.

To CKEditor’s credit most issues of using JAWS with this product are documented. This was in the CKEditor’s Accessibility document mentioned early or if you prefer jump directly to the JAWS section of that document here.

In case you are interested I used IE 7.0.6001.18000 and JAWS 10.0.1142 for my testing.

In Summary

There are still some areas that are problematic such as switching from WYSIWYG view to the Source view. When this switch occurs the focus jumps from the editor to the top of the page. This is not good for a screen reader user, screen magnifier user or a keyboard only user.

Also, I was not able to find a complete list of keyboard commands for ALL available tool bar options. It could be that those have been deprecated. The FCKEditor had a much larger list than that outlined in the current CKEditor Accessibility Document.

In all fairness I did not do an exhaustive search but I still feel a reference like that, if still applicable,   should be easily discoverable and even be referenced within the CKEditor Accessibility Document.

I should also mention that I did not do a complete test of the editor for accessibility but took a high level approach. Even so, that high level approach shows that the creators of CKEditor have put great effort in making this an accessible product.

This is very commendable because all too often the minimal effort is done so a product can be called accessible. I am not saying that the CKEditor does not have accessibility issues but compared to the previous versions of the FCKEditor the difference is night and day! This was a *real* effort to create an accessible product and so I offer a hearty ‘WOOT!’ to the CKEditor team!

If you have had a similar or different experience with the new CKEditor please post your comment here.