ADT UX Showcase

Summary

This requires that the developer provides a text alternative for any non-text content on the page, unless that content is solely for decoration. Purely decorative content should be added using a technique that allows assistive technologies like screen readers to ignore it.

Requirements and Tips

• Do provide labels and text alternatives for non-text content to describe the purpose of the content and make the same information available in a text format.
• Do use appropriate ARIA attributes in your markup to aid assistive technologies in describing the purpose of an element to the user.
• Do use CSS techniques or ARIA attributes that allow assistive technologies to ignore decorative elements.
• Do read your pages as HTML source to check if the non-text content has suitable text alternatives.
• Don't use only images or colours to convey meaning in your application.
• Don't put alternative text on images that are purely decorative.

Provided by VT Responsive and LibADT

• All components provided by VT and LibADT have text alternatives for non-text content as required and pass validation.
• CAPTCHA is a controversial topic, but ADT uses Google's solution which we feel meets the requirements for this section.

Application Specific

• Ensure all pages pass markup validation.
• Ensure all status indicators in your application have a text-based way to convey their meaning.
• Ensure all non-text content such as images, charts, or videos have a text description to make the purpose of the content clear, and have suitable text alternatives that provide the same information.
• Add decorative images and icons using CSS that can be ignored by assistive technologies. If you must use markup for this, add an ARIA attribute to indicate the element is decoration.
• Replace legacy image-based techniques used for layout or presentation (spacer images, rounded-corner images, images of text in a particular font, etc.) with modern CSS.

Reference

Summary

This requires that the developer use markup structure to present and separate content when creating a website. The developer should ensure markup elements are used appropriately when needed.

Requirements and Tips

• Do break up content by adopting the proper use of HTML elements. ( <h>, <sections>, <article>, <div>, <nav>, <ul>, <li>, etc.) .
• Do use <h1> - <h6> tags for header element.
• Do use lists for content that logically fall into list (ordered or unordered).
• Do use clear labels and alternative text on forms and form elements.
• Don't use tables for layout. CSS should be used instead.
• Don't put huge text blocks, which otherwise should be paragraphs, into lists

Provided by VT Responsive and LibADT

• All components provided by VT and LibADT use markup structure appropriately and pass validation.

Application Specific

• Ensure all pages pass markup validation.
• Break up content with subheadings for new sections.
• All form inputs should use labels correctly.
• Use lists and tables when appropriate.

Reference

Summary

This requires that content being presented must be meaningful during navigation to any user. English speaking users navigate content from left to right, however, assistive technology users such as screen reader users depend on the DOM structure to let them know how content is presented on the page. It is a best practice to match the DOM order to the visual order.

Requirements and Tips

• Do use markup in the correct hierarchical order e.g. <h1> before <h2> and <strong> as a child of <p>.
• Do keep navigation separate and differentiated from main content.
• Do use inline elements within block element.
• Do ensure the visual order matches the markup order.
• Do disable CSS to check if ordering and content make sense.
• Don't use block elements within inline element.

Provided by VT Responsive and LibADT

• All components provided by VT and LibADT use markup structure appropriately and pass validation.
• Navigation is provided by the template.

Application Specific

• Ensure all pages pass markup validation.
• Implement markup before styling to ensure markup order makes sense to screen reader users.

Reference

Summary

This requires that text and data, such as graphs and charts, not solely rely on colour to convey information to the user.

Requirements and Tips

• Do print to paper or pdf in black and white to check if information and graphs are still understandable.
• Do use patterns, colours and text on graphical data.
• Don't use instructions that only use colour to identify important steps.

Provided by VT Responsive and LibADT

• All components provided by the template do not solely rely on colour to convey information.
• Feedback panels use colour, icons and titles.
• Required fields are indicated by colour and text instructions.

Application Specific

• Ensure text, instruction, forms and wizards do not use only colours to convey important information.

Reference

Summary

This requires that text in the application has a suitable contrast in relation to its background so as to be readable by users with low vision.

Requirements and Tips

• Do use an automated contrast checking tool such as the WAVE add-on for Firefox to test all the pages in your application.
• Do adjust the size, weight, or colour of any text that fails the automated contrast check so that it passes.
• Do adjust placeholder text and text that only appears after a user interaction to meet the minimum contrast requirements. This may require manual checking if the automated tool you are using can't detect it.
• Don't adjust the text on inactive user interface controls as they are exempt from this requirement.
• Don't use CSS background images with text as it may interfere with the automated contrast checking tools. Use pure CSS for backgrounds whenever possible.

Provided by VT Responsive and LibADT

• All components provided by VT and LibADT meet the minimum contrast requirements.

Application Specific

• Ensure all text in your application meets the minimum contrast requirements, unless it is considered exempt according to the specification.

Reference

Summary

Users with low vision or limited vision who consume the content should be allowed to resize images and text to at least 200%.

Requirements and Tips

• Do check your all webpages by resizing to 200% in a variety of browsers.
• Do ensure text do not overlap.
• Do ensure the user interface components do not become unusable.

Provided by VT Responsive and LibADT

• All VT components are capable of browser text being resized up to 200%.

Application Specific

• Ensure all content can be resized up to 200% without making the application unusable. ADT developers can check their webpages by using the "Zoom Text Only" feature ( i.e. View > Zoom > Zoom Text Only ) in the firefox browser. You can read more about this browser feature on Mozilla Support pages

Reference

Summary

This requires that all functionality must be accessible and operable to users using a keyboard.

Requirements and Tips

• Do ensure all elements on the page are reachable by tab key.
• Do ensure that users are able to activate the buttons, links and form using the enter or space-bar keys.
• Do ensure that there is a visible indicator for the active element.
• Do ensure that focus order is intuitive.

Provided by VT Responsive and LibADT

• Main menu can be navigated with a keyboard ( tab, shift-tab and space-bar ).
• Elements in focus have a focus border by default.

Application Specific

• Ensure you use the tabindex attribute when needed.
• Do not set outline none on :focus pseudo elements as this will remove the focus indicator of an element.

Reference

Summary

Content that is time controlled ( i.e. it expires or changes its behaviour over a short period of time ) risks alienating users that require more time to read and understand content.

Requirements and Tips

• Do ensure that any content that is time limited can be turned off, paused or extended by the user.

Provided by VT Responsive and LibADT

• None of the components provided by VT and LibADT include time limited content.

Application Specific

• Avoid using timed content. If you do require this feature be sure users can pause or delay this timeout

Reference

Summary

Content that is moving, scrolling or blinking can become a distraction to users with reading or concentration difficulties. Developers should avoid using these if possible. If they are deemed necessary developers should provide controls to pause or disable moving content.

Requirements and Tips

• Do ensure that any content that is moving or blinking can be turned off or paused by the user.
• Do ensure that any auto-updating content has a mechanism for the user to set the update interval.

Provided by VT Responsive and LibADT

• None of the components provided by VT and LibADT include scrolling, blinking or auto-updating content.

Application Specific

• ADT developers should avoid scrolling and blinking content. If an auto-updating content area is needed, the developer will need to provide a pause button for this feature.

Reference

Summary

Any content that flashes should be limited to no more than three flashes a second. Flashing content can cause harm to a user who suffers from photosensitive seizures.

Requirements and Tips

• Don't add anything to a website that flashes more than 3 times a second.

Provided by VT Responsive and LibADT

• None of the components provided by VT and LibADT include any flashing content.

Application Specific

• Avoid any flashing content altogether.

Reference

Summary

This requires the developer to provide a more direct route to access the primary content of the page, for example allowing users to skip over repeated blocks of content such as header graphics.

Provided by VT Responsive and LibADT

• This is partially provided by both the VT Classic and Responsive template in the form of a skip to content link. However other bypass blocks may be implemented by the developer.

Application Specific

• Ensure all html element ids are unique.

Reference

Summary

Requires that all pages have titles that describe the purpose and topics of said page. This allows users to orient themselves without having to read the content of the page.

Requirements and Tips

• Do use the name of the document or web application for the title if the page is a document or web application. Although it's not required, it is suggested.

Provided by VT Responsive and LibADT

• This is not provided by either the VT Classic or Responsive template but rather the content within the developer's page, however LibADT provided pages like the Contact page have appropriate titles.

Application Specific

• Ensure the title accurately describes the content/purpose of the page.

Reference

Summary

The order in which components receive focus can affect the component's meaning. If there are multiple viable orders, only one needs to be provided.

Requirements and Tips

• Do ensure all focusable components receive focus in an order that preserves meaning and operability.

Provided by VT Responsive and LibADT

• This is not provided by either the VT Classic or Responsive template but rather the content within the developer's page, however LibADT provided pages such as the Contact page have appropriate focus orders.

Application Specific

• Ensure that the focus order of the components makes logical sense.

Reference

Summary

The developer needs to ensure that the purpose of each link can be determined from the link text alone or its link context.

Requirements and Tips

• Do use consistent descriptions for links to the same destination
• Don't make link text ambiguous.

Provided by VT Responsive and LibADT

• This is not provided by either the VT Classic or Responsive template but rather the content within the developer's page.

Application Specific

• Ensure that the purpose of link can be determined by the text or context except where the purpose of the link would be ambiguous to users in general.

Reference

Summary

The developer needs to ensure that there are multiple ways to locate a webpage within a set of webpages. For most ADT applications this is handled by the navbar which is accessible from all pages.

Provided by VT Responsive and LibADT

• This can be provided by both the VT Classic and Responsive Template through the navbar.

Application Specific

• Ensure that there are multiple ways to a webpage unless that page is part of process such as a wizard.

Reference

Summary

The developer needs to ensure that the headings and labels are clear and convey the material contained within the webpages as well as how they're organized.

Requirements and Tips

• Do make headings that are descriptive and meaningful even out of context.
• Don't make lengthy headings. A word or a character can sometimes suffice.

Provided by VT Responsive and LibADT

• This is not handled by the Responsive Template and will change from application to application except for in content provided by LibADT.

Application Specific

• Ensure all headings are clear and concise.

Reference

Summary

The developer needs to make any user interface that is operable from a keyboard have a focus indicator showing which component currently has keyboard focus. Focus indicators can be anything, ranging from a caret to a border outline.

Requirements and Tips

• Do use an indicator with an acceptable contrast level (Level AA).

Provided by VT Responsive and LibADT

• This is provided by default in both the VT Classic and Responsive Template.

Application Specific

• Ensure all indicators meet level AA contrast requirements.

Reference

Summary

A default human language should be set for the website in order to render text more accurately.

Requirements and Tips

• Do set a default human language.

Provided by VT Responsive and LibADT

• Default human language is set to English.

Application Specific

• Ensure the human language of the all pages on the site is set to the appropriate language, especially if the page is not derived from a modern VT example or a LibADT-provided page class.

Reference

Summary

Any content that switches from the default human language of the page should be tagged for screenreaders in order to present the content accurately to the user. Screenreaders and other assistive technologies rely on language tags in order to load the correct pronunciation rules for that language.

Requirements and Tips

• Do tag any language changes using lang.
• Do ensure you are using the correct ISO Code for the appropriate language.
• Do use <p>, <span>, and <div> elements to indicate language changes.

Provided by VT Responsive and LibADT

• Default human language is set to English.

Application Specific

• If a language change happens anywhere on the page, it is the developer's responsibility to indicate the change to the screenreader.

Reference

Summary

Users must be able to navigate their way through the site without initiating a change to the content or context of the page.

Requirements and Tips

• Do ensure that the focus is clearly marked on the page.
• Do ensure that navigation of the site is clearly predictable/follows a logical order.
• Don't use forms that submit automatically.
• Don't launch new windows or tabs when an element receives focus.

Provided by VT Responsive and LibADT

• Navigation menu is usable with a keyboard.
• Focus styles for various elements.

Application Specific

• Ensure any new forms, buttons, inputs, etc. are navigatable in a logical order while using a keyboard.

Reference

Summary

Users should be able to predict the outcome of interacting with input fields, checkboxes, radio buttons, etc. Interaction with these elements should not change the context or content of the page without prior warning to the user.

Requirements and Tips

• Do clearly identify if a change will occur in response to a user's action.
• Do provide submit buttons for all forms.
• Don't have buttons or links that change the context/content of the page when they receive focus.
• Don't have inputs that automatically move to the next field without warning to the user.

Provided by VT Responsive and LibADT

• Components and examples provided by VT and LibADT meet the requirements.

Application Specific

• Ensure all inputs in your application follow these guidelines

Reference

Summary

Users should be able to predict the relative order in which items on navigation mechanisms occur across the website.

Requirements and Tips

• Do ensure that repeated components appear in relatively the same order on each page of the site.
• Do provide a "Skip to Content" link.
• Don't change the order of the navigation from page to page.

Provided by VT Responsive and LibADT

• The Responsive template provides a "Skip to Content" link.
• Consistent navigation menu.

Application Specific

• Ensure that any sub-navigation in your application beyond what the template provides is consistent

Reference

Summary

Non-text components that have the same functionality on the website, such as a print or save icon, should be identified and labelled consistently. This will allow the user to become familiar with the website controls and enable them to find the desired functionality quickly.

Requirements and Tips

• Do use "alt" tags for icons and pictures.
• Do use consistent alt text labels for icons with similar functions.
• Don't switch between phrases for labelling (ex. when a web page has a search feature, don't use "search" on one page, and "find" on another).

Provided by VT Responsive and LibADT

• Alternative text to indicate success/failure.

Application Specific

• Provide consistent alt text for elements.

Reference

Summary

This requires that users are made aware that an error has occurred and can determine what is wrong. The error message should be as specific as possible.

Requirements and Tips

• Do clearly identify input errors
• Do alert user which fields are missing or incorrect
• Don't use colour and styles alone to identify errors

Provided by VT Responsive and LibADT

• A Feedback Error panel to be added above the form showing the errors. The feedback panel displays text for the type of feedback (e.g. ERROR, WARNING, etc.) in addition to an icon and colour.
• A JavaScript to be added for the submit button that displays the feedback panel (e.g. if the form is long and the top of the form is scrolled off the display, the JavaScript will scroll to the top)
• Helper methods for using the JavaScript

Application Specific

• To see an example, on the page Forms click the Submit button without filling in any of the required fields.
• If the form is using an Ajax button, use the following code from AdtUXShowcase (which scrolls the display to the feedback panel at the top if there are errors) as an example:

  								
  // The feedback panel 
  Component feedbackPanelStacked = new AdtResponsiveFeedbackPanel("feedbackPanelStacked");
  feedbackPanelStacked.setOutputMarkupId(true);
  add(feedbackPanelStacked);
  
  // The submit button							
  AjaxFallbackButton submitButton = new AjaxFallbackButton("submitButton1", Model.of("Submit"), form)
  {
      @Override
      protected void onSubmit(AjaxRequestTarget target, Form<?> _form)
      {
          LOG.info("The Submit button of the Stacked Form was clicked!");
      }
  
      @Override
      protected void onError(AjaxRequestTarget target, Form<?> form)
      {
          if (target != null)
          {
              FormUtils.updateAndScrollToComponent(target,feedbackPanelStacked);
          }
      }
  };
  AdtResponsiveButtonDecorator.styleAdt(submitButton, AdtResponsiveButtonDecorator.Size.LARGE);
  AdtResponsiveButtonDecorator.stylePrimary(submitButton);
  form.add(submitButton);

• If the form is not using Ajax, then nothing needs to be done. The page will refresh after submitting the form and the feedback panel will be visible at the top.
• If input is being truncated (e.g. max size specified for textarea or text field), let the user know. For example, specify this in the field label.

Reference

Summary

This requires placement of instructions or labels that identify the controls in a form so that users know what input data is expected. Instructions or labels may also specify data formats for fields especially if they are out of the customary formats or if there are specific rules for correct input. The goal is to make certain that enough information is provided for the user to accomplish the task without undue confusion or navigation.

Requirements and Tips

• Do use the "adt-required" class in the <label> tag for required fields. This will display an asterisk (*) beside the field label.
• Do use the "required" HTML attribute in the input fields for those that are required. For example:
  • <input type="text" id="lastName" name="lastName" required="required" />
  • You can use method  makeHtml5Required  from LibADT to add the required attribute
  • NOTE: If the form is an Ajax form, this attribute is ignored (using Wicket Ajax call rather than a normal submission
• Do give examples of the format needed for entering a field where applicable
• Do specify min and max sizes of fields where applicable
• Do make sure label elements are associated with input elements and located in close proximity
• Do use clear labels to identify the fields

Provided by VT Responsive and LibADT

• Styles are provided for indicating a field as required, by adding an asterisk (*) beside the label. An informational message is displayed above the form to explain the meaning of the * designation.
• The input fields and labels are correctly associated in the markup in the examples

Application Specific

• See the examples on page Forms
• If a form control causes a change of context to occur, describe what will happen. For example if entering/selecting a field or a button in an Ajax form triggers extra fields to be displayed, let the user know what will happen and what input will be expected.

Reference

Summary

This requires that developer writes clean and valid code (HTML, CSS and Javascript) in a manner that is understood by most modern browsers and assistive technologies.

Requirements and Tips

• Do ensure that markup that require closing tags, has both start and end tags.
• Do ensure that IDs are unique.
• Do ensure HTML elements are nested correctly.
• Don't use duplicate attributes.

Provided by VT Responsive and LibADT

• All components provided by VT and LibADT use markup structure appropriately and pass validation.

Application Specific

• Ensure all pages pass markup validation.
• Verify that all elements that require closing tags have them.

Reference