Last week, I talked about the thinking behind Level AAA of the Web Content Accessibility Guidelines (WCAG) and why it is important for users. The blog post sparked a lot of conversations on Twitter, many of which wanted firm examples of what Level AAA can look like.
Many people seem worried that a Level AAA website is, by definition, an ugly or boring website.
I’d like to use this blog post to highlight some great examples of Level AAA websites out in the wild, used by real visitors every single day. If you know of a Level AAA website, leave a comment and I’ll add it to the list.
I’ll update this list over time, so check back for inspiration whenever you need to.
Level AAA websites
- www.pasdecalais.fr
- www.visionaustralia.org
www.lflegal.comalt text missing for an image and “null” attribue not usedwww.adcq.qld.gov.auit’s been pointed out that pages fail 1.4.8 – Visual Presentation as there are often more than 80 characters in a line.
Add yours in the comments!
Free Developer Resources
Join over 3,700 subscribers on my weekly web accessibility email and get free developer resources like WCAG Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.
When I run the wave tool on the http://www.lflegal.com website, I get an error. There is no alt text for the image on the home page
Am i missing something? How can the site be AAA compliant if it isn’t A compliant?
Hey Michele, good spot (the image of the fingers on Braille).
Could be that’s considered a “decorative” image, however it should have a ‘null’ attribute set in any event – as I see it today there is simply no alt text.
Looks like another one off the list, unless we can reach out to the site owner?
Hi, several points:
1 If you read the guidelines properly, the number of characters per line does not have to be set at a maximum of 80, it has to be so that the window width, if reduced to 80 characters, does not cause the horizontal scroll bar to appear. We’re talking Liquid Layout here. And it’s contained in SC G204 – https://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/G204 This is actually the first option under ‘Second Requirement: Techniques to ensure width is no more than 80 characters or glyphs (40 if CJK)’
2 Setting to 80 characters, as with setting to 1.5 spacing, means that a lot of us with cognitive impairments, ie the people for who 1.4.8 was written, can’t actually use the web site. Some people need 80 max and 1.5 spacing, for the rest of us, setting to those alone, ie no ability for longer line lengths and single spacing, cause glare and makes the site impossible to use.
3 Just to give some ‘evidence’ as to my credentials in this, I wrote C23 and C25, which are the first two options under ‘First Requirement: Techniques to ensure foreground and background colors can be selected by the user’. I was also heavily involved in sorting the rest of the requirements and techniques into most beneficial first.
4 My web site is triple A compliment, but if you are going to put it through an 80 character auto tester, it will fail as it’s written to G204. Similarly, for the line spacing it meets the fourth requirement via G188.
5 My web site is – http://www.bristolanddisabledarchers.org.uk/
Sheena
Hi Sheena,
Thanks for this awesome reply, really useful. Would you be able to advise a little on how I can better explain the 80 characters ruling, would love to improve my book if you’d take a look at it?
I’m on luke@wuhcag.com anytime 🙂
Hi Sheena,
I am looking for examples of AAA level websites and I found the link to your site in this post. I made an automatic test for your site and found it may fail H2 – https://www.w3.org/TR/2008/NOTE-WCAG20-TECHS-20081211/H2 .
I checked the DOM manually and found that actually there are two consecutive image links to the same resource. I’m referring to those inside the divs with #titlel and #titler pointing to index.html. For me it makes sense that this is something which shouldn’t be done, but I’m not a specialist in the field. Could you shed some light over this issue, please?
Hi Luis,
This is a combination of several of the guidelines:
1.1.1, ie ‘All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A) ‘
2.2.4, ie ‘Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)’
2.2.9, ie ‘Link Purpose (Link Only): A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general. (Level AAA) ‘
3.2.4, ie ‘Consistent Identification: Components that have the same functionality within a set of Web pages are identified consistently. (Level AA)’
Logos at the top of the page are ‘expected’ to go to the home page, therefore there is no visible link text, which is perfectly acceptable and standard across the industry, so anyone using the site visually would (or should) expect both logos to go to the home page.
For people using screen readers, however, they need text that lets them know the image-used-as-a-link is there (so you cannot put a ‘nul’ alt on the images). When it come to describing images, you don’t describe what the image is, but it’s function, so both images have an alt text of ‘Home’, which meets both 1.1.1 and 3.2.4, ie describes the function of the image and that links to the same destination have the same text, albeit in this case, the alt text.
2.2.4 and 2.2.9 are met as the link destination can be determined from the link text alone, ie Home.
There is no ruling anywhere that says that you cannot have two different images going to the same destination, it’s all about the link text.
H2 looks solely at combining an images and it’s adjacent text into one link – I haven’t done that – the visible text is not a link. Had I have chosen to make the whole ‘banner’ a link, I’d have put one link that encompassed both of the images and the text and then put ‘null’ alt text on the two images (as per H2). The reason I didn’t do this is because I use ‘liquid layout’ and float the two images into place. I chose this method to avoid the sideways scroll appearing when using large print and/or narrowed window. The two floats have to go in separate divs to each other and the text which then defaults to the middle. Hence the two logos are links, but the text isn’t.
I think you may have latched onto this bit ‘When the text alternative for the icon is a duplicate of the link text, it is repetitive as screen readers read the description twice.’ But as I said, I have no link on the text.
One word of warning about auto checkers, they’re useless. We also get a fail for having white bands next to white backgrounds. These white bands abut the blue bands that create ‘page delineation’ for the navigation. The problem is the background of the page isn’t white, it’s ‘automatic’, so will display in any colour combination that a user needs. The reason for the white bands is that if someone is using a dark page background, the blue band that shows well on a light background doesn’t show on a dark background, but the white band does.
None of the autocheckers can cope with ‘automatic’ settings for either text or background colours. They also cannot check whether link texts are appropriate (hence why you got the fail), nor if any information, eg ‘help buttons’ disappear when you over-ride specified colours, etc, etc, etc.
I’ve seen many people claim passes because they’ve used an autocheker, but are actually fails as essential info disappears in over-ride.
Hope that helps.
Sheena
Thanks Sheena for your thourough reply. I had left myself being carried away by the red in the autochecker and an adjacent links issue in a previous site I was testing. That’s the reason I thought the problem here was about these two links being too close to each other.
Everything is clear now. As you say, it seems that autocheckers are not a thing to trust in a11y.
BTW, there’s a lot more wrong with lflegal.com web site. If you override the specified colours, as I need to, thus meeting G156, the site then fails double A SC 2.4.7 Focus Visible as there is no visible focus when the page colours are over-ridden.
In addition, when you go onto their site help page, if you are in over-ridden colours, the bullet points disappear making a nonsense of the page in certain screen sizes (my default one for a start). This is because they have coded the bullet points in as background images, despite using a standard
<
ul> listing – Doh.
Good luck to trying to get them to change things – I tried years ago and they ignored me.
Sheena