What do we mean when we talk about best practices?
Merriam-Webster defines best practices as "a procedure that has been shown by research and experience to produce optimal results, and that is established or proposed as a standard suitable for widespread adoption."
So, what does best practice mean when it comes to people with disabilities and creating an accessible digital environment? The United Nations defines best practices in disability as "Best practices are understood here as being well-documented initiatives that provide evidence of success in contributing to the removal and/or reduction of barriers to the inclusion of persons with disabilities in all aspects of life, and which can be considered for replication, scaling up and further study."
DubBot tests against 29 best practices for accessibility, everything from accesskeys to skip-link. This list of rules comes from the trusted accessibility testing library, axe-core, by Deque. Deque defines these best practice rules like this: "Rules that do not necessarily conform to Web Content Accessibility Guidelines (WCAG) success criterion but are industry accepted practices that improve the user experience." You’ll find the complete list here.
According to DubBot, the best practices ID’d most frequently as requiring remediation are:
- Ensures the order of headings is semantically correct
- Ensures the document has a main landmark
- Ensures headings have discernible text
Let’s take a closer look at each one to help give you a better idea of how best practices support the Web Content Accessibility Guidelines (WCAG).
Ensures the order of headings is semantically correct
This simply means making sure your headings are in hierarchical order. For example, an H1 should be followed by an H2 which is followed by a H3, and so on. It's always best practice to start the main content with an H1 tag, this is usually the title or subject of the content.
Ensures the document has a main landmark
A main landmark identifies the primary content of the page. Make sure you have a navigation element to that landmark. Use both HTML 5 and ARIA landmarks i.e. HTML5 elements are like header, nav, main, and footer. ARIA counterparts are role="banner", role="navigation", role="main", and role="contentinfo", in that order. Note that landmarks are useful only for screen reader users. They should not be used as a replacement for skip-links.
Ensures headings have discernible text
Simply put, always make sure all header tags have content. No empty tags (<H1></H1>) or hidden tags (display: none). To help ensure your heading content is effective, have someone read just the headings then ask them to describe the general idea(s) of the page. If they can, chances are you're in good shape.
When it comes to designing with accessibility in mind, adhering to best practices can be a powerful tool in meeting the requirements of WCAG and providing an exceptional experience for all your uses.
