We’re thrilled to reveal an entirely new WebAIM website. The new site, which is the result of much effort, has an updated branding and design and nearly all of the WebAIM content has been updated. This is the most significant site update since WebAIM began in 1999. If you have recommendations or feedback on the site, please contact us.
New Site Features
New branding
The WebAIM site has been in much need of a refresh for several years. We’ve had the same design since 2006! We’ve been so busy helping other people make their sites accessible and have neglected our own. This updated logo and design reflect our new branding and vision to keep Web Accessibility In Mind.
Updated content
The WebAIM site is very large (Google says over 160,000 pages), though much of this is dynamic content, such as our e-mail list archives. Still, there are hundreds of pages of web accessibility content that have accumulated over WebAIM’s 14 year history. Updating and curating this content has posed a challenge. This new site provides almost entirely updated site content made relevant to today’s web accessibility field. Most of our articles have been streamlined and condensed to give you accurate and efficient techniques and skills. Additional updates and new content, particularly for new accessibility technologies, such as ARIA and HTML5, will be coming soon. Of course some old content that was no longer relevant or useful has necessarily gone away.
Updated “Skip” Link
In this design, we chose to hide the “Skip to main content” link visually. It becomes visible when it receives keyboard focus, thus providing utility to the audience that needs it without distracting or confusing other users. To address potential issues with the link being missed by a keyboard user that navigates quickly, the link animates using CSS3 transitions to ensure it is clearly visible on screen, even if the user ‘tabs’ very quickly.
Responsiveness
We have included some basic responsive web design to make the site more friendly on various devices and screens. Try resizing your browser window to see how the site layout readjusts.
Link focus indicators
To help ensure high accessibility for sighted keyboard users, we’ve added some nifty keyboard focus indicators for links and form controls. A distinctive color change and slight transition draw visual attention to focused links. Additionally, scripting provides a focus ‘trace’ or ‘flying focus’ to help the user follow the visual focus. Tab through the links on this page to see it in action.
We also highlight the targets of in-page navigation. Activate our “Skip to main content” or any Article Contents links to see the target of those in-page links become briefly highlighted. JavaScript is also used to ensure focus remains on these targets in the various browsers that still don’t support in-page links.
ARIA and HTML5
HTML5 structuring, including the <main> element, is in use on the site. ARIA landmarks are defined for significant page areas. Other ARIA attributes have been implemented to provide enhancements to site accessibility.
Congratulations on finally getting the new design finished! Even though I worked on the old design, I’m happy to see it go. It was time to retire it, for sure. I’m looking forward to the new content.
I’m so happy! Congratulations 🙂
Great job on the new site! I can understand the effort it took to update and streamline the content.
I look forward to continuing to use this site, and pointing my collegues here for resources.
I have used your site since 2001 🙂
I might have some booksmarks and links to online resources in my training manuals to update!
Twitter: 508ingGirl
Congrats, this is great!
Me thinks Sir Jony may have been in the room when this design was being created…
Great example of accessible design that looks both modern, attractive and is also dyslexia friendly. The only jarring note is the underlining. Makes some important parts of the website really hard to read. How about using a dotted border slightly spaced from the text? This doesn’t work so well in text but should be quite suitable for headings?
Dominik-
Are you referring to the underlining of links or the underlining of the red headings?
If links, I think it would be poor form to break this well-known convention (links are underlined) to perhaps improve readability (though I would suspect that a dotted or dashed underline would be more problematic than a solid underline).
If headings, I’m curious how the underline impacts readability for you. Our site has had underlined second level headings for many years and this is the first comment I’ve heard regarding this.
It looks great! Congratulations!
The new site is total awesomeness wrapped in bacon! Kudos to you all for the outstanding work you’ve done on this WebAIM site for so many years. You are THE CHEESE!
As I said on Twitter but wanted to add to the congratulations here, I love the new look!
I like your new site design. I am a screen reader user, and the site reads very well in the System Access Mobile Network browser with Serotek’s screen reader. I’m going to try it out with NVDA using both Internet Explorer and what I can feasibly manage in Firefox. This desktop machine has seen better days! I also liked your previous site but if you were required to revamp it I totally understand. But anyway, I have wanted to learn more of the technicalities of website accessibility, and one of the items on my Christmas list this year is Mike Paciello’s book on the subject. I heard his interview on Eyes on Success and really enjoyed it.
Thanks to your site I have been able to highlight the accessabilityerrors on my own website and put them right. Some I wouldn’t even have been aware of. Thanks for helping me make my web design site more accessible 🙂
Pretty Cool the new design of the WebAIM 🙂
Awesome new site!! Such an improvement over what WebAIM had two or three years ago.
I have used WebAIM site is total awesomeness wrapped in bacon!Congratulations