Hi i am accessibility consultant and i have prepared the accessibility designer check list. You need to prepare similar accessibility developer checklist. I am providing the design check list for your reference

CLA Accessibility – Design Checklist 

 

Importance of Accessibility in Design 

Design is essential in digital accessibility for several key reasons: 

Inclusivity: Digital accessibility ensures that people with disabilities can use websites, apps, and other digital products effectively. This includes individuals with visual, auditory, motor, and cognitive impairments. This promotes equal opportunities and prevents exclusion. 

Legal Compliance: Many regions have laws requiring digital accessibility, such as the Americans with Disabilities Act (ADA) in the U.S. and the Web Content Accessibility Guidelines (WCAG) globally. Non-compliance can lead to legal consequences. 

Enhanced User Experience: Accessible design often improves the overall user experience. Features like keyboard navigation, screen reader compatibility, and clear, readable text benefit all users, not just those with disabilities. 

Market Reach: By making digital products accessible, businesses can reach a broader audience, including the significant portion of the population with disabilities. This can lead to increased customer satisfaction and loyalty. 

Innovation: Designing for accessibility can drive innovation. Solutions created to meet accessibility needs often lead to improvements that benefit everyone. For example, voice control and text-to-speech features were initially developed for accessibility but are now widely used by all. 

Incorporating accessibility into digital design is not just a legal or ethical obligation; it’s a smart strategy that enhances the user experience for everyone.  

 

Designer Checklist 

Content Headings 

Logical Content Chunks: Break up content into logical chunks and precede each area of content with a descriptive heading. This helps users understand and navigate the content more easily. 

Consider Semantic HTML: Use proper heading tags (<h1> to <h6>) to define the structure of your content. This helps screen readers and other assistive technologies understand the hierarchy and organization of the content. 

One <h1> per Page: Ensure there is only one <h1> heading per page, which should describe the main topic or purpose of the page. Subsequent headings should follow a logical order (e.g., <h2> for main sections, <h3> for subsections). 

Descriptive Headings: Write clear and descriptive headings that accurately reflect the content that follows. This helps users quickly understand the context and navigate the page more efficiently. 

Logical and Hierarchical Structure: Ensure a logical heading structure by using headings in a hierarchical order, both visually and programmatically. Avoid skipping heading levels (e.g., jumping from <h2> to <h4>). 

Consistent Styling: Use consistent styling for headings throughout your design. This helps users recognize and understand the structure of the content more easily. 

Readable Text: Ensure that headings are easy to read by using legible fonts and sufficient contrast between the text and background. 

Visual Hierarchy: Create a visual hierarchy with your headings by using different font sizes, weights, or colors. This helps users visually distinguish between different levels of headings. 

Accessible Navigation: Ensure that headings can be used for in-page navigation. This is particularly useful for screen reader users who rely on headings to jump to different sections of the content. 

Note: Ensure all text that looks and acts like a heading marked as a heading. Otherwise try to use normal texts. 

Write Clear and Concise Text 

Avoid jargon and complex language. Use simple, straightforward language that is easy to understand. 

Lists 

 

Clear and Concise Content: Keep list items short and to the point. This helps all users, including those using screen readers, to understand the content quickly. 

Accessible Labels: Ensure that list items have accessible labels or provide a brief description before the list that explains its purpose. This helps users understand the context and importance of the list items. 

Consistent Styling: Use consistent styling for lists throughout your design to help users recognize and understand list structures easily. 

Visual Indicators: Provide visual indicators, such as bullet points (<ul>) or numbers (<ol>), to distinguish list items. This helps users with cognitive disabilities to follow the list more easily. 

Spacing and Alignment: Ensure there is adequate spacing between list items to prevent them from appearing cluttered. Proper alignment also helps in maintaining readability. 

Avoid Complex Nesting: Try to avoid deeply nested lists as they can be difficult to navigate and understand. If necessary, use headings or other structural elements to break down complex information. 

Links 

Avoid using ambiguous link names, such as "Click Here" or "More". 

Avoid delimiter (…) 

Provide Descriptive Links: Use descriptive link text that clearly indicates the destination or purpose of the link. 

 

Visual appearance of Links: 

Ensure links are underlined. This will ensure that link texts are distinguishable from non-link texts by more than just color. 

Provide high contrast (3:1 contrast ratio) between link and non-linked text. 

Color 

Provide designs in which color or other sensory characteristics (shape, size, visual location, etc.) are not used as the only means of conveying information, such as using only red coloring to denote required fields. 

Ensure all interactive elements are distinguishable by more than just color. 

Test your design in grayscale to check for sufficient contrast. 

Use Sufficient Color Contrast 

Text and Background: The contrast ratio between text and its background should be at least 4.5:1. This ensures that the text is readable for people with moderately low visual acuity and color deficiencies. Exception for large text: For larger text, which is defined as at least 18pt or 14pt bold, the contrast ratio should be at least 3:1. This lower ratio is acceptable because larger text is generally easier to read. 

Graphical Objects and User Interface Components: The contrast ratio for graphical objects and user interface components should also be at least 3:1. This ensures that these elements are distinguishable from their background. 

Eg: Focus indicator, button, icons, borders 

Focus 

Visible Focus Indicators: Ensure that focus indicators are clearly visible and stand out from the rest of the content. This helps users identify the currently focused element. 

Consistent Focus Styles: Use consistent focus styles across your design to help users recognize and understand focus indicators easily. 

Sufficient Contrast: Ensure that the focus indicator has sufficient contrast against the background and adjacent elements. This makes it easier to see for users with visual impairments. 

Avoid Removing Default Focus Styles: Do not remove the browser’s default focus styles unless you replace them with custom styles that are equally or more visible. 

Focus Order: Ensure a logical and intuitive focus order that follows the visual flow of the page. This helps users navigate the content in a predictable manner. 

Keyboard Accessibility: Make sure all interactive elements (buttons, links, form fields) have clear and visible focus indicators when non-mouse users tab or arrow through them. This ensures that users can easily see which element is currently focused.  

Focus Management: Manage focus appropriately, especially after dynamic content updates or modal dialogs. Ensure that the visible focus outline (optionally with a color change) moves to the new content and returns to the original element when appropriate. 

Tables 

Accessibility guidelines recommend using tables for presenting tabular data rather than using <div> elements. 

Descriptive Headers: Make sure all table headers are descriptive and provide clear context for the data they represent. This helps users understand the content and relationships within the table. 

Caption and Summary: Include a <caption> element to provide a brief description of the table’s content. Additionally, use a <summary> element or a visually hidden description to offer more detailed information about the table’s structure and purpose. 

Avoid Merging Cells: Minimize the use of merged cells. While sometimes necessary, they can complicate the table’s structure and make it harder for screen readers to interpret. 

Responsive Design: Ensure tables are responsive and can be easily viewed on different devices and screen sizes. Consider using techniques like horizontal scrolling or breaking large tables into smaller, more manageable sections on smaller screens. 

Alternative Presentations: Where possible, provide alternative ways to present the data, such as charts, graphs, or summaries. This can help users who may find tables challenging to navigate. 

Simplify Table Layout 

Ensure the use of simpler table structures. If the data can be presented in a more straightforward way, such as using lists or breaking the table into smaller, more manageable sections, it will be easier for all users to understand. 

 

Keep in mind: 

Nested tables can be difficult for screen readers to interpret. Users may struggle to understand the relationships between data points, leading to confusion and frustration. 

Navigating through complex tables can be cumbersome for users relying on keyboard navigation. It can be hard to keep track of the table’s structure and content. 

Page Layout 

Avoid complex page layouts (e.g. Three or more columns) 

Avoid using tables for layout purposes. Use CSS for layout and styling instead. 

Consistency 

Consistency must be maintained across all areas of design. 

 

Consistent Labels and Controls: Use labels, controls, status indicators, and other UI elements consistently across all pages. This helps users recognize and understand their functions more easily. 

Uniform Navigation: Position navigation elements in the same location on all pages. Keep the order of components within navigational menus consistent to help users navigate the site more efficiently. 

Consistent Visual Design: Maintain a consistent visual design, including heading styles, font choices, icons, colors, and the appearance of controls, buttons, and links. This reduces cognitive load and helps users learn and remember the interface. 

Predictable Layout: Ensure that the layout is consistent across blocks of content. This includes the position of interactive elements and navigational controls, making it easier for users to find what they need. 

Uniform Feedback Mechanisms: Provide consistent feedback mechanisms for user actions. For example, use the same style for error messages, success notifications, and other status indicators across the site. 

Standardized Focus Indicators: Use the same focus indicators for all interactive elements. This helps users who rely on keyboard navigation to understand which element is currently focused. 

Consistent Use of Icons and Elements: Ensure that icons and elements with the same function look and behave the same way throughout the site. Avoid reusing icons for different purposes, as this can confuse users. 

Template and Theme Usage: Utilize templates or themes for sites running on Content Management Systems (CMS) like WordPress, Joomla, or Drupal. This ensures a consistent look and feel across all pages. 

Consistent Content Structure: Organize content in a consistent manner, using the same structure for headings, text blocks, images, and bullet points. This helps users predict where to find information. 

Clear Page Titles: Consistent page titles help users understand the context and navigate more effectively. 

Images 

Informative Images: Ensure the alternative text for informative images provides the same information as the image. 

Actionable Images: Ensure the alternative text for actionable images, such as image links, buttons, or image map areas, clearly identifies the link destination or button purpose. 

Complex Images: Fully explain complex images or infographics in the page content and provide a short alternative text description. 

Decorative Images: Identify decorative images as not requiring alternative text. 

Text in Images: Use plain text instead of text embedded in images, with exceptions for text in logos and decorative text images. 

Non-recommended Media 

Avoid Flashing or Strobing Content: Do not use media with flashing or strobing effects, as these can trigger seizures in individuals with photosensitive epilepsy. 

Provide Alternatives: Offer alternative content formats that do not include potentially harmful elements. For example, provide a text description or a static image instead of a flashing video. 

Clear Warnings: If you must include content that could be problematic, provide clear warnings beforehand. Inform users about the nature of the content and allow them to opt-out or skip it. 

Control Over Playback: Ensure users have control over media playback. Allow them to pause, stop, or skip content that may be distressing or harmful. 

Avoid Auto-Playing Media: Do not set media to auto-play, especially if it includes flashing or strobing effects. Give users the choice to play the content. 

Interactive elements 

Identifiability: Ensure all interactive elements (buttons, links, etc.) are easily identifiable from non-interactive elements. Use consistent styling, such as color, shape, or icons, to distinguish them. 

Visible Focus Indicators: Provide visible focus indicators for keyboard navigation. Ensure that the focus outline is clear and stands out from the background, making it easy for users to see which element is currently focused. 

Touch Targets: Make sure touch targets are large enough to be easily tapped. Aim for a minimum size of 44x44 pixels to accommodate users with different dexterity levels. 

Hover and Active States: Design distinct hover and active states for interactive elements. This provides visual feedback to users, indicating that the element is interactive and responding to their actions. 

Consistent Placement: Place interactive elements in consistent locations throughout your design. This helps users predict where to find buttons, links, and other controls. 

Forms & Labels 

Visible Labels: Ensure all form fields have labels that are always visible. 

Descriptive Labels: Make sure all form labels are adequately descriptive and instructive, providing all the information users need to fill out the form. 

Proximity of Labels and Instructions: Position all form labels and instructions immediately adjacent to their form elements so users, including those using screen magnification, can easily connect the form element with its label and instructions. 

Control Proximity: Place all controls in close proximity to the content they are controlling. For example, ensure Edit and Delete buttons are next to the content they modify. 

Informative Error Messages: Provide error messages that give enough information for users to correct their errors. 

Autofill Compatibility: Write forms so they can be used with Autofill. 

Dynamic Content and Interactions 

Dynamic Content Awareness: Ensure users are made aware of content that is dynamically inserted on a page. New content should appear immediately after the element that caused it to appear, following the logical reading order or tab order of the page. 

Consistent Interaction Patterns: Ensure all keyboard-only and touch screen interactions follow expected patterns so users know how to interact with all widgets on the page. 

Feedback for Interactions: Design success and failure feedback into all interactions. When users activate scripted functionality (e.g., buttons, form submissions), they must receive clear feedback indicating whether the action was successful or not. This can be through success/error messages or the obvious activation of a feature (e.g., a video starts playing after the user activates the “play” button). Feedback must be available to sighted users. 

Custom Widgets 

Use Standard HTML Widgets: Whenever possible, use standard HTML widgets (links, buttons, form elements, controls, etc.) as they have built-in accessibility capabilities. 

Custom Widget Accessibility: If custom widgets are necessary, ensure they are created with full keyboard support and comply with WAI-ARIA authoring practices. 

Touch Targets and Gestures 

 

Touch Target Size: Ensure the touch target size of main links and buttons is large enough and spaced far enough apart to be easily activated with a finger. 

Alternative Activation Methods: Provide alternative ways to activate any custom swipe actions or gestures. Note that when a screen reader is activated on a touch device, it overrides all custom swipe actions and gestures. 

Error / Warnings / Status Messages 

Provide instructions and error messages that are easy to understand across pages and components wherever applicable. 

Zoom and Magnification (Resize and reflow) 

Ensure users with low vision can magnify or zoom in on the content in the browser on any device, including desktop and mobile. 

Optimize the design for all zoom levels.  

Simplify the design as much as possible to eliminate horizontal scrolling. 

Text spacing 

Ensure that the line height (line spacing) is at least 1.5 times the font size to improve readability. 

Use a minimum letter spacing of 0.12em to enhance clarity and avoid crowding of letters, making the text easier to read. 

Allow at least 0.16em of word spacing to prevent words from appearing too sticky or congested, facilitating easier reading. 

Ensure text can be resized to at least 200% without loss of content or functionality, providing flexibility for users with low vision. 

Maintain consistent text formatting across similar elements to help users recognize patterns and understand the structure. 

Allow users the ability to adjust line height, letter spacing, and word spacing through controls or style settings to cater to individual preferences. 

Check Readability 

Ensure the reading and focus order of the content is logical and consistent for both visual and programmatic access. 

Ensure your content is readable by a wide audience, including those with cognitive disabilities. 

Responsive Design 

Ensure your design works well on various screen sizes and devices. 

Orientation Flexibility: Ensure users interact with the website in their preferred orientation (landscape or portrait) on their hand-held devices. 

Include Captions and Transcripts 

Provide captions for videos and transcripts for audio content to make them accessible to users with hearing impairments. 

Carousal 

Ensure that carousel controls (next, previous buttons) are easily navigable using keyboard (Tab key) and have clear focus states for users relying on keyboards. 

Provide users with the ability to pause, stop, or hide the carousel, especially for content that automatically rotates, to accommodate users who may need more time to read. 

Each slide in the carousel should have meaningful alternative text or descriptions for non-text content to ensure screen reader users understand what each slide contains. 

Ensure that transitions between slides are not too fast (ideally at least 1 second) to provide users ample time to read the content. 

Ensure that focus moves appropriately when the carousel slides change, allowing users to track their position and understand how many slides are in the carousel. 

For complex carousels, consider offering a linear list view as an alternative to allow users to navigate through content without the automatic rotation. 

If auto-advancing is used, provide a clear indication of how long each slide will remain and offer the ability for users to control this feature.