Interaction/Navigation Patterns
- Do design interactions consider keyboard and touch interaction as well as mouse?
- If the design favors sighted mouse users, consider what is needed to support screen reader users, keyboard-only users, voice input users, and people with low vision.
- Are target areas large enough to accommodate touch and mouse clicks for users who have problems with mobility/dexterity?
- Clickable target areas must be at least 44 px by 44 px in size.
- Are there limited use of animations, effects, and/or transitions?
- Even so, provide a mechanism to users to disable effects. This can be provided by application wide settings, not necessarily on the current page.
Typography
- Are font sizes and typefaces easy to read?
- Main text font size should be a minimum of 16 px
- Is left alignment or right alignment used for text?
- Avoid justified alignment whenever possible.
- Are your line lengths clearly capped at no more than 75 characters long?
Page Structure
- Does the page have a clear primary heading (an h1)?
- Are headings provided for each important section on the page?
- Are the headings organized in a logical manner?
- Does the heading structure not skip any heading levels?
- There should be a single H1 followed by headings that range from H2 to H6.
Tables
- Are row and/or column headers clearly identified?
- Remember to include visually hidden text for headers that might be identified with an icon or control such as a select all checkbox.
- Does your table need a title?
- This can explain clarify the meaning of its content to everyone.
- A visual title is preferable, but a visually hidden title can be provided for simple tables.
- Is there a possibility for cells to be empty?
- Remember to keep the empty cell behavior consistent. Should it be just an empty cell? A zero? If a symbol like a dash is used to indicate no data, provide a text alternative for the symbol.
- Are re-orderable columns clearly identified?
- Each one must have a clickable button with an accessible name. If the button only provides an icon, make sure to include visually hidden text to indicate the accessible name.
- Can your table be empty?
- Remember to provide real text explaining the situation.
Images
- Do all important images have text alternatives?
- For images used as links, buttons, or other interactive controls, the text alternatives should describe the functionality. For instance, if an arrow icon is used as a Submit button, the text alternative should be “Submit”.
- Are all decorative images identified as such?
- Decorative images will be ignored by assistive technologies
Links
- Are links easily identifiable on the page?
- Consider adding an underline to links. At a minimum, the underline must appear on hover and focus if color only is used to identify links on a page
- Are links used for navigation?
- o If they trigger an event on the page use a button instead.
- Do links meaningfully describe their destination or topic?
- You can review exponents in chapter 3. “Read More” is not OK
- “You can review exponents in chapter 3.“Read more about exponents” is OK
- “You can review exponents in chapter 3” is even better because it provides the link in the reading context
- Is a visual indicator provided to show when a link opens in a new window?
- If so, be sure to provide a text alternative for the indicator.
Navigation
- Are the layout and location of shared navigation items consistent across all pages?
- For example, it’s OK to collapse a navigation bar into a burger menu on mobile, but you must ensure the navigation items are still listed in the same order.
- Is there a “Skip to Main Content” link provided as the first focusable element across pages?
- This is needed on any page sharing repeated elements with other pages.
- If there are large amounts of content on the page, are there mechanisms provided to bypass large blocks of content?
- A good example might be to provide a “Skip to Chatbot” link right after the “Skip to Main Content” link if a chatbot is present at the bottom of the page.
Forms
- Are form completion instructions provided before the form?
- Avoid disabling buttons as conditions for form instructions as they do not appear in the focus order.
- Do all form controls and inputs have labels?
- Are labels near form controls and inputs?
- Consider using text alongside icons when possible
- Check the image section if the control contains an image
- Are related form controls and input grouped together with a group label?
- For example, the fields commonly provided to enter one’s address such as street, city, state, and zip code should be grouped. A visual label is best, but it can be visually hidden.
- Are formatting instructions provided for all applicable inputs?
- This is important for zip codes, phone numbers, dates…
- These instructions must remain visible (e.g., don’t use placeholders)
- Are form instructions free of sensory characteristics or cues?
- “Click on the red button when you are done” is not OK
- “Click on the submit button when you are done” is OK
- Are placeholders only used to provide entry examples?
- Instructions should be presented between the label and the control with the information users need to be successful.
- Are disabled buttons avoided?
- Disabled buttons offer no explicit feedback and are confusing for most users. Instructions within the form or feedback when the button is clicked should be provided instead.
Error Prevention and Suggestions
- Are all required fields identified visually in the design?
- Required field must be visually identified. Flagging optional fields is not an option.
- Do inline error messages tell users how to fix the issue?
- Do inline error messages appear near their associated control or input?
- Is error identification free of sensory characteristics or cues?
- Don’t use color only to visually show errors in fields. Supply textual feedback.
Multimedia
- Are all video controls visible and labeled properly?
- Displaying only a Play button makes it difficult for users to access closed captions and other alternatives needed for viewing the video.
- Does multimedia not play automatically?
- If multimedia plays automatically, a method must be provided to pause or stop the media.
- Is the location of multimedia alternatives included in the design?
- Buttons for captions and audio description should be provided in the video player.
- Links to or regions for transcripts should be near the multimedia.
Focus Management
- Is a custom focus ring provided for elements in the focus order?
- For consistency across browsers, consider customizing the focus ring and include examples and color value in the design annotations.
- Does the custom focus ring have a minimum contrast of 3:1?
- It’s OK to change the focus ring based on the interactive elements’ background. One color may not meet contrast requirements in all scenarios.
- Do both the hover state and focus state of interactive elements match?
- This is preferred but not required. Ensure examples are supplied so developers know what to build.
- Is the focus order logical based on the page’s content?
- For example, it’s perfectly acceptable to make the cookie acceptance notice the second focusable element on a page even if it’s found at the bottom of the page, then go back to the top-level navigation. Just like sighted users, keyboard users need to be aware of that information as they open the page.
Timing
- For sessions less than 20 hours, is there a way for users to pause or extend the time limit?
- This is especially important for session expirations but consider assessments as well. Having this type of notification visible for a minimum of 2 minutes is preferred.
- For non-modal notifications, instead of a time limit, can the user dismiss the notification on their own?
- If a time limit is necessary, the notification must be displayed for at least 20 seconds.
- Instead of timing key inputs, can the design provide autosuggestions to the user (i.e., via a button)?
- Putting the users in control of the experience is always an excellent choice (e.g., pressing submit button to trigger a keyword search).
Confirmation and Other Messaging
- Is visual and semantic feedback provided for all important actions (i.e., a successful submission)?
- Provide feedback inline if possible as toast messages present their own accessibility challenges.
- Is the message easy to read and understand?
- A 7th grade reading level is the target. Check the free Hemingway writing app to do a quick check on the copy.
- Are instructions provided where needed?
- If possible, stay away from tooltips and provide instructions inline.
Color
- Is valuable information conveyed in a manner independent of color?
- You can use color in conjunction with other identifying factors such as shapes and gestures.
- Do all interactive non-text elements (such as buttons) have contrast ratio of at least 3:1?
- This includes input borders, links, and important icons.
- Does all text have a contrast ratio of at least 4.5:1?
- Text larger than 18 pt. needs to be at least 3:1.
- Does text and highlighting colors have a ratio that is at least 4.5:1?
- Text must maintain a color contrast of at least 4:5
Responsive Layout
- Have you considered how the design scales at 200% browser zoom level? What about at 400% browser zoom level?
- Magnifying screen content using browser controls will magnify everything including text. Make sure you specify how content should reflow and where tradeoff can be made.
- Is content responsive and scale properly in multiple views (usually desktop, tablet, and phone)?
- Is content responsive and scale properly in landscape and portrait orientations?
- Developers need responsive designs supplied to ensure proper reading order across views.
Dialogs
- For both non-modal and modal dialogs:
- Is there a button to open/trigger the dialog?
- Does the dialog begin with a heading (heading level 2 or lower)?
- Is there a close button for the dialog?
- When the dialog is closed, have you considered where the keyboard focus should go?
- This is usually the trigger button. If no trigger button, a focusable target should be specified.
- For modal dialogs:
- Is the page behind the dialog darkened to indicate interaction only with the dialog? This lets sighted users focus on the dialog.
- Is the keyboard focus trapped within the dialogs bounds? This will ensure people who are blind do not get lost while interacting with the dialog.
- For non-modal dialog:
- Is the tab order logical between the dialog and the page content behind the dialog?
Tabs
- Are tabs clearly defined with visual labels?
- Is the selected tab distinguishable from unselected tabs?
- Is the keyboard interaction indicated in the design?
- Arrow keys are used to move between tabs, and the Tab key is used to navigate into the tab’s associated panel.
Resources