Pre-launch front-end - a11y - QA

[joe-watkins]

Hi Jen!

I love the new site :) I understand you are still working on it and I'd love to help with these bugs I've found. Perhaps you can sift through the list and make tickets for the bugs you want to see fixed prior to launch or that may be relevant.

I felt it would be better for you to curate the bugs.. all of them are fairly minor with the exception of some accessibility concerns.

The site holds up well in all your supported browsers :) good work!

---

1. Comments form submission bug - Mac Chrome latest: http://www.screencast.com/t/vLgNvaDyeC
2. Pantheon logo is dead on inner pages http://www.screencast.com/t/CNzhv4cT relative linkage to asset need “/"
3. Episodes # fails contrast needs to be: #6d6d6d http://www.screencast.com/t/jOzzETH89w
4. Above footer excerpts headshot: Could add border-radius: 100% to make round: http://www.screencast.com/t/JNRR9KyG Not sure if that is what you are going for.
5. Above Footer - could handle responsiveness better by having small screens possess a flex-direction of column and when appropriate flip to row: http://www.screencast.com/t/61peL1h17J
6. Upcoming Page: Small screen calendar not present: http://www.screencast.com/t/EI702XF7
7. Blog: Could use a FitVids.js implementation to handle responsive videos: http://www.screencast.com/t/zKp7rfxOvSxH
8. Newsletter Signup Error: much like the comments submission error issue: http://www.screencast.com/t/JBdBVh3Rqq float related.
9. a11y: We could add a tabindex=0 to the #main element so focus is set to that when user leverages the “Jump to main content” feature. Currently that feature doesn’t do anything in Mac - Chrome. may have to outline: 0 on it
10. Episode: Player meta buttons are a bit wonky on smaller screens: http://www.screencast.com/t/4nGeqqlE0QfM
11. a11y: Add role=“contentinfo” to #footer
12. a11y: Pantheon logo: No need for alt tag here with hidden text: http://www.screencast.com/t/RUrRO9wC5
13. a11y: Episode: Transcript section #transcript could benefit from a tabindex=“0” so focus can be set on it from user clicking ‘read transcript’ - outline: none on container is ok
14. a11y: Episode: Guest’s headshot needs alt tag - I believe the heading with name isn’t close enough to it to allow for missing alt.
15. JS Bug: Episode: jQuery widow fix causing error: http://www.screencast.com/t/IfMQtFqOBm
16. a11y: Main Navigation fails color contrast ratio: http://www.screencast.com/t/SzEkja4qtq A good link color would be: #515151 and look like: http://www.screencast.com/t/LBhTCgZpzw I propose making the main nav items ‘stab’ out a bit more: http://www.screencast.com/t/BuOiSD4k3H6x would be larger targets for fingers and other pointing devices on smaller screen too: http://www.screencast.com/t/2fgcX2vV But might not fit in with your design vibe.
17. a11y: Footer nav - that red brand color with white links actually fails color contrast ratio tests http://www.screencast.com/t/ck8WAHfxb6h This is an important color. It does not have to move much to pass AA/AAA and it doesn’t appear that you’d need to move all the reds to this if you didn’t want to: #D71838 - This is how it would look: http://www.screencast.com/t/IKOqlt2ocRW
18. IE 9 - Flexbox stuff does not work but is still useable. potential fix - introduce modernizr - offer float fallback hacks for non-supporting browsers.
19. IE8 - JS bug on load and layout is not class A experience but content is usable: http://www.screencast.com/t/N0DyVpHXo
20. Small Screen: Lower testimonials section is causing some sort of layout issue: http://www.screencast.com/t/px7pZU15r8u perhaps the flexbox fixes in #5 will cure this.
21. Footer small screen: some funky action in the footer here: http://www.screencast.com/t/OYonPCVq - need to clear the float for small screens: http://www.screencast.com/t/n1qFCRBKW1i
22. Topics: Small screen - could consider killing margins/padding on small screen to let flexbox work it’s magic here: http://www.screencast.com/t/hlpKpRSPL

[jensimmons]

This list is amazing. Thank you! I am totally going to work my way down this list... just as soon as I can.

Oh, not launching today. If that wasn't already kinda obvious. I'm hoping next Tuesday will work. So. Much. To. Do! And this list, having you test things out, helps tremendously in getting there. So thank you.

[joe-watkins]

Awesome.. you are welcome! Glad to help :) Let me know if you need clarification or assistance with any of the items.

[jensimmons]

1. Done
2. OMG THANK YOU. I'd been trying to figure out for weeks why that image kept not showing up. Missing slash! Fixed.
3. Hm. I made the grey episode number text a bit darker. Switching to 6d6d6d would really mess up the design. I'll think about this more... crap. Deferring.
4. Already fixed.
5. Yup. Still need to do.
6. Changed things. Bug no longer exists.
7. Yup. Extra ironic since one of the linkblog posts is to a tutorial on how to do responsive videos without fitvid.js. I should go read that tutorial and apply it.
8. Fixed with 1. Also fixed a bunch of other places error messages were messed up. (Fingers crossed).
9. JOE — I added the recommended tab-index, so now the line of HTML should read: <main id="main" role="main" tabindex=0>< Is this right? Will you test drive it to confirm it's a good change? Thanks!
10. Yup. Still need to do. In fact, the player itself needs more responsiveness. Oh, right, and the whole page. :)
11. Done.
12. Done.

Ok, that's it for today. I'll hit the rest soon.

THANKS JOE!!

[joe-watkins]

Great! I love lists.. and good work.

(5) Here's something you could do for the responsiveness of that section.. you may already have a plan :)

• add flex-direction: column; to #block-views-reviews-block .view-reviews #181 _home.scss
• make width of children 100% width: 100%; #block-views-reviews-block .views-row #188
• work your way up with media queries handling the width and converting flex-direction to row from column eg.

/* line 181, ../sass/_home.scss */
#block-views-reviews-block .view-reviews {
        display: flex;
        flex-wrap: wrap;
        justify-content: center; 
        flex-direction: column; // I'm new
}

/* line 188, ../sass/_home.scss */
#block-views-reviews-block .views-row {
        align-items: flex-start;
        width: 100%; // I'm new
}

// I'm new - 2up
@media(min-width: 600px){
    #block-views-reviews-block .view-reviews {
        flex-direction: row;
    }
    #block-views-reviews-block .views-row {
        width: 50%;
    }
}

// I'm new - 3up
@media(min-width: 960px){
    #block-views-reviews-block .views-row {
        width: 33.33%;
    }
}

(7) Ha! Super easy.. get it into your JS.. add a class to the container that wraps the videos <div class="flexible-video'>..video embed here..</div> and instantiate the plugin: $(".cool-video-wrapper-class").fitVids();

(9) Almost! Do these things: http://www.screencast.com/t/qnppeou6e Then you can add css below to remove the focus ring on the container.. not really needed as the user can tab again and get to links and content in the main container:

#main-content  { outline: none; }

The reason it was still failing is the skip-to link was directing the user to an anchor link in the markup.. then when the user tabbed again the browser went back up the dom tree for next logical links..that being your nav which takes the user back up to the top.

Have a good weekend, Jen!

[jensimmons]

Re: 9. This is a pretty big change to how Drupal's been doing things. Here's a discussion on the older method. https://www.drupal.org/node/467976 — which suggests adding tabindex="-1" to the anchor link. <a name="main-content" tabindex="-1"></a>

Interesting. Hm. What do you think? This is not something I've done a lot of research on, but I know the folks who made Zen & Drupal a11y have.

[jensimmons]

Ok, for 9, I did a bit of a hybrid approach (a bit less conservative, I guess, in changing the Drupally way of doing a skip link)... I figure this is good until you tell me your way is better, at which point I'll jump in and do your way. Which do you think is better?

[jensimmons]

1. Done. It'd be great if you could double check this as well.
2. Alt tag for guest photo. Done. I added https://github.com/jensimmons/thewebahead/issues/36 as an issue to add the content. Take a look and make sure that's how you'd do it.
3. Skipping for now, I'll come back to it.
4. (Main nav contrast.) Darkened links. Made a bit bigger.
5. Done. Wow. Nothing like changing the brand color on the eve of launch. After submitting new art to iTunes. Ha. 18, 20, 21, 22 — all layout problem with the layouts I haven't finished. I'll be doing that Monday.
   1. Another javascript error. Skipping for now.

That's it! Yeah!! Thanks again.

[joe-watkins]

Hi Jen,.. By adding the markup I suggested you no longer need the named anchor anymore.. watch the vid where I take it out of the dom and things still work great: http://www.screencast.com/t/TXnEe29QW4

tabindex="0" or tabindex="-1" on the skip to link target will both work. We can simply add the target ID to the parent container vs. a named anchor.. they mention this method in the Drupal doc: http://www.screencast.com/t/fgIlgtyyZpN

[joe-watkins]

Good work Jen!

(13) Sweet! If you wanted you could add an outline: none; style to that container as well if this focus ring on the container bugs ya: http://www.screencast.com/t/V1f3jX5Eqy

If you ever wanted to add even more accessibility to these containers that we are adding focus to we could even add an aria-label=".." to that container. Example:

<article class="transcript" id="transcript" tabindex="0" aria-label="Full transcript for episode number 95 with Jeff Eaton">

(14) Yes.. that's good. While the content is available to you as other fields it is nice to abstract the alt out as you would have more control over the descriptive text. It is possible the image may not be of the human :)

(15) not seeing this error now :)

(16) nice! look great

(17) also looks good!

[jensimmons]

I noticed that tabbing through the links on the episode page (latest normal Chrome on Mac, setup in a normal fashion, nothing special configured) — I go from the player to some links (good), to the transcript, which is nicely highlighted in blue, to the links inside the transcript... FOREVER (because the transcripts are forever long) and I can't get to the button to open the transcript, nor the show note likes after that.

Suggestions....

[joe-watkins]

Jen,.. I will poke at this item tonight :) Sorry for delay.

[joe-watkins]

Hi :) So this comes down to markup order. You could move the div with a class of .transcript-expander so that is is before the transcript: http://www.screencast.com/t/lyVtKhgm

Then using absolute bottom positioning along with defining a 100% width you can make that button appear at the bottom of the hidden content. You will want to add position: relative; to the parent article.transcript

So now the user tabs to transcript section and the next link they hit is the 'Show full transcript' button.. giving the user the opportunity to expose all the content.