Accessibility Review - lghvac.com · Web viewFor the review to provide guidance on correcting all of the accessibility issues, the set of pages must represent the type of content,

LG Air Conditioning Technologies Website

Accessibility Review

April 7, 2020

Interactive Accessibility, Inc. The Accessibility Experts TM

ContentsAccessibility Review..................................................................................................................... 3

Scope of the Evaluation..............................................................................................................3Accessibility Review Process......................................................................................................3Pages Reviewed......................................................................................................................... 3Exclusions................................................................................................................................... 4

Executive Summary...................................................................................................................... 4Prioritizing Issues Raised in Accessibility Reviews.....................................................................5Key Issues................................................................................................................................... 6

Detailed Findings & Recommendations....................................................................................19Explanation of Table Headers...................................................................................................19

Common Elements.....................................................................................................................20A. Global Issues........................................................................................................................ 20B. Header.................................................................................................................................. 21C. Footer................................................................................................................................... 27

Pages........................................................................................................................................... 311. Home..................................................................................................................................... 312. About LG Air Conditioning Technologies...............................................................................393. Events................................................................................................................................... 474. Learn More – Put the Pedal to the Metal with LG..................................................................495. Login...................................................................................................................................... 526. Confirmation.......................................................................................................................... 587. Residential & Light Commercial Landing Page.....................................................................588. Residential & Light Commercial Detail Page – Industry-Leading Technology.......................679. Residential & Light Commercial Product Detail – Art Cool Premier.......................................7310. Training............................................................................................................................... 8711. Resources........................................................................................................................... 9212. Owner's Manual PDF..........................................................................................................9913. Contact Us......................................................................................................................... 10414. Contact Form.....................................................................................................................10615. Find a Contractor...............................................................................................................113

Appendix A: Commonly Used Code Snippets........................................................................128Content for screen reader users but not sighted users............................................................128Image/Content carousel accessibility......................................................................................128Accessible combobox..............................................................................................................129Accessible drop-down menu requirements..............................................................................132

Appendix B: Useful Resources................................................................................................136Appendix C: Web Accessibility Testing Tools.......................................................................137

Confidential. © 2020 Interactive Accessibility 2


Accessibility ReviewAn Accessibility Review is an in-depth evaluation of a set of pages on a website to document the types of accessibility issues and conformance violations against W3C’s Web Content Accessibility Guidelines (WCAG) 2.1 AA and to provide detailed recommendations on how to fix these violations.

The Interactive Accessibility team evaluated the LG Air Conditioning Technologies website on March 23–April 7, 2020.

Site Name: LG Air Conditioning TechnologiesSite URL Evaluated: https://www.lghvac.com/home Login Required: No

Scope of the EvaluationEvaluator: Laurie PaganoScope of the Website: 15 pagesConformance Target: WCAG 2.1 Level AA (which includes WCAG 2.0)Accessibility Support Baseline: Windows 10: Internet Explorer 11, Firefox 74, Chrome 80,

NVDA 2019.3.1, JAWS 2020, ZoomText 2020Mac OS Catalina 10.15.4: Safari 13, VoiceOver

Web Technologies Relied Upon: HTML5, CSS, ARIA, JavaScript

Accessibility Review ProcessFor this accessibility review, the evaluator used a combination of accessibility evaluation tools, visual inspection of code, manual analysis of the web pages, and testing with assistive technology across multiple platforms and browsers to test a representative subset of web pages for conformance with WCAG 2.1 AA (which includes WCAG 2.0). The representative web pages were chosen based on the different types of content, features and other elements that may differ from screen to screen and were approved by LG Electronics.

The test results were recorded on a page-by-page basis for the WCAG 2.1 success criteria. To the extent similar features or omissions as those identified in this report as non-conformant with WCAG 2.1 AA are contained in other areas of client website(s) not actually reviewed by Service Provider, it is client’s responsibility to make similar remedial actions to such other features or omissions.

Pages ReviewedA representative set of 15 pages were reviewed and documented in the page-by-page results.

1. Home – http://www.lghvac.com 2. About LG Air Conditioning Technologies – https://www.lghvac.com/about-lg/ 3. Events –"About LG Air Conditioning Technologies" > "Events"4. Learn more – https://www.lghvac.com/about-lg/2019-nascar-racing-page/ 5. Login – https://lghvac.com/mylg-hvac/ 6. Confirmation – "Login" > "Register here" > "Register"7. Landing page – https://www.lghvac.com/residential-light-commercial/ 8. Detail page – https://www.lghvac.com/residential-light-commercial/technology/ 9. Product Detail – https://lghvac.com/residential-light-commercial/product-type/?

productTypeId=a2x44000003XQyr&iscommercial=false&class=Single%20Zone 10. Training – https://lghvac.com/training/ 11. Resource page – https://lghvac.com/resources/ 12. Owner’s Manuals PDF –


https://lghvac.com/resources/

https://lghvac.com/training/

https://lghvac.com/residential-light-commercial/product-type/?productTypeId=a2x44000003XQyr&iscommercial=false&class=Single%20Zone


https://www.lghvac.com/residential-light-commercial/technology/

https://www.lghvac.com/residential-light-commercial/

https://lghvac.com/mylg-hvac/

https://www.lghvac.com/about-lg/2019-nascar-racing-page/

https://www.lghvac.com/about-lg/

http://www.lghvac.com/

https://www.lghvac.com/home


13. Contact Us – https://lghvac.com/contact-us/ 14. Contact form – https://lghvac.com/contact-us/contact-us-hvac-professional/ 15. Find a contractor – https://lghvac.com/professional-locators/contractor-locator/

ExclusionsThese items were not included in the evaluation:

Any pages, screens, tabs or dynamically-added content that are not listed in this report

Any features or changes added after the dates indicated in this report

If there are features or content that were not reviewed but are part of the primary task flows or are not represented in any of the pages, these should be added to the accessibility review. For the review to provide guidance on correcting all of the accessibility issues, the set of pages must represent the type of content, technologies, and interactions found across the whole site.

Executive SummaryThe pages selected in this review primarily focus on finding information about LG air conditioning products and technologies or contacting LG for training or service. Looking at this workflow, the following are some of the more serious problems assistive technology users will encounter on the site.

Many pages contain controls that appear visually as buttons and links but are not designated as such in the underlying code. This often means the control cannot be easily discovered using a keyboard and can only be activated with the mouse. Conversely, there are other controls that have been designated in the code as both buttons and links, which causes them to appear twice to a screen reader user or when navigating the page with a keyboard. These controls may make the page content confusing or impossible to navigate for both screen reader users and keyboard users.

Issue references: 1.6, 1.7, 1.8, 1.11, 1.12, 2.8, 3.2, 5.7, 7.5, 7.6, 7.13, 10.7, 11.8, 11.12, 13.2, 15.7, 15.10, 15.30

There are some instances where images serve as button or link controls, but they do not have text alternatives—for example, the social media logo images on the "About LG Air Conditioning Technologies" page, or the carousel slides on the home page. Screen reader users will not be able to understand the purpose of these controls.

Issue references: 1.1, 1.5, 2.1, 2.3, 2.7, 2.10

Several pages have content presented as headings but without the markup required to convey this heading structure to assistive technology users. For example, on the Training page there are large, bold text elements that identify the titles of available courses, with information about each course beneath the course title. This content's organization and structure, however, is not available to screen reader users. Proper structural markup with headings would make comprehension and navigation of this content easier for these users.

Issue references: C.2, 1.3, 2.5, 3.1, 5.6, 7.2, 8.2, 9.3, 10.2, 11.4, 13.1, 14.6, 15.5

Various buttons and links throughout are missing a visible indicator that shows whether they have keyboard focus. This makes interacting with the content difficult for sighted keyboard users because they do not know where they are within the content or what control they have navigated to.

Issue references: B.11, 1.13, 2.13, 5.9, 7.14, 9.26, 11.14, 15.14, 15.32

Because of these and other problems, assistive technology users will not be able to fully interact with the site. It should be emphasized that remediating websites to make them accessible and thus useful to a wider audience will be straightforward using well-known techniques. The website already uses many of these techniques, but they need to be implemented more widely and consistently so all consumers can benefit from visiting the site.


https://lghvac.com/professional-locators/contractor-locator/

https://lghvac.com/contact-us/contact-us-hvac-professional/

https://lghvac.com/contact-us/


Prioritizing Issues Raised in Accessibility ReviewsAccessibility reviews reveal numerous accessibility problems. Trying to address all the problems raised in a single release cycle or iteration can be very challenging. Sometimes there are even too many issues rated in a single severity level, such as "critical" or "high", to solve them all at once.

Prioritizing issues is key in making progress to a more accessible application. There are two key factors to look at when determining what issues to fix in a release or sprint. These recommendations should not each be an either/or option, but elements of each recommendation should be taken as part of the whole solution.

The first factor to look at is overall severity of the issue. Factors such as occurrence, impact and the area in which the issue is located will help you identify which issues should be fixed first.

1. Go through the critical workflows users will need to do to accomplish tasks. When there are accessibility issues preventing the completion of this critical workflow, address those problems.

2. Fix issues that have a high occurrence. These issues a user will run into frequently and will have a greater impact to users. These issues are ones that often originate in templated code, or problems that arise from UI library components.

3. Look at issues that are marked as High impact to a person with a disability and those which are Critical and High severity issues. These issues will prevent or make it very difficult for a person with a disability to use the system.

The second factor is to look at the level of effort, resource availability, and future plans for changes or upgrades to the application.

1. Break out problems by process owner – content authors vs. designers vs. developers. Identity who will be responsible for fixing the issues. Look at the availability of these resources to make accessibility modifications.

2. Identify issues that are related to systems which are about to be upgraded or changed. It may be a better investment of resources and more effective to implement accessibility changes with other changes that are coming.

3. Gage the level of effort to fix an accessibility issue. Issues that have a low level of effort to fix and have a high impact to a person with a disability are issues that will have a great impact to the user experience on the site.

4. Consider fixing the items that have a medium priority along with the Critical and High severity items if they are related to the same component. This will optimize the development as the developers are already revising that code.



Key IssuesLegend

Impact - The accessibility impact is an indication of the severity to people with disabilities and the distribution of the issue across the sampled pages

High - Affected users will have major difficulty using the site or application. They may be unable to complete forms; they may find content difficult to locate and navigate to; they may be unable to access some content at all. If there are enough barriers, users may abandon the site and not return.

Medium - Affected users will have moderate difficulty using the site or application. They may have difficulty understanding site content, navigating the site, and interacting with content; they may find the site cumbersome and their usage slow; they may be unable to find and use some information.

Low - Affected users will have minor difficulty using the site or application. They may find the site annoying; they may feel that they are not the target audience for the site; they may have difficulty finding some information or interacting with the site.

Est. Effort - The level of effort is an indication the complexity and cost in time and resources to address the issue based on the number of instances and a general understanding of the implementation required to address the accessibility issue.

Issues & Recommendations Affects Users Who Are…

Impact Est. Effort to Fix

Active Images: The active images do not have alt-text or have alt-text that is redundant or incorrect.Recommendation: Images that are active (image link and image button), require alt-text that describes the function of the active element.Related Guidelines: WCAG 2.0 1.1.1 AIssue References: 1.1, 2.1, 15.1

Blind and low-vision High Low

Decorative Images: Decorative images are defined in the HTML and do not have alt-text.Recommendation: Images that are redundant or that convey no information should be defined as CSS background images. If this is not feasible, use alt="", empty alt-text, for the text alternative.Related Guidelines: WCAG 2.0 1.1.1 AIssue References: 7.1, 8.1, 9.1, 9.15

Blind and low-vision Low Low





Information Images: Images that contain important context or content information have no alt-text.Recommendation: Every image requires alt-text. Images that convey information should have alt-text that conveys the same information as the image.Related Guidelines: WCAG 2.0 1.1.1 AIssue References: 4.1, 15.19

Blind and low-vision Dyslexic

High Low

Images of Text: Images of text are used.Recommendation: Avoid using images of text.Related Guidelines: WCAG 2.0 1.4.5 AAIssue References: 1.2, 2.2

Low-vision Dyslexic

Med Med

ASCII: ASCII characters are used in the text. When ASCII characters are used for decoration, these characters may be read by screen readers. Some ASCII characters are not read by screen readers.Recommendation: Add decorative ASCII characters using CSS or hide them using aria-hidden="true". If ASCII characters convey information ensure that these will be read by screen readers and convey information that will be understood by users.Related Guidelines: WCAG 2.0 1.1.1 AIssue References: 10.1, 15.2, 15.20

Blind and low-vision Reading and

cognitively impaired

Med Med

SVG: SVG graphics are used without a text equivalent.Recommendation: Provide a text alternative for SVG graphics that convey information.Related Guidelines: WCAG 2.0 1.1.1 AIssue References: 2.3

Blind and low-vision Dyslexic

High Med

Explicit Labels: Form input fields are not explicitly associated with their labels.Recommendation: All form controls must be labeled. Wrap each form prompt with a label element. The for attribute on the label element must match the id on each control.Related Guidelines: WCAG 2.0 1.3.1 AIssue References: C.1, 5.1

Blind and low-vision Mobility and dexterity

impaired Reading and


High Med





Implicit Labels: Form input fields have no label.Recommendation: When an on-screen label is not present for a form field, use the aria-label attribute, a "floating" label, or a visually-hidden label element to provide a text label for screen reader users.Related Guidelines: WCAG 2.0 1.3.1 AIssue References: 2.4, 5.2, 9.2, 9.18, 11.1

Blind and low-vision High Med

Group Labels: Grouping and relationship information for related form fields or controls is communicated visually but is not available to screen reader users.Recommendation: Form fields or controls that are grouped visually should be grouped programmatically using HTML or WAI-ARIA grouping methods.Related Guidelines: WCAG 2.0 1.3.1 AIssue References: 11.2, 14.1, 15.21




Med Med

Custom Form Controls: The page contains simulated form controls that are not properly conveyed to assistive technology users.Recommendation: Use native HTML form controls or use WAI-ARIA to define the role, name and state information.Related Guidelines: WCAG 2.0 4.1.2 AIssue References: 11.6


impaired

High Med

Error Messages: Errors are not provided when an error occurs or are defined so that they are visually apparent but someone who cannot see the screen may not know that errors occurred.Recommendation: Describe errors in text and alert users of the errors.Related Guidelines: WCAG 2.0 3.3.1 A, 3.3.3 AA, 4.1.2 AIssue References: 5.3, 5.4, 14.2, 14.3, 15.3, 15.22



Med Med





Instructions: Labels or instructions are not provided when content requires user input. Instructional content must be communicated to assistive technology users.Recommendation: Ensure all labels, directions and cues are provided to users of assistive technology.Related Guidelines: WCAG 2.0 1.3.1 A, 3.3.2 AIssue References: 14.4, 15.23, 15.24

Blind and low-vision Speech impaired Mobility and dexterity

impaired

High Med

Input Purpose: Form fields do not indicate the input purpose.Recommendation: Use the HTML5 autocomplete and type attributes. See https://www.w3.org/TR/html52/sec-forms.html#sec-autofill for more information.Related Guidelines: WCAG 2.1 1.3.5 AAIssue References: 5.5, 14.5

Mobility and dexterity impaired

Reading and cognitively impaired

High Med

Data Tables: Data tables are not well formed.Recommendation: Data presented visually in tabular format must be coded as a well-formed HTML table. Table titles should be defined using caption or HTML heading elements.Related Guidelines: WCAG 2.0 1.3.1 A, 4.1.2 AIssue References: 4.3


impaired

High Med

Simple Data Headers: Data cells are not associated with column and row headers.Recommendation: Header cells for simple data tables should be marked up using th elements and data cells should be marked up using td elements. Avoid defining empty cells as headers.Related Guidelines: WCAG 2.0 1.3.1 AIssue References: 4.2, 11.3


impaired

High Med

Layout Tables: Tables are used for layout.Recommendation: Layout tables should be removed or defined to be semantically neutral by setting role="presentation" on the <table> element.Related Guidelines: WCAG 2.0 1.3.1 AIssue References: 9.16, 15.4

Blind and low-vision Med Low


https://www.w3.org/TR/html52/sec-forms.html#sec-autofill

https://www.w3.org/TR/html52/sec-forms.html#sec-autofill




Table Functions: The table sort and filtering is not available to screen reader users.Recommendation: Use the appropriate ARIA state property to indicate the control's current state to users of assistive technology.Related Guidelines: WCAG 2.0 4.1.2 AIssue References: 11.5

Blind or low-vision Reading and


Med Low

Headings: Page headings are rendered using graphical images and/or formatting elements instead of HTML heading elements (<h1>...<h6>).Recommendation: Use HTML heading elements (<h1>…<h6>) to define all page headings. Write headings that are clear and descriptive to help users find the information they seek more easily.Related Guidelines: WCAG 2.0 1.3.1 A, 2.4.1 AIssue References: C.2, C.3, 1.3, 2.5, 3.1, 5.6, 7.2, 8.2, 9.3, 9.17, 10.2, 10.3, 11.4, 13.1, 14.6, 15.5




Med Low

Lists: Structural list information is available to a sighted user but is not conveyed to a screen reader user.Recommendation: Define lists using HTML list markup (ul, ol, li).Related Guidelines: WCAG 2.0 1.3.1 AIssue References: B.1, C.4, 1.4, 2.6, 7.3, 7.4, 8.3, 9.4, 9.5, 10.4, 10.5



Med Low

Buttons: Buttons are incorrectly defined and/or do not specify the button name or state.Recommendation: Use native HTML button controls or WAI-ARIA role="button" to define the correct role. Indicate the button state if applicable. Ensure the button name describes the purpose of the button.Related Guidelines: WCAG 2.0 1.3.1 A, 4.1.2 AIssue References: 9.6, 9.19, 9.20, 9.21, 11.7


impaired

Med Med





Expand/Collapse: The expand and collapse function does not convey the current state to assistive technology users.Recommendation: The control name should include the function of the control (e.g. Expand or Collapse) or use the aria-expanded attribute on the control that expands and collapses content.Related Guidelines: WCAG 2.0 4.1.2 AIssue References: B.8, 9.22

Blind and low-vision High High

Tooltip: Some page elements have a tooltip that is only available to mouse users.Recommendation: Define the tooltip using WAI-ARIA. When the element on the page that has the tooltip has keyboard or mouse focus, the tooltip should display. The tooltip should remain on the page until it is dismissed with the ESC key or when the element that has the tooltip loses focus.Related Guidelines: WCAG 2.0 2.1.1 A, 4.1.2 AIssue References: 15.6


impaired

High High

Tab Panel: The tab interface provides access to content displayed dynamically in a tab panel. The tabs and/or tab panels are not semantically defined and keyboard users cannot easily navigate between the tabs.Recommendation: Use WAI-ARIA to define role, name and state information for the tab interface. Only the active tab should be in the tab order. The other tabs are not in the tab order and receive focus and are activated using the arrow keys once the active tab has focus.Related Guidelines: WCAG 2.0 2.1.1A, 4.1.2 AIssue References: 2.9, 8.5, 9.7, 10.6


impaired

High High


http://www.w3.org/TR/wai-aria-practices/#tabpanel



http://www.w3.org/TR/wai-aria-practices/#tooltip

http://www.w3.org/TR/wai-aria-practices/#tooltip




Modal Window: Semantic information about modal windows is communicated visually but assistive technology users are not notified that a window has opened or are not aware of its purpose.Recommendation: Use WAI-ARIA to define role, name and state information for the modal dialog. When the modal dialog opens, the first active element in the dialog should receive focus. Define the tab order so the focus "wraps" within the dialog. The content behind the dialog should be defined with aria-hidden="true" so screen readers will not read that content.Related Guidelines: WCAG 2.0 4.1.2 AIssue References: 9.23, 9.24, 9.25, 15.25, 15.26, 15.27, 15.28, 15.29


impaired

High Med

Custom UI Control: The page contains custom user interface controls that are not properly conveyed to assistive technology users.Recommendation: Use WAI-ARIA to define role, name and state information.Related Guidelines: WCAG 2.0 4.1.2 AIssue References: 1.5, 1.6, 1.7, 1.8, 2.7, 2.8, 3.2, 5.7, 7.5, 7.6, 10.7, 11.8, 13.2, 15.7, 15.8, 15.30


impaired

High High

Element State: The element state is unknown to screen reader users.Recommendation: Use the appropriate ARIA state property to indicate the control's current state to users of assistive technology.Related Guidelines: WCAG 2.0 4.1.2 AIssue References: 1.9, 7.7, 8.4, 11.9

Blind or low-vision Reading and


Med Low

Label in Name: Active elements, such as buttons and links, have accessible names that do not match the visible text on the controls.Recommendation: Include the visible button/link text in the accessible name for the control.Related Guidelines: WCAG 2.1 2.5.3 AIssue References: B.2, C.5

Low-vision Reading and


Med Med


http://www.w3.org/TR/wai-aria-practices/#dialog_modal






iFrames: Iframes are not identified, so their purpose is not communicated to assistive technology users.Recommendation: Ensure all iframes have titles. Iframes that contain no user content should be hidden.Related Guidelines: WCAG 2.0 1.1.1 A, 4.1.2 AIssue References: 4.4, 14.7, 15.31


Video: Video does not include captions, audio description or transcript.Recommendation: Add captions and audio descriptions (where applicable) to the video content. Add a video title as text on the page and include a text transcript of the video.Related Guidelines: WCAG 2.0 1.2.4 A, 1.2.5 AIssue References: 4.5, 4.6

Blind and low-vision Deaf and hard-of-

hearing

High Med

Moving Text: The page uses moving content that lasts longer than 3 seconds. This content cannot be paused, stopped, or hidden.Recommendation: Stop moving content after 3 seconds or add controls that allow users to pause, stop or hide moving content.Related Guidelines: WCAG 2.0 2.2.2 AIssue References: 1.10, 7.8




Med Low

In-Page Navigation: The page does not allow users to bypass repetitive navigation links, such as a global navigation bar, tab interface, or left navigation panel.Recommendation: Provide at least one method that allows users to easily navigate within the page.Related Guidelines: WCAG 2.0 2.4.1 AIssue References: 7.9, 8.7, 8.8, 11.10, 15.9




High High





Skip Links: Skip links are not provided to skip over a block of links or text to get to main or important page content.Recommendation: Add a visible skip navigation link at the top of the page to skip over the navigation links. This link should be visible; or it should be set to an off-screen position and appear when it receives keyboard focus.Related Guidelines: WCAG 2.0 2.4.1 AIssue References: B.3




Med Low

Landmarks: No method is provided to allow users to navigate to different sections of the page.Recommendation: Use WAI-ARIA landmark roles or equivalent HTML5 sectioning elements to define the different areas of the page.Related Guidelines: WCAG 2.0 2.4.1 AIssue References: A.1, B.4, B.5




Med Med

Page Title: The pages do not have a unique title or have no title defined.Recommendation: Add a descriptive and unique title to each page.Related Guidelines: WCAG 2.0 2.4.2 AIssue References: 5.8, 7.10, 8.6, 9.8, 11.11, 13.3, 14.8


Link Text: The purpose of one or more links cannot be determined from the link text alone or from the link text together with its programmatically determined link context.Recommendation: Write links so that users who are aware of the topic of the page understand the purpose of the links.Related Guidelines: WCAG 2.0 2.4.4 AIssue References: B.9, C.6, 2.10, 2.11, 2.12, 3.3, 7.11, 7.12, 8.9, 9.9




Med Low





Redundant Links: Multiple links that go to the same destination are adjacent to each other causing two-tab stops for the same destination.Recommendation: Have one link for each destination. Avoid duplicate or redundant links.Related Guidelines: WCAG 2.0 1.1.1 A, 2.1.1 AIssue References: B.6




Med Low

No Keyboard Access: The page contains one or more active elements that a keyboard user cannot navigate to and/or operate correctly.Recommendation: Add keyboard handlers to ensure all interactive content can be operated using the keyboard.Related Guidelines: WCAG 2.0 2.1.1 AIssue References: 1.11, 1.12, 7.13, 9.10, 11.12, 11.13, 15.10




High High

Widget Keyboard Access: The user interface widgets do not provide keyboard interaction.Recommendation: Follow the keyboard best practices as described in the WAI-ARIA Authoring Practices GuideRelated Guidelines: WCAG 2.0 2.1.1 AIssue References: B.10, 10.8, 15.11




High High

Access Keys: Access and shortcut keys conflict with browser or assistive technology shortcuts.Recommendation: Remove access keys or use only numeric access key values (0-9). If that is not an option, use access keys that are not active by default and allow users to turn them on or off.Related Guidelines: WCAG 2.0 2.1.1 AIssue References: 14.9




Med Low


http://www.w3.org/TR/wai-aria-practices/

http://www.w3.org/TR/wai-aria-practices/




Change of Context: The page changes substantially when an element receives focus or when setting a user interface control.Recommendation: Do not automatically change context. Users should initiate all changes by selecting a button or link.Related Guidelines: WCAG 2.0 3.2.1 A, 3.2.2 AIssue References: 15.12




Med Med

Focus Indicators: The page lacks indication of visible focus.Recommendation: Do not override the browser default focus indicators or add a custom focus indicator. If a custom focus indicator is used, it should have a 3:1 color contrast ratio between the focus indicator and the background it is used on.Related Guidelines: WCAG 2.0 2.4.7 AAIssue References: B.11, 1.13, 2.13, 5.9, 7.14, 9.26, 11.14, 15.14, 15.32




High Low

Tab Order: The tab order does not follow a logical, sequential progression from the user's perspective.Recommendation: Ensure that all active elements are in the tab order and that this order is logical and intuitive.Related Guidelines: WCAG 2.0 2.4.3 AIssue References: B.12, C.7, 9.11, 15.15




High Low

Findable Added Content: The page uses dynamically-added content that is not available to assistive technology users.Recommendation: Ensure that assistive technology users are notified of the change, that screen readers read the updated content, and that the tab order follows a logical progression.Related Guidelines: WCAG 2.0 4.1.2 AIssue References: 1.14, 7.15, 7.16, 8.10, 9.12, 9.27, 15.13




High Med





Status Messages: Dynamic messages or notifications are not apparent to screen readers.Recommendation: Use ARIA alerts or live regions to communicate dynamic messages to screen reader users.Related Guidelines: WCAG 2.1 4.1.3 AIssue References: 5.10



High Med

Reading Order: Content is not in a meaningful sequence for assistive technology users.Recommendation: Arrange the code so that it is in a meaningful order and can be programmatically determined.Related Guidelines: WCAG 2.0 1.3.2 AIssue References: C.8, 9.29, 15.16, 15.34




Med Med

CSS: CSS is used to add content to the page that is not available to all users.Recommendation: All content should be available in the HTML.Related Guidelines: WCAG 2.0 1.3.1 A, 1.3.2 A, 4.1.2 AIssue References: 9.13, 14.10


Text Resize: Page text cannot be resized.Recommendation: Use ems, percentages or named sizes (e.g., small, medium) and test how the layout flows. Ensure text can be resized on mobile devices.Related Guidelines: WCAG 2.0 1.4.4 AAIssue References: A.2

Low-vision Low Low

Reflow: As text size is increased the page content does not reflow properlyRecommendation: Adjust the CSS so as text size is increased the content reflows without requiring two-way scrolling or text to be cut-off.Related Guidelines: WCAG 2.1 1.4.10 AAIssue References: C.9, 1.18, 2.14, 3.4, 5.12, 7.20, 7.21, 8.13, 8.14, 9.30, 9.31, 10.9, 10.10, 11.17, 13.4, 14.12, 15.35, 15.36, 15.37

Low-vision High Med





Color Coding: Color alone is used to convey information.Recommendation: Add another method, in addition to color, to convey information or emphasize text.Related Guidelines: WCAG 2.0 1.4.1 AIssue References: 1.15, 7.17, 8.11, 11.15, 15.17

Low-vision Color-blind (or see no

color) Viewing in poor

lighting, e.g., using mobile devices in sunlight

Med Low

Text Contrast: Text has insufficient color contrast.Recommendation: Use color combinations with sufficient contrast for all text. Color contrast should be 4.5:1 for regular text and 3:1 for text that is 14pt bold or 18pt or larger.Related Guidelines: WCAG 2.0 1.4.3 AAIssue References: B.7, 1.16, 1.19, 5.11, 7.18, 7.19, 7.22, 8.12, 9.14, 9.28, 11.16, 12.12, 14.11, 15.18, 15.33




High Low

Image Contrast: Image icons have insufficient color contrast.Recommendation: Use color combinations with sufficient contrast for all image icons. Color contrast should be 3:1.Related Guidelines: WCAG 2.1 1.4.11 AAIssue References: 1.17




High Low

PDF: PDF documents are not accessible.Recommendation: Provide tag structure for PDF documents so they work with assistive technology.Related Guidelines: WCAG 2.0 4.2.1 AIssue References: 12.1, 12.2, 12.3, 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 12.10, 12.11, 12.13


impaired

High High



Detailed Findings & RecommendationsThis section of the report documents the accessibility findings gathered during the evaluation, as well as recommended changes for the team to consider. The test results are recorded on a page-by-page basis.

Findings on the evaluated pages should be applied across all pages in the site. This report has identified key types of issues across the site and provides detailed recommendations on how to fix the issues. Edits should be made within the entire website, using this report as a guide.

Explanation of Table Headers1. # – A unique issue number for cross-referencing throughout the report

2. Issue – Description of where the page is not consistent with the specified accessibility standards.

3. Std (Standard) – The three-part numbers (e.g. 1.1.1) refer to the WCAG 2.0 and WCAG 2.1 success criteria (http://www.w3.org/TR/WCAG21/).

4. Sev (Severity) - The severity column indicates the importance of the issue; a. Stop denotes that the issue blocks access to such an extent that it prevents testing for

other issues. Once the issue is corrected, additional testing will be required.b. Critical points out the issues that will block access for a person with a disability or would

make the content very difficult to understand. The issue will cause the page to fail the accessibility guidelines and should be fixed as soon as possible.

c. High means that the corresponding errors are the most important to fix and result in the page failing the accessibility guidelines.

d. Med indicates that the corresponding issues will cause the page to fail the corresponding guideline. However, in the evaluator’s opinion they are a bit less critical than the issues marked High.

e. Low points out minor divergences from the details of the guideline or best practices associated with the guideline. This issue does pass the accessibility guidelines but could be improved and made more usable for people with disabilities.

5. Modification – Suggestions for fixing the problem.


http://www.w3.org/TR/WCAG21/


Note Regarding ARIA Usage: Several of the recommendations for remediating the accessibility barriers found on the pages involve using HTML best practices. In cases where HTML would not provide the necessary accessibility for a given issue, the use of ARIA (Accessible Rich Internet Applications) is recommended. ARIA is not a programming language per se – it is a collection of roles, properties and attributes that can be added to elements to make them accessible. ARIA can be implemented and manipulated using script and does not affect the visible output on a web page.

Our recommendations for using ARIA to make content accessible are based on our expert knowledge of ARIA and our extensive ongoing research. As new browser and assistive technology versions are released, it is inevitable that support levels for some implementations of ARIA are increased and decreased. There are also ARIA roles and attributes in ARIA 1.1 that do not yet have an adequate level of support in assistive technologies and user agents. We recommend implementing only the ARIA solutions that we specifically state in this document. There is no need to go beyond what we are recommending to "make the product even more accessible". The overuse of ARIA can degrade the accessibility level of an element or web page just as much as if it were not used at all. Because the use of ARIA does not impact what is visually output on the screen, we strongly suggest that any ARIA implementation be unit and QA tested with a screen reader. See Appendix C: Web Accessibility Testing Tools for links to testing tools. Many of these tools are free. For more information about when and when not to use ARIA, see 2.1 First Rule of ARIA Use.

Common Elements

A. Global Issues# 1 0 Issue Std Sev ModificationA.1 21 222

In-Page Navigation: The main ARIA landmark role or HTML5 <main> element is not used. Screen reader users are not able to easily navigate to the main page content.

2.4.1 A High Use the WAI-ARIA main landmark role on a div element that contains all sections of the main page content:<div class="content" role="main">--- OR ---Wrap the main page content in a containing HTML5 <main> element.

A.2 4 503

Text Resize: The page text cannot be resized on mobile devices due to the viewport settings. Users with low vision who rely on being able to increase the text size by at least 200% may not be able to access all of the content.

1.4.4 AA Med Adjust the viewport metadata to allow for user scaling.The maximum scale should either not be set or allow max of 2. User-scalable should be 1 or yes.See code example below.

Note: Most iOS devices will ignore user-scalable so this issue is most prevalent on non-iOS devices.


http://www.w3.org/TR/using-aria/#rule1

http://www.w3.org/TR/using-aria/#rule1

https://www.w3.org/WAI/intro/aria


# 1 0 Issue Std Sev ModificationRecommended Code Update:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1" class="">



B. Header

# 2 0 Issue Std Sev ModificationB.1 14 147

Semantic Markup: The breadcrumb and secondary navigation links are not defined as unordered lists. When lists are not defined, non-visual users will not know how many items are in the list and may find it harder to navigate the items.Additionally, the ASCII character (">") is used as a visual separator between individual links within the breadcrumb, which is announced by the screen reader and adds to the auditory load of the page.

1.3.1 A Med Mark up the navigation links as unordered lists (ul and li elements) and use CSS to adjust the list style.

For the breadcrumb list:Hide each ">" character using aria-hidden="true" on the span element that contains it or define the character as a CSS background image and remove it from the HTML code. See the code example for issue B.4.

B.2 286 555

Label in Name: The accessible name for the "LG Air Conditioning Technologies" logo link is missing the link text that is displayed visually. Users who use speech recognition software (e.g. Dragon Naturally Speaking) will have difficulty activating the link.

2.5.3 A Med Change the image text alternative from "LG" to "LG Air Conditioning Technologies"

Note: This is a WCAG 2.1 A requirement.




In-Page Navigation: The skip link is not provided to skip over a block of links or text to get to main or important page content. This makes page navigation more difficult for screen reader and keyboard users.

2.4.1 A High Add a visible skip navigation link as the first actionable element in the website header to skip over the navigation links. This link should always be visible or position it with CSS so it is not visible on the screen until it receives keyboard focus. The link can be hidden again when it is activated or navigated away from. The target should be the first element in the main page content definition (the first child of the element having role="main" or the HTML5 <main> element). When coding skip links, use a target anchor or a container with no child elements. Set tabindex="-1" on the target element to ensure cross-browser compatibility.

Recommended Code:Place the following style rules in the site style sheet:.skipnav a { position: absolute; left: -10000px; }.skipnav a:hover, .skipnav a:focus, .skipnav a:active { position: static; left: 0; }

Place the following HTML code at the beginning of the page body:<div class="skipnav">

<a href="#contenttarget">Skip to Content</a></div>

Place the following anchor at the beginning of the content area of the page, immediately before the <h1>:<a id="contenttarget" name="contenttarget" tabindex="-1"></a>




In-Page Navigation: The breadcrumb and secondary navigation links are not defined with ARIA landmark roles or HTML5 <nav> elements. Screen reader users are not able to easily navigate to the navigation region.

2.4.1 A High For the breadcrumb navigation:Use the WAI-ARIA navigation landmark with aria-label="Breadcrumb" to name the area so users can easily identify the type of page area.On the last element of the breadcrumb list, use aria-current="page" to indicate that it represents the current page.

For the secondary navigation:Use the WAI-ARIA navigation landmark role OR the HTML5 <nav> element with aria-label to name the area so users can easily identify the type of navigation.<div role="navigation" aria-label="Secondary">--- OR ---<nav aria-label="Secondary">

See code example below.



# 2 0 Issue Std Sev ModificationRecommended Code Update for Issues B.1 and B.4:<div class="breadcrumb-bar">

<div role="navigation" aria-label="Breadcrumb"><ul>

<li><span class="hidden-xs hidden-sm"><a id="crumb2" class="crumb other hidden-xs hidden-sm" href="/">Home</a></span><span class="separator hidden-sm hidden-xs" aria-hidden="true"><b> > </b></span>

</li><li>

<span class="hidden-xl hidden-lg visible-md visible-sm visible-xs">< </span><a id="crumb1" class="crumb prev" href="/homeowners-resources/">Homeowners Resources</a><span class="separator hidden-sm hidden-xs" aria-hidden="true"><b> > </b></span>

</li><li>

<span class="hidden-xs hidden-sm active"><a id="crumb0" class="crumb current" href="/homeowners-resources/rebates-incentives/" aria-current="page"><b>Rebates & Incentives</b></a></span>

</li></ul>

</div><div role="navigation" aria-label="Secondary">

...</div>

<div>

B.5 45 524

In-Page Navigation: The HTML5 nav element is communicated as a landmark by assistive technology but is missing a label. Screen reader users are not able to easily differentiate between the different landmarks on the page.

2.4.1 A Med Set aria-label="Main" on the <nav> element to name the area so users can easily identify the type of area.

<nav aria-label="main">

B.6 6 244

Links: The "Where to Buy", "Register Product", and "myLG HVAC" icon links and text links are adjacent to each other and have the same destination. There are two-tab stops for the same destination which can be tiring for mobility impaired users.

2.1.1 A Low Combine the two links in the same link anchor and set alt="" on the image. If this is not possible, keep the existing image alt attributes and set tabindex="-1" on one of each set of links to remove it from the tab order.




Text Contrast: Text that has been entered into the search form field has insufficient contrast between the text color and background color. The color contrast ratio should be 4.5:1. Users who are color blind or who have low vision may not see the text.

Foreground: #A50034Background: #333333The contrast ratio is: 1.6:1

1.4.3 AA Med Increase color contrast to have at least a 4.5:1 color contrast ratio--OR--To only have to meet a 3:1 color contrast ratio, either Increase the font size to 14pt (19px)

with a bold font, or Increase the font size to 18pt (24px)

with standard font weight

Reviewer Note: As a best practice, the alt attribute should be removed from the Search input textbox. Although this does not impact accessibility, it is invalid HTML.

Responsive View: The issues below are unique to this view. All applicable desktop issues above apply to this view.

B.8 303 465

Expand & Collapse: The aria-expanded attribute is incorrectly used by being set on the div element that contains the items in the hamburger menu that are exposed when the menu is opened. The aria-expanded attribute must be set on the element that controls the expansion and collapse of content. It should not be set on the content that is expanded or collapsed. The state is not accurately conveyed to screen readers.

4.1.2 A High Remove the aria-expanded attribute from the div element that contains the items in the expanded hamburger menu.Set the aria-expanded attribute only on the active element (e.g. button or link) that controls the expansion and collapse of the content (as is currently being done).

<div class="navbar-collapse justify-content-around mr-lg-4 collapse in" id="navbarTogglerDemo03" aria-expanded="true" style="">




Link Text: The "MyLG HVAC", "Register Product", and "Where to Buy" links that do not use icons have no accessible name and are in the tab order. The text used in the links in the desktop view has been removed from the DOM by setting display:none on the span elements that contain the text within the links, but the links themselves can still be accessed with the keyboard. Screen reader users will not know the purpose of the links.

4.1.2 A Critical Use display:none on the link anchor, not the text used within the link.

B.10 48 502

Keyboard Access: The main navigation menu does not use standard keyboard operations that users expect. This limits the accessibility for keyboard and screen reader users. The menu does not close when it is navigated away from, and active elements behind the menu can be navigated to with the keyboard but sighted keyboard users cannot see where they are within the content when the controls receive keyboard focus.

2.1.1 A High The keyboard should work as follows: Pressing Enter/Space will expand

and collapse the drop-down menu. Add additional keyboard interaction

so ESC will close the drop-down menu and return the user’s focus to the hamburger menu button.

When a user leaves the drop-down menu for another part of the page, the drop-down menu closes.

--- OR ---Wrap keyboard focus within the opened hamburger menu and include the hamburger menu button within the wrapped focus and do not allow keyboard users to exit the menu unless the hamburger menu button is activated, thus closing the menu.See Appendix A, Accessible drop-down requirements for "Non-Managed User Focus" for further details.




Keyboard Access Visibility: The hamburger menu button has no visible focus indicator when using Firefox. Mouse users get visible cues that a page element is actionable (mouse pointer change, rollover color change, etc.) that are not available to keyboard-only users.

2.4.7 AA High Make sure that there is a clear visual indicator when an object receives focus and when the mouse pointer moves over the object. For example, you could add an outline or change of background color (an outline must have a 3:1 color contrast ratio between the outline color and background color; a change of background color must have a 3:1 color contrast ratio between the default color and focus color).

B.12 301 284

Tab Order: The active controls in the opened hamburger menu are not in a logical tab order after the hamburger menu has been opened. Keyboard users must first navigate to and passed the linked logo image before reaching the controls in the opened menu. This tab order is not logical to those who cannot see the screen.

2.4.3 A High When the hamburger menu is opened, ensure the first link in the opened menu is next in the tab order after the hamburger menu button.



C. Footer

# 3 0 Issue Std Sev ModificationC.1 24 58

Form Label: The "Country/Language" select form control has an aria-labelledby value that references its own id, as well as on-screen label text which has not been programmatically associated with the form field. The placement of the form labels adjacent to the text allows sighted users to understand the purpose of the form field, but this information is not communicated to screen reader users.

4.1.2 A Critical Remove the aria-labelledby attribute from the select element.Instead, use a label element to tie the select element to the existing "Country/Language" text label. The for attribute value on the label element must match the id attribute value on the select element.

C.2 18 130

Headings: The headings in the footer do not use the relevant <h1> to <h6> elements to indicate page headings. Structural information is available to a sighted user but is not conveyed to a screen reader user.

1.3.1 A High Make the "Follow LG Electronics" and "Follow LG HVAC USA" text <h4> headings.See the code example for issue C.6.




Headings: The "Simply choose a support option from the icons below" HTML heading is inappropriately marked as a heading. Heading markup should only be used to define the page headings.

1.3.1 A Med Change the "Simply choose a support option from the icons below" heading to a <p>.

C.4 15 147

Semantic Markup: The footer navigation and social media links are not defined as unordered lists. When lists are not defined, non-visual users will not know how many items are in the list and may find it harder to navigate the items.

1.3.1 A Med Mark up the navigation links as unordered lists (ul and li elements) and use CSS to adjust the list style.See the code example for issue C.6.

C.5 17 555

Label in Name: The accessible name for the "LG Jeong-Do Management Ethics Hotline" link is missing the link text that is displayed visually. Users who use speech recognition software (e.g. Dragon Naturally Speaking) will have difficulty activating the link.

2.5.3 A Med Change the "jeong do management" link text to "LG Jeong-Do Management Ethics Hotline".

Note: This is a WCAG 2.1 A requirement.

C.6 19 236

Link Text: The purpose of the social media links cannot be determined from the link text and the page context. Screen reader users may not know the purpose of the links.

2.4.4 A High Add information to the links that clarifies which LG social media site the link is for. This text can be visually hidden using CSS so it is available only to screen readers.See Appendix A, "Content for screen reader users but not sighted users" for CSS code example.--- OR ---Use aria-describedby to associate the "Follow LG Electronics" and "Follow LG HVAC USA" text with the links.See code example below.



# 3 0 Issue Std Sev ModificationRecommended Code Update for Issues C.2, C.4, and C.6:<div>

<h4 id="electronicsSocial">Follow LG Electronics:</h4><br class=""><ul>

<li><a class="ir fb" target="_top" href="http://www.facebook.com/lgusa" data-sc-item="footer-follow" aria-describedby="electronicsSocial">Facebook</a></li><li><a class="ir tw" target="_top" href="http://www.twitter.com/lgus" data-sc-item="footer-follow" aria-describedby="electronicsSocial">Twitter</a></li><li><a class="ir yt" target="_top" href="http://www.youtube.com/experiencelg" data-sc-item="footer-follow" aria-describedby="electronicsSocial">YouTube</a></li>

</ul></div>


C.7 287 284

Tab Order: The "Country/Language" select element that is not available to visual users are in the tab order. Hidden active elements receive focus for keyboard users but these users cannot see where they are on the page.

2.4.3 A High Ensure the element is available to visual users.Note: Related to issues C.8 and C.9.




Reading Order: The "Country/Language" select element is hidden to visual users, but the content is read by the screen reader. Screen reader users may be confused by whether information should be hidden.

1.3.2 A High Ensure the element is available to visual users.Note: Related to issues C.7 and C.9.

C.9 213 570

Text Resize: When the text size is increased, the image content overlaps the "Country/Language" select element. Users with low vision and users who need to magnify the content (up to 400%) may not be able to access all of the content.

1.4.10 AA Med Adjust the CSS so as the text size increases the content reflows and all content is fully visible.Note: Related to issues C.7 and C.8.

Note: This is a WCAG 2.1 AA requirement.



Pages

1. HomeUses common elements Header and Footer.https://www.lghvac.com/home

# 20 0

Issue Std Sev Modification

1.1 289 7

Active Images: The carousel slide content images are defined as background images with no text equivalents. Users who are viewing the page using alternative stylesheets or in Windows high contrast mode will not see the images and screen reader users will not understand the purpose of the controls.

1.1.1 A Critical Add text alternatives using visually hidden text within the active elements. The text alternative for the image must convey the exact same information that is presented in the image.See Appendix A, "Content for screen reader users but not sighted users" for CSS code example.--- OR ---Images that convey information should not be defined in CSS unless the HTML code provides a text equivalent that is visible in Windows High Contrast Mode. As a general rule, images that convey information should be defined as images in the HTML code with alt defined.Note: Related to issue 1.5.


https://www.lghvac.com/home


# 20 0


1.2 306 45

Images of Text: Images of text are used in the carousel slides. The same presentation can be accomplished using other methods and will be more readily available to screen readers and will be easier to read for users who need to magnify the screen.Note: This pertains only to text that is not logo text and text that can be replicated using CSS.

1.4.5 AA Med If the same presentation can be achieved using CSS, do not use images with text that convey information. Use CSS to control the visual presentation of text. Note: This is a WCAG 2.0 Level AA requirement.

1.3 28 130

Headings: The headings on the page do not use the relevant <h1> to <h6> elements to indicate page headings. Structural information is available to a sighted user but is not conveyed to a screen reader user.

1.3.1 A High Make the text "Commercial" and "Residential & Light Commercial" <h2> headings.

1.4 29 497

Semantic Markup: The carousel slide elements are a collection of similar items that are not programmatically related. Screen reader users will not know how many items are in the collection and will not be able to easily navigate from one item to the next.

1.3.1 A Med Define each carousel item as a list item in an unordered list and use CSS to adjust the list style.

1.5 300 190

UI Control: The carousel slide UI controls have no accessible names. The semantic information that is available visually is not available to screen reader users.

4.1.2 A Critical Add the control names in text on the page using a visually hidden CSS class so they are available only to screen reader users. The control name should use the text alternative provided for the background images used in the slide.See Appendix A, "Content for screen reader users but not sighted users" for CSS code example.Note: Related to issue 1.1.



# 20 0


1.6 291 393

UI Control: The carousel navigation UI controls have undefined roles. The semantic information that is available visually is not available to screen reader users.

4.1.2 A Critical Use ARIA to define UI control roles or use native HTML controls. Because these controls perform a function on the page, they should be defined as buttons.Note: The accessible name for these controls is defined by setting the aria-label attribute on the <li> that contains the styling used for the control. If the button role is set on the <li>, the semantics of the ordered list markup will be removed. Instead, the aria-label attribute should be removed from the <li> and set either on a native button used within the <li> or a div or span must be defined within the <li> that uses role="button". If something other than a native button is used, keyboard handlers must be provided for the active element that allow it to be used with the spacebar and Enter key.Note: Related to issue 1.11.

1.7 290 393

UI Control: The carousel slide UI controls have undefined roles. The semantic information that is available visually is not available to screen reader users.

4.1.2 A Critical Use ARIA to define UI control roles or use native HTML controls. Because activating the slides fetches a new resource, they should be defined as links.Note: Related to issue 1.12.

1.8 30 516

UI Control: The "Explore Commercial Solutions" and "Explore Residential & Light Commercial Solutions" UI controls have incorrectly defined roles because they are defined as buttons nested within links. Screen reader users will not understand the type of controls or how to activate them.

4.1.2 A Critical Define each element as a link or a button, not both. Ideally, the elements should be defined as links.



# 20 0


1.9 215 192

UI Control: The selected state of the carousel navigation UI controls is not programmatically defined. The semantic information that is available visually is not available to assistive technology users.

4.1.2 A High Add state information within the active element so it is available only to screen reader users or set aria-current="true" on the active control.See Appendix A, "Content for screen reader users but not sighted users" for CSS code example.Note: Related to issue 1.15.

1.10 22 211

Moving Content: The page uses a rotating slideshow that cannot be stopped. Rotating content can be distracting for users with cognitive impairments and is more difficult for users with vision, reading, and other disabilities to read fully.

2.2.2 A High Add a visible pause/play option adjacent to the carousel "dot" controls that is keyboard accessible and also program the Escape key to pause the carousel.See Appendix A, "Image/Content carousel accessibility" for more information.

1.11 71 245

Keyboard Access: The carousel navigation elements cannot be used with the keyboard. Content is not accessible to screen reader or keyboard users when mouse actions are required.

2.1.1 A High Use <button> elements inside the <li> elements to provide keyboard support. <li> elements are not keyboard accessible.--- OR ---Define a span or div element within each <li> and set role="button" and tabindex="0" on the span or div elements to add them to the tab order. Add keyboard event handlers to allow users to activate the elements with the keyboard using the enter and spacebar key. Set the aria-label attribute on the span or div, not the <li>.Note: Related to issue 1.6.



# 20 0


1.12 27 245

Keyboard Access: The carousel slide elements cannot be used with the keyboard. Content is not accessible to screen reader or keyboard users when mouse actions are required.

2.1.1 A Critical Change the <div> elements to <a href> elements to provide keyboard support. <div> elements are not keyboard accessible.--- OR ---Set role="link" and tabindex="0" on the <div> elements to add them to the tab order. Add keyboard event handlers to allow users to activate the elements with the keyboard using the enter key.Note: Related to issue 1.7.

1.13 308 276

Keyboard Access Visibility: The carousel "Previous" and "Next" buttons have no visible focus indicator regardless of which browser is used. The "Are You a Homeowner", "Contact Us" and "Rebates and Incentives" links have no visible focus indicator when using Chrome and Internet Explorer. Mouse users get visible cues that a page element is actionable (mouse pointer change, rollover color change, etc.) that are not available to keyboard-only users.


1.14 75 419

Findable Added Content: The carousel slides change dynamically as users interact with the Previous and Next controls, and the new content presented in the carousel may not be apparent to a screen reader user.

4.1.2 A High Shift the user’s focus (obj.focus();) to the newly requested content. The target will need to be focusable, so you might need to set tabindex="-1" to the target element. Do not use tabindex="0".See Appendix A, "Image/Content carousel accessibility" for more information.



# 20 0


1.15 74 373

Color Coding: The carousel "dot" navigation uses different colors to indicate the selected state. Information that is available visually with color only is not available to a screen reader user or to users who cannot perceive color distinctions.

1.4.1 A High Convey content by means other than color only. Provide another way to convey the same information, such as different shapes or patterns.Note: Related to issue 1.9.

1.16 94 446

Text Contrast: The text elements listed below have insufficient contrast between the text color and the non-uniform background color. The color contrast ratio should be 4.5:1 at all points of the text. Users who are color blind or who have low vision may not see the text.

1.4.3 AA Med Increase color contrast to have at least a 4.5:1 color contrast ratio at all points--OR--Put a semi-transparent background around the text to increase the contrast to 4.5:1 at all points--OR--To only have to meet a 3:1 color contrast ratio, either Increase the font size to 14pt (18px)



Note: In the images below, the white outline indicates where there is sufficient contrast between the text color and background color for the given conformance level. If there is no outline where text should be seen, that means there is not enough contrast for the given conformance level. Only text elements need to be considered for contrast requirements in the following images.

Analysis:

Original:



# 20 0


1.17 309 388

Image Contrast: Depending on which slide is in the viewable area of the carousel, the carousel "Previous" and "Next" buttons have insufficient contrast (less than 3:1) between the button color and the varying background color. Users who are color blind or cannot perceive color may not perceive the content.

1.4.11 AA Med Increase color contrast to have 3:1 color contrast ratio.Because of the varying backgrounds caused by the images, the better solution may be to use a luminescent or solid background for the buttons. If the shade of red is going to be used for the icon font, a white background would suffice. Otherwise, a black icon font on a white background would also suffice.


Examples Current Contrast Ratio

Foreground: #A50034Background: #532F1DThe contrast ratio is: 1.5:1

Foreground: #A50034Background: #85864AThe contrast ratio is: 2.1:1

Foreground: #A50034Background: #9E896DThe contrast ratio is: 2.4:1



# 20 0



1.18 292 541

Reflow: As the text size is increased the carousel slide content does not resize without cutting off text. Users with low vision who need to magnify the page content (up to 400%) will not have access to all of the content.

1.4.10 AA Low Adjust the CSS so as the text size increases the images resize and all content is fully visible.




# 20 0


1.19 93 446






Analysis:

Original:



2. About LG Air Conditioning TechnologiesUses common elements Header and Footer.https://www.lghvac.com/about-lg/

# 31 0


Note: Issues reported for the "Events" tab panel content can be found on page 3: Events.

2.1 38 1

Active Images: The "Visit the Global LGNewsroom" image has no alt attribute. All images used for active controls should have alternative text that describes the function of the image (what the image does) so that screen reader users will understand the purpose of the control.

1.1.1 A Critical Add alt-text to the image using the alt attribute.e.g., "Visit the Global LG Newsroom for more information on LG Products and services, learn more"Note: Related to issues 2.2 and 2.7.


https://www.lghvac.com/about-lg/


# 31 0


2.2 49 45

Images of Text: An image of text is used for the "Visit the Global LGNewsroom" link. The same presentation can be accomplished using other methods and will be more readily available to screen readers and will be easier to read for users who need to magnify the screen.

1.4.5 AA Med If the same presentation of the text can be achieved using CSS, do not use images with text that convey information. Use CSS to control the visual presentation of the text.Note: Related to issues 2.1 and 2.7.

Note: This is a WCAG 2.0 Level AA requirement.

2.3 311 445

Active Images: The SVG images used for the social media links in the content section above the tabbed interface and on the "In the News" and "Press Releases" tab panels are active and have no text alternative. All images used for controls should have alternative text that describes the function of the image (what the image does) so that screen reader users will understand the purpose of the control.

1.1.1 A Critical Setting the title attribute on a link anchor is not a fully compatible method of providing a text alternative or link text for a link because some browser and screen reader versions do not interpret the title attribute value when used on a link.Set the aria-label attribute on the active element to provide a text alternative for the SVG. This is necessary because some screen reader and browser combinations cannot calculate the accessible name correctly from an active SVG with an appropriate text alternative.--- OR ---Add a text alternative using visually-hidden text within the active element, but outside the SVG. To ensure the SVG is ignored by all screen readers, set aria-hidden="true" on the SVG.For SVG used in active controls, do not use the SVG title element with the aria-labelledby attribute set on the SVG. This approach is only valid for non-active SVG.See Appendix A, "Content for screen reader users but not sighted users" for CSS code example.Using the Facebook link as an example:



# 31 0


Recommended Code Update:<a aria-label="Share on Facebook" class="js-social" title="Share on FaceBook" data-gtm="facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://climatesystemsinc.com/blog/f/lg-hydro-kit-innovation-award-winner?utm_source=rss&utm_medium=Sendible&utm_campaign=RSS" target="_blank">

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" class="svg svg-inline">...</svg>

</a>

--- OR ---

<a class="js-social" title="Share on FaceBook" data-gtm="facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://climatesystemsinc.com/blog/f/lg-hydro-kit-innovation-award-winner?utm_source=rss&utm_medium=Sendible&utm_campaign=RSS" target="_blank">

<span class="visually-hidden">Share on Facebook</span><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" class="svg svg-inline">...</svg>

</a>

2.4 315 71

Form Labels: The "Category", "Year", and "Month" select controls have no label programmatically defined. The defaulted value of the select control when the page is initialized allows sighted users to understand the purpose of the form field, but this information is not communicated to screen reader users.

4.1.2 A Critical Set aria-label="Category", aria-label="Year" and aria-label="Month" respectively on the select controls.

2.5 32 130


1.3.1 A High Add HTML heading elements (<h1>…<h6>) as suggested below: <h1> - "About LG Air Conditioning

Technologies" <h2> - "Notable Win", "Recent LG

Wins" (demote from an <h1> to <h2> headings)



# 31 0


2.6 36 424

Semantic Markup: The "Recent LG Wins" links are a collection of similar items that are not programmatically related. Screen reader users will not know how many items are in the collections and will not be able to easily navigate from one item to the next.

1.3.1 A Med Mark each link along with its date information as a list item in an unordered list and use CSS to adjust the list style.

2.7 39 190

UI Control: The "Visit the Global LGNewsroom" UI control has no accessible name. The semantic information that is available visually is not available to screen reader users.

4.1.2 A Critical Add the control name in text on the page using a visually hidden CSS class so it is available only to screen reader users.See Appendix A, "Content for screen reader users but not sighted users" for CSS code example.Note: Related to issues 2.1 and 2.2.

2.8 34 516

UI Control: The "Read More" and "Learn More" UI controls have incorrectly defined roles because they are defined as buttons nested within links. Screen reader users will not understand the type of controls or how to activate them.




# 31 0


2.9 33 178

Tab Control: The tab interface and active tab is not available to a screen reader user. State is communicated visually to a sighted user through shape/location and color.

4.1.2 A High Use role="tablist", role="tab" and role="tabpanel" to define the group of tabs, each individual tab and their associated panel of content.Remove aria-expanded from the tabs. Instead, the tab should manage the selected state using the aria-selected attribute.Set aria-labelledby on the elements with role="tabpanel" referencing the id of the associated tab.Keyboard interaction will need to be defined and managed by the application.Note: The label elements being used for what are currently links, as well as the hash symbols (#) found in the id values for the <a href> elements, should be removed. These label elements use a for attribute value that matches the id of the link that the label is contained in. This performs no function and is invalid HTML.Read the W3C Authoring Practices for Accessible Tab PanelsSee code example below.


https://www.w3.org/TR/wai-aria-practices/



# 31 0


Recommended Code Update:<section class="TabArea">

<div class="container"><div class="tabcontainer">

<ul class="tabnav nav-tabs" role="tablist"><li class="active" role="presentation">

<a data-toggle="tab" id="#tabhead1" href="#tab1" aria-expanded="true" role="tab" aria-selected="true">

<label for="#tabhead1"><span class="active">In The News</span></label></a>

</li><li class="" role="presentation">

<a data-toggle="tab" id="#tabhead2" href="#tab2" aria-expanded="false" role="tab" aria-selected="false">

<label for="#tabhead2"><span class="">Press Releases</span></label></a>

</li><li class="" role="presentation">

<a data-toggle="tab" id="#tabhead3" href="#tab3" role="tab" aria-selected="false"><label for="#tabhead3"><span class="">Events</span></label>

</a></li><li class="" role="presentation" aria-selected="false">

<a data-toggle="tab" id="#tabhead4" href="#tab4" role="tab"><label for="#tabhead4"><span class="">Awards</span></label>

</a></li>

</ul></div>

</div></section><div class="tab-content" style="margin-top: -17px">

<div class="tab-pane active" id="tab1" role="tabpanel" aria-labelledby="tabhead1">...

</div><div class="tab-pane" id="tab2" role="tabpanel" aria-labelledby="tabhead2">

...</div><div class="tab-pane" id="tab3" role="tabpanel" aria-labelledby="tabhead3">

...</div><div class="tab-pane" id="tab4" role="tabpanel" aria-labelledby="tabhead4">

...</div>

</div>



# 31 0


2.10 312 470

Link Text: The social media links in the content section above the tabbed interface and on the "In the News" and "Press Releases" tab panels that use SVG images have no accessible name. Screen reader users may not know the purpose of the link.

4.1.2 A Critical Provide a text alternative for the SVG used in the links.Note: Related to issue 2.3.

2.11 313 470

Link Text: There is a link adjacent to each social media link used in the content section above the tabbed interface and on the "In the News" and "Press Releases" tab panels that has no accessible name. These links are adjacent to the social media links that use SVG images in the link (excluding the Share by Email links). Screen reader users will not know the purpose of the links.

4.1.2 A Critical Setting the title attribute on a link anchor is not a fully compatible method of providing link text for a link because some browser and screen reader versions do not interpret the title attribute value when used on a link.These links are redundant with (have the same destination as) the adjacent links that use the SVG in the link. The links with no text should be removed.

2.12 35 236

Link Text: The purpose of the "Read More" and "Learn More" links cannot be determined from the link text and the page context. Screen reader users may not know the purpose of the links.

2.4.4 A High Add information to the link that is visually hidden using CSS so it is available only to screen readers.See Appendix A, "Content for screen reader users but not sighted users" for CSS code example.--- OR ---Use aria-describedby to associate the section headings with the links.

2.13 323 276

Keyboard Access Visibility: The Filter button has no visible focus indicator when using Firefox. Mouse users get visible cues that a page element is actionable (mouse pointer change, rollover color change, etc.) that are not available to keyboard-only users.




# 31 0



2.14 104 541

Reflow: As the text size is increased the content does not reflow without cutting off text. Users with low vision who need to magnify the page content (up to 400%) will not have access to all of the content.

1.4.10 AA Med CSS properties such as overflow:hidden block horizontal scrolling and access to page content as the text size increases.Adjust the CSS so as the text size increases the content reflows and all content is fully visible.




3. EventsUses common elements Header and Footer."About LG Air Conditioning Technologies" > "Events"

# 52 0


Note: This is tab panel content found within page 2: About LG Air Conditioning Technologies.

3.1 57 130


1.3.1 A High Make the "Experience the LG Difference", "Control the Future Roadshow", "2019 NASCAR Gander Outdoors Truck Series" text <h2> headings.

3.2 107 516

UI Control: The "Learn More" UI control has an incorrectly defined role because it is defined as a button nested within a link. Screen reader users will not understand the type of control or how to activate it.

4.1.2 A Critical Define the element as a link or a button, not both. Ideally, the element should be defined as a link.



# 52 0


3.3 108 236

Link Text: The purpose of the "Learn More" link cannot be determined from the link text and the page context. Screen reader users may not know the purpose of the link.

2.4.4 A High Add information to the link that is visually hidden using CSS so it is available only to screen readers.See Appendix A, "Content for screen reader users but not sighted users" for CSS code example.--- OR ---Use aria-describedby to associate the section heading with the link.


3.4 105 541






4. Learn More – Put the Pedal to the Metal with LGUses common elements Header and Footer.https://www.lghvac.com/about-lg/2019-nascar-racing-page/

# 53 0


4.1 58 29

Information Images: The "Network" column images have alternative text, but the text is incomplete and inaccurate. The information will not be conveyed to screen reader users.

Note: The images are not currently appearing on the page.

1.1.1 A Med Change the alt attribute values so that they convey the same information as the images.e.g., "FOX Sports"

4.2 316 113

Data Tables: The table data cells are not associated with row headers. The row context information that is provided visually may not be available to a screen reader user.

1.3.1 A High Change the row header cells (the cells that contain the race date) to <th>.


https://www.lghvac.com/about-lg/2019-nascar-racing-page/


# 53 0


4.3 293 108

Data Tables: The table contains empty cells that are used for formatting and should not be part of the table data. This makes the table harder to understand for screen reader users.

1.3.1 A Med Remove the empty table cells and use CSS for layout.

4.4 317 196

Frames Titles: The YouTube video iframe is missing the title attribute. The purpose of the iframe is not communicated clearly to screen reader users.

4.1.2 A Med Set title="YouTube Video" on the iframe element to describe the purpose of the iframe.

4.5 318 408

Video: Video captions are present, but they do not identify who is speaking and they use no punctuation.

1.2.2 A Med Review the captions in YouTube and make the necessary adjustments. When there is a change in who is speaking, this the new speaker should be identified. Additionally, add punctuation such as commas and periods where appropriate to make the captions easier to understand.

4.6 61 206

Video: The "2019 LG Race Season with Gus Dean No. 12 LG Truck" video presentation does not have a descriptive text transcript or audio description audio track. The presentation is not accessible to users with vision disabilities.

1.2.5 AA Critical Add an audio description track to the video presentation. This track should convey information that is presented visually that is not included in the audio track. The content of this track must not overlap any audio already present in the audio track.


Also providing a link to a descriptive text transcript for each video presentation is best practice however this alone is only WCAG 2.0 A conformant.



# 53 0


YouTube Video PlayerRealizing the YouTube player is third party content, a high-level list of accessibility issues with the player is provided for your information. YouTube continues to work on addressing known accessibility issues with their player. The LG Life's Good linked background image has incorrect alternative text ("Photo image of").

The alternative text should describe the function of the image (what the image does and/or where the link goes) so that screen reader users will understand the link.

The name for the player controls uses both aria-label and title attributes. Screen readers may not announce the name of the button correctly. The title attributes should be removed from all player buttons.

The Share button is defined incorrectly with aria-haspopup. This is intended for UI controls that behave as pop-up menus that can be navigated using arrow keys, like a desktop application menu. Controls with this attribute set will be misinterpreted by screen reader users, and screen reader users will expect a different mode of keyboard operation than is supported by the current definition. The aria-haspopup attribute should be removed from the button.

The social media links in the share dialog use both aria-label and title attributes. Screen readers may not read the links correctly. The title attributes should be removed from the links.

The list of social media links in the Share dialog is not programmatically defined in the HTML code. When lists are not defined, non-visual users will not know how many items are in the list and may find it harder to navigate the items.

Keyboard shortcuts used for the video player Play/Pause, Mute/Unmute, CC, and Full Screen buttons are using only letter, punctuation, number, or symbol characters. Speech input users (e.g. Dragon Naturally Speaking) will have difficulties using the assistive technology to complete commands to interact with the content. Keyboard-only users with dexterity challenges may accidently activate content on the page.

The aria-live="polite" attribute is used within the video player to communicate redundant information. This should only be used for content areas that receive changes where screen reader users will need to be notified of the changes. If non-pertinent changes occur in this section, screen reader users will still be notified. Screen reader users may become confused by the extraneous notifications. The aria-live attribute should be removed from within the player.



# 53 0


Responsive View: No additional issues were found in this view. All applicable desktop issues above apply to this view.

5. LoginUses common elements Header and Footer.https://lghvac.com/mylg-hvac/


https://lghvac.com/mylg-hvac/


# 59 0


5.1 76 59

Form Label: The "Keep me logged in" checkbox is not explicitly associated with its label. Screen readers may not be able to correctly associate the label with the checkbox.

4.1.2 A Critical Use the label element to tie the checkbox to its label. The for attribute value on the label element must match the id attribute value on the input type="checkbox" element.

5.2 320 577

Form Labels: The "User Name" and "Password" form fields use placeholder text to convey the label for the form field. This information disappears when input is entered so there is no longer a visible label for the form field.

3.3.2 A Med Put a visible text label on the screen and wrap it with a label element. The for attribute value on the label element must match the id attribute value of the corresponding input field.One option is to make a "floating" label that is positioned as placeholder text, but then when the user enters text, the label "floats" above the text input.View a working example

5.3 66 89

Error Messages: The "User Name" and "Password" form fields use dynamically added inline form error messages that are not associated with the form controls. Screen reader users will not know that errors have occurred.Note: This issue applies only to the error messages that are output adjacent to the form fields.

4.1.2 A High Use the aria-describedby attribute to associate each error message with the form field that has the error. In addition, set aria-invalid="true" on the form input elements to mark which fields are invalid.Note: Related to issue 5.10.


http://ia11y.github.io/Coding-Patterns/forms/floating-label/floating-label.html%0D%0A


# 59 0


5.4 319 85

Error Messages: The form-level error message that is output at the top of the form when both form fields contain and invalid value is positioned where screen reader users may not be able to locate the message and information on how to correct the error.Note: This issue does not apply to the error messages that are output adjacent to the form fields.

4.1.2 A High Because the page uses a reload after server-side form validation, define the error message as an <h2> heading that is output within the <li> that contains the error so screen reader users can find the message easily. Because validation is being done server-side, do not define this error as an ARIA alert or live region UNLESS you wait to insert the error message text into the alert or live region until after the page load event has completely finished.

Recommended Code Update:<li>

<h2>Invalid username or password</h2></li>

5.5 321 538

Input Purpose: The purpose of the "User Name" and "Password" form fields that collect information about the user cannot be determined. Users with cognitive, learning, and mobility impairments may have difficulty completing the form.

1.3.5 AA Med Use autocomplete and type attributes to define the purpose of the form fields that collect information about the user.

Use autosuggest="email" on the "User Name (Email)" form field.Use autocomplete="current-password" on the "Password" form field if the user's password is known by the system. If it is not known, the use autocomplete="new-password" on the form field.

See The HTML5 Autofill spec for more information.


5.6 63 130


1.3.1 A High Add HTML heading elements (<h1>…<h6>) as suggested below: <h1> - "myLG HVAC" <h2> - "myLG HVAC Login",

"Marketing Resource Center", "Professional Locators", "Documentation", and "Training Videos"


http://www.w3.org/TR/html52/sec-forms.html#sec-autofill


# 59 0


5.7 64 516

UI Control: The "Explore Portal", "Locate Your LG Rep", "View and Download", and "Watch Now" UI controls have incorrectly defined roles because they are defined as buttons nested within links. Screen reader users will not understand the type of controls or how to activate them.


5.8 325 234

Page Title: The HTML title element is not meaningful or descriptive. Page titles provide assistive technology users with orientation information when the page initially loads or when the page is navigated to when multiple browser tabs are being used.

2.4.2 A High Make the page title text descriptive and unique. Add the page name to the title element. The suggested format is Page Name - Site Name.

<title>Login - myLG HVAC</title>

5.9 324 276

Keyboard Access Visibility: The "Login" button has no visible focus indicator. Mouse users get visible cues that a page element is actionable (mouse pointer change, rollover color change, etc.) that are not available to keyboard-only users.




# 59 0


5.10 67 558

Findable Added Content: The "User Name" and "Password" form fields use dynamically-added status messages. Screen reader users are not notified when the messages appear and may not be able to locate the messages.Note: This issue applies only to the error messages that out output inline with the form fields when the form field is navigated away from. This issue does not apply to the single form field error message that is present after form submission.

4.1.3 AA Med Define the span element that contains the error message as an ARIA live region by setting aria-live="assertive" on the span element (do not define this as an ARIA alert). When the error is thrown, dynamically insert the error message text into the live region so it is announced automatically by screen readers.In cases where one or both of these messages appear after the form is submitted and the generic form-level error message is not present, in addition to the recommendation above, move keyboard focus to the first form field that has an error.Note: Related to issue 5.3.


5.11 65 328

Text Contrast: The inline error messages have insufficient contrast between the text color and background color. The color contrast ratio should be 4.5:1. Users who are color blind or who have low vision may not see the text.

Foreground: #FF0000Background: #FFFFFFThe contrast ratio is: 3.998:1






# 59 0



5.12 109 541






6. ConfirmationUses common elements Header and Footer."Login" > "Register here" > "Register"

# 60 0


There were no issues found on this page.

Responsive View: No additional issues were found in this view. All applicable desktop issues above apply to this view.

7. Residential & Light Commercial Landing PageUses common elements Header and Footer.https://www.lghvac.com/residential-light-commercial/


https://www.lghvac.com/residential-light-commercial/


# 68 0


7.1 88 17

Decorative Elements: The decorative product images are inappropriately defined as content images. Images that are used for visual purposes only and convey no information should be ignored by the screen reader.

1.1.1 A Med Change the alt-text so that every image that should be ignored has null alt-text (alt="" - no spaces).

7.2 85 130


1.3.1 A High Add HTML heading elements (<h1>…<h6>) as suggested below: <h2> - "Technology", "Applications" <h3> - product names

e.g., "Art Cool Premier"

7.3 90 424

Semantic Markup: The product cards are a collection of similar items that are not programmatically related. Screen reader users will not know how many items are in the collection and will not be able to easily navigate from one item to the next.

1.3.1 A Med Mark each product card as a list item in an unordered list and use CSS to adjust the list style.Note: Related to issue.7.12



# 68 0


7.4 78 497

Semantic Markup: The carousel slide elements are a collection of similar items that are not programmatically related. Screen reader users will not know how many items are in the collection and will not be able to easily navigate from one item to the next.

1.3.1 A Med Define each carousel item as a list item in an unordered list and use CSS to adjust the list style.

7.5 294 393

UI Control: The slide navigation UI controls have undefined roles. The semantic information that is available visually is not available to screen reader users.

4.1.2 A Critical Use ARIA to define UI control roles or use native HTML controls. These controls should be defined as buttons. Either use native HTML buttons defined within the <li> or define a div or span as a button within the <li>. Do not define the button on the <li>.Note: Related to issue 7.13.

7.6 86 516

UI Control: The "Learn More" UI controls for the "Technology" and "Applications" sections have incorrectly defined roles because they are defined as buttons nested within links. Screen reader users will not understand the type of controls or how to activate them.


7.7 214 192

UI Control: The selected state of the carousel slide and "Residential/Light Commercial Products" product navigation UI controls is not programmatically defined. The semantic information that is available visually is not available to assistive technology users.

4.1.2 A High Add state information to the page so it is available only to screen reader users. Use visually hidden text within the controlOR set aria-current="true" on the currently selected control.See Appendix A, "Content for screen reader users but not sighted users" for CSS code example.Note: Related to issue 7.17.



# 68 0


7.8 77 211

Moving Content: The page uses a rotating slideshow that cannot be stopped. Rotating content can be distracting for users with cognitive impairments and is more difficult for users with vision, reading, and other disabilities to read fully.

2.2.2 A High Add a visible pause/play option adjacent to the carousel that is keyboard accessible and also program the Escape key to pause the carousel.See Appendix A, "Image/Content carousel accessibility" for more information.

7.9 252 512

In-Page Navigation: The "Residential/Light Commercial Products" page navigation region is not defined. Screen reader users may find the region hard to understand.

2.4.1 A Low Use the WAI-ARIA navigation landmark with aria-label="Product View" to name the area so users can easily identify the type of page area.

7.10 326 234


2.4.2 A High Make the page title text descriptive and unique. Add the website name to the title element. The suggested format is Page Name - Site Name.

<title>Residential & Light Commercial HVAC Solutions - LG Air Conditioning Technologies</title>

7.11 89 236

Link Text: The purpose of the "Learn More" links in the "Technology" and "Applications" sections cannot be determined from the link text and the page context. Screen reader users may not know the purpose of the links.

2.4.4 A High Add information to the link that is visually hidden using CSS so it is available only to screen readers.See Appendix A, "Content for screen reader users but not sighted users" for CSS code example.--- OR ---Use aria-describedby on the links to associate the section headings with the links.



# 68 0


7.12 274 236

Link Text: The purpose of the product card "Learn More" links cannot be determined from the link text and the page context. Screen reader users may not know the purpose of the links.

2.4.4 A High Use aria-describedby to associate the product names with the links.--- OR ---Mark each product card as a list item in an unordered list and use CSS to adjust the list style.Note: Related to issue 7.3.

7.13 80 245

Keyboard Access: The carousel slide navigation elements cannot be used with the keyboard. Content is not accessible to screen reader or keyboard users when mouse actions are required.

2.1.1 A High Use <button> elements inside the <li> elements to provide keyboard support. <li> elements are not keyboard accessible.--- OR ---Set role="button" and tabindex="0" on a <div> element inside each <li> element to add it to the tab order. Add keyboard event handlers to allow users to activate the elements with the keyboard using the enter and spacebar key.Note: Related to issue 7.5.

7.14 327 276

Keyboard Access Visibility: The carousel "Previous" and "Back" buttons and the currently selected category button have no visible focus indicator. Mouse users get visible cues that a page element is actionable (mouse pointer change, rollover color change, etc.) that are not available to keyboard-only users.




# 68 0


7.15 253 289

Findable Added Content: The "Residential/Light Commercial Products" content on the screen changes after a user selects a product type. Screen reader users may not be aware that anything changed.

4.1.2 A Med Define a visually-hidden ARIA live region that uses a message that indicates to screen reader users that the page content has changed based on their category selection. The message used in the live region can simply be "The content has been updated based on your selection.". In order for the live region to work correctly, the live region definition must be present (and empty) when the page is loaded, and the message must be dynamically inserted into the live region. Once a message is present in the live region, it must be removed and re-inserted when a different category button has been activated.

Recommended Code Update:<div class="visually-hidden" aria-live="assertive">

The content has been updated based on your selection.</div>

7.16 81 419

Findable Added Content: The carousel slides change dynamically, and the new content may not be apparent to a screen reader user.

4.1.2 A High Shift the user’s focus (obj.focus();) to the newly requested content. The target will need to be focusable, so you might need to set tabindex="-1" to the target element. Do not use tabindex="0".See Appendix A, "Image/Content carousel accessibility" for more information.

7.17 84 373

Color Coding: The carousel slide and "Residential/Light Commercial" product navigation use different colors to indicate the selected state. Information that is available visually with color only is not available to a screen reader user or to users who cannot perceive color distinctions.




# 68 0


7.18 87 328

Text Contrast: The product category buttons that are not currently selected have insufficient contrast between the text color and background color. The color contrast ratio should be 4.5:1. Users who are color blind or who have low vision may not see the text.

Foreground: #999DA2Background: #FFFFFFThe contrast ratio is: 2.7:1




7.19 92 446






Analysis:

Original:



# 68 0



7.20 216 540

Reflow: As the text size is increased the content does not reflow without requiring both vertical and horizontal scrolling. Users with low vision who need to magnify the page content (up to 400%) will have difficulty interacting with and reading the content.

1.4.10 AA Med Adjust the CSS so as the text size increases the content reflows and is presented in a manner that does not require scrolling in more than one direction.Note: Related to issue 7.21.




# 68 0


7.21 217 541


1.4.10 AA Med CSS properties such as overflow:hidden block horizontal scrolling and access to page content as the text size increases.Adjust the CSS so as the text size increases the content reflows and all content is fully visible.Note: Related to issue 7.20.


7.22 91 446








# 68 0


Analysis:

Original:

8. Residential & Light Commercial Detail Page – Industry-Leading TechnologyUses common elements Header and Footer.https://www.lghvac.com/residential-light-commercial/technology/


https://www.lghvac.com/residential-light-commercial/technology/


# 69 0


8.1 100 17



8.2 251 130


1.3.1 A High Add HTML heading elements (<h1>…<h6>) as suggested below: <h1> - "Industry-Leading

Technology" <h3> - large, bold text in each tab

panel e.g., "Inverter Technology", "LGRED° heat performance", etc.Use CSS to display the headings inline with the other text.

<h3> - product namese.g., "Art Cool Premier"

8.3 101 424


1.3.1 A Med Mark each product card as a list item in an unordered list and use CSS to adjust the list style.Note: Related to issue 7.11.



# 69 0


8.4 257 192

UI Control: The selected state of the "Residential/Light Commercial Products" product navigation UI controls is not programmatically defined. The semantic information that is available visually is not available to assistive technology users.

4.1.2 A High Add state information to the page so it is available only to screen reader users OR set aria-current="true" on the currently selected button.

See Appendix A, "Content for screen reader users but not sighted users" for CSS code example.Note: Related to issue 8.11.

8.5 98 178

Tab Control: The "The LG Difference" tab interface and active tab is not available to a screen reader user. State is communicated visually to a sighted user through shape/location and color.

4.1.2 A High Use role="tablist", role="tab" and role="tabpanel" to define each group of tabs, each individual tab and their associated panel of content.Remove aria-expanded from the tabs, as needed. Instead, the tab should manage the selected state using the aria-selected attribute.Set aria-labelledby on the elements with role="tabpanel" referencing the id of the associated tab.Keyboard interaction will need to be defined and managed by the application.Note: The label elements being used for what are currently links should be removed. These label elements use a for attribute value that matches the id of the link that the label is contained in. This performs no function and is invalid HTML.Read the W3C Authoring Practices for Accessible Tab Panels

8.6 329 234



<title>Technology - LG Air Conditioning Technologies</title>





# 69 0


8.7 250 406

In-Page Navigation: There are multiple <h1> heading elements on the page. Screen reader users may not be able to navigate easily to the main content of the page.

2.4.1 A Low Change the <h1> headings on the "Duct-Free and Ducted Systems", "Package Terminal Air Conditioners (PTACs)", "The LG Difference", and "Residential/Light Commercial Products" text to <h2>.

8.8 254 512

In-Page Navigation: The "Residential/Light Commercial Products" page navigation region is not defined. Screen reader users may find the region hard to understand.

2.4.1 A Low Use the WAI-ARIA navigation landmark with aria-label="Product View" to name the area so users can easily identify the type of page area.

8.9 102 236

Link Text: The purpose of the "Learn More" links cannot be determined from the link text and the page context. Screen reader users may not know the purpose of the links.


8.10 255 289

Findable Added Content: The "Residential/Light Commercial Products" content on the screen changes after a user selects a product type. Screen reader users may not be aware that anything changed.

4.1.2 A High Define a visually-hidden ARIA live region that uses a message that indicates to screen reader users that the page content has changed based on their category selection. The message used in the live region can simply be "The content has been updated based on your selection.". In order for the live region to work correctly, the live region definition must be present (and empty) when the page is loaded, and the message must be dynamically inserted into the live region. Once a message is present in the live region, it must be removed and re-inserted when a different category button has been activated.



# 69 0


8.11 256 373

Color Coding: The "Residential/Light Commercial" product navigation uses different colors to indicate the selected state. Information that is available visually with color only is not available to a screen reader user or to users who cannot perceive color distinctions.

1.4.1 A High Convey content by means other than color only. Provide another way to convey the same information, such as different shapes or patterns.

Note: Related to issue 8.4.

8.12 99 328

Text Contrast: The product category buttons that are not currently selected have insufficient contrast between the text color and background color. The color contrast ratio should be 4.5:1. Users who are color blind or who have low vision may not see the text.







# 69 0



8.13 218 540


1.4.10 AA Med Adjust the CSS so as the text size increases the content reflows and is presented in a manner that does not require scrolling in more than one direction.Note: Related to issue 8.14.




# 69 0


8.14 219 541


1.4.10 AA Med CSS properties such as overflow:hidden block horizontal scrolling and access to page content as the text size increases.Adjust the CSS so as the text size increases the content reflows and all content is fully visible.Note: Related to issue 8.13.


9. Residential & Light Commercial Product Detail – Art Cool PremierUses common elements Header and Footer.https://lghvac.com/residential-light-commercial/product-type/?productTypeId=a2x44000003XQyr&iscommercial=false&class=Single%20Zone





# 103 0


9.1 110 17

Decorative Elements: The decorative product images are inappropriately defined as a content image. Images that are used for visual purposes only and convey no information should be ignored by the screen reader.


9.2 167 531

Form Labels: The "Series" and "BTU" form fields have labels defined with aria-label attributes, but the labels do not describe the purpose of the controls and should be improved. The correct label may not be conveyed to a screen reader user.

4.1.2 A High Remove the aria-label attribute from the form fields and use label elements on the onscreen text to associate the labels with the form fields. The for attribute value on each label element must match the id attribute value of the corresponding input field. As a best practice, it is always preferred to use the visible text label when labeling form fields.--- OR ---Change the label (aria-label) to "Series" and "BTU Cooling/Heating", respectively, on the form fields, as appropriate.It is always preferred to use the existing visible text label when labeling form fields.

9.3 111 130


1.3.1 A High Add HTML heading elements (<h1>…<h6>) as suggested below: <h2> - "Details", "Models", "You

might be interested in"<h3> - product namese.g., "Art Cool Premier"



# 103 0


9.4 273 424


1.3.1 A Med Mark each product card as a list item in an unordered list and use CSS to adjust the list style.Note: Related to issue 9.9.

9.5 330 154

Semantic Markup: List markup is used for the "Benefits & Features" but the list is incorrectly defined as a nested list, with a <ul> that contains the benefits & features incorrectly nested as a child of a parent <ul>. The hierarchy of nested lists will not be communicated correctly to screen reader users.

1.3.1 A High Remove the parent <ul> element and define the list as a single unordered list.

Recommended Code Update:<ul><ul>

<li>24-Hour on/off timer</li><li>4-Way auto swing</li>...

</ul></ul>



# 103 0


9.6 138 571

Button: The purpose of the "View More" and View Less buttons cannot be determined from the button text and the page context. Screen reader users may not know the purpose of the button.

2.4.6 AA High Use aria-describedby to associate the "Models" heading with the button.

9.7 129 178

Tab Control: The "Details" tab interface and active tab is not available to a screen reader user. State is communicated visually to a sighted user through shape/location and color.

4.1.2 A High Use role="tablist", role="tab" and role="tabpanel" to define the group of tabs, each individual tab and their associated panel of content.The tab should manage the selected state using the aria-selected attribute.Set aria-labelledby on the elements with role="tabpanel" referencing the id of the associated tab.Keyboard interaction will need to be defined and managed by the application.Read the W3C Authoring Practices for Accessible Tab PanelsNote: Related to issue 9.10.

9.8 331 234


2.4.2 A High Make the page title text descriptive and unique. Change the page name to indicate that the purpose of the page is "Art Cool Premier" and add the website name to the title element. The suggested format is Page Name - Site Name.

<title>Product Type Art Cool Premier - LG Air Conditioning Technologies</title>





# 103 0


9.9 275 236

Link Text: The purpose of the "Learn More" links used on the product cards cannot be determined from the link text and the page context. Screen reader users may not know the purpose of the links.


9.10 131 245

Keyboard Access: The tab elements cannot be used with the keyboard. Content is not accessible to screen reader or keyboard users when mouse actions are required.

2.1.1 A Critical Change the <span> to a <button> element to provide keyboard support. <span> elements are not keyboard accessible.--- OR ---Change the <span> to a <a href> element to provide keyboard support. <div> elements are not keyboard accessible.

Using JavaScript, define the following keyboard interaction for tabs: Tab - only the active tab is in the tab

order. The user reaches the tab panel component by pressing the tab key until the active tab receives focus.

Left Arrow - Moves focus to and activates the previous tab in the tab list. If focus is on the first tab in the tab list, moves focus to and activates the last tab in the list.

Right Arrow - Moves focus to and activates the next tab in the tab list. If focus is on the last tab in the tab list, moves focus to and activates the first tab in the list.

For more information, see ARIA Tab ControlNote: Related to issue 9.7.





# 103 0


9.11 114 284

Tab Order: The "Energy Efficiency", "LG Red Heat", and "LG Smart Thinq" link elements that are not available to visual users are in the tab order. Hidden active elements receive focus for keyboard users but these users cannot see where they are on the page.

2.4.3 A High Remove the hidden elements from screen reader view using the CSS display:none or visibility:hidden property.

9.12 284 288

Findable Added Content: The "View More" button uses dynamically added content that is added upstream from the user's current position. Assistive technology users are not notified of the change, the screen reader does not read updated content, and the tab order does not follow a logical progression.

4.1.2 A High Define a visually-hidden ARIA live region that uses a message for screen reader users that indicates that content has been added to the table.--- OR ---Set the focus to the new content, using tabindex="-1" to make it programmatically focusable, if necessary. If setting keyboard focus, set it on the link for the first new table row.

9.13 136 412

Keyboard Access: Focusable items are covered by the fixed product name header when the items receive focus via the keyboard, primarily when navigating the page content backward using the SHIFT+TAB keys. Browsers do not automatically scroll focused content into view to account for items with the CSS property position set to fixed. The currently focused item is not easily found and is difficult to read when navigating with a keyboard.

2.1.1 A High Do not use a fixed header. (position: fixed;)--- OR ---Adjust the CSS so the scrollable area is always positioned beneath the fixed header. One strategy is to use position:fixed on both the fixed header and the scrollable main content, and adjust the positioning of the main content so it is below the fixed header.--- OR ---Use the CSS height and overflow properties on the main content so that the content is rendered below the static content. The height property specifies the viewport size, and the overflow property is used to allow content to scroll below the static content.



# 103 0


9.14 119 328

Text Contrast: The "Rebates & Offers" text element has insufficient contrast between the text color and background color. The color contrast ratio should be 4.5:1. Users who are color blind or who have low vision may not see the text.

Foreground: #FFFFFFBackground: #62A60AThe contrast ratio is: 3:1




"Available Rebates" Dialog

9.15 126 17





# 103 0


9.16 123 124

Layout Tables: The "Buy on or After", "Buy on or Before", and "Claim By" content uses CSS display: table, display: table-row, and display: table-cell properties for layout. Assistive technology and certain browser combinations may announce the table structure as extra information.

1.3.1 A Med Remove the table display properties and use CSS spacing, alignment, and positioning properties instead to create visual layout.

9.17 267 137

Headings: The product detail HTML headings are used for page style. Heading markup should only be used to define the page headings and not for visual style.

1.3.1 A Med Change the <h5> headings that contain the item #, model #, and CEE Tier information to a <p>.

9.18 332 577

Form Labels: The "Zip Code" form field uses placeholder text to convey the label for the form field. This information disappears when the form field receives focus or when input is entered so there is no longer a visible label for the form field.

3.3.2 A Med Put a visible text label on the screen and wrap it with a label element. The for attribute value on the label element must match the id attribute value of the corresponding input field.One option is to make a "floating" label that is positioned as placeholder text, but then when the user enters text, the label "floats" above the text input.View a working example


http://ia11y.github.io/Coding-Patterns/forms/floating-label/floating-label.html%0D%0A


# 103 0


9.19 141 162

Button: The "More/Less Details" expand/collapse controls use HTML <a href> links for the buttons. The spacebar is traditionally used to operate buttons, but anchors can only be operated using the Enter key. If a sighted keyboard user assumed the anchor was a button and pressed the spacebar, the page would scroll (the default action when not on an element that consumes the spacebar). Using the correct role is less confusing for screen reader users, as they would typically expect an anchor element to fetch a new resource, rather than perform an action in a process.

4.1.2 A Low Use native HTML button controls (button element) so the role is automatically conveyed.In cases where a link is used semantically as a button and a native button control cannot be used, it is recommended that the link be identified as a button using WAI-ARIA role="button" and the keyboard interaction pattern conforms to defined behavior for a button.

9.20 143 162

Button: The "More Info" controls use HTML <button> elements but behave as links. Using the correct role is less confusing for screen reader users, as they would typically expect a button element to perform an action in a process, rather than fetch a new resource.

4.1.2 A Low Remove role="button" from the <a href> elements.



# 103 0


9.21 140 571

UI Control: The purpose of the "$300 in rebates", "More Info", and "More/Less Details" controls cannot be determined from the control text and the page context. Screen reader users may not know the purpose of the controls.

2.4.6 AA High Use aria-describedby to associate the product item and model number or tax credit program information with the controls, as appropriate.--- OR ---Add product item and model number or tax credit program information to the controls, as appropriate. This text can be visually hidden using CSS so it is available only to screen readers.See Appendix A, "Content for screen reader users but not sighted users" for CSS code example.

9.22 121 168

Expand & Collapse: The "$300 in rebates" button expand/collapse state is not defined. The current state is indicated visually, but the state is not programmatically defined so this is not available to screen readers.

4.1.2 A High On the active element that controls the expanding and collapsing (e.g. button or link), set aria-expanded="true" or aria-expanded="false" to describe the current state.Note: the aria-expanded attribute needs to be set on the UI element which controls the expanded/collapsed state of another UI element, not on the element that is actually expanded (visible) or collapsed (hidden).



# 103 0


9.23 270 183

Dialog Window: The dialog window does not receive keyboard focus when it opens. This limits the ability of keyboard and screen reader users to navigate page content in a logical order.

2.1.1 A High Move focus to the dialog container when it opens.

9.24 271 187

Dialog Window: The dialog allows keyboard and screen reader users (but not mouse users) to access the information behind the modal overlay. All users should remain within the modal window until it is closed by the user or an action is taken.

2.1.1 A High Users should not be able to access content and links behind the modal dialog. While the modal overlay is active, focus should stay within the tabbable objects in the overlay.The modal overlay should be closed either by activating the close link/button or by pressing the escape key.See code example on GitHub

9.25 116 507

Dialog Window: Semantic information about the dialog is communicated to screen reader users so they are notified that a dialog window has opened but the purpose of the dialog is not communicated by screen readers.

4.1.2 A High On the element with role="dialog", provide a title using the aria-labelledby attribute, referencing the dialog heading.

9.26 142 276

Keyboard Access Visibility: The "Update", "$300 in rebates", "More Info", and "Close" active page elements have no visible focus indicator. Mouse users get visible cues that a page element is actionable (mouse pointer change, rollover color change, etc.) that are not available to keyboard-only users.



https://gist.github.com/drublic/5899658


# 103 0


9.27 125 288

Findable Added Content: The "More/Less Details" control uses dynamically added content that is added upstream from the user's current position. Assistive technology users are not notified of the change, the screen reader does not read updated content, and the tab order does not follow a logical progression.

4.1.2 A High Place the new content in the reading order just after the user control that initiates the change. Do this by positioning the link that expands and collapses the content area before the content that is visible by default.

9.28 118 329

Text Contrast: The text elements listed below have insufficient contrast between the text color and background color. The color contrast ratio should be 4.5:1. Users who are color blind or who have low vision may not see the text.





Foreground: #FFFFFFBackground: #62A60AThe contrast ratio is: 3:1

Foreground: #62A60ABackground: #FFFFFFThe contrast ratio is: 3:1

Foreground: #62A60ABackground: #F7F7F7The contrast ratio is: 2.8:1



# 103 0



9.29 295 295

Reading Order: The "Rebates & Offers" link and portions of the product card elements are hidden to visual users, but the content is read by the screen reader. Screen reader users may be confused by whether information should be hidden.

1.3.2 A High Ensure the element is available to visual users.Note: Related to issues 9.30 and 9.31.

9.30 282 541


1.4.10 AA Med CSS properties such as overflow:hidden block horizontal scrolling and access to page content as the text size increases.Adjust the CSS so as the text size increases the content reflows and all content is fully visible.Note: Related to issues 9.29 and 9.30.




# 103 0


9.31 137 570

Text Resize: When the text size is increased, the "Rebates & Offers" link text overlaps its background boundary, making it difficult to read the text. Users with low vision and users who need to magnify the content (up to 400%) may not be able to access all of the content.

1.4.10 AA Med Adjust the CSS so as the text size increases the content reflows and all content is fully visible.Note: Related to issue 9.29.


"Available Rebates" Dialog: No additional issues were found in responsive view. All applicable desktop issues above apply to this view.



10. TrainingUses common elements Header and Footer.https://lghvac.com/training/


https://lghvac.com/training/


# 133 0


10.1 335 51

ASCII Characters: The Sign Up for Training link uses the ">>" text symbols inappropriately as a content decorator on an active element. Screen readers will read the character literally and may be confusing. For example, some screen readers will announce "greater than greater than" or "right double-angle bracket" when the link is navigated to.

1.1.1 A Med Hide the ASCII characters by putting them into a container div or span element within the link anchor and set aria-hidden="true" on the element that contains the character. Do not set aria-hidden="true" on the link or the link text will be hidden from screen readers.Set the aria-label attribute on the link to set what should be announced by screen readers. This will override what the screen reader would normally speak when encountering this element. This is necessary because some screen readers ignore aria-hidden="true" in active elements and will read the full text contents, including the content that is hidden with the aria-hidden attribute.--- OR ---Remove the ASCII art from the HTML code and add to the page using a CSS background image.

Recommended Code Update:<a aria-label="Sign up for Training" href="https://www.schoox.com/academy/LGAcademy/register" style="color:#FFFFFF;" target="_blank">

Sign Up for Training <span aria-hidden="true">»</span></a>

10.2 148 130


1.3.1 A High Add HTML heading elements (<h1>…<h6>) as suggested below: <h1> - "Training" <h3> - "LG Training Academies",

course titles (e.g., "MLV-01 Multi V™ Installation Essentials", "CON-01 LG V-Net Controls", etc.).

<h4> - "What you will learn", "Duration", and "Prerequisites"Use CSS to display the headings inline with the other text, as needed. Remove the paragraph markup from these headings. The paragraph markup should be used to define the paragraphs of text below the headings (except for the ordered lists).

Demote the "Online Training", "Training at a LG Academy" and "LG Training Courses" <h1> headings to <h2> headings.



# 133 0


10.3 151 137

Headings: The "Sign Up for Training" HTML heading is used for page style. Heading markup should only be used to define the page headings and not for visual style.

1.3.1 A Med Change the "Sign Up for Training" <h1> heading to a <p>.

10.4 150 145

Semantic Markup: The "Prerequisites" numbered lists do not use ordered list markup. Screen reader users rely on list markup to navigate to information in lists and understand the order of list items.

1.3.1 A Med Mark up numbered lists as ordered lists (ol and li elements) and use CSS to adjust the list style.

10.5 149 424

Semantic Markup: The "LG Training Academies" section is a collection of similar items that are not programmatically related. Screen reader users will not know how many items are in the collection and will not be able to easily navigate from one item to the next.

1.3.1 A Med Mark each link along with its description as a list item in an unordered list and use CSS to adjust the list style.



# 133 0


10.6 152 178

Tab Control: The "LG Training Courses" tab interface and active tab is not available to a screen reader user. State is communicated visually to a sighted user through shape/location and color.

4.1.2 A High Use role="tablist", role="tab" and role="tabpanel" to define the group of tabs, each individual tab and their associated panel of content.Remove aria-expanded from the tabs. Instead, the tab should manage the selected state using the aria-selected attribute.Set aria-labelledby on the elements with role="tabpanel" referencing the id of the associated tab.Keyboard interaction will need to be defined and managed by the application.Note: Remove the label elements used within the links. The label for attribute references the link id which is invalid HTML.Read the W3C Authoring Practices for Accessible Tab PanelsNote: Related to issue 10.8.

10.7 147 515

UI Control: The "Explore Online Courses", "Sign Up for an Upcoming Class", and "Coming to class? View our Visitor's Guide" UI controls have incorrectly defined roles because they are defined as links nested within buttons. Screen reader users will not understand the type of controls or how to activate them.






# 133 0


10.8 153 368

Keyboard Access: The tab controls can be reached with the keyboard TAB key. If ARIA tabs are used, this keyboard interaction should be updated to match the typical behavior for tabs. Screen reader users will hear instructions to press the arrow keys to switch tabs, but this will not work.

2.1.1 A Med Using JavaScript, define the following keyboard interaction for tabs: Tab - only the active tab is in the tab

order. The user reaches the tab panel component by pressing the tab key until the active tab receives focus.

Left Arrow - Moves focus to and activates the previous tab in the tab list. If focus is on the first tab in the tab list, moves focus to and activates the last tab in the list.

Right Arrow - Moves focus to and activates the next tab in the tab list. If focus is on the last tab in the tab list, moves focus to and activates the first tab in the list.

For more information, see ARIA Tab ControlNote: Related to issue 10.6.






# 133 0


10.9 154 570

Text Resize: When the text size is increased, some content overlaps other content on the page making it difficult to read the text. Users with low vision and users who need to magnify the content (up to 400%) may not be able to access all of the content.

1.4.10 AA Med Adjust the CSS so as the text size increases the content reflows and all content is fully visible.


10.10 156 570

Text Resize: When the text size is increased, the "Sign Up for Training" link text overlaps its background boundary, making it difficult to read the text. Users with low vision and users who need to magnify the content (up to 400%) may not be able to access all of the content.





11. ResourcesUses common elements Header and Footer.https://lghvac.com/resources/

# 157 0


11.1 166 531

Form Labels: The "Product Type", "Product Class", "Resource", and "Category" form fields have labels defined with aria-label attributes, but the labels do not describe the purpose of the controls and should be improved. The correct label may not be conveyed to a screen reader user.

4.1.2 A High Remove the aria-label attributes from the form fields and use label elements on the onscreen text to associate the labels with the form fields. The for attribute value on each label element must match the id attribute value of the corresponding input field.--- OR ---Change the label (aria-label) to "Product Type", "Resource", or "Category" on the form fields, as appropriate.Note: Related to issue 11.5.


https://lghvac.com/resources/


# 157 0


11.2 263 533

Group Labels: The group information for the "Choose Product Category" buttons is communicated visually but is not available to screen reader users.

1.3.1 A High Use ARIA role="group" with the aria-labelledby attribute to define the group label for the buttons. The aria-labelledby attribute should reference the id of the element that contains the "Choose Product Category" text.

11.3 178 112

Data Tables: The resource table data cells are not associated with column and row headers. The visual information that connects the headers with the data cells is not available to screen reader users.

1.3.1 A Critical Use th on the column and row header cells.The content in the "Titles" column serves as row headers, but this is the fourth column in the table. Not all assistive technology and browser combinations will honor the row headers for any columns prior to the row headers (although it is valid HTML).To ensure the row headers are associated with the table data cells, change the cells in the "Titles" column to th and either:Move the "Titles" column to be the first column in the table.--- OR ---Assign each column and row header cell a unique id attribute. Associate the header id attribute values with the data cells using the headers element. If multiple headers exist for a particular cell, separate the ids in the headers attribute with a space (e.g. headers="p1 p2").Note: Related to issues 11.5 and 11.12.

11.4 334 130


1.3.1 A High Make the "Choose Product Category" text an <h1> heading.



# 157 0


11.5 280 409

UI Control: The table sort functions and current state are not programmatically defined and will not be apparent to screen reader users. The column headers also do not receive focus and are not available to keyboard users.

4.1.2 A High Use ARIA attributes as described below. Since some screen readers will not automatically announce the table sort, add an aria-live region outside of the table structure with a message such as "Sorted by [Date/Title/Category/ Resource Type]: ascending" that disappears after 2 seconds to ensure that screen reader users will not come across it after leaving the table. Ensure the table header row and

table data cells appear in the same <table> element. Remove any ARIA role or aria-label attributes from the table markup.

Set the aria-sort attribute on the <th> element. This indicates the current sort state of the content to screen readers. If the column content is unsorted set the aria-sort attribute to "none", otherwise set it to "ascending" or "descending" as appropriate. The aria-sort attribute value should be updated dynamically whenever the column content is re-sorted.

Give the <th> element the role of "columnheader".

Use a link with the role of button within the <th> element. Due to a constraint of Internet Explorer, it is not possible to use the <button> element in this situation, hence the use of a link with the role of button instead.

Set the title attribute on the link to provide additional information when the aria-sort attribute is set to "none". Most screen readers will not announce that a column is unsorted (only when it is sorted in ascending or descending order). It is therefore helpful to provide a way for screen reader users to discover that the column can be sorted. When the value of aria-sort is updated the title attribute should be set to null (empty) or removed, otherwise too much information is announced by the screen reader and this creates a poor experience for users.

Note: Related to issue 11.3.



# 157 0


11.6 333 510

UI Control: The "Product Type", "Resource", and "Category" comboboxes are simulated UI widgets that are defined incorrectly. Assistive technology users will not have access to information about the type of control, how to operate it, or what options to select.

4.1.2 A High Use native HTML select/option elements and use CSS for styling (preferred).--- OR ---If you are going to continue to use an ARIA combobox, you must use the correct roles and attributes to define it correctly so those who use assistive technology receive the correct information about the control.For example, the aria-haspopup attribute must be removed from the element having role="combobox" and the element that contains the list options must have role="listbox" set on it.See Appendix A "Accessible combobox" for detailed information, code examples, and links to working examples.

11.7 175 416

Button: The display number buttons are toggle buttons but are not semantically defined. Pressing a button allows the user to choose an option on a page, so the current pressed state of the button is essential in communicating the user's selection. Screen reader users will not be able to determine the current state of the button.

4.1.2 A High Set aria-pressed="true" on buttons that are in the pressed state and aria-pressed="false" on buttons in the unpressed state.

11.8 264 393

UI Control: The "Download ALL Product Type Resources" UI control has an undefined role. The semantic information that is available visually is not available to screen reader users.

4.1.2 A Critical Use ARIA to define UI control role or use native HTML controls.See the code example for issue 11.12.



# 157 0


11.9 259 192

UI Control: The selected state of the "Choose Product Category" product navigation UI controls is not programmatically defined. The semantic information that is available visually is not available to assistive technology users.

4.1.2 A High Add state information to the page so it is available only to screen reader users OR set aria-current="true" on the currently selected control.See Appendix A, "Content for screen reader users but not sighted users" for CSS code example.Note: Related to issue 11.15.

11.10 169 512

In-Page Navigation: The page navigation region is not defined. Screen reader users may find the region hard to understand.

2.4.1 A Low Use the WAI-ARIA navigation landmark with aria-label="Page" to name the area so users can easily identify the type of page area. Use aria-current="page" to indicate the current page in the list.

11.11 337 234



<title>Resources - LG Air Conditioning Technologies</title>

11.12 265 245

Keyboard Access: The "Download ALL Product Type Resources" element cannot be used with the keyboard. Content is not accessible to screen reader or keyboard users when mouse actions are required.

2.1.1 A Critical Change the <div> to a <button> element to provide keyboard support. <div> elements are not keyboard accessible.--- OR ---Set role="button" and tabindex="0" on the <div> element to add it to the tab order. Add keyboard event handlers to allow users to activate the element with the keyboard using the enter and spacebar key.Note: Related to issue 11.8.

Recommended Code Update for Issues 11.8 and 11.12:<divbutton _ngcontent-c2="" class="download__button hover__transition">

Download ALL Product Type Resources</ divbutton>--- OR ---

<div _ngcontent-c2="" class="download__button hover__transition" role="button" tabindex="0">Download ALL Product Type Resources

</div>



# 157 0


11.13 171 245

Keyboard Access: The display number and page navigation elements cannot be used with the keyboard. Content is not accessible to screen reader or keyboard users when mouse actions are required.

2.1.1 A Critical Set tabindex="0" on the elements with role="button" to add them to the tab order. Add keyboard event handlers to allow users to activate the elements with a keyboard using the enter and spacebar keys.

11.14 336 276

Keyboard Access Visibility: The currently selected product category button has no visible focus indicator. Mouse users get visible cues that a page element is actionable (mouse pointer change, rollover color change, etc.) that are not available to keyboard-only users.


11.15 262 373

Color Coding: The "Choose Product Category" product navigation uses different colors to indicate the selected state. Information that is available visually with color only is not available to a screen reader user or to users who cannot perceive color distinctions.


11.16 161 329







# 157 0



Foreground: #999DA2Background: #F0F0F0The contrast ratio is: 2.3:1


Foreground: #858585(#858585, with opacity set to .6)Background: #FFFFFFThe contrast ratio is: 3.7:1

Foreground: #8899A8Background: #FFFFFFThe contrast ratio is: 2.9:1




# 157 0


11.17 177 541

Reflow: As the text size is increased the "Product Type" form content does not reflow without cutting off text. Users with low vision who need to magnify the page content (up to 400%) will not have access to all of the content.



12. Owner's Manual PDFhttps://files.lghvac.com/resources/OM_GUI_ACP_IV_MFL69329502.pdf


https://files.lghvac.com/resources/OM_GUI_ACP_IV_MFL69329502.pdf


# 172 0


12.1 338 482

Semantic Markup: The PDF document is not tagged. Tags must be added to the document so assistive technology can access the content.

1.3.1 A High 1. Go to the Tags pane2. Click on the Options menu3. Click "Add Tags to Document"The tags used should be appropriate to the content they contain. Tags may be grouped, within reason, in <Part>, <Sect>, <Art>, or other grouping tags or custom tag names that map to such grouping tags, without impacting accessibility at all. However, <Document> should be the top-level tag.Add <Document> as the parent tag in the tags tree.Tagging the document should be done prior to any other modifications. Empty tags should be removed.For the Header and Footer of the document, tag the first occurrence of each unique header, and the last occurrence of each unique footer.

12.2 339 509

Reading Order: A root tag, preferably the <Document> tag, should be present as the first tag within the tag tree, which will encapsulate all of the tags containing the content within the document. Without this, a screen reader may have complications with accessing the content in the proper order.

1.3.2 A Med Add <Document> tag to PDF. Place all tags containing content within the <Document> tag.

12.3 340 471

Tab Order: The PDF document has no tab order defined. Screen reader and keyboard users may not be able to navigate the content in a logical order.

2.4.3 A High In the thumbnail view of the PDF document4. Select all pages.5. Right click a thumbnail and select

"Page Properties" from the context menu.

6. In the "Tab Order" tab, select "Use Document Structure".

7. Complete the action by selecting "OK".



# 172 0


12.4 341 472

Reading Order: The PDF document uses a reading order for screen reader users that differs from the visual order for sighted users. Important context and/or relationship information that is communicated visually is not communicated to screen reader users.

1.3.2 A Med From the Order Pane, adjust the order of the content for each page of the document so the reading order of the page is the logical visual order.Once the Order Pane content is in the correct order, move to the Tags Pane and ensure all the tags are in the correct logical, visual order.

12.5 342 479

Document Properties: Document properties, such as title, author (name of organization) and subject, must be filled in properly for assistive technology users to understand the document they are accessing. Keywords are optional, although are recommended as they can help with search engine optimization.

2.4.2 A Med From the File menu, select Properties and fill in the information in the Description tab. The Document Title must be selected within the Initial View tab instead of file name.

12.6 343 474

Information Images: The information images in the PDF document have no alternative text defined. The information will not be conveyed to screen reader users.

1.1.1 A Critical Add alt-text to the images by selecting the <Figure> in the tags tree, right click and add the appropriate alt-text for the image. For repeated images like logos, add alternative text to the first instance and artifact the remaining occurrences.

12.7 344 483

Headings: The headings in the PDF document do not use the relevant <H1> to <H6> elements to indicate page headings. Structural information is available to a sighted user but is not conveyed to a screen reader user.

1.3.1 A High All text styled as headings and which define the structure of the document should be tagged as headings. If following the HHS guidelines, there should be only one H1 tag in the document, corresponding to the main document title, usually on the cover page.Use appropriate heading styles in the source document and ensure that the heading hierarchy is consistent, logical, and contiguous. Select desired text Tag as H2-H6, as the main title can

be the only H1 Ensure headings are in correct

reading order



# 172 0


12.8 345 485

Semantic Markup: The unordered and/or ordered lists are not defined. When lists are not defined, non-visual users will not know how many items are in the list and may find it harder to navigate the items.

1.3.1 A Med List tagging is essential to allowing the assistive technology user to comprehend the list the same way a visual user would. Without the proper list tagging, content could be mistaken for regular text. Numbered lists must have a <L>, <LI>, <Lbl> and <LBody>, although a bulleted list doesn’t need a <Lbl>.

12.9 346 486

Semantic Markup: The paragraphs are not defined. Structural information is available to a sighted user but is not conveyed to a screen reader user.

1.3.1 A Med Define each paragraph using <P> tags. This allows screen reader users to quickly navigate from one paragraph to the next.

12.10 347 488

Data Tables: The tables are not defined. Screen reader users will not understand the row and column relationships.

1.3.1 A High Ensure the correct number of rows and columns are present and account for all the data to avoid regularity issues. Utilize the table editor to assign scope and col/rowspan as needed to the header cells. Ensure a summary is present for each table to avoid failure from the accessibility checker. Ensure the correct number of <TR>,

<TH> and <TD> tags are present Open table editor Fix scope and span where

necessary Right click table > Add summary If complex: Add unique IDs to each header cell Assign header IDs to each data cell Spot check with a screen reader



# 172 0


12.11 348 477

Navigation: The PDF document Table of Contents is not linked to the pages. This makes content harder to access and understand for users who may have different preferences and who use assistive technology for navigating.

2.4.5 AA Med Table of Contents should have all of its’ entries linked to the correct page, while ensuring the pagination aligns as well. Link-OBJRs must be assigned to each link and housed within a <Reference> tag along with the TOC item text. Tab through the TOC to make sure links and tabbing works well. Add <TOC> tag Add the number of <TOCI> tags

needed Tag and find all links for TOC entries House Link-OBJR and TOC entry

into a <Reference>, which goes inside the <TOCI>

12.12 349 329

Text Contrast: Test elements in the document have insufficient contrast between the text color and background color. The color contrast ratio should be 4.5:1. Users who are color blind or who have low vision may not see the text.




12.13 350 487

Navigation: The PDF document does not have bookmarks defined.

2.4.5 AA Med Bookmarks must be applied to any document with 10 pages or more. Bookmarks should coincide with the heading levels and section breaks to make navigating the document easier. Highlight the desired content Right click > select Add Bookmark Organize bookmarks accordingly



13. Contact UsUses common elements Header and Footer.https://lghvac.com/contact-us/

# 173 0


13.1 180 130


1.3.1 A High Add HTML heading elements (<h1>…<h6>) as suggested below: <h1> - "Contact Us" <h2> - "LG Air Conditioning

Technologies", "LG Electronics U.S.A., Inc", "Are you an LG HVAC Professional?", "Are You A Homeowner?"

13.2 181 516

UI Control: The "Contact Us" and "Find your local LG contractor" UI controls have incorrectly defined roles because they are defined as buttons nested within links. Screen reader users will not understand the type of controls or how to activate them.



https://lghvac.com/contact-us/


# 173 0


13.3 351 234



<title>Contact Us - LG Air Conditioning Technologies</title>


13.4 182 541






14. Contact FormUses common elements Header and Footer.https://lghvac.com/contact-us/contact-us-hvac-professional/


https://lghvac.com/contact-us/contact-us-hvac-professional/


# 183 0


14.1 190 75

Form Group Labels: The "Industry Segment" checkboxes are grouped visually, but they are not grouped programmatically by using fieldset and legend elements or ARIA grouping. The grouping information will not be available to screen reader users.

4.1.2 A Critical First, remove the label element that contains the text "Industry Segment (Check all that apply". Then:Use fieldset/legend elements, where the full label text is the legend (including all instructions and required indicator). The fieldset should wrap the group of checkboxes. The legend element must be the first child element of the fieldset element. The text used in the legend should be "Industry Segment (Check all that apply)" and the required indicator.--- OR ---Use ARIA role="group" with the aria-labelledby attribute to define the group label for the form fields. The aria-describedby attribute can be used to provide further description, instructions, or help for the grouping. The aria-labelledby attribute should reference the id of the element that contains the text "Industry Segment (Check all that apply)" and the required indicator should also be included with this text.



# 183 0


14.2 194 85

Error Messages: The form-level error message at the top of the form after an invalid form submission is positioned where screen reader users may not be able to locate the message and information on how to correct the error.Note: This issue does not apply to the error messages that are output adjacent to the form fields (see issue 14.3 for how to correct these error messages)

4.1.2 A High Define the error message as a WAI-ARIA alert using role="alert" and aria-live="assertive" to notify screen reader users of the error automatically.To provide support across browsers: The element with role="alert" and

aria-live="assertive" should be present (and empty) on page load, (when the form is first displayed)

Set role="alert" on elements like <p>, <div>, or <span>. Placing it directly on elements like <h2> or <ul>/<ol> will result in a validation error.

The error text should be injected dynamically into this element as its immediate child element.

Leave keyboard focus set on the Submit button when errors are detected. This is necessary because the form-level error message should be defined as an ARIA alert.

--- AND ---Remove the paragraph markup from the existing error message and define the error message as an <h2> heading.

Recommended Code Update:<div role="alert" aria-assertive="true">

<ph2 class="errors">Please correct the errors below:</ph2></div>



# 183 0


14.3 352 89

Error Messages: The form fields use error messages that are output adjacent to the form fields that are not associated with the form control. Screen reader users will not know that the form fields have an error as they navigate to the form fields after an error has been thrown.Note: This issue applies only to the error messages that are output adjacent to the form fields, it does not apply to the form-level error message used at the top of the form (see issue 14.2).

4.1.2 A High Set the aria-describedby attribute to on the input form field and have this attribute reference the id of the element that contains the error message to associate the error message with the form field that has the error. Additionally, set aria-invalid="true" on the form input or select element to mark which fields are invalid.Because the form-level error message must be defined as an ARIA alert, leave keyboard focus set on the Submit button when an error is detected. Do not move keyboard focus to the first form field that has an error.Using the Email form field as an example:

Recommended Code Update:<p id="email-err-msg" class="error no-label">This field is required.</p>

<input aria-describedby="email-err-msg" aria-invalid="true" type="text" autocomplete="email" name="152041_90204pi_152041_90204" id="152041_90204pi_152041_90204" value="" class="text" size="30" maxlength="255" onchange="" onfocus="">

14.4 185 528

Instructions: For required fields, the "*" indicator is included in the form label but screen reader users may not know that the field is required. This is because the asterisks are being inserted using the CSS content property. Content inserted using this property is not interpreted by all screen readers.

3.3.2 A Low Set aria-required="true" on the required form fields to indicate that the field is required.Note: Related to issue 14.10.



# 183 0


14.5 195 538

Input Purpose: The purpose of the form fields that collect information about the user cannot be determined. Users with cognitive, learning, and mobility impairments may have difficulty completing the form.

1.3.5 AA Med Use autocomplete and type attributes to define the purpose of the form fields that collect information about the user.See The HTML5 Autofill spec for more information.


14.6 184 130


1.3.1 A High Add HTML heading elements (<h1>…<h6>) as suggested below: <h1> - "Contact Us" <h2> - "LG Air Conditioning

Technologies", "LG Electronics U.S.A., Inc"

14.7 191 196

Frames Titles: The contact form iframe is missing the title attribute. The purpose of the iframe is not communicated clearly to screen reader users.

4.1.2 A Med Set title="Contact Form" on the iframe element to describe the purpose of the iframe.

14.8 353 234



<title>Contact Us for HVAC Professional - LG Air Conditioning Technologies </title>

14.9 187 262

Keyboard Access: The "Submit" button has an access key that may conflict with browser or assistive technology (screen reader) shortcuts. This limits accessibility for keyboard and screen reader users.

2.1.1 A High Remove the access keys.


http://www.w3.org/TR/html52/sec-forms.html#sec-autofill


# 183 0


14.10 186 297

Info in CSS: The form labels display "*" indicators for required fields that are not in the HTML markup but are added using CSS. Information added using CSS may not be available to screen readers, making the content inaccessible to screen reader users.

1.3.2 A High Do not use the CSS selectors :before and :after. Put this text into the HTML document.Note: Related to issue 14.4.

14.11 193 329






Foreground: #FD7272Background: #FFFFFFThe contrast ratio is: 2.7:1

Foreground: #FFFFFFBackground: #FD7272The contrast ratio is: 2.7:1



# 183 0



14.12 192 540


1.4.10 AA Med Adjust the CSS so as the text size increases the content reflows and is presented in a manner that does not require scrolling in more than one direction.




15. Find a ContractorUses common elements Header and Footer.https://lghvac.com/professional-locators/contractor-locator/

# 197 0


15.1 209 4

Active Images: The "LG Excellence Air Conditioning Contractor" and information icon images have incorrect alt attributes. The alternative text should describe the function of the image (what the image does) so that screen reader users will understand the purpose of the control.

1.1.1 A High Change the alt-text on the images as suggested below: alt="LG Excellence Air Conditioning

Contractor" alt="more information".See the code example for issue 15.11.


https://lghvac.com/professional-locators/contractor-locator/


# 197 0


15.2 205 51

ASCII Characters: The arrow text symbol is used inappropriately as a content decorator on an active element. Screen readers will read the character literally and may be confusing.

1.1.1 A Med Hide the ASCII characters by setting aria-hidden="true" on the <span> element that contains the character. Do not set aria-hidden="true" on an active element (e.g. <a href>) or the active element will be hidden from screen readers.Set the aria-label attribute on the active element to set what should be announced by screen readers. This will override what the screen reader would normally speak when encountering this element. This is necessary because some screen readers ignore aria-hidden="true" in active elements and will read the full text contents, including the content that is hidden with the aria-hidden attribute.--- OR ---Remove the ASCII art from the HTML code and add to the page using a CSS background image.



# 197 0


15.3 222 85

Error Messages: The "City & State OR Zip Code" error message is positioned where screen reader users may not be able to locate the messages and information on how to correct the errors.

4.1.2 A High Define the error message as WAI-ARIA alert using role="alert" and aria-live="assertive" to notify screen reader users of the error automatically.To provide support across browsers: The element with role="alert" and

aria-live="assertive" should be present (and empty) on page load, (when the form is first displayed)

Set role="alert" on elements like <p>, <div>, or <span>. Placing it directly on elements like <h2> or <ul>/<ol> will result in a validation error.

The error text should be injected dynamically into this element as its immediate child element.

Leave keyboard focus set on the Search button when the error has been detected – do not move focus back to the form field.

--- AND ---Set the aria-describedby attribute on the input textbox and have this attribute reference the id of the element that contains the error message text to associate the error message with the form field that has the error. Additionally, set aria-invalid="true" on the textbox.

15.4 221 124

Layout Tables: The table that contains the contractor search form fields is used for layout. The table structure will be announced by a screen reader and extra, redundant, information (such as row and column numbers) is announced whenever a screen reader user navigates to a particular component, such as a link or form field.

1.3.1 A Med Remove the table markup and use CSS for layout.--- OR ---Set role="presentation" on the <table> elements and change <th> to <td> (if present) for the tables that are used for layout and are not data tables. This ensures that the table structure will not be announced by a screen reader.

15.5 198 130


1.3.1 A High Add HTML heading elements (<h1>…<h6>) as suggested below: <h1> - "Where to Buy" <h3> - "Let's get started!",

"Disclaimer" Demote the "Find a Contractor" <h1>

heading to an <h2> heading.



# 197 0


15.6 207 171

Tooltips: The "LG Excellence Contractors" information icon allows users to view more information through a tooltip. This information is communicated visually with mouse hover but is not available to screen reader or keyboard users.

4.1.2 A High Use WAI-ARIA role="tooltip" on the container with the tooltip text. Use aria-describedby on the control that displays the tooltip referencing the id of the container with role="tooltip" to make tooltips available to screen reader users. If a link or button displays the tooltip, define aria-disabled="true" on the link or button.See the code example for issue 15.11.

15.7 204 393

UI Control: The "Click for phone number", "Prev", and "Next" UI controls have an undefined role because they are defined as <a> elements with no href attribute value pair. The semantic information that is available visually is not available to screen reader users.

4.1.2 A Critical Provide an href attribute value pair for the <a> element.

15.8 201 441

UI Control: The search results map has an undefined role. The semantic information that is available visually is not available to screen reader users.

4.1.2 A High Since the map contains information and interactions that cannot easily be made fully accessible, and because the data is presented in other accessible formats, indicate to the screen reader user that more accessible results are available elsewhere in the page.First, define a visually-hidden <h2> heading such as "Your search results" at the beginning of the search results listing, then provide the following code positioned just before the Google map.For example:



# 197 0


Recommended Code:<section aria-label="Interactive Google Map" aria-describedby="map" role="region"> <div id="map">Search results are at the heading "Your Search Results"</div> </section>--- OR ---<section aria-label="Interactive Google Map. Search results are at the heading Your Search Results" role="region"> </section>

15.9 210 512

In-Page Navigation: The page navigation region is not defined. Screen reader users may find the region hard to understand.

2.4.1 A Low Use the WAI-ARIA navigation landmark with aria-label="page" to name the area so users can easily identify the type of page area.

15.10 203 246

Keyboard Access: The "Click for phone number", "Prev", and "Next" links are missing the href attribute. A keyboard user cannot navigate to and/or operate the links.

2.1.1 A Critical Use <a href> links.

15.11 208 567

Keyboard Access: The "LG Excellence Contractors" information tooltip cannot be used with the keyboard. Content is not accessible to screen reader or keyboard users when mouse actions are required.

2.1.1 A Critical Follow keyboard best practices for tooltips: Tab: When a control receives focus

a tooltip appears. The tooltip is hidden when the control loses focus.

Esc: Closes the tooltip. Once dismissed, mouse-hover displays the tooltip as if the control does not have focus.

And either:Use a <button> element to provide keyboard support. Add aria-disabled="true" to the button element.--- OR ---Set role="button", aria-disabled="true", and tabindex="0" on a containing <div> element to add it to the tab order.See code example below.



# 197 0


Recommended Code Update for Issues 15.1, 15.6, and 15.11:<div class="badgeImageClass" tabindex="-1">

<button aria-disabled="true" aria-describedby="contractorInfo"><img src="https://lgpro.bullseyelocations.com/Images/excellence_logo_2015.png" alt="BadgeLG Excellence Air Conditioning Contractor"><br><img src="Images/info-circle-solid-20x20.png" alt="Badgemore information" class="badgeInformation">

</button><div class="badgeInfoPopup" style="display: none;" role="tooltip" id="contractorInfo">

LG Excellence Contractors are committed to providing a superior customer experience and have invested many hours of their time learning about LG products. They can also offer extended warranty terms on select, eligible products.

</div></div>

15.12 244 272

Change of Context: When a "Radius" option is selected from the select element, the search form automatically submits and keyboard focus moves to the City & State OR Zip Code form field. Unexpected changes in context confuse or disorient all users. Keyboard and screen reader users may have to start over.

3.2.2 A High Do not automatically submit the form. Users should initiate all changes by selecting the "Search" button.

15.13 269 288

Findable Added Content: The "Click for phone number" control uses dynamically added content that is added upstream from the user's current position. Assistive technology users are not notified of the change, the screen reader does not read updated content, and the tab order does not follow a logical progression.

4.1.2 A High Place phone number information in the reading order just after the user control that initiated the change.--- OR ---Realizing that you likely cannot modify the code used in the Google map address/phone number popup, define an ARIA live region by setting aria-live="polite" on a container element and output the corresponding phone number in the live region. The phone number can be visually-hidden with CSS if desired.



# 197 0


15.14 357 276

Keyboard Access Visibility: The "Directions", "Request Contact", "Yes", and "No" links have no visible focus indicator regardless of which browser is used. The search form controls have no visible focus indicator when using Chrome and Internet Explorer. Mouse users get visible cues that a page element is actionable (mouse pointer change, rollover color change, etc.) that are not available to keyboard-only users.


15.15 211 281

Tab Order: The "Yes" and "No" links are in the incorrect tab order. Visually, they appear before the map and search content, but in the tab order they appear after the map and search content. This limits the ability of keyboard and screen reader users to access page content in a logical order.

2.4.3 A High The code order determines the tab order. Rearrange the order of the code or, as a last resort, use the tabindex attribute.



# 197 0


15.16 212 291

Reading Order: The "May we use cookies…?" text element and "Yes" and "No" links use a reading order for screen reader users that differs from the visual order for sighted users. Visually, they appear before the map and search content, but in the reading order they appear after the map and search content. Important context and/or relationship information that is communicated visually is not communicated to screen reader users.

1.3.2 A Med Rearrange the order of the elements within the HTML so that the reading order follows the same order as the visual presentation of the screen.

15.17 356 319

Color Coding: The links use only color to indicate the presence of a link. Users who are color blind or cannot perceive color may miss the links.

1.4.1 A Med There a few options to consider: Underline links and use a different

color to make the links identifiable. Use other styles, such as a

distinguishable font, along with color to make the links identifiable and an additional differentiation such as an underline when the user tabs to or hovers over the link.

Change the link color so the contrast between the link text and the surrounding text has a 3:1 ratio. Also add an additional differentiation such as an underline when the user tabs to or hovers over the link.



# 197 0


15.18 223 328

Text Contrast: The error message text element has insufficient contrast between the text color and background color. The color contrast ratio should be 4.5:1. Users who are color blind or who have low vision may not see the text.

Foreground: #FF0000Background: #FFFFFFThe contrast ratio is: 4.1:1




"Schedule a Consultation" Dialog

15.19 228 29

Information Images: The "LG Excellence Air Conditioning Contractor" image has alternative text but the text is incomplete and inaccurate. The information will not be conveyed to screen reader users.

1.1.1 A Med Change the alt attribute value so that it conveys the same information as the image.e.g., alt="LG Excellence Air Conditioning Contractor"



# 197 0


15.20 231 50

ASCII Characters: The close control uses a text symbol without adequate alternative text for screen readers. Screen readers will read the character literally (e.g., "X" or "times") and may not understand the purpose of the control.

1.1.1 A High Hide the ASCII characters by setting aria-hidden="true" on the element that contains the character. Add a containing element if needed (e.g. <span>). Do not set aria-hidden="true" on an active element (e.g. <a href>) or the active element will be hidden from screen readers.Set the aria-label attribute on the active element to provide a text alternative for the character. This is necessary because some screen readers ignore aria-hidden="true" in active elements and will read the full text contents, including the content that is hidden with the aria-hidden attribute.--- OR ---Add the characters using an image with an alt attribute.--- OR ---Remove the ASCII characters from the HTML code and add to the page using a CSS background image. Add visually-hidden text to provide an accessible name.See Appendix A, "Content for screen reader users but not sighted users" for CSS code example.

15.21 233 76

Form Group Labels: The "I am interested in", "This is for my", "I'd like to keep in touch…", "Which best describes your needs?", and "When are you planning to purchase?" radio buttons are grouped visually, but they are not grouped programmatically by using fieldset and legend elements or ARIA grouping. The grouping information will not be available to screen reader users.

4.1.2 A Critical Use fieldset/legend elements, where the full label text is the legend (including all instructions and required indicator). The fieldset should wrap each set of radio buttons. The legend element must be the first child element of each fieldset element.--- OR ---Use ARIA role="radiogroup" with the aria-labelledby attribute to define each group label for the form fields.



# 197 0


15.22 240 85

Error Messages: The form error messages are positioned where screen reader users may not be able to locate the messages and information on how to correct the errors.

4.1.2 A High Because there is no form-level error message being used, set the aria-describedby attribute on the input form field that has an error and have this attribute reference the id of the element that contains the error message to associate the error message with the form field that has the error. Additionally, set aria-invalid="true" on the form input or select element to mark which fields are invalid. For this particular form, set keyboard focus to the first form field that has an error.For the "I am interested in" radio button group, do not use the aria-describedby and aria-invalid attributes. Instead, include the error message in the group label.

15.23 234 72

Form Labels: The placeholder text used for the "Comments" form field is used to convey information that is not available in the form field label. This information disappears when the form field receives focus or when input is entered so it is not communicated to screen reader users.

2.4.6 AA Med Put the contents of the placeholder attribute into a new element which is referenced by the form element through the aria-describedby attribute.--- OR ---Move the form instructions (in the reading order) to the beginning of the form or include them as part of the label for the form field.



# 197 0


15.24 232 95

Instructions: For required fields, the required indicator is not included in the form field label. Screen reader users may not know that the form field is required.

3.3.2 A High Include the required indicator in the label element that is associated with each form field.

15.25 224 181

Dialog Window: Semantic information about the dialog is communicated visually but screen reader users are not notified that a dialog window is opened or told its purpose.

4.1.2 A High Use the WAI-ARIA role="dialog" to define the popup and provide a title using the aria-labelledby attribute, referencing the id of the <h3> dialog heading. Set the aria-describedby attribute on the element having role="dialog" and have this attribute reference the id of the element that contains the store name and address text.View an example of an accessible modal dialog.

15.26 229 185

Dialog Window: The close control is not keyboard or screen reader accessible.

2.1.1 A High Make the close button an HTML button element.--- OR ---Set role="button" and tabindex="0" on the <div> element to add it to the tab order. Add keyboard event handlers to allow users to activate the element with a keyboard using the enter and spacebar key.Note: Related to issue 15.30.

15.27 225 187

Dialog Window: The dialog allows keyboard and screen reader users (but not mouse users) to access the information behind the modal overlay. All users should remain within the modal window until it is closed by the user or an action is taken.

2.1.1 A High Users should not be able to access content and links behind the modal dialog. While the modal overlay is active, focus should stay within the tabbable objects in the overlay.The modal overlay should be closed either by activating the close link/button or by pressing the escape key.See code example on GitHub

15.28 227 188

Dialog Window: When the modal window closes, keyboard focus is returned to the top of the page. Screen reader users and keyboard-only users will have to find their spot on the page.

2.4.3 A Med When completing or canceling the dialog, be sure to move focus back to the place where the window was opened.


https://gist.github.com/drublic/5899658

http://gdkraus.github.io/accessible-modal-dialog/

http://gdkraus.github.io/accessible-modal-dialog/


# 197 0


15.29 226 422

Dialog Window: Screen reader users can read and interact with the content behind the modal window using their virtual cursor (arrow keys). All users should remain within the modal window until it is closed by the user or an action is taken.

4.1.2 A High Set aria-hidden="true" on the contents behind the modal window. Be sure not to include the modal window as a child element of another element with aria-hidden="true".

15.30 230 393

UI Control: The close UI control has an undefined role because it is defined as an <a> element with no href attribute value pair. The semantic information that is available visually is not available to screen reader users.

4.1.2 A Critical Use ARIA to define UI control role or use a native HTML control. The control should be defined as a button.Note: Related to issue 15.26.

15.31 237 196

Frames Titles: The contact form iframe is missing the title attribute. The purpose of the iframe is not communicated clearly to screen reader users.

4.1.2 A Med Set title="Schedule a Consultation Contact Form" on the iframe element to describe the purpose of the iframe.

15.32 355 276

Keyboard Access Visibility: The radio buttons and "Submit" button have no visible focus indicator. Mouse users get visible cues that a page element is actionable (mouse pointer change, rollover color change, etc.) that are not available to keyboard-only users.


15.33 235 328

Text Contrast: The "*" indicator and error message text elements have insufficient contrast between the text color and background color. The color contrast ratio should be 4.5:1. Users who are color blind or who have low vision may not see the text.

Foreground: #212529Background: #F6F6F6The contrast ratio is: 14.274:1






# 197 0



15.34 297 295

Reading Order: The "Find a Contractor" text and "Click for phone number" or "Request Contact" link elements are hidden to visual users, but the content is read by the screen reader. Screen reader users may be confused by information that should be hidden.

1.3.2 A High Ensure the element is available to visual users.Note: Related to issues 15.35 and 15.37.



# 197 0


15.35 279 562

Reflow: As the text size is increased the content does not reflow without some of the "Click for phone number" or "Request Contact" link content being removed. Users with low vision who need to magnify the page content (up to 400%) will not have access to all of the content.

1.4.10 AA Med Do not remove content. Adjust the CSS so as the text size increases the content reflows and all content is fully visible.Note: Related to issue 15.34.


15.36 278 570

Text Resize: When the text size is increased, some content overlaps other content on the page making it difficult to read the text. Users with low vision users who need to magnify the content (up to 400%) may not be able to access all of the content.

1.4.10 AA Med Adjust the CSS so as the text size increases the content reflows and all content is fully visible.


15.37 277 570

Text Resize: When the text size is increased, the "Find a Contractor" text overlaps its background boundary, making it difficult to read the text. Users with low vision and users who need to magnify the content (up to 400%) may not be able to access all of the content.





Appendix A: Commonly Used Code SnippetsIn some cases, it is necessary to hide content from either visual users, or screen reader users.

Content for screen reader users but not sighted usersIn some cases, extra content can be provided for the benefit of screen reader users, which is not useful for visual browsers. Examples include headings to identify parts of the page, where the visual design makes these divisions clear already. It is desirable to include such information without changing the visual layout of the site. However, most assistive technologies ignore content that is hidden using the technique given above. For content that should be announced to assistive technology users, but not appear visually, use the following CSS class:

CSS used to hide content visually, but make it available to assistive technology users

.visually-hidden{ position: absolute; clip: rect(1px 1px 1px 1px); /* for Internet Explorer */ clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden;}

HTML demonstrating use of the class

<p class="visually-hidden">This paragraph is present in the DOM and accessible to assistive technologies, but is visually hidden.</p>

Image/Content carousel accessibilityImage/Content carousel requirements fall into two groups depending on how the content is displayed and hidden, although both methods are quite similar. The two cases are

Hidden content is hidden using display:none or a similar technique Hidden content is simply scrolled out of the current view, such as off screen or outside of the

viewport (noted below as "Always Screen Reader Visible")Both sets of requirements are presented together, but additional requirements and notes are noted for the "Always Screen Reader Visible".

Requirements Images which convey important information must have alternative text

o If the image contains important text, ideally the text will be presented as actual text.o If the text in the image is important and cannot be presented as actual text, the

alternative text of the image must contain the text presented within the image. The UI elements controlling what content is displayed must

o Be keyboard accessibleo Show a visual focus when tabbed too Be identifiable as a standard UI element (i.e. button or link)



o Have a text alternative (alt text, title, aria-label) describing what action the button/link performs.

o Always Screen Reader Visible Requirement: Provide screen-reader only (visually-hidden) instructions that the carousel controls are not needed by them (since they can already read and interact with the content).

For example, <div class="visually-hidden"> Screen reader users do not need to use these controls. All of the content is already presented to you on the page.</div>

When the user requests a change in the contento Always Screen Reader Visible Requirement: No additional steps are necessary for this

requirement (since the user could already read the "hidden" content).o If the UI controller is coded as a tab controller where each image is a tab panel, no extra

work is needed except for ensuring the proper ARIA techniques are used. Tab panels do not require notifying the user of changes to the content, other than notifying which tab is selected.

o If the hidden content was previously hidden with display:none or a similar technique (and is not implemented as a tab panel)

Shift the user’s focus (obj.focus();) to the newly requested content. (The target will need to be focusable, so you might need to add tabindex="0" or tabindex="-1" to the target element.

Note: Do not announce changes to the screen reader user by wrapping the contents with aria-live attributes. In this context, this will not accurately convey to the screen reader user what is going on.

If the content changes automatically, the changing must be able to be paused by the user. This should be done through both

o an explicit pause buttono by pausing when the user is focused on the carousel (mouse or keyboard)o Note: When screen reader users are reading the section of the carousel that changes,

and if the content changes out from under them while they are reading it, they will get taken to a different part of the page and will get disoriented. You cannot detect when they are reading the content. This is why allowing the user to pause the content is critical.

Accessible comboboxAccessible ARIA combobox elements can either be defined as a simulated select list (native HTML select/option elements) where the list is predefined, or can be defined using a textbox to enter data resulting in the display of a list of suggestions (autosuggest).

Simulated Select ListThe simulated select list should function and have the same keyboard interactions as its native HTML counterpart. When the list is collapsed, the up and down arrow keys should navigate through the list options. Alt+down arrow should open the list of options and when the list is expanded the up and down arrow keys should navigate the expanded list of options. Enter or Space will select the option and close the listbox. ESC dismisses the listbox. It is preferred that typing a letter with focus on the control moves focus to the first option that begins with the letter as is done with native HTML select lists.

Set role="combobox" on the element that controls the expand/collapse of the list options. Set the aria-expanded attribute on the element with role="combobox". When the list is

displayed set the attribute value to true and when collapsed set it to false. This indicates the state of the combobox to the user.

Set the aria-owns attribute on the element with role="combobox" to associate the control with the listbox.

Set role="listbox" on the popup item list and role="option" on each item in the list. Set aria-selected="true" on the selected option.




Provide a label for the combobox by using the HTML <label> element or the aria-label attribute.

Set the aria-activedescendant attribute on the element with role="combobox" to manage focus within the listbox.

Simulated Select List

<button role="combobox" aria-owns="listOptions" aria-autocomplete="list" aria-expanded="true" tabindex="0" aria-activedescendant="stateIdAlabama" aria-label="Select State">...</button><div id="states" style="display: block;">

<ul id="listOptions" role="listbox"><li role="option" tabindex="-1" id="stateIdAlabama" class="selected" aria-selected="true">Alabama</li><li role="option" tabindex="-1" id="stateIdAlaska">Alaska</li><li role="option" tabindex="-1" id="stateIdArizona">Arizona</li>...

</ul></div>

Autocomplete ComboboxThe list of options should be navigated using the up and down arrow keys. Enter or Space selects the option and closes the listbox. ESC dismisses the listbox.

Set role="combobox" on the textbox. Set the aria-expanded attribute on the element with role="combobox". When the list is

displayed set the attribute value to true and when collapsed set it to false. This indicates the state of the combobox to the user.

Set the aria-owns attribute on the element with role="combobox" to associate the control with the listbox.

Set role="listbox" on the popup item list and role="option" on each item in the list. If section headings are used, set role="presentation" on the section containers and set aria-

describedby on the element with role="option" referencing the id of the associated section heading.

Set aria-selected="true" on the selected option. Provide a label for the combobox by using the HTML <label> element or the aria-label

attribute. Set the aria-activedescendant attribute on the element with role="combobox" to manage

focus within the listbox. When the user starts to type in the edit box, use a visually-hidden <div> element with

role="status" and aria-live="polite" set on it to provide feedback to the user. The information in this live region should indicate how many options are available in the list when the list opens, and be updated to also indicate the number of options in the list when the number of list options changes based on continued input by the user.



Autocomplete Combobox - no sections

<div id="suggestCombo"><div id="description" class="visually-hidden">As suggestions become available, browse the suggested results using the up and down arrow keys. Enter selects the suggestion.</div><label for="f">State</label><input id="f" role="combobox" aria-owns="listOptions" aria-autocomplete="list" aria-expanded="true" tabindex="0" aria-describedby="description" aria-activedescendant="stateIdCalifornia">

<div role="status" aria-live="polite" id="total"><span>3 suggestions</span></div><div id="states" style="display: block;">

<ul id="listOptions" role="listbox"><li role="option" tabindex="-1" id="stateIdCalifornia" class="selected" aria-selected="true">California</li><li role="option" tabindex="-1" id="stateIdColorado">Colorado</li><li role="option" tabindex="-1" id="stateIdConnecticut">Connecticut</li>

</ul></div>

</div>

View working model of a comboboxhttp://ia11y.github.io/Coding-Patterns/forms/autocomplete-combobox/index.html

Autocomplete Combobox - with sections

<div id="suggestCombo"><div id="description" class="visually-hidden">As suggestions become available, browse the suggested results using the up and down arrow keys. Enter selects the suggestion.</div><label for="f">Country</label><input id="f" role="combobox" aria-owns="listOptions" aria-autocomplete="list" aria-expanded="true" tabindex="0" aria-describedby="description" aria-activedescendant="countryIdUganda"><div role="status" aria-live="polite" id="total"><span>7 suggestions</span></div><div id="countries" style="display: block;">

<ul id="listOptions" role="listbox"><li role="presentation" class="list-heading" id="Africa" tabindex="-1">Africa (1)</li><li role="option" aria-describedby="Africa" tabindex="-1" id="countryIdUganda" class="selected" aria-selected="true">Uganda</li><li role="presentation" class="list-heading" id="Asia" tabindex="-1">Asia (2)</li>


http://ia11y.github.io/Coding-Patterns/forms/autocomplete-combobox/index.html


<li role="option" aria-describedby="Asia" tabindex="-1" id="countryIdUnitedArabEmirates">United Arab Emirates</li><li role="option" aria-describedby="Asia" tabindex="-1" id="countryIdUzbekistan">Uzbekistan</li><li role="presentation" class="list-heading" id="Europe" tabindex="-1">Europe (2)</li><li role="option" aria-describedby="Europe" tabindex="-1" id="countryIdUkraine">Ukraine</li><li role="option" aria-describedby="Europe" tabindex="-1" id="countryIdUnitedKingdom">United Kingdom</li><li role="presentation" class="list-heading" id="NorthAmerica" tabindex="-1">North America (1)</li><li role="option" aria-describedby="NorthAmerica" tabindex="-1" id="countryIdUnitedStates">United States</li><li role="presentation" class="list-heading" id="SouthAmerica" tabindex="-1">South America (1)</li><li role="option" aria-describedby="SouthAmerica" tabindex="-1" id="countryIdUruguay">Uruguay</li></ul>

</div></div>

View working model of a comboboxhttp://ia11y.github.io/Coding-Patterns/forms/autocomplete-combobox-sections/index.html

Accessible drop-down menu requirementsAccessible drop-down menus are usually designed in one of two ways: non-managed user focus or managed user focus. The key difference comes down to how you allow users to navigate through your menu. The difference is will the user only be allowed to use Tab and Shift-Tab to navigate the menu, or will the user be allowed to use arrow keys to move up and down through menu items and left and right between sub-menus.

In general, the Non-Managed User Focus menu is the preferred form of menu navigation when providing a set of links that take you to different pages within a site. The Managed User Focus menu is typically used for menus in Web applications, not for standard navigation among multiple Web pages within a site. However, while not recommended, the Managed User Focus Menu can be used for providing navigation among multiple pages within the site if the complexity of the menu necessitates it.

The other key difference is if the top-level menu items are links themselves, or if they simply control the visibility of the sub-menu. The Managed User Focus menu is one of the ways that top-level menu items can be made to be both links and controls for showing submenus at the same time.

The Hybrid User Focus Management menu combines the functionality of both types of menus, providing some of the flexibility of the Managed User Focus Menu (top-level menu items being links) but the usability of the Non-Managed User Focus Menu.

Non-Managed User FocusIn this case, the user will only be able to navigate the menu using their Tab and Shift-Tab keys. This solution is usually easier to implement since you do not have to worry about responding to arrow keys.

Requirements In this implementation, the contents of each drop-down menu must immediately follow its

corresponding top-level menu item in the DOM and tab order. Top-level menu items cannot be links to other pages themselves. Clicking on a top-level menu

items can only expand and collapse its submenu.


http://ia11y.github.io/Coding-Patterns/forms/autocomplete-combobox-sections/index.html

http://ia11y.github.io/Coding-Patterns/forms/autocomplete-combobox-sections/index.html


Guidelines for Keyboard/Screen Reader Behavior Wrap all of the menu in <nav aria-label="…"> or <div role="navigation" aria-

label="…"> and provide the appropriate label describing this navigational area. Note: do not use the word “navigation" in the aria-label, as that information is already conveyed to users.

Make the top-level menu items an unordered list. Mark each top-level menu with aria-expanded="false" when the dropdown is closed. Before any drop-down menus are opened, Tab and Shift-Tab move between top-level menu

items. The submenu contents must be wrapped with <section role="region" aria-

labelledby="…">, where aria-labelledby refers to the parent menu item. Once the user clicks on the top-level menu item, reveal the drop-down menu and set aria-

expanded="true" to the top-level menu item. Do not set the user’s focus into the drop-down menu.

Once a drop-down menu is opened, Tab, and Shift-Tab will navigate the user between items in the drop-down menu. Tab and Shift-Tab can also navigate a user out of the drop-down menu.

Pressing escape will close the submenu and return the focus to the top-level menu item. At this point, pressing Tab or Shift-Tab will take the user to the next focusable element visible on the page – either the next or previous top-level menu item or to the item just before or after the menu if the user is on the first or last item in the top-level menu items.

If the user clicks on the top-level menu item while the drop-down menu is revealed, hide the drop-down menu and set aria-expanded="false".

If the user’s focus ever leaves both the drop-down menu and the top-level menu item (such as when they navigate to another top-level menu item) automatically hide the drop-down menu and mark the top-level menu item with aria-expanded="false".

Managed User FocusIf your menu cannot meet the requirements of the “Non-Managed User Focus" menu type, or you want to provide the extra functionality of responding the arrow keys for navigation, you must use this implementation. In the Managed User Focus implementation, you are responsible for responding to all key presses and moving the user’s focus accordingly. The functionality for this type of menu is typically used for menus in Web applications, not for standard navigation among multiple Web pages within a site. However, while not recommended, it can be used for providing navigation among multiple pages within the site if the complexity of the menu necessitates it.

Requirements Since you are managing the user’s focus, all of the contents in the drop-down menu must be

focusable or associated with a focusable item through aria-describedby.


label="…"> and provide the appropriate label describing this navigational area. Wrap all of the contents of the top-level menu with role="menubar". Make the top-level menu items an unordered list. For each top-level menu item, mark it with role="menuitem", aria-expanded="false" and

aria-haspopup="true". The drop-down menu needs to be wrapped with role="menu". Each of the individual menu items in the drop-down menu needs to be marked as

role="menuitem". If the drop-down menu is not a child element of the top-level menu item, mark the top-level menu

item with aria-controls="id", where id = the id of the drop-down menu container. When the user first focuses on the top-level menu items:

o Left and right arrow keys, along with Tab and Shift-Tab navigate between top-level menu items



o Down arrow opens the corresponding drop-down menu AND puts the user’s focus on the first focusable item in the drop-down menu. Enter can also open the drop-down menu if appropriate (if the top-level menu item is not a link to another page itself).

Escape will close the drop-down menu and return the user’s focus to the corresponding top-level menu item.

When a user is focused inside of a drop-down menu:o Up and down arrow moves between items in the drop-down menu.o Left and right arrows can either

Move the user’s focus to the next drop-down menu in the larger menu, or (optional) Move the user’s focus to another column within the drop-down menu, if

multiple columns of information are presented inside of a drop-down menu.o Tab and Shift-Tab will move the user to the next focusable item in the drop-down menu,

or to the next or previous drop-down menu when the end or beginning of the current drop-down menu is reached. If the user is taken to a new drop-down menu, their focus should be set on the first (next drop-down) item or the last (previous drop-down) item in the new drop-down menu.

o When a user leaves one drop-down menu for another drop-down menu or another part of the page, the drop-down menu closes.

Sample structure for managed user focus drop-down menu<nav aria-label="main"> <ul role="menubar"> <li role="presentation">

<a href="…" role="menuitem" aria-controls="menu1" aria-haspopup="true" aria-expanded="false">Top Level Menu Item #1</a>

<div id="menu1" role="menu"> <a href="…" role="menuitem">Menu item #1</a> <a href="…" role="menuitem">Menu item #2</a> <a href="…" role="menuitem">Menu item #3</a> </div> </li> <li role="presentation">

<a href="…" role="menuitem" aria-controls="menu2" aria-haspopup="true" aria-expanded="false">Top Level Menu Item #2</a>

<div id="menu2" role="menu"> <a href="…" role="menuitem">Menu item #1</a> <a href="…" role="menuitem">Menu item #2</a> <a href="…" role="menuitem">Menu item #3</a> </div> </li> </ul></nav>

Hybrid User Focus ManagementIf the top-level items in the menu are links themselves in addition to being the item that expands and collapses the submenu, a different solution must be implemented since the top-level item performs two functions – opening the submenu and taking the user to new content. In this Hybrid User Focus Management Menu, the top-level menu item will open the submenu when it receives focus, but the user can close the menu by pressing escape so they do not need to navigate through all of the menu items in each submenu.

Requirements All of the requirements closely align with the Non-Managed User Focus requirements In this implementation, the contents of each drop-down menu must immediately follow its

corresponding top-level menu item in the DOM and tab order.




label="…"> and provide the appropriate label describing this navigational area. The aria-label text must include "press escape to close the menu". Note: do not use the word “navigation" in the aria-label, as that information is already conveyed to users.

Make the top-level menu items an unordered list. Mark each top-level menu with aria-expanded="false" when the dropdown is closed. When a top-level menu item receives focus, expand the submenu and change aria-expanded to

"true". Do not set the user’s focus into the drop-down menu. The submenu contents must be wrapped with <section role="region" aria-

labelledby="…">, where aria-labelledby refers to the parent menu item. Once a drop-down menu is opened, Tab and Shift-Tab will navigate the user between items in

the drop-down menu. Tab and Shift-Tab can also navigate a user out of the drop-down menu. Pressing escape will close the submenu and return the focus to the top-level menu item. At this

point, pressing Tab or Shift-Tab will take the user to the next focusable element visible on the page – either the next or previous top-level menu item or to the item just before or after the menu if the user is on the first or last item in the top-level menu items.

If the user clicks on the top-level menu item while the drop-down menu is revealed, hide the drop-down menu and set aria-expanded="false".

If the user’s focus ever leaves both the drop-down menu and the top-level menu item (such as when they navigate to another top-level menu item) automatically hide the drop-down menu and mark the top-level menu item with aria-expanded="false".



Appendix B: Useful Resources W3C’s Web Accessibility Initiative (WAI)

o Web Content Accessibility Guidelines (WCAG 2) o How to Meet WCAG 2 (Quick Reference) o Accessible Rich Internet Applications (WAI-ARIA) Suite Overview o WAI-ARIA 1.1 Authoring Practices o WAI-ARIA 1.0 | The Roles Model

PDF o Adobe’s Accessibility Resource Center for PDFs and Flash o Adobe TV | Accessibility @ Adobe tutorials, demos and techniques


http://tv.adobe.com/show/accessibility-adobe/

http://www.adobe.com/accessibility/index.html

http://www.w3.org/WAI/PF/aria/roles

https://www.w3.org/TR/wai-aria-practices-1.1/

http://www.w3.org/WAI/intro/aria.php

http://www.w3.org/WAI/WCAG21/quickref/

http://www.w3.org/WAI/intro/wcag.php


Appendix C: Web Accessibility Testing Tools Code Validators – W3C HTML Validator or HTML Validator add-on for Firefox verifies that web

pages have correct syntax

Browsers – use the browser’s accessibility functions (e.g. text size, zoom, no page style) to determine whether the site responds as expected to those functions

Keyboard Testing - simply trying to use your website with the keyboard (hide your mouse) can tell you a lot about the accessibility of the site

Accessibility Checkers – single page and site evaluation tools

o ARC Toolkit

Add-ons and Toolbars – they extend the capability of the browsers to help you easily find accessibility issues

o Accessibility Viewer o Web Developer Extension for Firefox

Color Analyzers

o Color Oracle o Luminosity Colour Contrast Ratio Analyser o Colour Contrast Analyser o Contrast Rebellion

Assistive technology – tools that people with disabilities use to access the Web

o JAWS for Windows Screen Reader desktop software o NVDA free open source screen reader o ZoomText Magnifier o Dragon Naturally Speaking Professional


https://www.nuance.com/dragon/business-solutions/dragon-professional-individual.html

http://www.zoomtext.com/products/zoomtext-magnifier/

http://www.nvda-project.org/

http://www.freedomscientific.com/downloads/jaws/jaws-downloads.asp

http://contrastrebellion.com/

https://developer.paciellogroup.com/resources/contrastanalyser/

http://juicystudio.com/services/luminositycontrastratio.php

http://colororacle.org/

https://addons.mozilla.org/en-US/firefox/addon/60

https://developer.paciellogroup.com/resources/aviewer/

https://chrome.google.com/webstore/detail/arc-toolkit/chdkkkccnlfncngelccgbgfmjebmkmce?hl=en

https://addons.mozilla.org/en-US/firefox/addon/249

http://validator.w3.org/

Documents

Accessibility Review - lghvac.com · Web viewFor the review to provide guidance on correcting all of the accessibility issues, the set of pages must represent the type of content,