March 2, 2021
Every four to eight years we get a new President of the United States, and with them a new whitehouse.gov to represent the people. Each administration makes the site a showcase of their agendas and values. The Biden-Harris administration is committed to building an America that is more inclusive, more just, and more accessible for every American, including Americans with disabilities and their families. These values shine in the newly updated whitehouse.gov website
As a group who values inclusion and has a passion for accessibility, we were excited to see a site built to support people who often get marginalized and silenced because of barriers they face in participating and contributing, particularly in the digital realm. Let’s talk about the successes of the new site.
Putting people first with the accessibility toolbar
Tools for controlling the presentation of the site are baked into the site’s core design. Each of the controls on the accessibility toolbar found on the screen’s side allows people to control the text’s size and choose to have a dark mode turned on
The accessibility toolbar has two buttons:
The first is a high-contrast button that toggles the site into a high-contrast mode with a dark background and light text. This can help users with low vision read the text more easily. It also helps people like me, whose visual acuity is fine but find dark backgrounds easier to read because of distracting eye floaters less visible on a dark background
The second is a toggle that increases the text size on the page. This helps those with visual disabilities and the aging population who read more easily when the text size is increased
Both of these buttons can be toggled independently or used together. So someone who benefits from both increased contrast and larger text can turn both settings on. Besides, once they’re set, they stay toggled (via a browser cookie) as you navigate to other pages on the site, so you don’t need to toggle them on for every page you visit
One last beneficial feature of the accessibility toolbar is that for users who use their keyboard instead of a mouse to navigate the site, the accessibility toolbar buttons are the second and third items reached when navigating through the site. (The first item is a hidden skip-to-content link that allows a keyboard user to navigate directly to the page’s main content.) This allows a person to set the site to a more comfortable state immediately.
A site structure that benefits screen readers
Not readily apparent to the average user is the site’s underlying structure — the browser’s markup to display the site. While most of us are completely oblivious to this aspect of the site as we’re navigating, the structure is fundamental to screen reader users. While screen readers read the content of the page to the user, they also convey additional information — whether a menu is expanded or collapsed, the hierarchy of the page and what the main topics of the page are, what section of a page (i.e., header, footer, sidebar, main content) a piece of content belongs to, etc. These relationships between the site’s text content help convey to a blind user what sighted people see on the page visually and usually take for granted and don’t even think about
The site uses headings (H1, H2, H3, etc.) and landmark elements (header, footer, main, aside, etc.) properly and effectively. Properly marked-up headings allow a screen reader user to get a sense of the page’s overall content and the most important pieces of content on the page without having to listen to the entire page
The landmark elements allow a person to skip directly to the different sections where web design conventions determine certain pieces of information and functionality should live (main navigation and search are usually in the header, contact information is usually in the footer, etc.). Both of these structures allow a user to find what they’re looking for quickly.
The return of an accessibility statement
The return of an accessibility statement to the site is refreshing to see. An accessibility statement essentially tells people with disabilities (about 25% of the population in the U.S.), “Hey, you matter to us! And we are making a conscious effort not to put up barriers that prevent you from being able to access what we offer.” It also sometimes lists any known accessibility issues being worked on and contact information to report or work around an issue. The accessibility statement was removed during the previous administration, so it’s comforting to see it return.
Admitting the U.S. is bilingual — Spanish translations
Lastly, though it is not an accessibility feature, a key inclusivity feature has returned the site: Spanish translations for the 13+% of the U.S. population who are Spanish speaking. The new administration has not just added them back, but has also taken the translation of the site a step further from just article text to include menus and the hidden section labels that get conveyed only to screen readers.
The major takeaway
Inclusivity was clearly a central theme in the successful relaunch of whitehouse.gov. If you take away only one thing from the new whitehouse.gov, may it be an understanding that being inclusive and accessible benefits everyone when it is at the core of everything you do.
Making the web a better place to teach, learn, and advocate starts here...
When you subscribe to our newsletter!