Category Archives: NVDA

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

Posted on by

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

Why I’m Building Hold An Event

Posted on by

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.

I’m Not Dead Yet (In a British Accent)

Posted on by

I know a few of you have asked if I had written anything on my blog in a while and I have had to say no I have not. After reading @Nacin‘s blog post yesterday about it being months, since his last post I figured I might as well work on one myself.

After checking I found the last time I blogged was on September 19, 2010, and it was about “Accessibility Camp DC – October 9, 2010”, which was a great time in case anyone wanted to know. I had wanted to write a blog post a month or so ago, but it probably would have been about Accessibility Camp DC 2011 and it would have looked like I only post when I’m pushing one of my own events, which I actually need to do more of so we get more people attending. By attending the monthly event was so people can learn from each other as well as make new friends.

For those wondering how long it’s been, since I blogged last it has been 443 days or 1 year, 2 months, and 17 days.

To give you a better idea of how long it’s been, we have had our third Accessibility Camp DC, started our third year of monthly Accessibility DC meetings, and I even started working on my web based event registration prototype “Hold An Event”.

Information about Hold An Event

“Hold An Event” is going to be an accessible web based event registration application. The most important part of the application is that it will be accessible as possible when completed, since the event registration system we are currently using now is not accessible. Need to make sure this web application is usable by screen reader users, those, using voice recognition software, voice over (iPhone and iPad), and any other assistive technology.

I’m starting by building the mobile part first. I figured if you can register for an event or even create an event on your cell phone, then it should be even easier to do those tasks in a browser or on a tablet. I have spent most of the last two plus years gathering information about the different people that are likely to use the system and what types of functions they will need from the start and those that can wait until later.

More to come about “Hold An Event”, once the prototype is a bit further along, so I can get feedback on it from others.

Events Attended

During 2011 I attended the following events/conferences:

That’s enough for now.

P.S. For those that don’t know the blog post title was a play on the Monty Python skit “Not Dead Yet”.

Accessibility Camp DC – October 9, 2010

Posted on by

For those that were wondering when the next Accessibility Camp DC is, it will be on Saturday October 9 , 2010, at the Martin Luther King Jr. Memorial Library from 9:30 AM to 5:30 PM in Washington, DC. This year we plan on getting more people out if we possibly can and there is already a nice sized group of out of towners coming as well.

For those that have never attended a BarCamp style event, which this is, the speakers and subjects for the event are decided the day of the event by everyone in attendance. Also in true BarCamp fashion the attendees can register for the event for FREE.

Some of the subjects we are hoping people can and will talk about are the following:

  • Section 508 Compliance or WCAG 2.0
  • Practical Ways to Make Your Website Accessible
  • Accessible PDF’s
  • Making Flash Accessible
  • What is WAI-ARIA – (Web Accessibility Initiative – Accessible Rich Internet Applications)
  • Accessible Video and Transcription
  • Panel Discussion on “Issues Effecting Individuals with Disabilities on the Web”
  • Captioning
  • Screen Reader Demos – JAWS and NVDA
  • Mobile software accessibility

Please pass this information on to others so we can have as many people as possible to learn and make needed connections about accessibility.

Hope to see you all there.

Need Help Deciding which Web Application to Build

Posted on by

Now that the house issues have been mostly settled I can get started on building one of the many small web applications that I have been tossing around. Some of these ideas I have been thinking about for what seems like years and others just a few months.  I have a good 7 or 8 different web applications that I want to build and I’m looking for some help in determining which one(s) I should build first.

Reasons Why

I need to get other peoples opinions on which will be useful them and more importantly the general public and might in the long run I would be able to charge enough to cover my hosting costs with ads or annual fees. I know that probably all of these have been done many times over, but there are a few reasons why I want to build them and they are:

  • Learn PHP and MySQL
  • Use the newest accessibility implementations of WAI-ARIA and possibly HTML 5
  • Use microformats were applicable
  • Test newest features in screen readers – JAWS, NonVisual Desktop Access (NVDA), etc. and web based browsers (Firefox 3.5, IE8, etc.)
  • Use Web Standards
  • Test abilities for user interface design (UI or UX)
  • Create 508 compliant and usable examples for others to learn from for accessibility presentations.

But most importantly to create web applications that I would like to use personally.

Important Part

Now comes the important part, which from the following list of web applications should I build? I added a short description of what they do along with different ways I could help pay the hosting cost. I even created one page prototypes just so you could see what types of information is stored in each one. The style (CSS) and layout (UI/UX) will be changing. I just took some old CSS and put these together.

  1. Online URL/bookmark storage which allow user to have X URLs/bookmarks stored online for free, charge per X items stored, set up annual fee, or show ads of some type. I started this one a while ago and stopped for some odd reason. I’m tired of having bookmarks on two home computers (MAC and PC), along with on work one. Yes, I have heard of delicious.com and ma.gnolia.com.
  2. Store individuals personal contact information and either have X individuals for free, charge per X customers, annual fee, or show ads of some type. Always looking for an address or phone number when at someone else’s house or office and would like to have it be web based.
  3. Online wine inventory – personal use hosted by me with ads for up to X entries or small annual fee for limited number, bigger ones for people with 1000s of bottles of wine. Yes, I know corkd.com is around. I started mine about the same time they (Dan Cederholm and Dan Benjamin) did, just did not have enough get up and go to get past midway with it. Once Cork’d came out I stopped for the most part. So this one is a good way completed using ASP and Microsoft Access, which only needs to be converted to PHP and MySQL.
  4. Online wine inventory – for wine stores to allow their customers to store their wine collection information and then place their (wine store) ads on website (charge monthly fee to store per customer or flat rate by amount of storage and bandwidth used).
  5. Mini adhoc conference information service (no prototype just yet), which would help groups like BarCamp create main information page about event and later at event add an online schedule of talks (allow addition of rooms, topics, speakers, etc.). Place AdSense and/or links of event sponsors on pages. I created similar conference room scheduling web application for old job so have the general idea for it already in my head of what it would need. Not sure if this one exists, but I assume it does somewhere and have not really looked if it does.
  6. RSS/XML Feed reader, which either would have X feeds free, charge per X feeds over free amount, annual fee, or show ads of some type. Created one to pull in a feeds and either display all records contained in RSS/XML, first X amount, or only display records that contained certain words or phrases. There are way to many of them around.
  7. Store multiple weather location information, which would allow you to save multiple zip codes or city/state/country combinations to keep track of home, vacation location, other friends, or families weather. Same idea for covering hosting costs as previous ideas.
  8. Technology Skills or Skill Swap repository, which would allow members to put in there different skills and then have the rights to search for others for help with questions or for projects.  Would have ability to make personal information private so as not to get spammed. Could charge fee for those just looking to find people for work or projects, charge for recruiting type ads, or just place AdSense on pages.

Conclusion

So please do me a great favor and list the top three applications in order you think I should build them so I can get an idea of what others are thinking.

Thanks, greatly in advance for your time and effort for helping me learn new things and decide which web application to build first. I will post findings in a few weeks along with the order in which I will build them in, since a few could be bundled together to make an over arching suite of applications.