UX Accessibility ChecklistFull checklistSketch checklistBrowser checklistLayoutThe interface can be used in all screen orientations (Portrait and Landscape mode). 1.3.4 Orientation (AA)The layout is responsive and adapts to the viewport size. Should at a minimum to 320 x 568 size.1.4.10 Reflow (AA)No scrolling in more than one direction while browser zoom is at 400% (no both horizontal and vertical).Exception: where it is required two-dimensional layout or when a toolbar is manipulating another part of the content.1.4.10 Reflow (AA)Ensure contents can be presented without loss of information or functionality when zooming to 200%.1.4.10 Reflow (AA)Color & ContrastUI components and graphical objects have a contrast ratio of at least 3:1 against the adjacent color1.4.11 Non-Text Contrast (AA) Small text (up to 24px regular or less than 18,5px bold) have a contrast ratio of at least 4,5:1 against the adjacent color.1.4.3 Contrast (Minimum) (AA)Large text (at least 24px regular and 18,5px bold) have a contrast ratio of 3:1 against the adjacent color.1.4.3 Contrast (Minimum) (AA)Links and graphs are identified by something more than color.1.4.1: Use of Color (A)ContentHeadings, labels and buttons are informative.2.4.6 Headings and Labels (AA)The page has a headline that describes the main content of the page.1.3.1 Info and Relationships (A)Instructions do not rely on sensory characteristics (e.g click on the right button etc.)1.3.3: Sensory Characteristics (A)There are no images of text. Logotypes are considered essential as long as they don’t act as a heading.1.4.5 Images of Text (AA)Components having the same functionality is used and identified consistently. In general, use the same terminology on the siteExample: Do not use two different labels for the same function e.g Download and Share with the same graphical element, and make sure to use the same link text to the same destination.3.2.4: Consistent Identification (AA)TablesRow or column headings are easily distinguishable and marked1.3.1: Info and Relationships (A)Check if tables need descriptive title (mandatory)1.3.1: Info and Relationships (A)MediaAnimationsAvoid moving, blinking and scrolling content like carousels and background videos that start automatically. If there are such elements it must be possible to pause them2.2.2 Pause, Stop, Hide (A)Provide a way to pause or stop moving elements or animations if they last longer than 5 seconds2.2.2 Pause, Stop, Hide (A)NavigationConsistent navigationList of links or functions that are repeated on several web pages occur in the same relative order3.2.3 Consistent Navigation (AA)Focus & OrderVisual focus marking must be visible for keyboard navigation and have at least a minimum contrast of 3:0,1.2.4.7 Focus Visible (A),1.4.11 Non-text Contrast (AA)The tab order is logical. Focus should not go in an unexpected order2.4.3 Focus order (A)Touch target & spacing of interactive objectsThe size of an clickable object has a minimum target size of 44 x 44 px, or 48 x 48 dp. For iOS, at least 48 x 48 dp2.5.5 Target Size (AAA)Complex gestures have alternate solutionsProvide an alternative to multi-touch gestures and gestures requiring the user to follow a specific pathExample: Examples of path-based gestures includes for example swiping, sliders and carousels2.5.1 Pointer Gestures (A)FormsRequired input field is marked up with color, text and programmatically associated1.4.1: Use of Color (A)All errors in forms are described in text.3.3.1 Error identification (A)All interface elements requiring user input have a visible label3.3.2 Labels or instructions (A)Provide important instructions or cues for input fields so that users know what input data is expected.3.3.2 Labels or instructions (A)Errors are described in text with information on how to correct those error (if possible)Example: 3.3.1 requires that the error message have a textual description, while 3.3.3 requires that the description also contains information on how to correct the error.3.3.3 Error suggestions (AA)Important forms let the user review, edit and confirm data before submitting. Example: This applies to all forms that involve a legal contract or financial transactions.3.3.4 Error prevention (AA) Screen readerVerify that the order of the content (reading order) does not affect its meaning. A sufficient technique is that the elements are placed in a logical order in the source code that matches the visual order of the content.1.3.2 Meaningful Sequence (A)Verify if Instructions or references are needed to screen reader users (e.g search suggestions etc.)4.1.2 Name, Role, Value (Level AVerify that all interactive elements work in expected ways.Example: Make sure that the screen reader announces a suitable semantic role, name and any visual states or properties such as ”pressed”, ”selected”, ”expanded” for the element.4.1.2 Name, Role, Value (Level ACheck that status messages are conveyed to screen reader in an understandable and logical way.4.1.3 Status Messages (Level AA)PDF versionsFull checklistSketch checklistBrowser checklistUX DesignerPrevious PageResources and toolsNext Page