Mobile Articles, Blog Posts, Resources, etc. from Work and Home Computer Bookmarks

Two people over a week ago asked me for mobile resources one for checking accessibility on mobile devices and the other for general information, so I figured I would publish them for all to see. Here are a bunch of resources from my work bookmarks, along with even more from my home laptop. A bunch of these articles, blog post, etc. are five or six years old, but the ideas and concepts are still worth reading.

UPDATED broken and redirected links – 01/02/2017.

The information is grouped together by the organization or person that wrote them.

BBC Mobile

Henny Swan

Paul Adam – this mobile resources page has a lot of links on it

Marcy Sutton

Luke Wroblewski

Apple – iOS

Videos

Android

Brad Frost

Jason Grigsby

Brian Fling

SSB Bart Group

Rachel Andrew

PPK

jQuery

Miscellaneous Mobile Accessibility

Hopefully, some or all these were helpful to you.

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

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.

Looking for Mentors and Willing to Mentor Others

Lately, I have been thinking about the fact that I seem to be falling behind my peers on what I know and can do in the areas of web accessibility, along with front-end coding (HTML, CSS, and JavasScript (jQuery), programming, business, promoting myself and my events.  It’s finally time to start looking for mentors, along with mentoring a few people in what I know about accessibility, food, wine, etc.

About a year and a half or more ago I started a list of several categories/areas I was looking for mentors for work and in my personal life. To this list I have even  adding people’s names that I have met and think can help me in one way, or another. I’m not going to list those people here, but will list the different categories or areas I’m looking to improve on.

By writing this blog post, I will now have to start contacting people and seeing if they will be willing to help me further my career, along with improving the way I learn, teach others, present, etc. For those that are local it might be going out for food on me or a quick phone call or e-mail once a month or less if needed. For those that are not local or close (100 miles) it might work to do phone calls, Skype, and some other new modern way. I’m even willing to pay for food for them as well, so we can both do this over a good meal, which I find has worked at different conferences and after parties to learn sometimes even more than talks earlier in the day.

Below are the different areas I’m looking for mentors. Some have to do with my current work, and others are there for in the future either for starting my own accessibility company with others or working more on my event registration web application – Hold An Event.

Looking for MENTORS

  • Accessibility – I know a lot of general information, but need to work on the details and other areas I’m not the most knowledgeable in
  • JavaScript/jQuery – need to catch-up, since most places use these so much, and I have not had to do much of this type of work at my current job
  • PHP and other programming languages – need to learn more languages, so I know how to recommend changes to improve peoples or companies accessibility
  • Building web applications – help me improve Hold An Event with lessons learned
  • Running conferences – need to find ways to improve Accessibility Camp DC, BarCamp DC, along with monthly meet-up
  • Presenting and teaching – Need to improve both my style and knowledge for my talks, along with the quality of my slides/materials
  • Learn to design – to be able to improve my websites and web applications so they are simple yet appealing to others
  • Usability/UX – need to be able to build websites and applications that are usable and have a great user experience for people
  • Content Strategy – need to improve the wording and style of my writings (even this previous sentence needs work)
  • Business from an information technology standpoint – how to start thinking about getting Hold An Event into a stable form so people can start working with it, along with thinking about its future
  • Business from how to run a business – for ways to run my web applications Hold An Event once it’s closer to being rolled out to the general public
  • Marketing/Social Media – how to better publicize myself, my business, and my web application
  • Health and Fitness – if I’m going to do mentoring and be mentored I need to have more energy, which means exercising, along with better eating and sleeping habits
  • Food and Wine – always need to learn more about how to prepare food, where to go eat and find nice wines

The fun part is some of the people I have in mind as mentors fit a few of these categories which are really cool. Others on the list I’m not sure how I’m going to get in touch with them to ask for help, let alone if they can or want to mentor me.

The next step is to figure out how I’m going to ask people for help, let alone to mentor me once in a while or long term, since so many are overbooked like the rest of us with work, families, traveling, speaking, etc.

Willing to MENTOR Others

I’m also willing to help and/or mentor those that can use some of my knowledge about accessibility, food, wine, etc. So please get in touch with me if you want me to help you or maybe you only need a little bit of my time to run a few ideas by me or just to get my opinion or recommendations on how best to do something. If I can’t help you  on what you’re asking about I’m likely to be able to point you to  someone who can.

Final thoughts

So if you have any ideas on people you think that can mentor me in any of these areas or want me to mentor/help you leave a comment or get in touch with me from my website or twitter.

 

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

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”.