Inclusive Learning Design Handbook Testing Notes

Website

Go to this website and find bugs!  http://jhung.github.io/docs-inclusive-learning/

Feature Requests

• Searching and links to related articles are future improvements
• Provide a "helper" method or process for adding in the external link identifier. Possibly via docpad helper function, handlebars, etc.
• It's good to have the 'Topic' anchored to the top. So, it's always available when you scroll down on the page. Specially when you have the topics open, and you start scrolling down, almost half of the screen is occupied by white blank space. And to close the Topics, you should scroll all the way back to the top.

Accessibility Issues

Low:

• [a11y] currently FF does not read aria-labels on Mac

Fixed:

• Add aria-pressed to button FLUID-5746 - Getting issue details... STATUS
• FLUID-5751 - Getting issue details... STATUS

Usability Issues

Blocker

• None

High

• FLUID-5772 - Getting issue details... STATUS

Medium

• FLUID-5776 - Getting issue details... STATUS

Low

• FLUID-5777 - Getting issue details... STATUS
  
  • The "topics" flag is a collapse/uncollapse toggle, but there's nothing to indicate status, or even "activatability". Perhaps something like a chevron-style arrow that switches back and for between left-facing and right-facing?
  • [mobile] When viewing in mobile, the Topics ribbon should collapse to just the menu icon.
  • [Usability]My initial thought was that Topics was the same as the topbar. I'm not sure if this was because of the two levels of introduction, or if it's the name "Topics" itself
• Usability - If you close the "Topics" and re-open or open another page it loads open and then closes. It would be better for it to just load closed or to not do the animation.
  • Filed this jira:  FLUID-5732 - Getting issue details... STATUS
• are these kinds of arrows a recommended a11y best-practice? If not, I suggest we do away with them.
  • Yes it actually is recommended for usability. I will find some articles supporting this design. - JH

Fixed

• The name of the site, "The Inclusive Design Learning Handbook", seems visually a little bit too small. It's smaller than everything else, and given that it's the name, I think it should be a little bit more visible. If someone follows a random link and winds up on some inner page, the "information scent" will not let them know what this site is.
• The name of the site, under the logo, should probably also be a link to the home page.
• [content] The logo link should be more descriptive. Right now it just says: "Floe Project"
• Links in sidebar should not be focusable when sidebar is hidden. This can be solved by adding display:none on the .docs-template-sidebar-visibility class.
• "Jump to Table of Contents"
  • can be confusing when ToC is enabled via UIO. The label should change.
  • When "Jump to TOC" is selected and the sidebar is closed, focus should jump to the Topics button (or jump near to it)
• Change the "Edit on Github" link to say "Edit this page on Github"
• Add aria role="button" to "Topics"
• a11y - The yellow on teal links at the bottom of the page are kind of hard to read

Content Issues

Blocker:

• FLUID-5747 - Getting issue details... STATUS Fixed? Confirm  
  
  

Medium:

• content - Should the Get Involved text or maybe the README talk about how to submit pull requests and etc. to get edits into the ILDH.
• content - Should the "Who is this for" section go ahead of "Get Involved"

Fixed:

• [content] On the Methods - Inclusive Learning page, the "CC- By Education" external link lacks the arrow

• [content] Some images are missing - this is because relative url helper was not being used.
• Content - in Inclusive EPUB 3, Missing word "to" in the sentence:
  
  • The information provided illustrates how concepts may be applied but won't make you an "expert" - you are encouraged use this guide as a starting point and to follow the resources provided to gain additional insight. 
• content - It seems a bit strange to have an Introduction in the Introduction. Can we rename / reorganize this sub-section.
• Content - In Inclusive Learning The heading "Solutions: customization + personalization, demands + matching" is hard to read and confusing because of the wrapping.

•  "Accessible Standardized Testing" and "Inclusive EPUB 3" have a different structure than the "Introduction" and "Methods" groups in that they open to a page that isn't in the topics.

• [Content]The external links in the footer have an arrow, to indicated their externalness, but external links within the content don't have the arrow.
  • Verify if this is true or which page this was on.
  • Some external links were missing arrows - should be fixed now.

UIO Issues

Blocker:

• None

Investigate:

Fixed:

• [UIO / CSS] When in Contrast mode, hover border on TOC does not match scheme
• [UIO] The Nav container and tagline background colour needs to be updated for contrast themes.
• [UIO] Tell the TOC enactor to omit section
  • I'm not sure if the point above refers to this, but: The ToC contains links it shouldn't: It always starts with a link to "The Inclusive Learning Design Handbook", and most pages also have a link "Introduction". These links appear before the links that belong. FIXED
  • [Content] a clickable item appears next to the logo. You can hover over it and selecting it does nothing. Windows Only? Happens in IE 11 and FF. Chrome on Windows is fine. FIXED
• [UIO] The link 'underline and bold' action is not underlining the left-navbar links. FIXED

Styling Issues

Blocker:

• none

Low:

• FLUID-5775 - Getting issue details... STATUS

Fixed:

• [css] Focus styling on UIO button is blue. It should match the green used for background (same styling as the skip links)
• [css] Focus styling on the "current page" link in the left sidebar is almost invisible
• [css] There seems to be no hover style for the active item in the horizontal nav, even though it's still
• [css] When focus appears on nav or TOC item with a hover state, you see gaps between the rounded border and the outline
• [css] The Topics ribbon is just a *hair* too narrow.
  • [CSS/Styling] Topcis ribbon is jagged - fixed
• It maybe good to have consistent focus styles for the tabs on top and the Topics list items
• There us a white rectangle that appears under the Topics link when you select it that doesn't go away. I don't know if this is intentional or not (It goes away when you select another tab from the top row)
  • This was a problem after activating the UIO Table of Contents. This has been fixed.
• [css] The contents of the "Topics" section move up to the left when closing.
  • This is no longer a problem because the transition has been removed because of a bug.
    

Browser Specific Issues

Low:

• css - Menu icon can sometime not appear on Chrome 44.0.2.
• [browser] DroidSans used in Floe logo does not show up on IE latest
• [Browser] In IE, OpenSans bold (or weighted style) does not render. It defaults to Times Roman. This may be a known bug already. Check Jira.

Mobile

Blocker:

• FLUID-5723 - Getting issue details... STATUS Sidebar text is getting cropped:
  • On UIO [UIO] When text size is increased, some text is cropped in sidebar
  • On mobile - Sidebar get cut off on small screens: https://issues.fluidproject.org/browse/FLUID-5723
• [Mobile] Minimum width causes text to be off screen: https://issues.fluidproject.org/browse/FLUID-5725
• Make the navigation links below the header more mobile friendly. It should take less space. Perhaps use the Foundation widget.
  • On Android-Chrome (latest) on Galaxy S5: Top menu layout jumps around on portrait orientation - should perhaps be one menu item / line on narrow screens?

Medium:

• FLUID-5774 - Getting issue details... STATUS

Low:

• [Mobile] Menu icon does not show up Blue by default: https://issues.fluidproject.org/browse/FLUID-5724

Investigate:

• The tabs on the top row don't seem to be clickable and don't look like tabs.

Sep 2015 testing

Chrome testing results

 Fixed:

• Mouse hover vs keyboard focus on the “Hide Topics” button is different. The mouse hover causes the button to increase in width. Additionally, this increase looks slightly clipped, as the left side has rounded corners, but the right side doesn’t.
• Using the “Skip to Topics” link scrolls the page, but pressing tab puts me back at the top. Using “Skip to Content” puts me in the article for both page scroll and tabbing. The latter seems better and they should be consistent.
• The current links i.e the nav link to the current page and current section probably shouldn’t be active. They are causing a page reload.
• The entire page seems to be left justified. Meaning that tif the browser is really wide, it sticks to the left side. Can we make this centred?
• The “Inclusive Design Research Centre” and “OCAD University” links in the footer do not open in a new tab like the rest of the links.
• Dead links are caused by the fact the site is not deployed to the root. So all link references are broken until deployed to production.
  • This should be improved by using a handlebars helper, but for now it's what it is.
• Needs External Link styling
  • https://jhung.github.io/docs-inclusive-learning/AccessibilityPrinciples.html
    
    • some user states and contexts
    • Web Content Accessibility Guidelines
  • https://jhung.github.io/docs-inclusive-learning/CaseStudyExemplar.html
    
    1. http://johnmacfarlane.net/pandoc/ (also needs to open in a new tab)
    2. http://phet.colorado.edu/sims/html/forces-and-motion-basics/latest/forces-and-motion-basics_en.html (also needs to open in a new tab)
    3. https://github.com/phetsims/forces-and-motion-basics (also needs to open in a new tab)
    4. http://bit.ly/phet-development-overview (also needs to open in a new tab)
    5. http://audacity.sourceforge.net/ (also needs to open in a new tab, and this link is also blocked by my uBlock Origin plugin)
•  "Figure: The Open Author accessibility metadata sidebar” is not a link to the image like the other ones on https://jhung.github.io/docs-inclusive-learning/Metadata.html
• One of the screen shots from the metadata authoring tool on https://jhung.github.io/docs-inclusive-learning/Metadata.html is missing
• The “Dyslexie font” link doesn’t open in a new tab, on https://jhung.github.io/docs-inclusive-learning/AudioContentAndLearning.html
• The figures on https://jhung.github.io/docs-inclusive-learning/AudioContentAndLearning.html aren’t links to the images
• All of the figures under Comparison of Authoring Environments on https://jhung.github.io/docs-inclusive-learning/AuthoringOfContent.html are missing
• The “Dublin Core metadata” link on https://jhung.github.io/docs-inclusive-learning/InclusiveEPUB3.html doesn’t open in a new tab
• my uBlock Origin plugin prevented the “source” link on https://jhung.github.io/docs-inclusive-learning/InclusiveEPUB3.html from opening. Is this a reliable source?
• The links in the Further reading section on https://jhung.github.io/docs-inclusive-learning/ScriptingInEPUB3.html are not organized as a list
• The http://www.idpf.org/accessibility/guidelines/content/meta/schema.org.php and “Encoding Accessibility Metadata for Floe" links on https://jhung.github.io/docs-inclusive-learning/AccessibilityMetadata.html do not open in a new tab
• The headers on https://jhung.github.io/docs-inclusive-learning/AccessibilityMetadata.html are broken
• The last header on https://jhung.github.io/docs-inclusive-learning/TestingAndValidation.html is broken
• “iBooks for Mac OS X” doesn’t have a link ( http://www.apple.com/ca/ibooks/ ) on https://jhung.github.io/docs-inclusive-learning/CaseStudyExemplar.html

• In the mobile layout, when links span lines, the focus styling overlaps

• In the mobile lay when the topics are shown, the tab is clipped by the screen edge.

• In the mobile layout, with large text size and linespacing enabled, the interface is pretty much unusable.
• - Oddity: Focus and hover styling are different (which is good), but they’re the same for the “hide topics” link, which leads to the next point.
  - After clicking the ‘hide/show’ topics link, the hover styling remains, even if you’re not hovering
   I’m guessing this is because hover and focus styling are the same, and focus is still there
• - the “skip to content” link actually lands you at the “hide topics” link, which might be a bit weird for non-sighted users. I was expecting to bypass that. Not sure what others would expect – maybe do a quick survey of a few people? 

Issues: