- Website Design
- Website Navigation
- Website Content
- Forms and Interactive Elements
- Keyboard Accessibility
- Content Management
- Useful Resources
Use simple and clear fonts.
- Select fonts that have a clean and straightforward design.
- Ensure that the chosen fonts are widely supported across different operating systems and devices.
- Test the legibility of the fonts in different sizes and on various screens.
Use high contrast colors for important stuff.
- Choose color combinations that provide a clear contrast between foreground (text) and background.
- Use WCAG-approved color contrast tools to verify the compliance of color combinations.
- Pay attention to the contrast of interactive elements, such as buttons and links.
Make sure your website works when zoomed in.
- Test the website's functionality and layout at different levels of zoom.
- Verify that all content remains accessible and readable when zoomed in.
- Ensure that interactive elements maintain their usability and visibility.
Keep website design simple, put important things on the homepage.
- Simplify the website's layout and navigation to enhance user experience.
- Emphasize important information and actions on the homepage for easy access.
- Use clear headings, sections, and visual cues to guide users through the website.
Make sure your website looks good on phones and tablets.
- Implement responsive design techniques to adapt the website's layout to different screen sizes.
- Test the website on various mobile devices and tablets to ensure proper rendering.
- Optimize images, fonts, and other assets to enhance performance on mobile devices.
Make sure your website works even without CSS.
- Test the website's functionality with CSS disabled to ensure content remains accessible.
- Ensure that essential information and functionality are not reliant on CSS alone.
Avoid tiny fonts.
- Use font sizes that are comfortable to read, especially on smaller screens.
- Pay attention to the legibility of text on high-resolution displays.
- Provide options for users to adjust the text size if necessary.
Don't use italics. They can be hard to read.
- Instead of italics, use bold or alternative typography styles to emphasize text.
- Ensure that emphasized text remains distinguishable from regular text.
Design with different devices in mind.
- Consider the diversity of devices and screen sizes that users may use to access the website.
- Optimize the user experience across a range of devices, including smartphones, tablets, and desktops.
- Test the website's performance and functionality on multiple devices and browsers.
Limit the use of capital letters. They can be hard to read.
- Avoid excessive use of uppercase text, especially for long passages.
- Use capital letters sparingly and for appropriate emphasis.
- Ensure that capitalized text remains visually distinct from regular text.
Include a way for users to change the text size on your website.
- Provide options for users to adjust the text size using controls or settings.
- Implement a font size toggle or a zoom feature that users can easily access.
- Ensure that the website remains usable and visually appealing at different text sizes.
Link logos to the homepage for easy navigation.
- Ensure that clicking on the logo takes users back to the homepage.
- Provide a visual indication that the logo is a clickable link.
Include a "back to top" button on long pages.
- Add a button or link that allows users to quickly scroll back to the top of the page.
- Ensure the button is easily accessible and visible.
Use landmarks to show different sections.
- Implement HTML landmarks such as
<header>,<nav>,<main>,<footer>, etc., to provide structural information about different sections of the page. - Use ARIA landmarks for older browsers or when more specific roles are needed.
Use breadcrumb navigation to show location.
- Include a breadcrumb trail that displays the user's current location within the website's hierarchy.
- Ensure each breadcrumb item is clickable and provides contextual information.
Create navigation that makes sense and is easy to use.
- Organize the navigation in a logical and intuitive manner.
- Use clear and descriptive labels for navigation links.
- Ensure that the navigation is easily accessible from all pages.
Keep the structure of your URLs simple and easy to understand.
- Use descriptive and meaningful URLs that reflect the content and hierarchy of the website.
- Avoid using complex and cryptic URLs that are difficult for users to interpret.
Keep navigation simple and consistent.
- Streamline the navigation by reducing unnecessary elements and options.
- Maintain consistent navigation across all pages of the website.
- Provide clear and concise labels for navigation links.
Include a "skip to content" link.
- Add a skip navigation link at the beginning of the page that allows users to jump directly to the main content.
- Ensure the skip link is accessible by keyboard and screen readers.
Avoid unnecessary page refreshes.
- Utilize AJAX or other techniques to update content dynamically without requiring full page reloads.
- Minimize the use of auto-refreshing or auto-updating content.
Allow voice commands for navigation.
- Implement speech recognition technology to enable users to navigate the website using voice commands.
- Provide clear instructions and guidance for voice navigation.
Allow users to extend their session times.
- Provide options for users to extend or adjust session timeouts to accommodate different needs and browsing habits.
- Clearly communicate session timeout policies and provide warnings before sessions expire.
Avoid confusing carousels and sliders.
- Minimize the use of carousels or sliders for critical information or navigation.
- If used, ensure that they have clear navigation controls, pause on user interaction, and do not auto-scroll too quickly.
Use clear and easy to understand language.
- Write content in plain language that is easily understandable by a wide range of users.
- Avoid jargon, complex terminology, and unnecessary technical language.
- Consider the reading level and comprehension abilities of your target audience.
Highlight where the user is in interactive elements.
- Provide visual cues, such as highlighting or underlining, to indicate the current selection or active state of interactive elements like menus, buttons, and links.
- Ensure that the visual cues are perceivable and distinguishable, especially for users with visual impairments.
Avoid important info in images that screen readers can't see.
- Use alternative text (alt text) to provide a textual description of images.
- Ensure that the alt text conveys the relevant information contained in the image, especially if it's important for understanding the content.
Test your website with a screen reader for visually impaired users.
- Use a screen reader software to navigate and interact with your website.
- Identify any accessibility issues or barriers faced by users who rely on screen readers.
- Make necessary adjustments to improve the screen reader experience.
Clearly distinguish between visited and unvisited links.
- Use different colors or visual styles to indicate visited and unvisited links.
- Ensure that the distinction is perceivable and provides clear visual feedback to users.
Use visual cues to show where the user is.
- Incorporate visual indicators, such as highlighting, breadcrumbs, or navigation menus, to visually show the user's current location within the website.
- Ensure that the visual cues are noticeable and distinguishable.
Make sure screen readers announce updates.
- Use ARIA live regions or other techniques to notify screen reader users of dynamic updates, such as new content or changes to the page.
- Ensure that the updates are announced in a timely and accessible manner.
Use bulleted lists for easy scanning and understanding.
- Structure content using bulleted lists to improve readability and comprehension.
- Use appropriate markup for lists, such as
<ul>and<li>, to provide semantic meaning to screen readers.
Minimize the use of abbreviations and acronyms.
- Avoid excessive use of abbreviations and acronyms that may be unfamiliar to users.
- When using abbreviations, provide the expanded form on first use and provide a tooltip or additional context if necessary.
Avoid using images of text.
- Instead of using images containing text, use actual text that can be resized, styled, and read by assistive technologies.
- Use CSS styling for text effects rather than relying on images.
Make forms easy to understand with clear labels.
- Ensure form fields have clear and descriptive labels that provide context and instructions for users.
- All
<input>'s in a form are associated with a corresponding<label>element. - Use placeholder text as a supplementary aid, but do not rely on it as the sole means of instruction.
Use autocomplete in form fields when possible.
- Enable autocomplete functionality for form fields to assist users in filling out repetitive or known information.
- Utilize HTML autocomplete attributes to provide accurate suggestions based on the field's context.
Provide clear instructions for interactive elements.
- Include explicit instructions and guidance for users when interacting with form elements, dropdowns, checkboxes, and radio buttons.
- Ensure instructions are concise, easy to understand, and located near the corresponding interactive elements.
Use date pickers to avoid form errors.
- Implement date pickers or date selection controls to help users enter dates accurately.
- Provide clear formatting guidelines or use a date format that is intuitive to users.
Clearly identify and explain errors in forms.
- Highlight erroneous form fields with clear visual cues, such as color changes or error messages.
- Provide descriptive error messages that clearly explain the issue and suggest how to correct it.
Allow users to control time-sensitive content.
- Provide options for users to control or adjust time-sensitive content, such as automatically advancing carousels or time-limited interactions.
- Allow users to pause, stop, or extend the duration of time-sensitive content.
Include instructions for complex forms and interactions.
- For complex forms or interactions, provide step-by-step instructions or a tutorial to guide users through the process.
- Break down the process into manageable sections with clear instructions for each step.
Avoid auto-submitting forms when changes are made.
- Prevent forms from automatically submitting when changes are made to avoid unintended actions.
- Provide a clear and explicit submit button for users to manually trigger form submission.
Use clear controls for sliders and carousels.
- Ensure that sliders and carousels have clearly visible controls, such as arrows or navigation indicators, to allow users to navigate and control the content.
- Provide alternative methods of interaction for users who may have difficulty using sliders or carousels.
Obtain user consent before starting media or downloads.
- Prompt users for explicit consent before automatically playing media, initiating downloads, or performing actions that may have significant consequences.
- Provide clear and concise information about the media or download to help users make informed decisions.
Test your website on different browsers for accessibility.
- Verify that your website functions correctly and remains accessible on popular browsers, such as Chrome, Firefox, Safari, and Edge.
- Ensure compatibility with both desktop and mobile versions of these browsers.
Use deque labs axe accessibility linter to check for issues.
-
Utilize the deque labs axe accessibility linter tool to automatically scan your website for accessibility issues.
Test your website with users of different abilities.
- Conduct usability testing with users who have various abilities, including those with visual impairments, motor disabilities, or cognitive limitations.
- Gather feedback and insights to identify areas for improvement and optimize accessibility.
Test your website using Google Chrome Lighthouse report in private mode.
- Generate an accessibility report using the Google Chrome Lighthouse tool in private mode.
- Review the report to identify any accessibility issues and address them accordingly.
Include contact information for accessibility support.
- Provide contact information, such as an email address or phone number, for users to reach out with accessibility-related inquiries or concerns.
- Respond promptly and offer assistance to ensure a positive user experience.
Specify the website language using HTML lang attribute.
- Use the HTML lang attribute to explicitly declare the primary language of your website's content.
- This helps screen readers and translation tools accurately interpret and present the content to users.
Make sure PDFs on your website are accessible and tagged.
- Ensure that PDF documents hosted on your website are accessible and properly tagged.
- Apply appropriate headings, alt text for images, and other accessibility features to enhance the usability of PDF content.
Include an accessibility statement for guidance and reporting.
- Create an accessibility statement that communicates your commitment to accessibility and provides guidance to users.
- Include information on how users can report accessibility issues and how you will address those concerns.
Ensure your website works without JavaScript.
- Test your website's functionality with JavaScript disabled to ensure core content and features remain accessible and usable.
- Provide alternative methods or fallbacks for interactive elements that rely on JavaScript.
Use accessible component libraries.
- Utilize accessible component libraries or frameworks that have built-in accessibility features and follow WCAG guidelines.
- Ensure that any custom components or modifications maintain accessibility standards.
Ensure keyboard accessibility for all website parts.
- Test and verify that all interactive elements, including menus, buttons, links, and form fields, can be accessed and operated using only the keyboard.
- Ensure proper focus states and keyboard navigation order throughout the website.
Avoid tabindex values greater than 0.
- Avoid manually setting tabindex values greater than 0, as it can disrupt the natural tab order and cause confusion for keyboard users.
- Allow elements to follow the default tab order unless there is a specific reason to modify it.
Arrange tab order logically based on the layout.
- Set the tab order of interactive elements in a logical sequence that aligns with the visual layout of the page.
- Ensure that the focus moves in a predictable and intuitive manner when navigating using the keyboard.
Avoid trapping keyboard focus for free navigation.
- Ensure that users can easily navigate away from any focusable element using the keyboard without being trapped or unable to move to the next interactive element.
- Avoid design patterns that restrict keyboard navigation, such as modal dialogs that don't allow focus to move outside the modal.
Ensure keyboard accessibility for all functionality.
- Test and verify that all website functionality, including dropdown menus, expandable sections, sliders, and interactive widgets, can be accessed and operated using only the keyboard.
- Provide keyboard shortcuts or alternative keyboard-driven methods for complex interactions, if necessary.
Provide alternatives for touch and keyboard users.
- Ensure that touch-based interactions, such as swipe gestures or pinch-to-zoom, have alternative methods for keyboard users to achieve the same functionality.
- Implement keyboard shortcuts or accessible alternative controls for touch-specific actions.
Design large touch targets for easy touchscreen interaction.
- Increase the size of touch targets, such as buttons and links, to accommodate easy interaction on touchscreens.
- Ensure that touch targets have sufficient spacing to minimize accidental selections.
Increase touch target sizes for easier interaction.
- Enlarge the size of interactive elements to provide ample touch target areas, especially for users with motor disabilities or those using imprecise input devices.
- Consider the size of the user's finger or stylus when determining touch target sizes.
Provide options to stop moving content.
- Include options to pause or stop any automatically moving or updating content, such as carousels or scrolling marquees.
- Allow users to control the timing and movement of dynamic content to prevent distractions or difficulties in reading.
Use "select" instead of "click" in instructions.
- When providing instructions or guidance, use terms like "select" instead of "click" to accommodate keyboard and alternative input methods.
- Ensure that all instructions are inclusive and clear for users of different abilities.
Use clear labels for content.
- Ensure that all content elements, such as headings, buttons, and form fields, have clear and descriptive labels.
- Use appropriate HTML tags and attributes to associate labels with their respective content.
Organize content from top to bottom.
- Structure the content of each web page in a logical order from top to bottom, following a clear hierarchy.
- Use headings, subheadings, and paragraphs to organize and group related content.
Structure website with <header>, <main>, and <footer> elements.
- Use semantic HTML elements such as
<header>,<main>, and<footer>to clearly define the different sections of the website. - Ensure that the structure of the website reflects the visual layout and provides meaningful information to assistive technologies.
Replace <div> elements with semantic HTML elements.
- Replace generic
<div>elements with more specific semantic elements like<section>,<article>,<nav>, etc., to provide additional meaning and context to the content. - Use the appropriate HTML element based on the purpose and nature of the content.
Allow users to pause, stop, or hide moving content.
- Provide options for users to control or disable any automatically moving or updating content, such as carousels, auto-scrolling banners, or auto-play videos.
- Allow users to pause, stop, or hide such content to prevent distractions or difficulties for users with cognitive or visual impairments.
Provide grid and list views for content.
- Offer alternative views, such as grid and list views, for presenting content that benefits from different layouts.
- Allow users to switch between views based on their preferences or specific needs.
Accept various phone number formats.
- Accommodate different phone number formats by accepting and handling input in various common formats, including parentheses, dashes, or spaces.
- Normalize and validate phone number inputs to ensure accuracy and consistency.
Clearly explain loading feedback to users.
- Provide clear and understandable loading feedback to users when content or functionality is being loaded asynchronously.
- Use appropriate visual and textual cues to indicate the loading progress and inform users about the expected wait time.
Avoid using title attributes for important info.
- Avoid relying solely on the title attribute to convey important information, as it may not be accessible to all users or may not be announced by assistive technologies.
- Instead, use visible text or other accessible means to provide essential information to all users.
Offer alternative formats for resources.
- Provide alternative formats, such as downloadable PDFs, plain text versions, or accessible HTML versions, for resources like documents, guides, or manuals.
- Accommodate users who may have difficulties accessing or interacting with certain file formats.