{"id":317,"date":"2014-01-27T20:50:22","date_gmt":"2014-01-28T00:50:22","guid":{"rendered":"http:\/\/www.jfciii.com\/blog\/?p=317"},"modified":"2014-05-16T15:14:39","modified_gmt":"2014-05-16T19:14:39","slug":"simple-accessibility-updates-to-improve-new-york-times-new-redesign-part-1","status":"publish","type":"post","link":"http:\/\/www.jfciii.com\/blog\/2014\/01\/27\/simple-accessibility-updates-to-improve-new-york-times-new-redesign-part-1\/","title":{"rendered":"Simple Accessibility Updates to Improve New York Times New Redesign &#8211; Part 1"},"content":{"rendered":"<p>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.<\/p>\n<h2>New York Times Redesign Goes Live<\/h2>\n<p>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\u2019s tweet: \u201credesigned <a href=\"http:\/\/nytimes.com\">http:\/\/nytimes.com<\/a> homepage <a href=\"https:\/\/twitter.com\/search?q=%23accessibility&amp;src=hash\">#<strong>accessibility<\/strong><\/a> quick check w\/<a href=\"https:\/\/twitter.com\/webaim\">@<strong>WebAIM<\/strong><\/a> tools web 59 &amp; toolbar 131 errors <a href=\"https:\/\/twitter.com\/search?q=%23a11y&amp;src=hash\">#<strong>a11y<\/strong><\/a>\u201d I\u2019m familiar with the <a href=\"http:\/\/wave.webaim.org\/toolbar\/\">WAVE Toolbar by WebAIM<\/a>, which is useful for testing behind firewalls or for code found on DEV servers. It\u2019s a free Firefox plug-in and <a href=\"http:\/\/wave.webaim.org\/\">WebAIM&#8217;s online checker<\/a> 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\u2019s 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:<\/p>\n<ul>\n<li>Missing ALT text &#8211; red background with white line running through it diagonally<\/li>\n<li>Linked image missing ALT text &#8211; white hand on the red background<\/li>\n<li>Empty heading &#8211; an \u201cH\u201d with a question mark on a red background<\/li>\n<\/ul>\n<p>All screenshots can be enlarged by clicking the images and they were re-taken on January, 27, 2014.<a href=\"http:\/\/www.flickr.com\/photos\/jfciii\/12181221106\/\"><img decoding=\"async\" src=\"http:\/\/farm4.staticflickr.com\/3718\/12181221106_c0c10e4cdf_z.jpg\" alt=\"WebAIM WAVE toolbar with 115 errors\" \/><\/a> 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:<\/p>\n<h3>Errors<\/h3>\n<ul>\n<li>Missing ALT text &#8211; red background with white line running through it diagonally<\/li>\n<li>Linked image missing ALT text &#8211; white hand on the red background<\/li>\n<li>Empty heading &#8211; an H with a question mark (h?) on a red background<\/li>\n<li>Missing FORM LABEL &#8211; white gift tag on red background<\/li>\n<li>Image button missing ALT text<\/li>\n<\/ul>\n<h3>Warnings<\/h3>\n<ul>\n<li>Missing first level heading &#8211; yellow background with an \u201cH1\u201d<\/li>\n<li>Noscript element &#8211; paper scroll on yellow background<\/li>\n<li>Long ALT text &#8211; the word \u201clong ALT\u201d on yellow background<\/li>\n<\/ul>\n<p><a href=\"http:\/\/www.flickr.com\/photos\/jfciii\/12181016184\/\"><img decoding=\"async\" src=\"http:\/\/farm4.staticflickr.com\/3794\/12181016184_db4a93c5ca_z.jpg\" alt=\"WebAIM WAVE accessibility checker showing 57 errors and 89 warnings\" \/><\/a> Around 2 PM EST Wednesday afternoon, I saw Jeffrey Zeldman\u2019s tweet: \u201cNYTimes redesign has finally gone public. <a href=\"http:\/\/www.nytimes.com\/redesign\/\">http:\/\/www.nytimes.com\/redesign\/<\/a> Content-first, responsive, immersive.\u201d I replied: \u201chopefully accessibility next? Missing easy stuff? MT <a href=\"https:\/\/twitter.com\/zeldman\">@<strong>zeldman<\/strong><\/a> NYTimes redesign has finally gone public. Content-first, responsive, immersive\u201d And Jeffrey answered: \u201c<a href=\"https:\/\/twitter.com\/jfc3\">@<strong>jfc3<\/strong><\/a> Can you write a post about the easy things, accessibility-wise, that the otherwise wonderful <a href=\"https:\/\/twitter.com\/nytimes\">@<strong>nytimes<\/strong><\/a> redesign is missing?\u201d So I responded: \u201csure <a href=\"https:\/\/twitter.com\/zeldman\">@<strong>zeldman<\/strong><\/a> I can write up a blog post over weekend about the easy accessibility updates the new <a href=\"https:\/\/twitter.com\/nytimes\">@<strong>nytimes<\/strong><\/a> redesign should have done. <a href=\"https:\/\/twitter.com\/search?q=%23a11y&amp;src=hash\">#<strong>a11y<\/strong><\/a>\u201d<\/p>\n<h2>Writing an Accessibility Review<\/h2>\n<p>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\u2019m 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.<\/p>\n<h2>Possible Solutions<\/h2>\n<p>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.<\/p>\n<h2>Missing ALT Text<\/h2>\n<p>Let\u2019s 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 \u201cInside NYTimes.com\u201d 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 <a href=\"http:\/\/www.army.mil\/\">ARMY.MIL<\/a>. <a href=\"http:\/\/www.flickr.com\/photos\/jfciii\/12180603265\/\"><img decoding=\"async\" src=\"http:\/\/farm4.staticflickr.com\/3808\/12180603265_119c5f234c_z.jpg\" alt=\"Missing ALT text for the previous or next buttons in the \u201cInside NYTimes.com\u201d section\" \/><\/a> In the \u201cInside NYTimes.com\u201d 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. <a href=\"http:\/\/www.flickr.com\/photos\/jfciii\/12180828793\/\"><img decoding=\"async\" src=\"http:\/\/farm3.staticflickr.com\/2807\/12180828793_44f6d3de14_z.jpg\" alt=\"Missing ALT text for the images that link to the articles\" \/><\/a> Here is another section (\u201cThe Opinion Pages\u201d) of the home page that is missing ALT text, which are links to the articles. <a href=\"http:\/\/www.flickr.com\/photos\/jfciii\/12180603365\/\"><img decoding=\"async\" src=\"http:\/\/farm4.staticflickr.com\/3795\/12180603365_a1cfc8edf6_z.jpg\" alt=\"Opinion page section with empty ALT text for images that link to same place as the heading level five\u2019s (h5)\" \/><\/a> I\u2019m not sure why they didn\u2019t make the ALT text be the article title as they did in \u201cInside NYTimes.com\u201d section for the \u201cWorld, Business Day, Opinion, Technology, etc.\u201d section and the \u201cThe Opinion Pages\u201d section.<\/p>\n<h2>Empty or Missing Headings Levels<\/h2>\n<p>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\u2019s making it more difficult for those using screen readers, etc. to understand the page structure and find things on the page? Under the \u201cArts\u201d 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. <a href=\"http:\/\/www.flickr.com\/photos\/jfciii\/12180828943\/\"><img decoding=\"async\" src=\"http:\/\/farm4.staticflickr.com\/3768\/12180828943_7fb0023e35_z.jpg\" alt=\"Empty heading level six (H6) under feature article and incorrect heading order under \u201cBusiness Day section\u201d\" \/><\/a><\/p>\n<h2>Missing Form LABELs<\/h2>\n<p>When you look under the \u201cAuto\u201d and Jobs\u201d 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. <a href=\"http:\/\/www.flickr.com\/photos\/jfciii\/12181221726\/\"><img decoding=\"async\" src=\"http:\/\/farm6.staticflickr.com\/5482\/12181221726_223dd4bd18_z.jpg\" alt=\"Missing LABELS in Auto Section of New York Times Home Page\" \/><\/a> \u00a0 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\u2019t figure out where a person is on the screen, etc.<\/p>\n<h2>Conclusion<\/h2>\n<p>I\u2019m 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\u2019m 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.<\/p>\n<h2>References<\/h2>\n<h3>WebAIM<\/h3>\n<ul>\n<li><a href=\"http:\/\/wave.webaim.org\/toolbar\/\">WAVE toolbar<\/a><\/li>\n<li><a href=\"http:\/\/wave.webaim.org\/\">WAVE Web Accessibility Tool<\/a> &#8211; online checker<\/li>\n<\/ul>\n<p>Edited by: <a href=\"mailto:information@jtfassociates.com?subject=Inquiry from jfcii.com New York Times Blog Post - Part 1\">Char James-Tanny<\/a> of\u00a0<a href=\"http:\/\/jtfassociates.com\/\" rel=\"home\">JTF Associates, Inc.<\/a> &#8211; <a href=\"https:\/\/twitter.com\/CharJTF\/\">@CharJTF<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a href=\"http:\/\/www.jfciii.com\/blog\/2014\/01\/27\/simple-accessibility-updates-to-improve-new-york-times-new-redesign-part-1\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,23,25,24,87,186],"tags":[],"class_list":["post-317","post","type-post","status-publish","format-standard","hentry","category-22","category-accessibility","category-design","category-forms","category-html","category-new-york-times"],"_links":{"self":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/comments?post=317"}],"version-history":[{"count":21,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/317\/revisions"}],"predecessor-version":[{"id":340,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/posts\/317\/revisions\/340"}],"wp:attachment":[{"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/media?parent=317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/categories?post=317"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jfciii.com\/blog\/wp-json\/wp\/v2\/tags?post=317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}