Skip to main content

Accessibility Best Practices

Ensuring accessibility on your website is crucial for providing an inclusive experience for all users, including those with disabilities. Here are some best practices to follow when using OpenKeyNav to enhance your website's accessibility.

Ensure All Elements Are Accessible​

Semantic HTML​

Use semantic HTML elements to structure your content. This helps screen readers and other assistive technologies understand the structure and purpose of your content.

  • Use <header>, <nav>, <main>, <section>, <article>, <aside>, and <footer> to define different sections of your page.
  • Use heading elements (<h1>, <h2>, etc.) to indicate the hierarchy of your content.
  • Use <button> for buttons, and <a href="path/to/redirect"> for links.

ARIA Roles and Attributes​

Use ARIA (Accessible Rich Internet Applications) roles and attributes to enhance the accessibility of your web content.

  • Use roles like button, navigation, main, and complementary to define the roles of elements.
  • Use ARIA attributes like aria-label, aria-labelledby, aria-describedby, aria-hidden, and aria-live to provide additional context and information.

Keyboard Navigation​

Ensure all interactive elements are keyboard accessible.

Focus Management​

  • Ensure that all interactive elements (buttons, links, form controls) can receive keyboard focus.
  • Use the tabindex attribute to manage focus order. Avoid using tabindex values greater than 0, as it can lead to a confusing navigation order.
<button tabindex="0">Accessible Button</button>
<a href="#" tabindex="0">Accessible Link</a>
<input type="text" tabindex="0">Accessible Input</input>

Provide skip links to allow users to bypass repetitive content and navigate directly to the main content.

<a href="#mainContent" class="skip-link">Skip to main content</a>
<main id="mainContent">Main Content</main>

Use OpenKeyNav Effectively​

Default and Custom Configurations​

Leverage OpenKeyNav's default configurations to enhance accessibility, and customize configurations to meet specific needs.

const openKeyNav = new OpenKeyNav();

const config = {
    keys: {
        click: 'c',  // Custom key for click mode
        scroll: 'w', // Custom key for scroll mode
    },
    spot: {
        fontColor: 'white',
        backgroundColor: '#000',
        insetColor: '#ff0000',
        fontSize: '14px',
        arrowSize_px: 6
    },
    focus: {
        outlineColor: '#0088cc',  // Customize the outline color
        outlineStyle: 'dashed'    // Customize the outline style
    },
    modesConfig: {
        move: {
            config: [
                {
                    fromContainer: ".containerOfMoveables",
                    toElements: ".dropZoneTargetType1, .dropZoneTargetType2",
                    callback: (elMoveable, elDropZoneTarget) => {
                        // Your callback logic
                    }
                }
            ]
        }
    },
    debug: {
        keyboardAccessible: false // Disable debug mode for production
    }
};

openKeyNav.init(config);

Testing and Debugging​

Use OpenKeyNav's debug mode to identify and fix accessibility issues during development.

const openKeyNav = new OpenKeyNav();

const config = {
    debug: {
        keyboardAccessible: true // Enable debug mode // on by default
    }
};

openKeyNav.init(config);

Disable debug mode in production to provide a clean user experience.

const openKeyNav = new OpenKeyNav();

const config = {
    debug: {
        keyboardAccessible: false // Disable debug mode for production
    }
};

openKeyNav.init(config);

Avoid Common Accessibility Pitfalls​

Non-Accessible Components​

Avoid using components that are not accessible by default. Ensure all custom components are fully accessible.

Color Contrast​

Ensure sufficient color contrast between text and background colors. Use tools like the WebAIM Contrast Checker to verify contrast ratios.

Alt Text for Images​

Provide descriptive alt text for all images. If an image is decorative, use an empty alt attribute (alt="").

<img src="image.jpg" alt="Description of the image">
<img src="decorative.jpg" alt="">

Continuous Improvement​

User Feedback​

Encourage user feedback to identify and address accessibility issues. Regularly review and update your website to maintain accessibility standards.

Stay Updated​

Stay informed about the latest accessibility guidelines and best practices. Refer to resources like the Web Content Accessibility Guidelines (WCAG) for comprehensive guidance.

By following these best practices and effectively using OpenKeyNav, you can ensure that your website is accessible to all users, providing an inclusive and user-friendly experience.