Aileron

Accessibility Checklist - Web Content

We consider our sites to be accessible if they conform to the WCAG 2.0 Level AA guidelines. This checklist can serve as a quick reference for the areas of concern your feature/project/product should satisfy to be deemed in compliance. Complete details are available on the WCAG website , opens another site in a new window that may not meet accessibility guidelines. .

Deque offers a browser extension for Chrome and Firefox that can help identify a11y issues. While you won’t be able to automate A11y testing 100%, tools such as Deque’s Axe browser extension can help automate alot. Deque aXe - Chrome and Firefox Extension opens in a new window

Markup (30)

  • There are no HTML5 validation/parsing errors present on the page. Check with a HTML5 validator such as http://validator.w3.org/
  • Verify empty content elements/containers are hidden from assistive technologies.
  • The language of the page is identified using the HTML lang attribute (<html lang="en"> for example).
  • The language of page content that diffs from the language of the page is identified using the lang attribute (e.g., <blockquote lang="es">).
  • The web page has a descriptive and informative page title (set in the <title> tag)
  • Markup is used in a way that facilitates accessibility. This includes following the HTML5 specifications and using forms, form labels, etc. appropriately.
  • Semantic markup is used appropriately to designate headings (<h1>), lists (<ul>, <ol>, and <dl>), emphasized or special text (<strong>, <code>, <abbr>, <blockquote>, <mark>, <cite>, etc.), paragraphs (<p>), tables (<table>, <thead>, <tbody>, <tr>, <th>, <td>, <tfoot>), etc.
  • Semantic headings (<h1>…<h6>) are applied in hierarchical order and do NOT skip levels:
    Correct: <h1> <h2> <h2> <h3>
    Incorrect: <h2> <h1> <h4> <h2>
  • There is a single <h1> heading applied to the page that describes the overall purpose of the page.
  • Style of headings is determined by CSS rules not by HTML heading level.
  • Tables are used for tabular data. Where necessary, data cells are associated with their headers. Data table captions and summaries are used where appropriate.
  • Unrelated data is not included in the same data table.
  • Large, complex data tables are broken down into smaller, simpler data tables when possible
  • Tables are not used for layout.
  • Tabular data and corresponding header cells for that data are part of the same table.
  • All data table header cells are identified.
  • Header cells are marked up using TH elements.
  • Relationship between table header rows and table header columns with data cells in complex data tables is provided through the HEADERS and ID attributes.
  • Relationship between table header rows and table header columns with data cells in simple data tables is provided through the SCOPE attributes.
  • Header cell rows are marked up using THEAD elements.
  • Caption elements are used to associate caption information with data tables.
  • Summary elements are used to explain data tables.
  • Table row and/or column headers provide meaningful description of context for data within the table.
  • The footer information in the table comes after the main content in the source order.
  • Grouped information uses HTML list elements for large groups of related items
  • The page defines the header section (ex. banner landmark or header sectioning element)
  • The page defines the main navigation menu (ex. navigation landmark or nav sectioning element)
  • The page defines the main section (ex. main landmark or main sectioning element)
  • The page defines the footer section (ex. contentinfo landmark or footer sectioning element)
  • Clear, informative titles are provided for all frames and iframes.

Images (13)

  • All images have appropriate, equivalent alternative text.
  • Images that do not convey content, are decorative, or contain content that is already conveyed in text are given a null alt text (alt="").
  • All hyperlinked images have descriptive alternative text that conveys the purpose of the link.
  • If images contain text then the same message is conveyed through alt text.
  • Background images are used for decorative purposes only.
  • Alternate text for icons, image buttons, or other navigational elements clearly describes the destination or action.
  • Spacer images are not used to control layout (instead of CSS).
  • Images that are changed or replaced using JavaScript have alt text values that are updated as the images change.
  • Charts, graphs, and infographics utilize both color and pattern to convey information.
  • The alt text value of images and linked images does not replicate any information that is already being conveyed by screen reader technology.
  • CSS background image sprites do not include images of text, unless a text alternative is also provided as part of the HTML.
  • Icon fonts used to convey information are hidden using the aria-hidden property.
  • Icon fonts used to convey information are provided with a text equivalent in HTML.

Keyboard Navigation (8)

  • All page functionality is available using only the keyboard.
  • Don’t use shortcut keys and accesskeys.
  • The reading and navigation order (determined by code order) is logical and intuitive
  • The navigation order of links, form elements, etc. is logical and intuitive and follows code order.
  • No positive tabindex values are used to force or alter tab order (tabindex="1", tabindex="2", etc)
  • A link is provided to skip over navigation and other page elements that are repeated across web pages
  • Elements which are typically unable to receive focus are not applied JavaScript events.
  • Multiple mechanisms are provided for wayfinding (ex. breadcrumbs, search features, site map, progress bar, steps, etc).

Focus (10)

  • Keyboard focus should not be applied to items which are not actionable with some exceptions to draw users' attention to critical information.
  • Design standards for keyboard focus as defined by Digital Customer Experience (DCX) are being applied.
  • All actionable elements (buttons, links, form controls) can receive keyboard focus.
  • It is visually apparent which page element has the current keyboard focus (i.e., as you tab through the page, you can see where you are).
  • Don’t use color alone for links. A link will be identified with an underline by default or on hover/focus.
  • When a page element receives focus, it does not result in a substantial change to the page.
  • Keyboard focus is never locked or trapped at one particular page element. The user can navigate to and from all navigable page elements using only a keyboard.
  • When a modal dialog is presented, the keyboard focus should be restricted to the elements within the dialog until the point the dialog has been dismissed.
  • When a modal dialog is presented, the screen reader focus should be restricted to the elements within the dialog until the point the dialog has been dismissed.
  • When interacting with an element on a page causes a modal dialog to display, once the user dismisses the dialog, keyboard focus should return to the element that triggered the dialog. If the element is no longer present on the page, then a logical alternative element should receive focus. User focus should NOT be reset to top of page, unless closing the dialog caused a full-page reload.

Content (3)

  • Copy standards for page titles as defined by Digital Customer Experience (DCX) are being applied
  • Every view or virtual page/instance (i.e. Choose flights) must have a unique title
  • Instructions do not rely upon shape, size, or visual location (e.g., "Click the square icon to continue" or "Instructions are in the right-hand column").

Forms (20)

  • Sufficient labels, cues, and instructions for required interactive elements are provided via instructions, examples, properly positioned form labels, and/or fieldsets/legends.
  • Required form elements provide this information within the element's label.
  • Standard HTML controls are used for forms.
  • Text labels are associated with form input elements. Related form elements are grouped with fieldset/legend.
  • Form elements that require a specific format, value, or length provide the information in accordance with Digital Customer Experience.
  • If utilized, form validation errors are presented in an efficient, intuitive, and accessible manner. The error is clearly identified, quick access to the problematic element is provided, and user is allowed to easily fix the error and resubmit the form.
  • Form validation error messages are announced to user when they place focus on the input associated with the error.
  • If an input error is detected (via client-side or server-side validation), provide suggestions for fixing the input in a timely and accessible manner. Exception: inputs related to user authentication should not provide suggestions or give clues as to what was correctly or incorrectly entered.
  • If the user can change or delete legal or financial data, the user is asked to verify the changes/deletions before modifying.
  • Form buttons have a descriptive value. If there is an implicit agreement associated with pressing the button, the agreement statement should be worked into the button's value. Example: "By continuing you agree to the terms and conditions."
  • Submit buttons in forms rely on an input type submit element or a button element.
  • Radio buttons are properly grouped via HTML
  • Complex forms utilize fieldset and legend elements to group related form controls programmatically.
  • Forms are not automatically submitted.
  • Users have the ability to prevent and correct errors on forms.
  • Ask DCX(UX) if a confirmation screen is displayed prior to any final form submission.
  • Text that is relevant to a form does not appear after the submit button.
  • Instructions provided in forms are presented in a clear and unambiguous way.
  • Whenever provided, instructions on how to use forms are programmatically conveyed to assistive technologies.
  • Placeholder attributes values are not used in lieu of regular form label elements.

Links (7)

  • The purpose of each link can be determined from the link text alone, or from the link text and its context (e.g., surrounding paragraph, list item, table cell, or table headers).
  • Links that open new browser windows indicate this behavior to users visually and non-visually.
  • Links that take users to external sites indicate this behavior to users visually and non-visually as well as warn them that the external site may not achieve the same level of accessibility as American’s site.
  • Links with the same text that go to different locations are readily distinguishable.
  • Users can distinguish between links opening modal windows and links opening new windows.
  • Adjacent linked images and text links pointing to the same URL are merged into single links.
  • Links are marked up using the A element and have a valid href attribute.

Predictability (4)

  • Elements that have the same functionality across multiple web pages are consistently identified. For example, a search box at the top of the site should always be labeled the same way.
  • Navigation links that are repeated on web pages do not change order when navigating through the site.
  • Page headings and labels for form and interactive controls are informative. Avoid duplicating heading (e.g., "More Details") or label text (e.g., "First Name") unless the structure provides adequate differentiation between them or the use of accessibly hidden text is employed to convey the distinction to assistive technologies like screen readers.
  • When a user inputs information or interacts with a control, it does not result in a substantial change to the page, the spawning of a pop-up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user unless the user is informed of the change ahead of time.

Behavior (6)

  • No page content flashes more than 3 times per second.
  • Automatically rotating carousels provide the mechanism to be paused and restarted.
  • Avoid automatic refresh/reload of pages.
  • The page contains no javascript events meant to only work with specific devices.
  • Behaviors scripted to occur on hover state (onmouseover, :hover) are also replicated on focus state (onfocus, :focus).
  • If a page or application has a time limit, the user is given an option to extend that time limit with a maximum extension. - Current pattern is to present a user a dialog asking if they want to continue their session at the 13 minute mark. If they agree the session timer is reset and the countdown starts over. - If user doesn’t agree and doesn’t complete their operation before the 15-minute mark (after the 2 minute warning), a second dialog is presented informing user that their session has expired. Closing the dialog will redirect user to an appropriate location.

Color and size (distinguishable (6)

  • Large text - at least 18 point (24px) or 14 point (18px) bold has a contrast ratio of at least 3:1
  • Text and images of text have a contrast ratio of at least 4.5:1.
  • The page is readable and functional when the text size is doubled by the end user.
  • Color is not used as the only way to convey information, context, indicate selection, or to indicate the presence of errors.
  • All content or visual elements are perceivable in high contrast mode.
  • Content displayed in a High Contrast theme in Windows has sufficient color contrast and element shapes and purpose are distinguishable.

Widgets and Dynamic content (8)

  • Custom controls/non-native widgets (tabs, dialogs, date-pickers, expanders, tooltips, etc) operate consistently across the entire site.
  • Simulated controls, simulated dialogs, calendar controls, embedded media content, menus and other actionable dynamic content can be accessed, operated, and closed from the keyboard.
  • Custom controls/non-native widgets convey the following to users of assistive technologies:
    What it is? (what is its role?)
    How to use it? (any special keyboard considerations)
    What is its current state? (active, selected, expanded, collapsed, etc)
  • WAI-ARIA is used to define name, state, role, and value information for non-standard controls presented via client-side scripting.
  • ARIA attributes are updated appropriately when custom controls change visually.
  • All content being dynamically refreshed as a result of page interaction is also conveyed to screen readers.
  • Focus changes appropriately when dynamic content changes.
  • Content is not implemented in a way that will cause seizures or discomfort for users with vestibular issues.

Controls/Media (12)

  • Embedded multimedia is identified via accessible text.
  • A descriptive text transcript OR audio description audio track is provided for non-live, web-based video.
  • A text or audio description is provided for non-live, web-based video-only (e.g., video that has no audio track).
  • Audio descriptions are provided for all video content NOTE: Only required if the video conveys content visually that is not available in the default audio track.
  • Synchronized captions are provided for non-live, web-based video.
  • Synchronized captions are provided for all live multimedia that contains audio (audio-only broadcasts, web casts, video conferences, Flash animations, etc.)
  • A descriptive text transcript (including all relevant visual and auditory clues and indicators) is provided for non-live, web-based audio (audio podcasts, MP3 files, etc.).
  • A link to the transcript of the audio content is adjacent to the audio content.
  • Instructions do not rely upon sound.
  • Users can pause, stop, or hide content which updates automatically.
  • Controls to turn on & off sound are located at the top of the same page(s) which plays the sound.
  • A mechanism is provided to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more than 3 seconds.

Testing considerations (4)

  • Recommended screen reader and browser testing combinations of Voiceover and Safari/Chrome, IE and JAWS, or Firefox and NVDA.
  • Recommended high contrast testing should be done with a Windows High Contrast theme to identify the worst case issues.
  • Manual testing of image alternative text to validate it is appropriate for the image or its purpose (image used as link) should be performed.
  • Tools:
    Wave http://wave.webaim.org
    axe – Brower plugin (https://www.deque.com/axe/) or testing library (https://github.com/dequelabs/axe-core)
    Contrast checkers: http://contrast-ratio.com/