calumryan/a11ywebsites

Showcase of accessible websites built to meet WCAG 2.1 success criteria to level AA.

a11ywebsites's Issues

Add the Web Almanac Website!

URL: https://almanac.httparchive.org

The Web Almamac is an annual “state of the web” report covering many topics as “chapters” including Accessibility. We have spent considerable time and effort to look to make the website as accessible as possible, and to act as a showcase for the many techniques discussed in the chapters.

We use well-structured, semantic, HTML with the addition of ARIA attributes were appropriate. We also use additional, newer APIs like prefers-reduced-motion and reducing data on limited connections or where asked by users. We aim to make the site progressively enhanced so it should still work well on the simplest HTML device.

Being a data-driven report, we make particular efforts to ensure all data figures are well-described with both a caption and an easily-displayed description, linked with aria-labelledby and aria-describedby attributes. The source data and queries are also linked from each chapter to make the data further accessible to those wanting to analysis further.

We also make the report available in PDF format and take extra efforts to ensure it is an tagged PDF/UA-1 compliant PDF.

We perform automatic Lighthouse checks, using the underlying axe checks on every, single commit to try to avoid regressions - particularly in Accessibility. This check also runs weekly on the project website and ensures we keep our score of 100 for every, single page on the website.

We also regularly test manually, using keyboard navigation and the likes of VoiceOver on Safari. Plus, we are lucky to have access to Accessibility experts involved in the report to ask questions to (example). We give credit on the website to all contributors both in individual chapters, and on our contributors page.

We are very open and transparent on our accessibility work and issues through GitHub and have so far always addressed any accessibility issues raised quickly (within days).

We aim to make the site accessible to as many people as possible and so put considerable effort into translating the content with volunteers having made some of the content available in 11 different languages. We also aim to support those languages as best as possible and have added new functionality to handle the nuances and grammar of certain languages, rather than a basic translation. For example, the logo is different on our Japanese pages to represent the different ordering in that language, we have added RTL support to our templates (though currently unused as that language stalled) and also support things like Russian plurals.

We don’t limit ourselves to AA conformance and look also to AAA conformance - particularly with its enhanced colour contrasts.

I believe this site would make a good addition to your show case and would be happy to answer any questions and address and issues you spot when considering this site.

Add this Website!

URL: https://museusaoroque.scml.pt/

A very clean website for one of the oldest museums in Portugal, with an important collection of portuguese sacred art.
This website was tested in accessMonitor v2.1, the portuguese governement tool for accessibility with the maximum pontuation (10) for all pages (111 pages). It was also tested with Google Lighthouse, AudioEye, WAVE, HTML_CodeSniffer and axe DevTools v4.57.3, all without a single error. All the colors used were tested in contrast checker tools as https://contrastchecker.com/. According to the tests, this website meets WCAG levels A, AA and AAA.

Add this Website! 😊

URL: https://www.tempertemper.net

Martin Underhill's website meets AA standard, with many AAA success criteria also being satisfied. Care has been taken to ensure that colour contrast is met in both light and dark modes, links are underlined, focus states are very clear, and what little motion there is is removed if the user's system preferences are set to reduce motion. The code is semantic, and where this is not the case (for example, links that look like buttons), the proper semantics and behaviours have been added with ARIA, HTML attributes and JavaScript. The layout is simple, clear, and very legible, and good use is made of FS-Me, a typeface designed with accessibility in mind.