Web accessibility best practices are practical improvements that make your website easier to navigate and use across devices and assistive technologies.
These are not official WCAG requirements. They are thoughtful design, code, and content decisions that go beyond the rulebook. When applied well, they create a smoother experience for everyone, not just people with disabilities.
In this guide, we’ll walk through practical web accessibility best practices you can apply right away. We’ll also show you how to check if your web pages are missing them.
#1. Use Unique Keyboard Shortcuts for Interactive Elements
Why: When multiple elements share the same access key, users may activate the wrong feature. This makes keyboard navigation unreliable and frustrating.
Problem scenario: On an eCommerce site, Alt+P opens both the Profile page and the Product filter panel. A keyboard user trying to access their profile is taken to the filter instead and must start again.
What is an accesskey?
An accesskey is an HTML attribute that assigns a keyboard shortcut to a specific element, such as a link or button. When users press a key combination like Alt + a letter, the browser moves focus to or activates that element.
#2. Avoid Repeating Visible Text in Image Alt Text
Why: Repeating nearby visible text in alt attributes creates unnecessary duplication. Screen reader users must listen to the same words twice.
Problem scenario: A “Download Report” link includes an icon with alt text “Download Report.” A screen reader announces “Download Report, Download Report,” which adds noise.
#3. Wrap All Page Content within Landmarks
Why: Landmarks help users move between major sections quickly. Content outside landmarks becomes harder to navigate.
Problem scenario: A long resources page contains dozens of sections but no defined navigation, main, or footer regions.
What are landmarks?
Landmarks are structural sections of a webpage that help users navigate quickly. They include areas like the header, main content, navigation, sidebar, and footer, and allow assistive technology users to jump directly to these sections.
#4. Ensure Landmark Regions Are Unique
Why: Landmarks should have clear and distinct purposes. Duplicate landmarks reduce clarity.
Problem scenario: Two navigation menus are both labeled simply “Navigation” without distinction between primary and footer navigation.
#5. Define the Website Header as a Clear, Separate Region
Why: The site header should be clearly identified as the main header of the page. If it is buried inside other sections, navigation tools may not recognize it properly.
Problem scenario: The logo and primary navigation are placed inside a promotional hero section instead of being defined as the site header. Screen reader users cannot easily jump to the main navigation area.
#6. Avoid Multiple Header Banner Regions
Why: There should be only one site-wide header region. Multiple banners can confuse structural navigation.
Problem scenario: A promotional strip and the main navigation header are both marked as banner regions. Screen reader users hear two banners and cannot tell which is the actual site header.
#7. Define Sidebar Content as a Separate Region
Why: Sidebars should be clearly separated from the main article content. If mixed together, it becomes harder to understand the page structure.
Problem scenario: A blog’s “Related Articles” section is placed inside the article container instead of being defined as a separate sidebar region. Users navigating by regions cannot tell where the article ends and where the sidebar begins.
#8. Define the Footer as a Clear Page Region
Why: The footer usually contains site-wide information like legal links and contact details. It should be clearly marked as the page footer, not embedded inside other sections.
Problem scenario: The copyright notice and privacy policy links are placed inside the last blog paragraph container. Navigation tools do not clearly identify this area as the site footer.
#9. Avoid Multiple Footer Regions
Why: Only one primary footer should represent global site information. Multiple footers can create confusion.
Problem scenario: A landing page has a global footer and a separate marketing footer, both defined as contentinfo. Users hear two footers with similar content.
#10. Ensure Every Page Includes a Main Region
Why: Without a main region, skip links and landmark shortcuts have nowhere meaningful to land. Users cannot quickly bypass navigation menus.
Problem scenario: A homepage includes a “Skip to content” link, but there is no defined main region. Activating the link does nothing, and users must tab through every menu item.
What is the main region?
The main region is the part of a webpage that contains the primary content of that page. It is usually defined using the <main> element and allows users to skip past navigation, headers, and sidebars to reach the core content quickly.
#11. Clearly Define the Main Region as the Skip Target
Why: The main region should clearly represent the primary content users want to reach. If it is wrapped inside unrelated sections, skip links and landmark navigation may not take users to the correct place.
Problem scenario: On a product page, the skip link moves focus to a hero banner instead of the product description because the main region is incorrectly structured. Users must still tab past promotional content to reach the actual details.
#12. Avoid Defining More than One Main Region
Why: There should be only one clear destination for skip links and landmark navigation. Multiple main regions create confusion about where the primary content begins.
Problem scenario: A services page defines one main region for service details and another for testimonials. Screen readers list two main regions, and users are unsure which one contains the core content.
#13. Include a Level-One Heading on Every Page
Why: The H1 defines the main topic of the page. Without it, the page structure feels incomplete.
Problem scenario: A blog article page displays the title visually but does not use an H1 element. Screen reader users cannot identify the primary heading.
#14. Do Not Mix Presentational Roles with Interactive Features
Why: Elements marked as decorative should not be interactive. Mixing roles creates confusion for assistive technology.
Problem scenario: A clickable icon is marked role=”presentation” but also receives keyboard focus. It appears interactive but is announced as decorative.
What is a presentational role?
A presentational role like role="presentation" tells screen readers to ignore an element completely. It is used for decorative items, such as layout divs or visual icons, that do not provide information or actions.
#15. Use the scope Attribute Correctly in Tables
Why: The scope attribute defines relationships between headers and data cells. Incorrect use breaks those associations.
Problem scenario: In a pricing comparison table, column headers use incorrect scope values, causing prices to be associated with the wrong plan names.
#16. Avoid Using Positive tabindex Values
Why: Positive tabindex values override natural tab order. This disrupts logical keyboard navigation.
Problem scenario: On a checkout page, the “Apply Coupon” button has tabindex=”3,” causing focus to jump ahead of billing fields unexpectedly.
What is tabindex?
tabindex is an HTML attribute that controls the order in which elements receive keyboard focus when users press the Tab key. A value of 0 follows the natural page order, while positive values like 1 or 2 force a custom order that can disrupt normal navigation.
How to Check If Web Accessibility Best Practices Are Applied on Your Website
You can check whether web accessibility best practices are properly implemented on your website using WebYes. The automated web accessibility testing tool scans your website’s code and identifies these issues across all your pages.
WebYes checks the 16 best practices listed earlier, along with 12 additional structural and technical checks. Together, these form a set of 28 best practice checks.
Web accessibility best practice checks covered by WebYes
- Every accesskey value should be unique.
- The
roleattribute should be appropriate for the element it is applied to. - ARIA dialog and alertdialog elements should have an accessible name.
role="text"should only be used on elements with no focusable children.- ARIA treeitem elements should have an accessible name.
- Headings should contain clear, visible text.
- Table header cells should contain meaningful text.
- iframe and frame content should be properly tested.
- Heading levels should follow a logical order.
- Image alternative text should not repeat nearby visible text.
- Form fields should have visible labels.
- The banner landmark should be correctly structured.
- The complementary landmark should be clearly defined.
- The contentinfo landmark should be properly structured.
- The main landmark should be clearly defined.
- Pages should not contain duplicate banner landmarks.
- Pages should not contain duplicate contentinfo landmarks.
- Pages should not contain duplicate main landmarks.
- Every page should include one main landmark.
- Landmark regions should be unique and clearly identified.
- The viewport meta tag should allow sufficient zoom and scaling.
- Each page should include a level-one heading.
- Presentational roles should not conflict with interactive behavior.
- All page content should be contained within landmark regions.
- The scope attribute should be used correctly in tables.
- Skip links should move focus to a valid target.
- Tabindex values should not be greater than zero.
- Table captions should not duplicate other table descriptions.
Manually checking all of this across dozens or hundreds of pages is time-consuming. WebYes automates the process, highlights exactly where issues exist, and helps you fix them.
Sign up for free and run your first scan today. See where your website stands and start improving accessibility with clear, actionable insights.
AUTHOR
Melwyn holds a Bachelor's degree in Computer Science and has been writing professionally for over 4 years. He has a strong background in SEO and is certified in web accessibility from the World Wide Web Consortium (W3C). When he's not writing about website optimisation, you can find him enjoying a game of FIFA or exploring the open world of GTA.
Melwyn Joseph 
