Accessibility Notes for the Mars Commuter Demo Site

Accessibility Notes for the Mars Commuter Demo Site

These accessibility notes refer to the MarsCommuter Home Page

Meta Data

  • Language attribute missing: Need to specify the language of the document

Document structure:

  • Improper use of heading:
    • The paragraph “A trip to Mars starts in your imagination…” is marked as H2, but it should be a paragraph <p> instead
    • Each special offer is marked as an H3, but these should probably be either list items or paragraphs.
  • Missing headings:
    • The words “Special Offers” should be a heading, probably H2

Skip Navigation and ARIA Landmarks

  • There is no skip navigation link
  • There are no ARIA landmarks

Keyboard Navigation

  • Tab order
    • The overall page tab order does not match reading order, and the ability to fill out the form in a logical order is broken: The first item that receives the keyboard focus on the page is the “From” text field under “Book your trip” in the middle of the page, due to the tabindex being set to “1”. The focus then goes to “To” then “Departure date” and the time. Then there are two mystery keyboard focus events that are invisible and don’t activate anything if you hit enter. Then the focus goes to the top of the page before users have a chance to finish filling out the form. If users continue to use the tab key to cycle through the full page, they then skip over these fields (From, To, Departure Date, Time) and cannot access them in the correct context, because of the tabindex attributes.
      Notes: Pushing the focus to the middle of the page is not always a bad thing for accessibility, if it’s understood that this is the most important thing on the page, but the way this page is designed, users would not be able to complete the form with the keyboard alone.
  • Keyboard Operability
    • Popup menus don't go away, and cover the content beneath them: The popup menus for country and language are keyboard-accessible, meaning that you can activate them with the enter key, but they stay open after you tab all the way through them. With the menus open like this, they get in the way of things underneath them. If you keep tabbing through the links, you can’t see where the tab focus is, because it’s somewhere underneath the popup menus. If you tab all the way back to the link itself, you can use the Enter key to make the menu disappear, but it would be much better if the menus disappeared when exiting the menu.
    • The Special Offers section
      • Repetitive content: The special offers are repeated multiple times in the code, so users have to tab through lots of instances of the same links, reducing usability
      • Repetitive links: Each individual deal has three links to the same destination. One link is on the image; another link is on the heading; another link is in the paragraph.
      • Inaccessible feature: The large button at the bottom of the special offers section, for scrolling down through the offers, is not accessible to the keyboard
    • Multi-function travel search widget:
      • The “Find Fares & Schedules” tab:
        • Users cannot tab into the text input fields (From, To, Departure Date, Time) in the natural tab order of the document. The keyboard focus skips over these fields.
        • Users cannot tab to “Add another trip” with the keyboard
        • Users cannot tab to “Add a Traveler” with the keyboard
        • The MarsElitePass pseudo-link is unavailable to the keyboard, so users can’t see the extra information that pops up in a tool-tip when users place the mouse over the text
        • There is a mystery object that receives the keyboard focus before the “Traveler” form field. This object has no visible text or images
      • The “MarsCommuter Passes” tab:
        • The “How many days” pseudo-link is unavailable to the keyboard, so users can’t see the extra information that pops up when users place the mouse over the text
        • Users cannot tab into the text input fields (From, To, Departure Date, Time) in the natural tab order of the document. The keyboard focus skips over these fields.
        • Users cannot tab to “Add another trip” with the keyboard
        • Users cannot tab to “Add a Traveler” with the keyboard
      • The “Mars Commuter Reservations” tab:
        • Users cannot tab into the text input fields (From, To, Departure Date, Time) in the natural tab order of the document. The keyboard focus skips over these fields.
        • Users cannot tab to “Add another trip” with the keyboard
        • Users cannot tab to “Add a Traveler” with the keyboard
        • The MarsElitePass pseudo-link is unavailable to the keyboard, so users can’t see the extra information that pops up when users place the mouse over the text
        • There is a mystery object that receives the keyboard focus before the “Traveler” form field. This object has no visible text or images
      • The “Find Activities” tab:
        • Everything is keyboard-accessible
      • The “Book a Hotel” tab:
        • The fields “Space Port,” “Check-in date,” “check-out date,” “# of Rooms,” “# of Adults,” and “# of children” fields are not keyboard-accessible
        • There are four mystery keyboard focus objects that are invisible and don’t perform any action with the enter key
    • The video player:
      • Firefox, Mac: All of the important features are available to the keyboard. Good!
      • Chrome, Mac: Media player options are NOT keyboard-accessible. Once you tab into the media player, the player shifts downward within the iframe, making it so you can't see the controls anymore.
      • Safari, Mac: The tab order stops at the search button. It won't let you tab into the media player or anything else below the search button.
      • The left and right arrow buttons below the iframe are not keyboard-accessible, but the dots in between them are, so the overall functionality is still there
  • Visual keyboard focus
    • Visual keyboard focus is broken: The visual focus does not follow the keyboard focus when tabbing through the list of special offers. Users can’t see where they are in the document structure because the part with focus is often hidden
    • The Facebook icon link does not show a visual focus indicator.
    • There are several other places within the booking widget on the right where the visual tab focus disappears. It reappears after tabbing a few times.

Screen Reader Tests

  • Jaws/IE
    • Media player:
      • The fast-forward and rewind features in the YouTube frame do not work with the keyboard with Jaws turned on, even though they work with Jaws turned off
  • NVDA/Firefox
    • Not yet tested
  • VoiceOver/Safari
    • Media player:
      • VoiceOver skips over the video iframe completely. If I cheat by clicking in the media player with the mouse, the controls become keyboard-accessible, but nothing is announced by VoiceOver. It does not tell users the name or function of any of the buttons, and in fact it says nothing when tabbing through the controls.
  • VoiceOver/Chrome
    • Media player:
      • The main features of the media player are accessible to the screen reader, and it reads the labels appropriately, but VoiceOver also reads a lot of extraneous information when reading the media player controls, making it hard to understand what the buttons are for. For example, on the mute button, it says, "Mute toggle share dislike like 0% at 0 of 252 seconds 0:27 4:12 button." It's strange that it says "share dislike like" because there is no visual indication that those features are available through that button, and in fact those features are not available through that button. In fact, it says "share dislike like" when reading most of the buttons in the media player.

Images

  • Missing alt text
    • Spacer image at the top missing alt text: <img width="1" height="1" src="js/seg"/>
    • In the special offers: the images of the man in a space suit standing behind Martian rocks (2 instances)
  • Important background images with no text equivalent
    • The main logo, "MarsCommuter", is a background image, so there is no alt text, and no actual text is supplied as a substitute
    • The dots below the videos, which allow users to select different videos, are background images, so there is no alt text, and no actual text is supplied as a substitute
  • Inappropriate alt text
    • The alt text for the calendar widget in the forms is alt=”…”, which is not informative
    • alt = "Martian sunrise" (2 instances)
       
       
    • alt=”beautiful baboon, blowing bubbles, biking backward" (2 instances)

       
    • alt=”icecream.jpg" (2 instances)
       
    • CSS background images are used to convey meaningful information: Many of the images on the web page are CSS background images, and many of these images contain text and other important information. See http://www.digitalaccessibility.org/mars/images/sprite.png which is a single file consisting of multiple images, all of which are placed in the background. As you can see, many of these images contain content, and since it is impossible to provide alt text for CSS background images, this information is lost.

Forms

  • Missing form labels. Screen readers have nothing to read to the user.
    • Search text input (2 instances)
    • Search submit (2 instances)
    • Multiple instances in the multi-function travel search widget, detectable with automated tools
  • Orphaned form labels. Screen readers may not correctly associate the labels with the form elements
    • “Class of service”
    • “Select the planets covered by your Mars Commuter Pass”
    • “Planet”
    • “Space port”
  • Fieldsets without legends. Fieldsets are generally the best way to provide a label for groups of form elements, such as radio buttons or checkboxes, but they need to have labels to be effective.
    • Under “Let the Adventure Begin!” there are 5 radio button options without a legend for the fieldset
    • Under “Find Activities” there are three form elements grouped in a fieldset without a corresponding legend
    • Under “Book a Hotel” there are several form elements grouped in a fieldset without a corresponding legend
  • Empty buttons
    • Multiple instances, especially in the multi-function travel search widget, detectable with automated tools

Links

  • Links without text (or without alt text on graphics).
    • The first link in the main navigation menu is a background image. There is no text in the actual link itself
    • The image in the footer of the iPhone is a background image. There is no text in the actual link itself
    • The image in the footer of the three people on a blue background is a background image. There is no text in the actual link itself
    • Other instances, detectable with an automated tool like FireEyes or Wave
  • Repetitive links
    • The links in the Special Offers sections are repeated three times each
  • Meaningful links
    • The meaning of the first link (the drawing of Mars) for visual users is ambiguous. Is it a link to the home page? Users aren't sure until they click on it. (Note: the link is also missing text completely, as noted earlier).

Timed Scripts

  • No ability to pause: The Special Offers sections scrolls automatically, with no way to pause it, either with the keyboard or with the mouse. Pressing the scroll-down button at the bottom will scroll the viewport down, but it does not pause the timing mechanism, so it is not sufficient to make reading easy
  • Ineffective placement of scroll button: The content disappears when it reaches the top of the Special Offers area, but the control to scroll down is at the bottom of that region, so users may not see it, especially in the case of users with low vision who may have the screen enlarged.

Color Contrast

The contrast between the text and the background of the following elements is problematic:

  • The Facebook Login button at the top
  • The medium blue links against the light gray background in the main menu
  • The blue "Countdown" heading in the middle of the page
  • The green "Blast off!" heading in the middle of the page
  • The blue links in the multi-function travel search widget
  • The background photograph in the footer reduces the readability of the text, especially towards the top in the headings ("Book Your Trip," "Mars Shuttles," etc.)

Videos

  • Captions
    • The first video lacks captions completely, making it inaccessible to people who are deaf
    • The second video has captions of the narration, but there are no captions until one minute into the video, so most deaf people will assume there are no captions at all. The dialog at the beginning needs to be captioned in addition to the narration that starts later
    • The third video has captions. Good!
  • Audio Descriptions
    • The three videos lack audio descriptions, making them less than ideally accessible to people who are blind. They will hear the dialog and narration, but without audio descriptions, they will not be able to understand the visual components for which there is no dialog or narration.
  • Transcripts
    • No transcripts are provided. People who are deaf and blind will not be able to access the content of the videos at all