A Smashing Guide To The World Of Search Engine Optimization

A Smashing Guide To The World Of Search Engine Optimization

A Smashing Guide To The World Of Search Engine Optimization

Frederick O’Brien

2020-08-14T09:00:00+00:00 2020-08-14T10:06:34+00:00

Search engine optimization is essential to most websites. The industry is worth more than $70 billion a year, and it’s only going to grow. It has specialists, sub-specialists, thought leaders, dedicated publications, fantastically complex tools, and constant uncertainty at its heart. As Bob Dylan says, it’s just a shadow we’re all chasing.

All the more reason to stay sharp, no? Every tweak to major search engine algorithms sends shockwaves throughout the web. For those who don’t follow the SEO space it can be easy to lose track of the latest trends, authorities, and resources.

That’s what this page is for. It will break down SEO’s hot topics, common questions, and the best resources for staying up to date with that world. As such, this isn’t so much a guide to SEO as it is a guide to the world of SEO. Think of it as a cliff-notes, a primer for those looking to top up their knowledge and understand the latest trends.

For those really in a rush to get back into the groove, skip ahead to the cheat sheet rounding up all the resources included in this piece. As for the rest of you, on we go. It’s quite Google-heavy, because Google currently holds 85%+ market share, but rest assured the points apply to the likes of Baidu and DuckDuckGo as well.

And remember, this is a live document. If there’s something we’ve missed, tell us. In a world as fast-changing as SEO no resources can afford to sit on their hands.

Why SEO Matters

We won’t linger on this point, but it’s useful to remind ourselves what SEO is, why it’s important, and how it has evolved over the years. Keeping the foundational principles in mind allow you to see the woods rather than the trees.

So, in a nutshell, search engine optimisation is the means by which websites appear in search engines like Google, Bing, Baidu, and DuckDuckGo. It remains one of the best ways for websites to be found. More than 90% of web traffic comes through search engines, with Google alone processing trillions of searches a year. If you want your website to be seen, you want to be appearing in relevant search results.

Although SEO isn’t controversy-free, it is in principle the great equalizer. Positions can’t be bought; they’re based on relevance and quality. It is in the interest of search engines to deliver the best results possible, so SEO is the process by which a site becomes the best results possible.

The New Yorker's image
Image by John Caldwell of The New Yorker. (Large preview)

In a word, the appeal of SEO is traffic. It’s getting people to drop by and hopefully stick around. More traffic means more readers, more viewers, more customers, more attention.

Whatever your motivation is, the game is fundamentally the same. From content to site design, implementing makes websites better. Design is clearer and content is more focused, with visitors’ needs always front and centre. In a sense it gives you a 3D vision of the web, seeing web experiences from both human and computer perspectives.

Despite quick-fix guides to the contrary, SEO is best not retrofitted. As Suzanne Scacca writes, SEO belongs at the heart of the web design process. It can’t — and shouldn’t — be pushed off to writers or SEO executives. It is a sitewide concern, requiring sitewide attention.

Hot Topics

If you’re not comfortable with the basics of SEO — meta tags, alt text, link building, etc. — this page is not for you. This piece assumes a certain amount of foundational knowledge. Don’t panic, though, we won’t leave you hanging. Here are several terrific resources for getting started from scratch:

As for the rest of you, what follows are some of the SEO space’s slightly more technical hot topics, complete with conventional wisdom and resources for keeping up with their evolutions.

Great Content

I had to put this first. The sheer amount of data involved in SEO makes it easy to lose sight of an important fact: you’re making websites for people, not search engines. As corny as it sounds, in the long term the best way to perform well in organic search is to be the best you possible.

Search engines value good content above all else. However much the intricacies of SEO change, this remains true. It’s a rock solid foundation for SEO. Optimising a brilliant website is easy; optimising a bad one is hard, and often leads to black hat behaviour. (More on that below.) Yes, there are poorly optimised websites that perform well in search, for a variety of reasons, but grumbling about will get you nowhere.

What does ‘good content’ mean in concrete terms? It’s not as arbitrary as you might think. Search engines generally keep their cards close to their chest, but where content quality is concerned they’re as transparent as you could hope.

For those out of the SEO loop there are few better ways of getting up to speed than reading through Google’s latest Search Quality Evaluator Guidelines. Why guess what search engines want when they’ve written a book’s worth of documentation on the subject? Topics covered in the latest edition include:

  • Expertise, Authoritativeness, and Trustworthiness (E-A-T),
  • Your Money or Your Life (YMYL) Pages,
  • The reputation of websites and creators,
  • Mobile user needs,
  • Auto-generated content,
  • Deceptive page design,
  • What low quality pages look like.

Whether you’re a designer or a copywriter, this is all valuable information.

Say what you like about Google’s more nefarious practices, but where organic search is concerned they want websites to be goodie two shoes. Write brilliant articles; build fast, practical sites; use beautiful visuals; design ethically; be transparent about who you are and what you do; and never, ever let SEO be the tail that wags the dog. Quality will win out in the end.

Accessibility

Happily, the web development space seems to be warming up to talk of accessibility. There is plenty of natural overlap between SEO and accessibility, though sadly there is currently little evidence that super accessible websites get a boost in search. Accessibility barely features in Google’s mammoth Search Quality Guidelines document.

There is, however, a huge amount of overlap between accessibility best practice and SEO best practice. These include:

  • Image alt text,
  • Descriptive title and header tags,
  • Video transcriptions,
  • Content sections,
  • Clear, logical sitemaps,
  • Colour contrast,

Almost everything worth doing for its own sake becomes SEO best practice eventually, so I’m inclined to endorse accessibility on both counts. The Web Content Accessibility Guidelines are a great place to start, especially the Four Principles of Accessibility.

WebAIM publishes annual reports on web accessibility, and Global Accessibility Awareness Day is a fantastic hub for events and campaigns. Also, to get a Smashing plug in, Steven Lambert’s piece on designing for accessibility and inclusion breaks the topic down splendidly.

The Curious Case Of JavaScript

JavaScript has grown into the third pillar of web design — joining HTML and CSS. The language allows for all manner of fancy interactive features that aren’t possible on static sites. That sophistication has brought with it some confusion where SEO is concerned.

Can JavaScript-heavy websites perform well in search? Yes, they can and do. When issues arise it’s almost always in the indexing process, when search engines crawl and render web pages for their databases.

Google has a finite crawl budget. If your page takes ages to load, there’s a decent chance search engines will skip over it. Render-blocking JavaScript is also frowned upon, especially for above the fold content. If possible, execute scripts after the page is loaded.

URL Inspection Tool
(Large preview)

In short, let search engines see pages the way people see them. Google Search Console has a URL Inspection Tool that will show you what it retrieves, what it renders, and any glaring issues.

Developers should not shy away from JavaScript for fear of angering the SEO gods. Yes, bloated, slow, gratuitous JavaScript will hurt your website’s search performance, but applied properly the language can also improve it. Indeed, formats like JSON are a staple of more sophisticated SEO markup, like Schema.

Here are some resources for getting into the weeds of JavaScript and SEO:

Remember also that the more solid your SEO foundations are, the less pressure there is on JavaScript to perform. Think of it as something that enhances the browsing experience rather than carries the water.

Structured Data

Metadata has come a long way since the early days of SEO. Meta titles and descriptions remain important, but there’s a whole other level becoming increasingly difficult to ignore — structured data.

Structured data, more specifically Schema, has been adopted by all the major search engines. Part of the Semantic Web push to make online data machine-readable, it allows you to label content with specificity that simply wasn’t possible before. Structured data is how search engines display rich results like recipes, reviews excerpts, event details, and more.

Schema vocabulary works alongside Microdata, RDFa, and JSON-LD formats, and there are plenty of free tools to help you learn the language and how to implement it. These include:

Search engines are ominously clever, but they’re not that clever. Structured data removes much of the guesswork from the crawling process, making it easier to understand and index content for relevant searches.

For a more in-depth introduction to the topic I humbly point you towards my article on Baking Structured Data Into the Design Process.

Site Speed

Search engines like fast websites. They’re easier to crawl, and they’re easier for users to browse. It doesn’t matter how wonderful your site is, if it takes ages to load people aren’t going to stick around to find out. Search engines are similarly impatient.

Like most things SEO, site speed best practice covers a spectrum all the way from common sense to highly technical tinkering. On the common sense side, don’t upload 12MB images when 200KB ones look exactly the same. If you absolutely must have massive high resolution images, link away to them instead. Images are the most popular resource type on the web, so don’t skimp on the compression. Most people will be browsing on their phones anyway.

Beyond that you get into more technical waters, though the goal remains the same: load quickly and smoothly. Streamline your code, cut out superfluous HTML, CSS, and JavaScript. Most importantly, as always, test what you’ve done. Site speed isn’t a theoretical concern; it’s a practical one.

Typically, Google has a dedicated tool for that purpose:

It will tell you exactly what’s wrong with a URL’s content and what you can do to improve it. Site speed is no great mystery; more often than not it’s simply a case of trimming the fat.

Mobile First

Most web browsing now takes place on mobile devices, not desktops. It is for this reason that Google will move to mobile-first indexing for all websites in September 2020. What that means is mobile renders of a page are what will be indexed, not desktop. That’s where you need to bring your A-game.

People are understandably drawn to the broad canvas offered by desktop-first design, but it’s not where our skills are most useful. If your website is a work of art on desktop but a mess on mobile your SEO will suffer — and that’s to say nothing of user experience.

Think with your mobile cap on. Are ads monopolising above the fold space? Google dedicates 20 pages of its Search Quality Guidelines to understanding mobile user needs, covering everything from search engine result pages (SERPs) to location-specific search queries. Again, what search engines want needn’t be a mystery.

The Dark Side Of SEO

It would be remiss not to address the seedier side of SEO. There’s a lot of money to be made from ranking well for popular search terms. One of the main reasons search engines are so secretive about how they work is they know a number of websites will try to game the system in the name of Quick Wins™.

Black Hat SEO is quite a vibrant world in its own mustache-twirling way. From cramming keywords out of sight to purchasing backlinks from reputable websites, there’s an almost cartoonish instinct among some to avoid the hard work and self-improvement that good SEO entails.

Has black hat SEO worked in the past? Sometimes, yes. Sometimes very well indeed. However, search engines are always on the watch for bad behaviour, and they will punish it when they find it. The damage can be irreparable and besides, nobody likes a sleazeball.

There’s no substitute for quality long-term SEO strategies. Which brings us to…

Playing The Long Game

SEO is a marathon, not a sprint. Implementing best practice can produce immediate results, but long-term performance requires long-term maintenance. Besides, the journey is more important than the destination, isn’t it?

This article does not presume to give you a comprehensive guide to SEO. This is a resource for those who want to stay up to date with the industry as part of long-term self-improvement. In that spirit, the cheat sheet below is one of documentation, tools, journalists, thought leaders, podcasts, and other resources.

A reminder also that this is a live document, so don’t be shy about suggesting adjustments and additions as the SEO world continues to change.

Happy searching.

A Smashing SEO Cheat Sheet

This is not an exhaustive list, but hopefully there is enough for you to fall down the SEO rabbit hole. Please note that this cheat sheet will be updated occasionally, so if something/someone is missing, feel free to let us know! We’ll consider it for inclusion the next time we update the sheet.

Documentation

Authorities And Journalists

Publications, Blogs, & Forums

Tools

Free
Freemium/Paid

Podcasts And Video Series

Conferences

Smashing Editorial (ra, yk, il)

Ecommerce in France: Loyalty to Domestic Sellers

France has the third-largest population in Europe with 65.3 million residents and the second-largest ecommerce market. French consumers are loyal to their national brands and often shun cross-border ecommerce. Roughly 60 percent of French shoppers make only domestic purchases, according to the Ecommerce Foundation, a Netherlands-based research firm.

The French also buy services online — mostly travel, event tickets, and music subscriptions. Foreign merchants would likely have relatively more success by selling their goods on one of France’s many marketplaces.

Over the last several years France has experienced modest ecommerce growth at a declining rate. The Fédération E-commerce et vente à distance (Federation of E-Commerce and Distance Selling, or Fevad) reports that total French online sales — physical products and services — are expected to reach €115 billion, an increase of 11.4 percent year-over-year. Most websites are in French and operate from .fr domains, including Amazon, the biggest online marketplace in that country.

The French market is just below the European average in terms of Internet penetration, the percentage of ecommerce consumers, and average expenditure. Compared to other major E.U. countries, Internet penetration is low in France, especially in rural areas. However, the percentage of consumers who buy online is growing, reaching 77 percent in 2019. Shoppers spent, on average, €2,266 last year.

Popular Ecommerce Sites

The French show an affinity for marketplaces, which account for half of online shopping, according to SimilarWeb. Amazon is the most popular online store with 8 million active customers, according to Fevad, representing 63 percent of marketplace customers.

Cdiscount, a native French marketplace, is second with 2.5 million active customers and 20 percent of all marketplace sales. It offers low prices on technology, appliances, and furniture.

Fnac is another popular native French marketplace. It represents 17.3 percent of French marketplace sales and is also a popular physical outlet with 160 retail stores. Founded in 1954, Fnac merged with major retailer Darty in 2016. Ecommerce now accounts for 19 percent of the total sales of the combined entity. Fnac offers a click-and-collect option for in-store pick-up. Fnac Express+, a competitor to Amazon Prime, provides same-day delivery. Fnac has expanded its marketplace to Belgium, Spain, Portugal, and Switzerland.

Auchan is a France-based global retailer that opened an online marketplace in 2015. Its core products are groceries and apparel, but it also sells home goods and electronics. The marketplace is open to third-party sellers. Auchan owns grocery stores throughout Europe.

Other foreign marketplaces that operate in France include eBay, Rakuten, and AliExpress.

While not a marketplace, Veepee is a member-based French retailer that launched in 2011. It offers online flash sales for, mainly, apparel goods. Besides France, it operates in 10 European countries.

French Consumers

According to the “France 2020: Ecommerce Country Report” from RetailX, a U.K.-based analysis firm, “Privacy and data security are especially important to French consumers. These may be a significant factor in whether and how they choose to buy online, and in deciding whether they choose new market entrants over established French brands and retailers.”

Click-and-collect ecommerce is popular in France. While 86 percent of online shoppers use home delivery, 83 percent also use third-party click-and-collect points. Same day delivery is not a high priority for French online shoppers.

Bank debit cards are the preferred payment method of 80 percent of the population, according to Fevad. Forty-percent of French mobile-payment shoppers use Apple Pay, according to Statista. Google Pay is also popular.

According to Statista, apparel is the most popular product purchased online at 58 percent of French Internet users. Travel and tourism come in at 40 percent, while footwear, games, and toys garner 39 percent of Internet users. The fashion-conscious population spent €12.4 billion online on apparel in 2019.

Protectionism

France can seem hostile to foreign businesses. In July, the country announced plans to curtail the development of new warehouses by ecommerce companies. The newly-appointed Minister of Environment, Barbara Pompili, explained that France wants to protect small retail businesses that suffered during the Covid-19 outbreak, by helping them survive the expansion of major ecommerce companies such as Amazon.

The French government has a contentious relationship with Amazon and closed several of the company’s warehouses early in the pandemic after employees complained about unsafe working conditions. The warehouses have since re-opened. Nevertheless, if foreign ecommerce companies are perceived as a threat to small French businesses, the government may take further actions.

Accessibility In Chrome DevTools

Accessibility In Chrome DevTools

Accessibility In Chrome DevTools

Umar Hansa

2020-08-13T07:00:00+00:00 2020-08-13T10:05:13+00:00

I spend a lot of time in DevTools, and in doing so, I’ve come to learn about some of the more ‘hidden’ features in DevTools and would love to share some of them with you in this article — specifically around accessibility.

This article uses Google Chrome since it’s a browser I use and feel comfortable with. That being said, Firefox, Safari, and Edge have all made great strides in their developer tools, and they definitely have some great accessibility-related features of their own.

You might already be familiar with DevTools, but here’s a quick reminder how to inspect an element on a webpage:

  1. Open a webpage you are interested in inspecting, in Google Chrome
  2. Use the shortcut Cmd + Shift + C (Ctrl + Shift + C on Windows)
  3. Your pointer is in Inspect Element mode, go ahead and click an element on the webpage

Just like that, you’ve opened up DevTools and have begun inspecting elements. The different panels correspond to different features, e.g. around JavaScript debugging, performance, and so on.

There are accessibility-related features scattered throughout, so let us explore what they do, where they live, and how to use them.

Contrast Ratio

This is a feature to check whether the inspected text has a satisfactory color contrast against the background color.

Typically, a high level of contrast between the text color and underlying background color means more legible text for users of different abilities. In addition, it helps support users reading your text in a variety of environmental conditions, consider these examples which can impact how a user perceives text legibility:

  • Looking at a screen while outside with lots of sunlight
  • A mobile device has lowered its screen brightness all the way down to preserve battery life

“The intent is to provide enough contrast between text and its background so that it can be read by people with moderately low vision.”

Understanding Success Criterion 1.4.3: Contrast (Minimum)

Using the contrast ratio tool can give us an immediate yes/no answer to the question: does this text meet the minimum contrast standard. Using this tool can help influence the design and color scheme of your website, which can lead to more readable content for users with low vision.

Contrast ratio in the color picker tool
Contrast ratio in the color picker tool (Large preview)

Available in the color picker tool, the contrast ratio feature can inform you on whether a minimum contrast requirement has been met. To access this feature:

  1. Inspect a text element with the DevTools
  2. Find the color property in the Styles pane, and click the small colored square to bring up the color picker tool
  3. Click on the text which says ‘Contrast ratio’ which presents further information on this subject

The three ratios represent:

  • Your current contrast ratio
  • The minimum contrast ratio (AA)
  • The enhanced contrast ratio (AAA)

As an exercise for yourself: drag the circular color picker tool across the color spectrum and observe the points at which the minimum contrast and enhanced contrast ratios are satisfied.

This feature can also be reported to you through a Lighthouse Report, covered in Lighthouse section of this article.

Accessibility Inspector

This refers to a DevTools pane which lets you view various accessibility properties and ARIA information for DOM nodes.

ARIA refers to a collection of properties, typically used in HTML, which in turn makes your website more accessible to individuals of different abilities. It’s absolutely worth using on your own websites, but it does require understanding the fundamentals of web accessibility to ensure you’re using it in a way which will help your users.

For example consider the following piece of HTML:

<p class="alert" role="alert"> That transaction was successful
</p>

An assistive device, such as a screen reader, can use the role="alert" property to announce such information to the user. The Accessibility pane within DevTools can cherry-pick such a property (role) and present it to you, so it’s clear what accessibility-related properties an element has.

Validating the information you see in this pane can help answer the question: “Am I coding accessibility incorrectly”, whether it’s syntactically or structurally, just keep in mind, applying accessibility techniques with the correct syntax, and having an accessible website, are two different things!

The accessibility pane in use on the Smashing Magazine website
The accessibility pane within the Elements Panel (Large preview)

To start using this, you can open up the Accessibility pane with an inspected element:

  1. Inspect any element on the page, e.g. a hyperlink or search box
  2. Open up the Accessibility pane which is found in the Elements Panel
    Bonus tip: rather than having to locate the pane (it’s not open by default), I search for ‘Show Accessibility’ in the Command Menu (Cmd + Shift + P).

You’ll find a bunch of information here, such as:

  • An accessibility tree (a subset of the DOM tree)
  • ARIA attributes
  • Computed accessibility properties (e.g. is something focusable, is it editable, does it pass form validation)

Depending on the inspected element, some of this information may not be applicable, for example, maybe an element legitimately does not need ARIA attributes.

As with most features in DevTools, what you see in this pane is ‘live’ — changes you make in the Elements Panel DOM Tree are reflected back to this pane immediately, making it helpful for correcting a misspelled ARIA attribute for example.

If you’re confident in your use of Accessibility, possibly because you’re using an alternative automated testing tool such as axe, then you may not use this pane very often, and that’s okay.

If you’re interested in learning more while looking at real-world websites, I’ve made a 14-minute video on Accessibility debugging with Chrome DevTools.

Video on Accessibility debugging with Chrome DevTools

Lighthouse

Lighthouse is an automated website checker that can scan for best practices, accessibility, security, and more.

If you’ve done some reading on accessibility theory, and you want to learn how to effectively apply it to your own website, this is a great tool to use since it’s quite literally a point-and-click interface — no installation required. In addition, all of its audits are very instructional, informing you what failed, and why something failed.

Following the suggestions from this tool will almost certainly help improve the accessibility of your site.

A Lighthouse audit report which shows a score of 82 for accessibility
A Lighthouse audit report (Large preview)

While checking for security, general web best practices, performance is helpful. Let’s focus on how to run an accessibility audit in Lighthouse:

  1. Navigate to the Lighthouse panel in DevTools
  2. Uncheck all categories, but keep ‘Accessibility’ checked
  3. Click ‘Generate Report’
  4. In the resulting report, click through the different suggestions to learn more about them
A Lighthouse audit report which shows 21 passed audits
Passed audits are still a good learning opportunity (Large preview)

If you want to learn more about Accessibility (I certainly do!), clicking through failed, but even passed audits are a great way to learn since almost each audit links off to dedicated web developer documentation on the audit itself, and why it’s important.

For the most part, the audit documentation pages are extremely succinct and I highly recommend them. Let’s take a look at the audit documentation for ensuring a <title> element is present. It specifies:

  • How the Lighthouse title audit fails
  • How to add a title
  • Tips for creating great titles
  • Example of a title not to use, along with a title worth using

And in the case of the document title documentation, it only took 300 words to explain those 4 points above.

One interesting thing to note, unlike the Accessibility pane, Lighthouse Audits are very instructional by default, making the Lighthouse panel a great place to visit when you’re just getting started out.

A single audit result which has been expanded to reveal more details
The ‘Learn more’ link opens a new window to well written documentation (Large preview)

As you become more advanced with building accessible pages, you may move away from pre-defined audits and spend more time in the accessibility pane.

Emulate Vision Deficiencies

This is a DevTools feature to apply vision deficiencies, such as blurred vision, to the current page.

“Globally, approximately 1 in 12 men (8%) and 1 in 200 women have color vision deficiencies.”

Accessibility Requirements for People with Low Vision

You’ll want to use this feature to help ensure your website meets the needs of your users. If your website is displaying an important image, you may discover that this image is difficult to comprehend for someone with tritanopia (impaired blue and yellow vision), or is even difficult to comprehend for someone with blurred vision.

“Some low visual acuity can be corrected with glasses, contact lenses, or surgery — and some cannot. Therefore, some people will have blurry vision (low visual acuity) no matter what.”

Accessibility Requirements for People with Low Vision

For example, in the case of an image, you may find that there is a higher resolution image available for download while emulating blurred vision via DevTools, rather than a user with blurred vision can use and in turn comprehend what the image is showing. This will require some design/UX based problem-solving skills — possibly from you/your colleagues — but it can be the difference between meeting the needs of your users, or not meeting their needs.

💡️ Please note: The following image is partially blurred, to demonstrate the ‘Blurred vision’ emulation feature of DevTools.

A demonstration of emulating blurred vision on the Smashing Magazine website. The feature is toggled on from the Rendering pane
Blurred vision doesn’t affect colors on the page, but the other deficiencies do (Large preview)

You can try this feature out with the following steps:

  1. Open the Command Menu (Cmd + Shift + P or Ctrl + Shift + P on Windows)
  2. Search for and select ‘Show rendering’
  3. Select a vision deficiency such as ‘Blurred vision’ from the Emulate vision deficiencies section in the Rendering Pane.

Here are a few examples of vision deficiencies you can apply via DevTools:

  • Blurred vision
    Where vision is less precise
  • Protanopia
    Color blindness resulting from insensitivity to red light
  • Tritanopia
    Impaired blue and yellow vision

Emulation features like this will not fully account for subtle differences in how such deficiencies manifest themselves with individuals, let alone the wide range of vision deficiencies out there. That being said, this feature can still help us as web developers with understanding and improving the accessibility of our pages.

Inspect Element Tooltip

This feature refers to an improved tooltip which now surfaces accessibility-related information when you use the ‘Inspect Element’ feature. It’s a subtle, yet still very important feature since it can inform you of how accessible elements are, at a quick glance.

I say it’s important because in the case of the four other features mentioned in this article, they require intentional action on our part (click the generate report button, navigate to the Accessibility pane, open the color picker tool, and so on). However, for this feature, it surfaces in one of the most common actions of DevTools while inspecting an element.

As a short challenge for yourself, take a look at the following two screenshots. They demonstrate the enhanced DevTools Inspect Element tooltip which now has an accessibility section on there. Can you identify what the properties in that section represent?

The Inspect Element tooltip appearing for an inspected button element. The tooltip shows various element properties, such as padding and role
(Large preview)
The Inspect Element tooltip appearing for an inspected anchor element. The tooltip shows various element properties, such as font, color, contrast ratio, and others
(Large preview)

You may notice that these are the exact same pieces of information we saw earlier — as part of the Contrast Ratio section and the Accessibility Inspector. They’re the same properties but surfaced in a (hopefully) simpler way.

Note: There’s also a “Keyboard-focusable” property in that tooltip (the very last item). This indicates whether or not the item is keyboard accessible. If true, this will typically suggest the element in question can be focussed by tabbing to it.

The way I see it: Inspect Element is an extremely common use case within browser DevTools, so cherry-picking useful accessibility-related properties for the Inspect Element tooltip can serve as a helpful reminder, and prompt us as web developers to investigate further and ensure what we’re building is accessible.

Conclusion

Web developer tooling to improve accessibility has improved rapidly over the years, but sometimes these tools are hidden away or simply undocumented. In this article, we explored some of those features which can hopefully help us when applying accessibility best practices to the websites we build.

Here’s a reminder of what we covered:

  • Contrast ratio
    Check whether the inspected text element has a satisfactory contrast ratio.
  • Accessibility Inspector
    View various accessibility properties and ARIA information.
  • Lighthouse
    A website checker that covers best practices, accessibility, and more.
  • Emulate vision deficiencies
    A tool to apply vision deficiencies (such as blurred vision) to the page.
  • Inspect Element Tooltip
    An improved tooltip which surfaces accessibility-related information.

I make the Dev Tips mailing list if you want to keep up to date with over 200 web development tips! I also post loads of bonus web development resources on my Twitter.

That’s it for now! Thank you for reading.

Free Webinar With Umar Hansa

Smashing TV is a series of webinars and live streams packed with practical tips for designers and developers. Join us later on today with Umar to discuss and explore End-to-end Testing With A Real Browser. The webinar begins at 19:00 London time and is free for everybody to join! Save a seat →

Smashing Editorial (ra, il)