Test HTML and CSS Based Organizational Charts

I was playing around a few months go create the best way to build an organizational chart that are accessible and thought it was time to publish this blog post. So I created what I’m hoping is an accessible organizational charts page. The charts are text based, and I hope they make sense visually as well to assistive technology users like screen readers.

The first chart is built using nested definition lists (DL), which are styled with CSS to show visually which groups or people fall under other groups or people. The second example organizational chart is built using structured headings. These were indented by adding CSS classes to make them easier to read and understand the organizational hierarchy visually.

I’m hoping creating organizational charts one of these ways work. I’m thinking by making organizational charts this way might not work out well if you have a large organization, but could be useful to smaller teams or companies.

If you use assistive technology can you please tell me if these organizational charts are helpful in conveying an organization’s structure.

Simple Accessibility Updates to Improve New York Times New Redesign – Part 2

For those following along, this is Part 2 of my series on how the New York Times can make simple updates to improve their website’s accessibility. “Part 1 – Simple Accessibility Updates to Improve New York Times New Redesign” is available for those who missed reading it.

Reminder: I’ve written these posts to help to the New York Times, along with anyone with large websites, or those who are designers or developers, etc., to show that simple incremental changes can improve their website in the long run.

In this post, I will cover the following accessibility issues with the New York Times home page:

  • Missing skip navigation
  • Difficultly seeing visual cues for those only using the keyboard
  • Poor color contrast
  • Not able to use video player by keyboard only
  • No captioned videos for individuals that are deaf or hard-of-hearing

Adding Skip Navigation

Skip navigation allows people that use a keyboard or assistive technologies like screens reader JAWS, NVDA, VoiceOver, etc.) to bypass large sets of links and focus on the content. Unfortunately, the New York Times pages are missing skip navigation, which means that screen reader users must listen to all of the preceding content before getting to the main articles.

Adding skip navigation to your pages is fairly easy as shown in this article on my blog called “Are You Using Skip Navigation?”.

You can choose between a few different techniques to hide your skip navigation depending on what your design team or marketing department want. Here are a few articles about skip navigation:

Note: These websites have additional accessibility articles you might want to read when you have the time.

An example of skip navigation can be found on my main website (press TAB to see the “Skip to Main Content” link at the top of the page). I haven’t yet updated my blog’s WordPress theme to include skip navigation.

Visible 'Skip to Main Content' link on jfciii.com website

Thinking About Color Deficiency (Colorblindness)

Approximately 8% of the population (mostly male) has one of the three main types of colorblindness (deuteranopia, protanopia, and tritanopia). This, along with small text, might make it difficult to read parts of the New York Times homepage.

The following examples demonstrate what people with normal vision see as compared to the three main types of colorblindness:

The opinion page section with now colorblindness mask added

Normal vision

Deuteranope colorblindness mask added to the opinion page section

Deuteranope (a form of red/green color deficit)

Protanope colorblindness mask added to the opinion page section

Protanope (another form of red/green color deficit)

Tritanope colorblindness mask added to the opinion page section

Tritanope (a blue/yellow deficit- very rare)

To help people who are colorblind, the New York Times needs to verify the color contrast ratios.

Analyzing Color Contrast

For those who have low vision, poor eyesight, or colorblindness, some of the text on the New York Times home page could be difficult to read. An example would be the bylines to their articles.

New York Times feature article bylines

Bylines from New York Times feature articles on home page

If you were to use one of the many check color contrast tools, such as Jonathan Snook’s “Colour Contrast Checker” you input the foreground (font/text) color and the background color to see if it passes WCAG 2.0 standards:

  • Level AA: contrast ratio of 4.5:1 for normal text and 3:1 for large text
  • Level AAA: contrast ratio of 7:1 for normal text and 4.5:1 for large text

You can be get the hexadecimal numbers from Photoshop (designers), or by right clicking the text and having the Firefox plug-in FireBug (developers). In this case the CSS is:

.NYT5Style .byline { color: #808080; font-size: 10px; line-height: 12px; margin: 4px 0 2px; }

The screenshot shows the Colour Contrast Checker after I added the CSS from one of the home page bylines. As you can see, the foreground color #808080 is a light gray, which has inadequate color contrast on a white background with a ratio of 3.95.

New York Times poor byline color contrast show on Jonathan Snooks colour contrast tool
Another reason it might be difficult for others to read the byline is because the font size is only ten pixels (10px). I recommend that the font size be no smaller than 12 to 14 pixels (12px to 14px) depending on font choice. The font Arial at 12 pixels (12px) is smaller than Helvetica at 12 pixels (12px).

Some of the more popular color contrast checkers/resources are:

Providing Visual Cues for Keyboard-only Users

It is difficult to see where you are (that is, which links are active) when tabbing through the home page. One way the New York Times can fix this is by adding “:active” (IE browsers) and “:focus” (for all other browsers) in the CSS to the elements that include “:hover.” Then, when you tab, the links are indicated (in this example, with an underline).

Here are the current and updated examples of the CSS:

Current CSS

a:hover { text-decoration: underline }

Updated CSS

a:hover, a:focus, a:active { text-decoration: underline }

Making the Video Player Keyboard Accessible

Keyboard-only users cannot play, pause, enlarge the video to fill the entire screen, or change the volume.

A friend who works in the accessibility field asked if I knew of any way to make a YouTube player keyboard accessible for a .gov website he and his team were working on. I told him how Derek Featherstone and his team had used YouTube’s API to create their own links to play, pause, etc. the video by using JavaScript and CSS to place the links over the inaccessible ones. Due to time constraints, my friend and his teammates added an additional set of controls below the video, which did the trick of making the video player accessible.

Captioning Videos

I looked at several videos on the home page, and none of them had captioning. Lack of captions can make following, along with the video difficult for those that are deaf or hard-of-hearing .

Solve this problem by getting the videos captioned. Many services are available that will caption your videos for a price. The quality of the captioning somewhat depends on how much money you have to spend.

No captions for this video and no ability to turn them on if they were available

No captions available

Another solution is to take a transcript, if available and use captioning software that will split the text/captions at the correct places.

Conclusion

So this concludes Part 2 of my series on “Simple Accessibility Updates to Improve the New York Times New Redesign”. The next blog post will be about the accessibility issues found on the article pages, which I’m guessing will have similar issues as the home page does, and finally how to use all the tools I used.

I hope this post helps you find easy ways to check your websites quickly for accessibility issues, along with pointing out a few free tools you can use.

If you have other tools or software that you use to check website accessibility, please add them in the comments, because not all tools will find all the issues.

References

Screen Readers

Skip Navigation Articles

You can find more great accessibility articles on both of these websites.

Color Contrast Tools

Edited by: Char James-Tanny of JTF Associates, Inc.@CharJTF

Simple Accessibility Updates to Improve New York Times New Redesign – Part 1

From the promo piece I saw about the New York Times new redesign, everything looked really good, and I was looking forward to seeing it.

New York Times Redesign Goes Live

On Wednesday (January 8, 2014), the new New York Times redesign went live, and everyone was raving how lovely it was from a design, content, and responsive web design perspective. No one was talking about how accessible the new redesign was. On Wednesday morning, I saw Patrick Dunphy’s tweet: “redesigned http://nytimes.com homepage #accessibility quick check w/@WebAIM tools web 59 & toolbar 131 errors #a11y” I’m familiar with the WAVE Toolbar by WebAIM, which is useful for testing behind firewalls or for code found on DEV servers. It’s a free Firefox plug-in and WebAIM’s online checker is useful as well. After seeing that Patrick had run the home page through the WAVE tools, I had to do the same thing myself. And I found that the New York Times had missed a lot of what I thought were easy items, such as missing ALT text, empty or missing headings, missing form LABELs, etc. I was able to confirm Patrick’s findings. On Saturday evening at about 6:30 PM EST with the WebAIM WAVE toolbar, I found 115 errors. The following screenshot shows the results. Some of the problems that the tool identified are:

  • Missing ALT text – red background with white line running through it diagonally
  • Linked image missing ALT text – white hand on the red background
  • Empty heading – an “H” with a question mark on a red background

All screenshots can be enlarged by clicking the images and they were re-taken on January, 27, 2014.WebAIM WAVE toolbar with 115 errors Next, I used the WAVE WebAIM accessibility checker and I found 57 errors and 89 warnings. The following screenshot shows the problems that the tool identified:

Errors

  • Missing ALT text – red background with white line running through it diagonally
  • Linked image missing ALT text – white hand on the red background
  • Empty heading – an H with a question mark (h?) on a red background
  • Missing FORM LABEL – white gift tag on red background
  • Image button missing ALT text

Warnings

  • Missing first level heading – yellow background with an “H1”
  • Noscript element – paper scroll on yellow background
  • Long ALT text – the word “long ALT” on yellow background

WebAIM WAVE accessibility checker showing 57 errors and 89 warnings Around 2 PM EST Wednesday afternoon, I saw Jeffrey Zeldman’s tweet: “NYTimes redesign has finally gone public. http://www.nytimes.com/redesign/ Content-first, responsive, immersive.” I replied: “hopefully accessibility next? Missing easy stuff? MT @zeldman NYTimes redesign has finally gone public. Content-first, responsive, immersive” And Jeffrey answered: “@jfc3 Can you write a post about the easy things, accessibility-wise, that the otherwise wonderful @nytimes redesign is missing?” So I responded: “sure @zeldman I can write up a blog post over weekend about the easy accessibility updates the new @nytimes redesign should have done. #a11y

Writing an Accessibility Review

My conversation with Jeffrey is why I wrote this blog post after checking the New York Times new redesign for simple accessibility issues. I understand that not all of the home page may have been updated, or parts of the page are being created somewhere else or that they have a bunch of technical debt they have to deal with. I’m trying to use this large public project to show people that, in the real world not everything gets done before you go live. But you still can work on accessibility at any time with some easy-to-use free tools that will get your website or web application closer to being accessible to all. After you fix the issues found with the free tools, you start to worry about using assistive technologies like screen readers (JAWS, NDVA, VoiceOver, etc.), talk-to-type (Dragon Naturally Speaking), text enlargers (ZoomText), etc.

Possible Solutions

The New York Times can make some simple changes to the home page and article pages (future blog post) to make them more accessible to those using assistive technologies or those who only use the keyboard.

Missing ALT Text

Let’s start with the missing ALT text, which seems to be common in certain sections of the home page, but not in others. If you go to the “Inside NYTimes.com” section, they use the article title as the ALT text, a technique I used to have our developers use for images that link to articles on ARMY.MIL. Missing ALT text for the previous or next buttons in the “Inside NYTimes.com” section In the “Inside NYTimes.com” section, there are no ALT text for the previous or next buttons, which you would think would be useful for those trying to see other items currently listed off screen. When you go to the sections shown below, which are the World, Business Day, Opinion, Technology, etc., there is no ALT text. Look for the white hand on the red background to see which linked images are missing ALT text. Missing ALT text for the images that link to the articles Here is another section (“The Opinion Pages”) of the home page that is missing ALT text, which are links to the articles. Opinion page section with empty ALT text for images that link to same place as the heading level five’s (h5) I’m not sure why they didn’t make the ALT text be the article title as they did in “Inside NYTimes.com” section for the “World, Business Day, Opinion, Technology, etc.” section and the “The Opinion Pages” section.

Empty or Missing Headings Levels

After running both WebAIM tools (WAVE toolbar and online checker), I noticed that the home page had a bunch of headings that were empty. Most of the time, that was because they had created the same heading level just before or after the empty one. Under the main featured article, there is an empty heading level six (H6), which is followed by a heading level five (H5), and then another heading level six (H6). Why not remove the empty heading level six (H6), because it’s making it more difficult for those using screen readers, etc. to understand the page structure and find things on the page? Under the “Arts” section (as mentioned by Sarah Bourne), there is a heading level four (H4), and then there is an empty heading level six (H6) followed by a heading level five (H5). This shows issues with headings because one is empty and another that it is not in proper order, because it goes from H4 to H6 to H5. Empty heading level six (H6) under feature article and incorrect heading order under “Business Day section”

Missing Form LABELs

When you look under the “Auto” and Jobs” tabs of the home page, there are form INPUT fields with missing LABELs. Another interesting part of this is that the text above the INPUT fields is outside the FORM itself. Missing LABELS in Auto Section of New York Times Home Page   The New York Times newly redesigned home page still has some other issues: possible color contrast problems, buttons that are not real buttons (as mentioned by Ian Pouncey), issues with using the keyboard, and screen readers that can’t figure out where a person is on the screen, etc.

Conclusion

I’m going to break this topic into multiple parts. I plan to write about the other accessibility issues found on the home page, about the article pages, which I’m guessing will have similar issues as the home page does, and finally how to use all the tools I used. I hope this post helps you find easy ways to check your websites quickly for accessibility issues, along with pointing out a few free tools you can use. If you have other tools or software that you use to check website accessibility, please add them in the comments, because not all tools will find all the issues.

References

WebAIM

Edited by: Char James-Tanny of JTF Associates, Inc.@CharJTF

How to Improve Your Search Usability

Doing searches on websites is a pain when you are using assistive technology. There are ways to improve how you get to the results.

Why not add an HREF anchor like #maincontent, which we used for the “Skip Navigation” article to your “Search Results URL” so those using screen readers, other assistive technologies, keyboards only, or other non desktop web browsers to skip right to the results section of the page skipping all the header, primary navigation links, and secondary navigation, etc.

You also need to make sure you have a LABEL connected to your search box for screen reader and other assistive technology users to know what they are looking at. Below is some sample code you can use as a starting point, along with some CSS to hide the search LABEL visually off screen if your design calls for that kind of things.

Search Form Code

<div class=”SEARCH“>
<form name=”Skills_Search” action=”searchResults.html#MAINCONTENT“>
<label for=”search2“>Search</label>
<input type=”text” name=”search2″ id=”search2” />
<input type=”submit” value=”Search” />
</form>
</div>

Results of Search Code



To hide the word “Search“ just add to the hide class used for the skip navigation blog post this can be done easily by adding “.search label” to the CSS.

Here’s a live example of the search box and search results example page.

Hope this little change to your website was helpful to you and it will make accessing the internet for those using assistive technologies better.

If you have any questions or ways to improve this, please leave a comment or get in touch with me.

Why I’m Building Hold An Event

I created Hold An Event because all the other event registration web applications are not accessible to those using assistive technologies, like screen readers (JAWS, NVDA, Window Eyes, etc.), along with voice recognition software (Dragon Naturally Speaking). They are also difficult to use even on smartphones let alone an lesser phones. I found this out while running my first Accessibility Camp DC back in October of 2009 and then with our follow-up monthly event, Accessibility DC. People would show up without registering because they deemed the service I had chosen not to be accessible, even though these people would be considered by most to be power assistive technology users.

After the first Accessibility Camp DC and a few monthly meetings, I started looking into event registration systems and everything I found was inaccessible in one form or other. I mostly looked at all the larger ones is all. So over the last two and a half plus years, when I have had five minutes here or a half hour there, at coffee shops, on the train, or wherever, I put notes into my iPhone about creating a web-based event registration application. At first, I used the iPhone’s built-in notes application, until a few people suggested I use Simple Note. This was because it had an iPhone application, along with a web application. By gathering all the different pieces of information you would need to create and run events over time, I had the time to really think about the roles/personas needed for an event.

The type of people I came up with could be people putting on the event, the attendees, paid attendees if that applies, sponsors, speakers, and even event staff. These roles work if you are holding a simple birthday party, the monthly book club, a tech event, or even a large conference. So we are talking a great amount of information, and I really had to think this through.

At times, I was like this is way too much work for just one person or I had other things to do and would do nothing about it for weeks or even months. No matter how hard I tried, the problem never seemed to go away and kept coming back to me. So after reading a lot of books, articles, etc. about start-ups, web applications, usability, and the like, as most would say I just needed to start and see where it would go.

When I Started

So over the summer of 2011, I finally started building the prototype to make sure I had the correct process, flow, and usability of the web application down before really starting the difficult work of making this a true working application. I even started with the mind-set of Mobile First (great book), which some are great ideas from Luke W. and others. My guess was that if I started coding the web application using web standards and accessibility in mind from the start, and if a person could do everything they needed to on their phone, then it should work wonderfully in a browser or on a tablet.

I started out simple and built a few of the needed input forms, which got me playing with responsive design and media queries. I made a concerted effort to get those few main screens right before building out a ton of pages. Once I got most of that complete, I moved on to the next set of forms.

My goal was to have the ability to make Hold An Event’s web application to seem like it was processing real information such as a search for events, to registering for an event, etc. This was done by passing parameters in the URL to tell each page what static content to place on the page. This idea seems to be working fairly well, since when showing friends lately what Hold An Event looked and acted like, they asked what kind of database, etc. I’m using. I would then explained what I had done to make it a look like a fully-functional application.

By the middle of October 2001, I had a bunch of pages that worked well enough to start showing people at that month’s Accessibility DC event and then more people at my annual Accessibility Camp DC event. Once those events were over, I didn’t do any more coding until New Year’s Eve 2011, sitting at my parents kitchen table coding from like 11 PM to 1:30 AM, because everyone else in the house more or less had gone to bed by 10:30 PM. Since then, I have been doing something to improve the Hold An Event web application just about every night and on the weekends too. Sometimes it was a little tweak here or there; other times it’s been to add a new page.

At one point, I added a few different smaller non geek/tech events to be able to show people different types of events types and how the process worked. I also had to add in some code to display the different navigation paths people used, depending on what type of user they were. For example, is the person running the event or attending the event, which are the two types I’m worrying about now.

How You Can Help

The next step is to let people play with Hold An Event themselves instead of me demoing it on my iPhone, which means making it look and act better on a tablet or in a computer browser. Currently it’s not the prettiest thing in a web browser, but it will do as a prototype.

Other big tickets items I’m going to have to think about are the security of peoples’ information like name and e-mail address to start, along with taking money, once I get to that point, which is far off in the future. I’m only working on this a few hours some nights after work and then 6 hours max on the weekends, for a total of 10 to 15 hours a week.

So here’s to making more progress over the next few months.

Where to find the Hold An Event Prototype

For those wanting to look at the current prototype, start by using the “tab” key on the Hold An Event’s home page, doing so will let you find the link to the demo/prototype web application. Remember this “prototype will not save” anything you place in it at all. So please don’t try and create an event to invite people to it and think it will work because it won’t. Once you’re there, use the search box to find events in “DC”, which will currently give you a list of nine events to view.

If you want to sign in to see the process of creating and viewing current events you’re running, your past events, or ones you’re attending, all you need to do is make sure you place at least one character in the user name and password fields. It doesn’t matter what they are, just as long as there is something there.

Feedback Welcome

P.S. Have fun and please send me feedback about what needs to be done, improved, etc. I’m a big guy and can take the the bad with the good. I’m mostly looking for ways to improve things.