White House website gets a dark mode and other improvements following Biden’s inauguration

One of the first things to be changed after Joe Biden was sworn in as the 46th US President was the official website for all presidential actions and efforts. There is a dark mode and a toggle for larger text and a commitment to make the site more accessible.

You can spot both the Dark Mode and the text size toggle buttons on the left of the screen.  (WhiteHouse.gov)

Following Joe Biden being sworn in as the 46th US President, one of the first things to be changed was the WhiteHouse.gov site. This site is the official website for all presidential actions and efforts. The site now sports a dark mode and a toggle for large text so as you don't have to strain your eyes. Also, the webmaster “has committed to making the whole site conform to the latest accessibility guidelines”.

While the look itself is not different from the site run by the previous administration, the inclusion of the dark mode and an option to change the font size are changes that many will appreciate.

Dark mode makes the site easier on the eyes in many ways and users always have an option to go back to the normal mode. The WhiteHouse.gov dark mode changes the headline type from a patriotic blue to an easy-on-the-eye with all the links highlighted in a pale yellow. The White House logo goes from a dark blue background to full black with a white border.

The larger fonts make everything easier to read and tap on. And while the toggles seem a little too big and too prominent, they might be scaled down soon.

There is an option for Spanish as well that was not there on the previous White House page.

Bigger additions, and more forward-looking ones, are in the pledge in the accessibility section which reads - “This commitment to accessibility for all begins with this site and our efforts to ensure all functionality and all content is accessible to all Americans.

Our ongoing accessibility effort works towards conforming to the Web Content Accessibility Guidelines (WCAG) version 2.1, level AA criteria.”

The WCAG are a set of “best practices” for designing a website so that the content can be easily accessed by people who use screen readers, need audio captions or cannot use the mouse or touchscreen easily.

While the WCAG guidelines are not hard to meet, it is harder to retrofit a site to be accessible than to design one for accessibility from the start. All government sites are required to be accessible but they confirm to this in varying degrees.

Most photos on the White House site right now have alt text or visible captions attached. These help the visually impaired understand what the image is about. 

Most photos on the site now have alt text visible.  (TechCrunch/WhiteHouse.gov)

Most photos on the site now have alt text visible.  (TechCrunch/WhiteHouse.gov)

As TechCrunch points out, normally this alt text would be read out by the screen reader but is generally not made visible. None of the pictures on the older site had this feature.

Site-wide accessibility also means the inclusion of plaintext versions of governance items and announcements (and not as PDFs or other documents), captions on official videos and other media etc.

As Microsoft's Isaac Hepworth spotted, there's still a lot to be done, and there is a message from the US Digital Services in the source code.

US Digital Services has put in a call to action in the source code of the site.  (TechCrunch/WhiteHouse.gov)

US Digital Services has put in a call to action in the source code of the site.  (TechCrunch/WhiteHouse.gov)

And that's not all, in an addition to help with inclusivity, the ‘Contact Us' form now asks users their preferred pronouns.

The @WhiteHouse website contact form now asks for your pronouns. pic.twitter.com/W5S36efo1d

— GLAAD (@glaad) January 20, 2021

Spotted by GLAAD, this new addition is something we have already seen on Vice President Kamala Harris' personal Twitter bio (not on her official bio yet) and never seen from a president or vice president yet.