A11Y Websites
Showcase of accessible websites.
These websites have been assessed through both automated and manual testing against the success criteria set out in the Website Content Accessibility Guidelines (WCAG) 2.1 to grade AA and above.
Modern CSS Solutions
Stephanie Eckles’ Modern CSS Solutions site is a great example of accessible web design done well with aesthetically pleasing colours and structure. Beyond its own accessibility merits, the site provides lots of great article to help developers create accessible, lightweight interfaces using modern CSS techniques without needing to resort to untidy, inaccessible hacks or Javascript reliant solutions.
hiddedevries.nl
Hidde de Vries’ website meets grade AA overall with good colour choices and visible focus states throughout. The layout is simple and easy to navigate, including heading anchor links to more easily access content within articles.
hilfsgemeinschaft.at
Hilfsgemeinschaft (support community) website almost meets grade AA overall with a significant amount of accessibility enhancements that may be useful for users unfamiliar with built-in assistive technologies, such as screen readers and system display preferences. Failures include missing keyboard operable access to some form controls and reflow issues on the homepage due to controls/content in the slider not being visible when reducing the viewport size.
annaecook.com
Accessibility designer Anna Cook has a portfolio site of their work, blog posts and speaking engagements. Overall it meets grade AA. Heading and layout structure is present in a logical order. Judging by the swift transitions between pages, this is a Single Page Application site. Page titles update in time with each transition to a different page, and users can navigate back and forward between pages using standard keys or controls. It would be great to see more content brought within the site for the blog section from external sites which aren’t as accessible.
a11yproject.com
Unsurprisingly, the A11Y Project site meets grade AA overall, complemented by an attractive design and colour palette. Indeed it goes further than that in terms of best practice approaches for accessibility for things such as navigational aids and high contrast colours in some locations. Aside from grading its level of accessibility compliance, A11Y Project is a fantastic site to keep on revisiting, with a huge archive of up-to-date content and links to resources to learn more about digital accessibility.
jamesg.blog
James’ Coffee Blog website almost meets grade AA overall, with the exception of some reflow issues on multiple pages and some incorrect use of ARIA roles. The simple, consistent colour palette and clear focus states provide for good contrast between links, form fields and other content.
