iFrames should include a title element inside the parent tag.</p></li> <li><p>As a best practice, it is good to set the scrolling to "auto" or "yes" in the <iframe> tag settings. This allows people with low vision to be able to scroll into content within the <iframe> that they might not otherwise be able to see.</p></li> </ul> <h2> Focus order </h2> <ul> <li>The default focus order must be logical, intuitive, and match the visual order of a page.</li> </ul> <h2> Tabindex </h2> <ul> <li><p>An element that is normally focusable but is in an inactive state (e.g., a disabled input box or button) should be given a negative tabindex (tabindex="-1").</p></li> <li><p>Should add the focus back to the element when active or needed (can use JS or TS).</p></li> <li><p>Should avoid positive tabindex. Giving focus to non-interactive elements and disrupting the normal focus order may confuse and frustrate the users. Rarely do circumstances warrant adding a positive tabindex, such as tabindex=1 to a non-focusable element.</p></li> </ul> <h2> Skip links </h2> <ul> <li><p>A skip link must be included to help users bypass the navigation menu.</p></li> <li><p>Skip link should includes context about the link's purpose (e.g. "Skip to main content" ) and can use additional ARIA properties like aria-labelledby, aria-label.</p></li> <li><p>Skip link can be visible or visually hidden (based on design) until a user tabs to it.</p></li> </ul> <h2> Focus indicator </h2> <ul> <li>Make sure that focus indicator is not hidden beneath other components.</li> </ul> <h2> Browser default styling </h2> <ul> <li><p>Should not override the default browser focus styling (e.g. "outline: 0" or "outline: none").</p></li> <li><p>Custom focus styles are allowed.</p></li> </ul> <h2> JavaScript </h2> <h3> Trigger events </h3> <ul> <li>If a click event (e.g. onClick()) is applied to non-semantic elements (e.g. <div>) a keydown/keyup event must be added to detect the enter or space key press.</li> </ul> <h3> Page titles </h3> <ul> <li>Each page should have a title. It is acceptable to use the document.title property or a third-party package for this purpose</li> </ul> <h3> Dynamic content </h3> <div><table> <tr> <th>Possible misuse</th> <th>Correct use</th> </tr> <tr> <td>Render large chunks of non-semantic HTML</td> <td>Render smaller pieces of semantic HTML</td> </tr> <tr> <td>Not allowing time for dynamic content to be recognized by assistive technology</td> <td>Using a setTimeout() time delay to allow users to hear the full message</td> </tr> <tr> <td>Applying style attributes for onFocus() dynamically</td> <td>Use :focus for the related elements in your CSS stylesheet</td> </tr> <tr> <td>Applying inline styles may cause user stylesheets to not be read properly</td> <td>Keep your styles in CSS files to keep the consistency of the theme</td> </tr> <tr> <td>Creating very large JavaScript files that slow down overall site performance</td> <td>Use less JavaScript; prefer CSS for animations or sticky navigation for better performance</td> </tr> </table></div> <h3> Component level focus management </h3> <ul> <li>When the user opens a modal, they should be able to navigate between the actionable elements within it (e.g., cancel and submit buttons) using the Tab key. However, the focus must remain confined to the modal, preventing the user from accessing elements outside of it unless they explicitly close the modal. This ensures that the focus is trapped within the modal.</li> </ul> <h3> Page level focus management </h3> <ul> <li><p>Focus must also be maintained when a user navigates from page-to-page.</p></li> <li><p>Anytime a user clicks on a link to go to another page within the application, the focus is either kept in the same place or potentially placed somewhere else entirely.</p></li> <li><p>Here are the suggested focus placements when the user navigates from one page to another.</p></li> <li><p>Place focus on the main container with an aria-live announcement.</p></li> <li><p>Put the focus back on a link to skip to the main content.</p></li> <li><p>Move the focus to the top-level heading of the new page.</p></li> </ul> <h3> Component level state management </h3> <ul> <li><p>Component state should be managed using ARIA attributes (e.g. use an aria-expanded attribute to tell the user whether a drop-down menu or list is expanded or collapsed.).</p></li> <li><p>It's important to be selective when applying ARIA attributes. Think through the user flow to understand what critical information should be conveyed to the user.</p></li> </ul> <h3> Page level state management </h3> <ul> <li><p>If content is added or updated dynamically on the page (e.g., an alert message or text change), it should be announced to the user.</p></li> <li> <p>Better to use </p> <ul> <li>React: react-aria-live or react-a11y-announcer </li> <li>Angular: LiveAnnouncer </li> <li>Vue: vue-a11y-utils </li> </ul> </li> </ul> <p>(continue...)</p>
