Satisfy Recommendation. Pass. Pass. Pass. Pass. Pass. Pass. Pass

Transcription

1 ID Recommendations Satisfy Recommendation Note 1 Perceivable - Web content is made available to the senses sight, hearing, and/or touch 1.1 Text Alternatives - Provide text alternatives for any non text Non text Content (Level A) All images, form image buttons, and image map hot spots have appropriate, equivalent alternative text All images should have alt text or alt attribute with empty text All images should have alt text or alt attribute with empty text All images should have alt text or alt attribute with empty text All images should have alt text or alt attribute with empty text Images that do not convey content, are decorative, or contain content that is already conveyed in text are given null alt text (alt="") or implemented as CSS backgrounds. All linked images Equivalent alternatives to complex images are provided in context or on a separate (linked and/or referenced via longdesc) page Form buttons have a descriptive value Form inputs have associated text labels.

2 Embedded multimedia is identified via accessible text Frames are appropriately titled Time based Media: Provide alternatives for time based media Prerecorded Audio only and Video only (Level A) A descriptive text transcript (including all relevant visual and auditory clues and indicators) is provided for non live, web based A text or audio description is provided for non live, web based video only (e.g., video that has no audio track) Captions (Prerecorded) (Level A)

3 Synchronized captions are provided for non live, web based video Audio Description or Media Alternative (Prerecorded) (Level A) A descriptive text transcript OR audio description audio track is provided for non live, web based video Captions (Live) (Level AA) Synchronized captions are provided for all live multimedia that contains audio (audio only broadcasts, web casts, video Audio Description (Prerecorded) (Level AA) Audio descriptions are provided for all video content A descriptive text transcript is provided for all pre recorded media

4 Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information Info and Relationships (Level A) Semantic markup is used to designate headings (<h1>), lists (<ul>, <ol>, and <dl>), emphasized or special text (<strong>, <code>, <abbr>, <blockquote>, for example), etc. Semantic markup is used Tables are used for tabular data. Where necessary, data cells are associated with their headers. Data table captions and summaries Text labels are associated with form input elements. Related form elements are grouped with fieldset/legend Meaningful Sequence (Level A) The reading and navigation order (determined by code order) is logical and intuitive Location: ul.slider-wrapper.slick-initialized.slick-slider.slick-dotted List is structured incorrectly. Expected: Only li tags are directly children of ul tag

5 Sensory Characteristics (Level A) Instructions do not rely upon shape, size, or visual location (e.g., "Click the square icon to continue" or "Instructions are in the right hand column") Instructions do not rely upon sound (e.g., "A beeping sound indicates you may continue.") Orientation (Level AA) Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential Identify Input Purpose (AA) The purpose of each input field collecting information about the user can be programmatically determined when: - The input field serves a purpose identified in the Input Purposes for User Interface Components section; and - The content is implemented using technologies with support for identifying the expected meaning for form input data

6 Distinguishable: Make it easier for users to see and hear content including separating foreground from background Use of Color (Level A) Color is not used as the sole method of conveying content or distinguishing visual elements Color alone is not used to distinguish links from surrounding text unless the luminance contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g., it becomes underlined) is provided when the link is hovered over or receives focus Audio Control (Level A) A mechanism is provided to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more than 3 seconds Contrast (Minimum) (Level AA)

7 The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: - Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; - Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement. - Logotypes: Text that is part of a logo or brand name has no contrast requirement. Location:.content-holder > p; #search-filter-input-desktop; Element has insufficient color contrast of 4.41 (foreground color: #787878, background color: #ffffff, font size: 10.5pt, font weight: normal) Location:.selection-module-item.description.info,.selection-module-item.description p,.selection-module-item.description.p Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 10.5pt, font weight: normal). Location:.paging-holder >.btn Element has insufficient color contrast of 3.29 (foreground color: #ffffff, background color: #e36a2f, font size: 9.0pt, font weight: bold). Location:.footer-containter Element has insufficient color contrast of 3.86 (foreground color: #a7c3d8, background color: #355c79, font size: 10.5pt, font weight: bold).

8 Location:.gray-module.description-separate.w2h1:nth-child(10) > div[mmb-promo-module=""] >.promo-module-container >.contentmodule-info > p Element has insufficient color contrast of 4.23 (foreground color: #ffffff, background color: #727c88, font size: 9.8pt, font weight: normal) Location:.promo-module-holder.promo-module.gray-module.promomodule-container.content-module-info.btn Element has insufficient color contrast of 4.23 (foreground color: #727c88, background color: #ffffff, font size: 9.0pt, font weight: bold). Location: #footer.title Element has insufficient color contrast of 3.86 (foreground color: #a7c3d8, background color: #355c79, font size: 10.5pt, font weight: bold). Expected contrast ratio of 4.5:1 Location:.content-holder > p; #search-filter-input-desktop; Element has insufficient color contrast of 4.41 (foreground color: #787878, background color: #ffffff, font size: 10.5pt, font weight: normal) Location:.selection-module-item.description.info,.selection-module-item.description p,.selection-module-item.description.p Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 10.5pt, font weight: normal). Location:.paging-holder >.btn Element has insufficient color contrast of 3.29 (foreground color: #ffffff, background color: #e36a2f, font size: 9.0pt, font weight: bold). Location:.footer-containter Element has insufficient color contrast of 3.86 (foreground color: #a7c3d8, background color: #355c79, font size: 10.5pt, font weight: bold).

9 Location: a Element has insufficient color contrast of 3.29 (foreground color: #e36a2f, background color: #ffffff, font size: 13.5pt, font weight: normal) Location:.selection-module-item.description.info,.selection-module-item.description p,.selection-module-item.description.p Element has insufficient color contrast of 3.54 (foreground color: #888888, background color: #ffffff, font size: 10.5pt, font weight: normal). Location:.footer-containter Element has insufficient color contrast of 3.86 (foreground color: #a7c3d8, background color: #355c79, font size: 10.5pt, font weight: bold). Location:.visible-lg >.p; Element has insufficient color contrast of 3.29 (foreground color: #e36a2f, background color: #ffffff, font size: 11.3pt, font weight: bold). Expected contrast ratio of 4.5: Location:.presentation-module.category-info; Element has insufficient color contrast of 4.41 (foreground color: #787878, background color: #ffffff, font size: 10.5pt, font weight: bold). Expected contrast ratio of 4.5:1 Location:.notice Element has insufficient color contrast of 1.94 (foreground color: #bababa, background color: #ffffff, font size: 16.5pt, font weight: bold). Expected contrast ratio of 3: Resize text (Level AA) The page is readable and functional when the text size is doubled Location: #footer.title Element has insufficient color contrast of 3.86 (foreground color: #a7c3d8, background color: #355c79, font size: 10.5pt, font weight: bold). Expected contrast ratio of 4.5:1 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> Meta tag does not allow zooming on mobile devices Expected: allow zooming on mobile devices

10 Images of Text (Level AA) If the same visual presentation can be made using text alone, an image is not used to present that text Reflow (AA) Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for: - Vertical scrolling content at a width equivalent to 320 CSS pixels; - Horizontal scrolling content at a height equivalent to 256 CSS pixels; Except for parts of the content which require two-dimensional layout for usage or meaning Non-Text Contrast (AA) The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s): - User Interface Components: Visual information used to indicate states and boundaries of user interface components, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author; - Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> Meta tag does not allow zooming on mobile devices Expected: allow zooming on mobile devices

11 Text Spacing (AA) In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property: - Line height (line spacing) to at least 1.5 times the font size; - Spacing following paragraphs to at least 2 times the font size; - Letter spacing (tracking) to at least 0.12 times the font size; - Word spacing to at least 0.16 times the font size. Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script Content on Hover or Focus (AA) Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true: - Dismissable: A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content; - Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing; - Persistent: The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid. Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author

12 Operable - Interface forms, controls, and navigation are 2.1 Keyboard Accessible: Make all functionality available from a Keyboard (Level A) All page functionality is available using the keyboard, unless the functionality cannot be accomplished in any known way using a keyboard (e.g., free hand drawing) Unable to tab to search icon button on top of page. Expected: Able to tab to search icon on top of page. When user tab on filter bar, tab index is abnormal direction Filter dropdown (on the right) then to text box then to "Nära mig" button. Expected: Tab index should be from left to right direction like others. Tab index should be text box then "Nära mig" button then filter drop down. When filter drop down is open, cannot tab into filter container. Expected: user able to tab into filter container when filter dropdown is open. Unable to tab to search icon button on top of page. Expected: Able to tab to search icon on top of page. Cannot use keyboard to play video Expected: Able to play video by using keyboard

13 Unable to tab to search icon button on top of page. Expected: Able to tab to search icon on top of page When user tab on filter bar, tab index is abnormal direction Filter dropdown (on the right) then to text box then to "Nära mig" button then to "Följande året" dropdown. Expected: Tab index should be from left to right like others. Tab index should be start from text box then to "Nära mig" button then to calendar button then to "Följande året" dropdown then filter drop down. Unable to tab to focus on calendar button in filter bar. Expected: When use press tab button from "Nära mig" button, browser should focus on calendar button Page specified shortcut keys and accesskeys (accesskey should typically be avoided) do not conflict with existing browser and screen reader shortcuts No Keyboard Trap (Level A) Keyboard focus is never locked or trapped at one particular page element. The user can navigate to and from all navigable page elements using only a keyboard When filter drop down is open, cannot tab into filter container. Expected: user able to tab into filter container when filter dropdown is open. Unable to tab to search icon button on top of page. Expected: Able to tab to search icon on top of page. Unable to tab to search icon button on top of page. Expected: Able to tab to search icon on top of page.

14 If a page or application has a time limit, the user is given options to turn off, adjust, or extend that time limit. This is not a requirement for real time events (e.g., an auction), where the time limit is absolutely required, or if the time limit is longer than 20 hours Character Key Shortcuts (A) If a keyboard shortcut is implemented in content using only letter (including upper- and lower-case letters), punctuation, number, or symbol characters, then at least one of the following is true: Turn off: A mechanism is available to turn the shortcut off; - Remap: A mechanism is available to remap the shortcut to use one or more non-printable keyboard characters (e.g. Ctrl, Alt, etc). - Active only on focus: The keyboard shortcut for a user interface component is only active when that component has focus Enough Time: Provide users enough time to read and use Timing Adjustable (Level A) Pause, Stop, Hide (Level A) Automatically moving, blinking, or scrolling content that lasts longer than 5 seconds can be paused, stopped, or hidden by the user. Moving, blinking, or scrolling can be used to draw attention to or highlight content as long as it lasts less than 5 seconds

15 Automatically updating content (e.g., automatically redirecting or refreshing a page, a news ticker, AJAX updated field, a notification alert, etc.) can be paused, stopped, or hidden by the user or the user can manually control the timing of the updates Seizures: Do not design content in a way that is known to Three Flashes or Below Threshold (Level A) No page content flashes more than 3 times per second unless that flashing content is sufficiently small and the flashes are of low contrast and do not contain too much red. (See general flash and red flash thresholds) Navigable: Provide ways to help users navigate, find content, and determine where they are Bypass Blocks (Level A) A link is provided to skip navigation and other page elements that are repeated across web pages If a page has a proper heading structure, this may be considered a sufficient technique instead of a "Skip to main content" link. Note that navigating by headings is not yet supported in all browsers There is no link to skip repeated on multiple webpages (such as navigation) to main content

16 Page Titled (Level A) The web page has a descriptive and informative page title Focus Order (Level A) The navigation order of links, form elements, etc. is logical and intuitive Link Purpose (In Context) (Level A) The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general Multiple Ways (Level AA) Location: a[href="/bohuslan/batluffa/"] Image link do not have text being visible to screen reader. Expected: Link text (and alternate text for images, when used as links) must be discernible by a screen reader, must not have a duplicate label, and must be focusable.

17 Multiple ways are available to find other web pages on the site at least two of: a list of related pages, table of contents, site map, site search, or list of all available web pages Headings and Labels (Level AA) Page headings and labels for form and interactive controls are informative. Avoid duplicating heading (e.g., "More Details") or label text (e.g., "First Name") unless the structure provides adequate differentiation between them Focus Visible (Level AA) It is visually apparent which page element has the current keyboard focus (i.e., as you tab through the page, you can see where you are) Difficult to see highlight when tabbing in main content next buttons Difficult to see highlight when tabbing in slider, especially previous and Difficult to see highlight when tabbing to Boka button 2.5 Input Modalities Pointer Gestures (A) All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a pathbased gesture, unless a multipoint or path-based gesture is essential

18 Pointer Cancellation (A) For functionality that can be operated using a single pointer, at least one of the following is true: - No Down-Event: The down-event of the pointer is not used to execute any part of the function; - Abort or Undo: Completion of the function is on the up-event, and a mechanism is available to abort the function before completion or to undo the function after completion; - Up Reversal: The up-event reverses any outcome of the preceding down-event; - Essential: Completing the function on the down-event is essential Label in Name (A) For user interface components with labels that include text or images of text, the name contains the text that is presented visually Motion Actuation (A) Functionality that can be operated by device motion or user motion can also be operated by user interface components and responding to the motion can be disabled to prevent accidental actuation, except when: - Supported Interface: The motion is used to operate functionality through an accessibility supported interface; - Essential: The motion is essential for the function and doing so would invalidate the activity

19 Understandable 3.1 Readable: Make text content readable and understandable Language of Page (Level A) The language of the page is identified using the HTML lang attribute (<html lang="en">, for example) Language of Parts (Level AA) The language of page content that is in a different language is identified using the lang attribute (e.g., <blockquote lang="es">) Predictable: Make Web pages appear and operate in On Focus (Level A) When a page element receives focus, it does not result in a substantial change to the page, the spawning of a pop up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user On Input (Level A)

20 When a user inputs information or interacts with a control, it does not result in a substantial change to the page, the spawning of a pop up window, an additional change of keyboard focus, or any other change that could confuse or disorient the user unless the user is informed of the change ahead of time Consistent Navigation (Level AA) Navigation links that are repeated on web pages do not change order when navigating through the site Consistent Identification (Level AA) Elements that have the same functionality across multiple web pages are consistently identified. For example, a search box at the top of the site should always be labeled the same way Predictable: Make Web pages appear and operate in Error Identification (Level A) Required form elements or form elements that require a specific format, value, or length provide this information within the element's label

21 If utilized, form validation errors are presented in an efficient, intuitive, and accessible manner. The error is clearly identified, quick access to the problematic element is provided, and user is allowed to easily fix the error and resubmit the form Labels or Instructions (Level A) Sufficient labels, cues, and instructions for required interactive elements are provided via instructions, examples, properly positioned form labels, and/or fieldsets/legends Error Suggestion (Level AA) If an input error is detected (via client side or server side validation), provide suggestions for fixing the input in a timely and accessible manner Error Prevention (Legal, Financial, Data) (Level AA) If the user can change or delete legal, financial, or test data, the changes/deletions can be reversed, verified, or confirmed

22 Robust - Content can be used reliably by a wide variety of user agents, including assistive technologies 4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies Parsing (Level A) Significant HTML/XHTML validation/parsing errors are avoided. Check at Name, Role, Value (Level A) Markup is used in a way that facilitates accessibility. This includes following the HTML/XHTML specifications and using forms, form labels, frame titles, etc. appropriately Status Messages (AA) In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus By using Angular framework, there are many custom attributes were added to HTML such as ng-app, ng-controller, ng-model, v-on, etc. By using Angular framework, there are many custom attributes were added to HTML such as ng-app, ng-controller, ng-model, v-on, etc. In slider, ul and li tags are structured incorrectly Expected: ul and li tags are structured correctly By using Angular framework, there are many custom attributes were added to HTML such as ng-app, ng-controller, ng-model, v-on, etc.