7 Learning Points from State of the Browser 2021

state of the browser conference logo

Last Saturday, Hannah and Steve went to the ninth edition of State of the Browser, a yearly conference organised by London Web Standards.

There were 7 fascinating talks about the modern web, accessibility, web standards and more. Here Hannah reflects on her top takeaway from each of the talks.

Building more sustainable websites has the added bonus of making the web more inclusive.

It’s quite surprising to hear that the Internet’s yearly carbon footprint is equivalent to the global aviation industry, or Germany, which is the 7th most polluting country. Tom outlined several practical things web developers can do to reduce the carbon emissions of their sites, including streamlining the user experience, optimising images and fonts, and using low energy colours in designs. All of these things reduce the energy needed to load the web page, making it more accessible to people on older devices and on poor internet connections. In other words, building with sustainability in mind improves performance and user experience, so it’s a win-win. Talk Details: Tom Greenwood – “A sustainable web for everyone.”

Improving native form inputs will help make forms more accessible.

It’s estimated that two thirds of web developers build custom form controls from scratch because it’s so challenging to control the appearance of native controls. The problem with this is that, in the process, important security and accessibility featured are often lost. That’s why Open UI have been working hard to improve native form inputs, specifically <select>, to avoid this problem and make life easier for developers. You can read more about Open UI’s Select Proposal here. Stephanie Stimac – “Standardising Select: What the Future Holds for HTML Controls”

On mobile devices, the majority of internet traffic sidesteps the default browser.

Even when users set an alternative default browser on their mobile devices, Google and Apple both have sneaky tactics to make sure the majority of web content is viewed on Chrome and Safari respectively. Similarly, the Facebook Mobile Browser is used to open any links clicked on in the Facebook App – often without users knowledge. Alex Russell is calling big tech out on this, arguing that web developers should be able to build for their users’ preferred browsers, rather than having the ‘choice’ of browser imposed. Alex Russell – “Hobson’s Browser: How Browser Choice Died In Our Hands”

Using well written, semantic HTML gives you ‘free’ accessibility features.

To create the best user experience for the broadest range of people, including screen reader users and keyboard users, semantic HTML should be used wherever possible. The further away you move from semantic HTML (for instance, using <a role=”button”> instead of <button>), the more code you need to write to make it accessible.
For example, using <button>, as opposed to <a role=”button”>, means that a screenreader will automatically announce it as a button, and the button can be pressed with the enter key or the spacebar. Whereas <a role=”button”> requires additional JavaScript to make the button press-able with the spacebar. Léonie Watson – “Bag of Spanners”

Maintaining the aspect ratio of an image has just gotten much easier.

Until earlier this year, one of the most widely used ways of maintaining an image or video’s aspect ratio was to use “the padding hack”.  This has now been made much easier with the introduction of the aspect-ratio CSS property, which has good support across browsers. Rachel Andrew – “CSS Layout from the inside out”.

You don’t always need to use JavaScript to make a website accessible.

In fact, sometimes the accessibility issues that JavaScript is used to solve, were caused by JavaScript. In this talk we were invited to think about building a fully accessible website without using JavaScript at all. With static web content, such as a blog, there’s no need to use JavaScript and we should always use the native accessibility features of HTML before resorting to JavaScript. Heydon Pickering – “Please disable JavaScript to view this site”

You can now send micropayments to content creators.

It’s well known that it can be very challenging for creatives to make money from their online content. At the moment they’re generally limited to one-off payments (usually for a purchase), or a monthly subscription through a platform like Patreon. Now there’s a new way for creators to monetise their content online, and a new way for web users to support the makes of the sites they use. If you’re interested in learning more, check out Coil. Amber Case – “The Future of Web Monetization”