Achieving a Accessibility in Google Page Speed Insights: A Guide to Making Your Website Inclusive

by | Aug 23, 2023

In the world of website development, ensuring that your site is accessible to everyone is not only a legal and ethical obligation but also a way to create a better user experience. One essential measure of accessibility is the Google Page Speed Insights score, which evaluates how well your site caters to users with disabilities. In this article, we will explore the key audits that contribute to achieving a perfect 100 score for accessibility on Google Page Speed Insights, breaking down each element to help you understand and implement them effectively.

Interactive Controls are Keyboard Focusable

To provide an inclusive experience, your website’s interactive elements should be navigable using keyboard controls alone. This ensures that users who rely on keyboard navigation due to motor disabilities can easily access and use your site’s functionalities.

Interactive Elements Indicate Their Purpose and State

Imagine browsing a site where buttons and links don’t provide any indication of what they do. To avoid confusion, it’s crucial that your interactive elements clearly convey their purpose and current state. This helps users using assistive technologies understand how these elements work.

Logical Tab Order and Visual DOM Order

The tab order should follow a logical sequence, making it easier for keyboard users to navigate through your site’s content. Additionally, the visual order of elements should match their position in the Document Object Model (DOM), ensuring consistency and reducing cognitive load for all users.

Preventing User Focus Trapping

User focus should never be unintentionally trapped within a specific region of your website. A seamless navigation experience is essential for all users, so make sure that keyboard users can move in and out of interactive elements smoothly.

Directing Focus to New Content

When new content is dynamically added to a page, it’s essential to guide the user’s focus to this content. This is particularly important for users relying on screen readers, as they may not immediately notice changes in the page’s structure.

Using HTML5 Landmark Elements

HTML5 landmark elements (such as <header>, <nav>, <main>, <footer>, etc.) enhance navigation for all users, including those using assistive technologies. These elements provide context to screen readers and help users understand the structure of your web page.

Hiding Offscreen Content from Assistive Technology

Sometimes, content meant for visual design or interaction is placed offscreen using CSS techniques. However, it’s essential to ensure that such content is hidden from assistive technologies to prevent confusion for users relying on these tools.

Labels for Custom Controls

If your website includes custom controls, like buttons or toggles, ensure that they are associated with clear and meaningful labels. This allows all users, especially those who rely on screen readers, to understand the purpose and function of these controls.

Using ARIA Roles

Accessible Rich Internet Applications (ARIA) roles are attributes that provide additional information to assistive technologies about the roles and behaviors of elements on your website. Properly implementing ARIA roles can greatly enhance the user experience for people with disabilities.


Creating an inclusive website isn’t just about meeting a set of technical requirements; it’s about welcoming all users to engage with your content seamlessly. By passing these accessibility audits and achieving a perfect 100 score on Google Page Speed Insights, you’re not only making your website more accessible but also improving its overall quality and usability for everyone. Remember, accessibility is a journey, and every effort you make to enhance it contributes to a more inclusive online world.

Why Your Web Designer Should Be Using Figma

Overlooking the importance of utilizing design systems and tools like Figma in web design can greatly impact the success of your online presence. While many web agencies may not prioritize this, incorporating Figma into your web design process can provide numerous...

37 Ways to Level Up Your Design

Ever been working on a design that feels too plain? Let’s look at a few dozen simple ways to spice things up. Get ready to bookmark this page, because you’ll want to reference this list in the future. It’s unbelievable how many incredible pro-level designs feature...

Powering Creativity: Exploring the Pros of WordPress Page Builders

In today's digital age, building an eye-catching and functional website is crucial for businesses and individuals alike. WordPress, the popular content management system (CMS), offers a wide range of page builders to simplify the website creation process. In this blog...

Website Menu Accessibility

Heading Order One of the easiest accessibility improvements you can make to a website with big impact is adding headings to break up content and using them in  the correct numerical order. When you’re building websites, always use headings in the correct order to...

ChatGPT: New OpenAI text generator is out of this world

The newly trained ChatGPT from Open AI has been released to much fanfare. No doubt you may have seen people on social media posting tests from it, or maybe a youtube video popped up on your feed. Well, AI is here and making a big statement with ChatGPT. What is the...

Introducing Rapid Wireframing

Mix & Match 478+ premade Blocks & export the final design as .json file. This is not a plugin nor child theme. Nothing to be installed on your site. It's is an online drag & drop tool for you to easily mix & match 478+ premade blocks then simply export...