This page contains lists of pages and websites that either exhibit specific accessibility issues (which cause non-compliance) or specific accessibility features that are in and of themselves insufficient to reach compliance. The page is not intended as a hall of shame but as a quarry from which accessibility advocates and lecturers can retrieve examples of specific accessibility issues. Obviously, the links go out of date when the referenced pages get updated in a way that eliminates the issue; for this reason, the access dates are also given.
Other examples than those listed below can be found in articles such as 8 Examples Of Bad Web Design in 2021.
Websites Claiming WCAG Conformance
- Toegankelijkheid van de website, Symfoon (no date; 2022). Curiously, the sitemap referenced in the footer of the site is an XML sitemap (generared by Drupal) that was not designed for human consumption.
-
Accessibility Statement for WAI Website,
Web Accessibility Initiative (WAI) (accessed on 12.01.2023).
Quote:WAI website content posted since May 2018 fully conforms to WCAG 2.1 Level AA. It partially conforms to Level AAA.
- Verwaltungsportal Hessen: this site claims partial compliance. (The print button next to the social media buttons has no keyboard focus indicator and the chatbot in the bottom left corner doesn't seem to be keyboard accessible at all. Update June 2024: the chatbot is no longer present.)
- Toegankelijk bankieren: AnySurfer label awarded in June 2024, claiming conformance with WCAG 2.2.
- Vivalis Brussels: AnySurfer label awarded in June 2024, claiming conformance with WCAG 2.2.
Focus Order
-
Yoga Nidra for Sleep,
Sleep Foundation.
Below the navigation menus, the keyboard focus first moves to the social media share buttons on the left, then to the table of contents on the right, and only then to the article content in the middle. Strangely, the table of contents is in adiv
element with the attributearia-expanded="true"
, even though it is not implemented as a menu that can be opened and closed. (Accessed on 17.11.2023.) - Fonds social européen: keyboard focus moves top-down in “columns”, then moves to the “column” on the right. In other words, the tabbing order is not purely left to right, which is perfectly acceptable for Success Criterion 2.4.3 Focus Order. (Accessed on 17.11.2023.)
Properly Implemented Cookie Consent Dialogs
Many cookie consent forms are pop-up windows that are not modal, so keyboard focus disappears behind them. The examples listed below either have a proper modal dialog or a cookie consent form at the bottom of the page.
- Praxishandbuch KI und Recht (…), Haufe Shop. (Accessed on 28.10.2024.)
-
Ondertiteling,
Stichting Hoormij: this website does not use a traditional modal dialog but a sticky footer that traps the keyboard focus in it until the user has chosen their cookie preferences.
An interesting feature is the “AA” button, which, on hover, reveals the text
Tip: Gebruik "CONTROL +" en "CONTROL -" om in en uit te zoomen.
, thereby teaching the user to make use of the browser's built-in zooming capabilities instead of providing this as a feature in the content. However, the same pop-up or tooltip does not appear when the button receives keyboard focus. Keyboard users will find it difficult to navigate the site because the links and buttons have no visible focus indicator. The site has serious contrast issues: the white text has insufficient contrast when appearing in bright green, light blue or orange links and buttons. Orange headings on a white background also have insufficient contrast. (WAVE reports 101 contrast issues.) In addition, these links or buttons fail WCAG's criterion for non-text contrast. WAVE also reports seven missing text alternatives and fifteen empty links. The site has no accessibility statement. (The site's homepage has animated content at the bottom.) (Accessed on 21.08.2024.) - Wildling Shoes (accessed on 12.11.2023). This website also has a background video with a pause button.
-
Mercedes-Benz Museum (English)
Mercedes-Benz Museum (Deutsch) (accessed on 08.11.2023).
Keyboard focus visibility could be improved. - Stiftung Automuseum Volkswagen (accessed on 08.11.2023).
-
Conrad (accessed on 08.11.2023).
The keyboard focus stays entirely in the modal. -
Royal Bank of Scotland (accessed on 25.10.2023).
The keyboard focus stays entirely in the modal. (The site has a chatbot: "Chat to Cora".) -
ROSE Bikes (accessed on 25.10.20233).
The keyboard focus stays entirely in the modal. (The site has a chatbot in the help centre for which there is a button on the lower right corner.) -
Scientific American (accessed 21.10.2023).
The keyboard focus stays entirely in the modal; focus visibility could be better. -
Urban Outfitters (accessed 21.10.2023).
The keyboard focus stays entirely in the modal. -
Skims (accessed 21.10.2023).
The keyboard focus stays entirely in the modal. There is another pop-up that appears earlier than the cookie consent dialog. - Kylie Cosmetics by Kylie Jenner (accessed 21.10.2023).
-
Kylie Cosmetics (accessed 21.10.2023).
The cookie modal is fine (keyboard focus stays entirely in the modal), but the pop-up that remains after confirming the cookies is not modal. - Bubble Skincare (accessed 21.10.2023).
- Hootsuite.
Pages Featuring Various Accessibility Issues
Low Contrast
-
ANTOU Design - Designer Stationery & Lifestyle Object (Taiwan):
Axe DevTools finds 20 contrast issues and 18 links without discernible text.
ARC Toolkit finds 66 contrast errors, 17 images with a
title
attribut and an emptyalt
attribute, 18 links without link text and several other issues worthy of an alert. The page also contains a carousel that cannot be paused or stopped. (Accessed on 21.10.2024.) - Akira Drake Rodriguez: the top of the page has some white text over a background image that is not dark enough to provide enough contrast. (Accessed on 30.07.2024.)
-
How to Pull-Up SUPER High | Defy Gravity
(CHRIS HERIA on YouTube, 9:53 minutes, 04.02.2021).
This video has closed captions, but early on, the video displays white text on a background taht contains some very light parts. (Accessed on 24.06.2024.) -
Color & Vision:
WAVE flags 21 contrast errors on this page, which, ironically, includes a low-contrast link asking
What is Color-Blindness
. (Accessed on 06.05.2024.) - Tanya Timal (photographer): site with contrast issues, animations, etcetera. (Accessed on 08.03.2024.)
- Curriculum Vitæ of Ivan Enderlin: some sections have a semi-transparent background, some section have white text on a light background. (Accessed on 01.03.2024.)
- Accessibility —Euro Space Center: shamelelessly using very low contrast on the accessibility page. (WAVE found 33 contrast errors in February and 34 contrast issues in August 2024.) (Accessed on 20.02.2024 and 12.08.2024.)
- Gröner, Stefan; Heinecke, Stephanie:
Kollege KI:Künstliche Intelligenz verstehen und sinnvoll im Unternehmen einsetzen. Redline Verlag, 2019.
ISBN 978-3-86881-749-2.
Low contrast on an image background. (Accessed on 18.01.2024.) - Ella Fitzgerald: the social media icons at the top of the page are light gray on a white background. (Accessed on 31.12.2023.)
- Books for intermediate Python programmers: many contrast issues. (Accessed on 21.12.2023.)
- SKITTLES® Official Website : low contrast issues in the pop-up and elsewhere on the homepage. Shared by Kaye Moors on LinkedIn, 06.12.2023. (Accessed on 06.12.2023.)
- XeroShoes.eu: WAVE reports dozens of contrast issues, for example because of white text on a light blue background or light green text on a white background. (Accessed on 12.11.2023.)
- Einfache Sprache vs. Leichte Sprache – wo liegt der Unterschied?. Interestingly, WAVE and Axe DevTools mark only the white text on a light green background as contrast issues, even though purely visually most of the page seems to have low contrast. (Accessed on 08.11.2023.)
- Ashida Kim: this website has several other issues, such as missing text alternatives and empty link texts. (Accessed on 08.11.2023.)
- Mercedes-BenzMuseum: some grey links on a black background. (Accessed on 08.11.2023.)
- Marcinska, Sandra: Sport und Gehirn: Macht Laufen schlau?, Achilles Running, 03.11.2023 (accessed on 04.11.2023). Low contrast in cookie diaog.
- So wirkt Joggen auf die Gesundheit, Laufcampus blog, 04.11.2023 (accessed on 04.11.2023). Low contrast in cookie diaog and in white text on light green header.
- Free Math Tutorials at GCFGlobal, GCFGlobal (accessed on 01.11.2023).
-
Mathe-SkillsauchnachderSchulegefragt,
Deutschlandfunk Nova, 30.10.2023.
Low contrast due to a background image and low contrast social media buttons. (Accessed on 01.11.2023.) - Accompagnement accessibilité (Urbilog): this accessiblity consultancy's page about its accessibility services contains severl contrast issues. (Accessed on 21.10.2023.)
- Fiverr: this site gets several things wrong. It contains a carousel that play automatically and cannot be paused; keyboard focus does not seem to be visible except for the links at the top of the page; on load, the page displays two pop-ups (one asking whether you want the site to be translated, another asking you to use your Google account to sign in) that do not seem to be keyboard accessible. (Accessed on 21.10.2023.)
- RussBell: Good Chess Books for Beginners and Beyond, Chess.com Blogs, last updated on 27.09.2023 (last accessed on 14.10.2023). Some text is dark red, blue or green on a very dark gray background; some text is even black on the same dark gray background.
- Modèles de formulaire de contact - Exemples gratuits, forms.app: at first sight, most examples offered here have contrast issues. (Accessed on 29.05.2023.)
- Pluckrose, Helen:
How French “Intellectuals” Ruined the West: Postmodernism and Its Impact, Explained,
Areo, 27.03.2017 (accessed on 05.04.2023).
Header with white text on a black-and-white photograph that mostly consists of light shades of grey. - Boost: the initial animation uses white text on a background that has a yellow-to-orange gradient. (Accessed on 22.02.2023.)
- Spline → Mechanical & Electrical Engineering Experts: WebAIM's WAVE reports 6 contrast issues (there is black text on a red background) and three linked images without a text alternative. (Accessed on 22.02.2023.)
- Boogie Lover Band | Disco Dance Band Perth: WebAIM's WAVE reports 8 contrast issues, 23 empty links and various other issues. (Accessed on 22.02.2023.)
- Zero: WebAIM's WAVE reports 6 contrast issues, 10 linked images without a text alternative and various other issues. (Accessed on 22.02.2023.)
- Strangers and strange lands in Shakespeare's Richard II: WebAIM's WAVE reports 61 contrast errors, 3 missing text alternatives, 1 linked image missing a text alternative, 3 missing form labels, 8 empty form labels, 2 empty links, 1 broken ARIA menu. (In addition, there are many alerts.) (Accessed on 25.01.2023.)
- Bart Peeters: WebAIM's WAVE reports 13 contrast errors and one other error (an empty link). (Accessed on 23.01.2023.)
- Jan Leyers – Belgisch muzikant, auteur en televisiemaker: all 54 errors reported by WebAIM's WAVE are contrast errors. (Accessed on 23.01.2023.)
- Belle Perez: WebAIM's WAVE reports 16 contrast errors and seven other errors (three empty buttons and four empty links). (Accessed on 23.01.2023.)
-
Bookshelf Organization,
Boosonal, 28.05.2016.
There is a semi-transparent background behind the comments so the background image causes contrast issues with the comments. -
Digital accessibility and inclusive design,
Atos: most of the text is white on a black background, but some of the texs is blue (
#0596ff
) on black (#0f0f0f
), which gives a contrast ratio of 6.22:1. This contrast ratio is sufficient, even though it seemed insufficient on visual inspecion. The brownish text (#b88d00
) has a contrast ratio of 6.25:1, which is also sufficient, even though it seems on the low end at first sight. -
Elemelingua: low contrast in orange Reject button (white text on
#e68c2d
background) and the blue accept button (white text on#2f8ae5
background), the orange heading “Who are our courses for?” (#e68c2d
text on white background), etcetera. (Accessed on 07.12.2021, 19.10.2023.) - Anatomy & Strength Training: Without Specialized Equipment, Meyer & Meyer Sport (accessed on 16.01.2022).
"Yellow text on white background (button in cookie pop-up), white text on yellow background (breadcrumb trail): Immer mehr Krankenhäusern droht Insolvenz (accessed 24.01.2021).Issue no longer reproducible on 19.19.2023.DAAD-Kompetenzzentrum Internationale Wissenschaftskooperation (KIWI): Wissenschaftskooperationen zwischen „anything goes“ und „roten Linien“ – Zusammenarbeit unter komplexen Rahmenbedingungen gestalten: low contrasst due to light green text on a white background (sample text; contrast ratio: 1.89:1). Also no meaningfulPage not available on 19.19.2023.title
element (Programm) and first heading represented by an image containing text with just the alt text “Header”. (Accessed on 11.05.2021.)- Grey on white, green on white: Tee - Gesundheit aus der Tasse - GesuenderNet (accessed 24.01.2021, 19.10.2023).
- Madelaine Dickie: low contrast in the top navigation bar. (Accessed on 22.04.2022.)
- Law Industries: menu on the left: gray text on black background. (Last accessed on 28.04.2022.)
- Germanistik - SKULIMA Wissenschaftliche Versandbuchhandlung: background colour of fly-out menus for Germanistik (yellow), Slavistik, Sprach- und Literaturwissenschaften (orange): low contrast with the white text.
- Winter Verlag: Fachgebiete New Publications: see colour contrast on hover over certain links in the sidebar on the left: Indogermanistik, Orientalistik, Ethnologie, Musicology. (Last accessed on 28.04.2022.)
-
Covid Data Transparency Index (CDTI),
TotalAnalysis.
The main table has a black background with columns that use various colours for the text. The contrasts look weak but pass the contrast test: “Transparency”:#ff8000
(contrast ratio: 8.34:1), “Management”:#f672a7
(contrast ratio: 7.88:1), “Usage”:#ff66ff
(contrast ratio: 8.60:1), “Coverage”:#4fc6e1
(contrast ratio: 10.50:1). (Last accessed on 28.04.2022.) - Narrativa Inglesa II: blue links on a background using a blue repeating background image. (Last accessed on 28.04.2022.)
- Thorkelson, Eli: Steve Fuller on bad writing, decasia, 20.02.2009. Light gray text on a white background. (Last accessed on 28.04.2022.)
- GELIJKE RECHTEN VOOR IEDERE PERSOON MET EEN HANDICAP - Grip: low contrast in three links at the top (next to the search form) and in the headings in the footer. (Accessed on 28.11.2022.)
- Mensen met een beperking aan het woord: low contrast in header. (Accessed on 28.11.2022.)
Relying on Colour or Other Visual Characteristics
-
List of characters in Earthsea,
Wikipedia.
See the following instruction:
True names are shown in red, use names in blue. Child names, names of unknown status and nicknames are in green. Kargish names are in orange.
Issues Regarding Text Alternatives
-
EU officials offered hotline for ‘clear writing’,
Euractiv, 18.11.2019. (Accessed on 17.09.2024.)
The image is named "orban.jpg", has an emptyalt
attribute and does clearly not represent Viktor Orbán. -
Mittelalter Shop - MTH Melbars Tröpfelhandel:
keyword stuffing in the logo's
alt
attribute:<a href="https://www.melbar.eu" title="MTH www.melbar.eu"><img src="https://www.melbar.eu/images/Header-83.png" alt="Mittelalter Shop | MTH Melbars Tröpfelhandel | günstig online einkaufen im Mittelalter-Shop günstig kaufen | LOGO MTH Mittelalter Shop " class="headerLogo"></a>.
(Accessed on 20.01.2024.) -
All Sites – Stack Exchange (filter: Life & arts):
Stack Exchange sites are represented in a grid. Each site is represented by means of its name and a kind of logo.
The logo uses an
img
element without analt
attribute. Example:<div class="gv-item-collapsed-wrapper"> <h2 style="color: #222;">Music: Practice & Theory</h2> <img src="https://cdn.sstatic.net/Sites/music/Img/icon-48.png" class="site-icon"> </div>
- Paul Michiels: WebAIM's WAVE reports one missing text alternative and 17 linked images missing alternative text. (Accessed on 23.01.2023.)
- Kate Ryan: WebAIM's WAVE reports 16 errors, including six missing text alternatives, 6 linked images without a text alternative and three missing form labels. (Accessed on 23.01.2023.)
Nested Tables
- V.18 : Operational and interworking requirements for DCEs operating in the text telephone mode, International Telecommunications Union (ITU) (accessed on 17.03.2021).
- G.722 : 7 kHz audio-coding within 64 kbit/s, International Telecommunications Union (ITU) (accessed on 17.03.2021).
Carousels That Don't Move Automatically or That Have a Pause Button
- Bundesfachstelle Barrierefreiheit: carousel that can be paused and therefore meets Success Criterion 2.2.2 Pause, Stop, Hide. (Accessed on 11.05.2021.) Update 21.10.2023: the carousel no longer moves automatically; the next or previous slides only becomes visible when the user presses the appropriate buttons.
- Europäische Kommission – offizielle Website: the carousel on this page has a pause button. (Accessed on 21.10.2023.)
- DM: the top of the home page has a carousel that does not move automatically. The bottom of the page has accordions that can be used without a mouse. (Accessed on 08.11.2023.)
Background Videos, Other Animated Backgrounds and Other Autoplaying Videos
These videos and animations constitute an issue because they run longer than a few seconds and cannot be paused or hidden by users.
- Novo Nordisk: the home page has a autoplaying background video that fills the entire screen, with white text overaid on it, causing low-contrast issue. In spite of this Novo Nordisk has a page titled Why we support accessibility that suggest they take accessibility seriously. This pages contains a section claiming that the site uses access keys (an concept that has been outdated since the early 2000s), without actually listing any, a section on how to resize text (which is actualy useful) and a section titled “Help with hearing our website” that contains fake links to ReadPlease, Browsealoud and ReadSpeaker that cannot be accessed using the keyboard. (Access oon 05.11.2024.)
- BÄR Schuhe: autoplaying video that fills most of the browser window below the header section. (Accessed on 08.10.2024.)
- Joe Nimble: autoplaying background video that fills the entire browser window. This background also extends to the background of the header section. (Accessed on 08.10.2024.)
- Disability/Accessibility, Stop The Coup 2025. The subscription section has an autoplaying background video or animation with a pause button. (Accessed on 21.08.2024.)
- Folger Shakespeare Library: autoplaying background video that fills most of the screen below the header. (Accessed on 14.08.2024.)
- Bellewaerde Park: an auto-playing video covers most of the screen when the home page is loaded in the browser, i.e. the entire area above the fold, except for the page header. (Accessed on 05.07.2024.)
-
The President | European Parliament:
an auto-playing video covers most of the screen when the home page is loaded in the browser. There is not button to pause or stop the video.
The code that loads the video is as follows (just the start tag is given here):
<video aria-hidden="true" autoplay="" class="video" loop="" muted="" playsinline="">
. If you're lucky, you try right-clicking on the video and notice the "Pause" option in the context menu (at least in Firefox), but this method is not keyboard accessible. (Accessed on 03.06.2024.) - The Entrepreneurial University - TUM: the page contains an autoplaying video but it has a pause button in the lower right corner. (Accessed on 04.05.2024.)
- Tarquin Group: autoplaying video in a carousel. (Accessed on 23.04.2024.)
- Youth Voices of Europe – Youth for the Future: autoplaying video behind a semi-opaque background. The same issue can be found on the website lug open factory, who seem to be behind this website. (Accessed on 12.04.2024.)
- OpenCV.ai: autoplaying video behind a semi-transparent background that fills the entire initial screen. (Accessed ono 27.02.2024.)
- Euro Space Center: autoplaying video behind a semi-transparent background that fills most of the initial screen. (Accessed on 20.02.2024 and 12.08.2024.)
- devocion.com: autoplaying video that fills almost the entire browser window. (Accessed on 07.02.2024.)
- G-Force Training Systems / gravityforcetraining.com: the top of the page contains an autoplaying video on a loop. (Accessed on 29.01.2024. The company is based in Torino, Italy.)
-
Hippo AI Foundation: the top of the page contains an animation using a grid of
div
elements that ripple like a wave. There is no way to pause, stop or hide the animation. (Accessed on 07.01.2024, 19.08.2024.) - Replit: autoplaying animation filling the entire browser window, without a mechanism to pause, stop or hide it, except by scrolling down. After scrolling down, there are other animations, such as a marquee. (Accessed on 05.12.2023.)
- Security Risk Ahead: this video contains an autoplaying video that runs for five or six seconds. (Accessed on 05.12.2023.)
-
Sofico: the top of the page contains an autoplaying background video, but there is a pause button in the lower right corner.
Curiously, this site has no less than four skiplinks. However, the button for opening the cookie settings (colour:
#ffc823
) has a contrast issue so it fails success criterion 1.4.11. (Accessed on 12.11.2023.) - Bahé: autoplaying video that takes up almost the entire height (and the endtire width) of the screen. In addition, white text on a transparent layer over the video has a low contrast ratio with some parts of the video. (Accessed on 12.11.2023.)
- Wildling Shoes (Wildling (Deutsch): background video on a loop in the top section: this video has a pause button in the upper right corner, but its visibility might be better. (Accessed on 12.11.2023.)
- Stiftung Automuseum Stuttgart: background video that takes up most of the screen except the top navigation and a narrow footer. In addition, the links in the top navigation menu have low contrast on hover. (Accessed on 08.11.2023.)
- Willkommen im Mercedes me Store: the top of the page contains a background video of around 15 seconds on a loop. (Accessed on 08.11.2023.)
- Zeit, gemeinsam zu handeln - gemeinsamfuer.eu: autoplaying video at the top of the page without a mechanism to stop, pause or hide it. (Accessed on 07.11.2023.)
- Museum Hegel-Haus (Stuttgart): animation at the top of the page taking up much of the screen. (Accessed on 08.11.2023.)
- Kann man Mathe alleine lernen?: not a background image but a regular video (without audio) at the top of the page.
- Beis Travel: this page has a non-modal pop-up prompting visitors to choose between the American and the European site. Keyboard focus does not apprear to be visible. In addition, there is an automatically playing video in the background. (Accessed on 21.10.2023.)
- THEOplayer: background video on the homepage. The presence of background video is ironic in view of THEOplayer's accessibility claims. (Accessed on 17.04.2023, 21.10.2023.)
-
The University of Texas at San Antonio (UTSA): homepage:
the header contains a page-wide (background) video that plays automatically for longer than 10 seconds.
There is a pause button in the bottom left corner, but it has no visible keyboard focus. (Accessed on 18.05.2022.)
Update 21.10.2023: the pause button now has a visible keyboard focus (tested in Firefox and Edge). - Ergotopia: Ergonomische Büromöbel und kostenlose Gesundheitstipps: background video in top half of the page (25.03.2022, 21.10.2023).
- Ergonomischer Stuhl/Balance-Hocker | Rückenprobleme vermeiden | Backapp: background video in top half of the page (15.02.2022, 21.10.2023).
- Polyphony Project: automatically playing video at the top of the page. (Accessed on 02.05.2022, 21.10.2023).
Brightcove Player: website about a web-based video player. The upper half of the page has an automatically playing background video that cannot be paused. The video also flickers, but probably not enough to violate the flash threshold. (Accessed on 07.07.2022.)Update 21.10.2023: there is no longer an automatically playing video.
Carousels and Other Animations
These animations constitute an issue if they run longer than five seconds and cannot be paused or hidden by users.
- Other Press: the home page has a carousel at the top of the page (with buttons to move to a specific slide) and another one a bit lower (with previous and next buttons). Neither carousel has a button or other visible mechanism to pause or stop it. (Accessed on 12.11.2024.)
- Marek Gibney: the left half of the page contains an animmation that cannot be stopped or paused. (Accessed oon 24.09.2024.)
- Latin American Literary Review: the website's homepage has a carousel with a pause button in the upper right corner. (Accessed on 02.09.2024.)
-
Verlagswesen – Was die Insolvenz von Bücher.de bedeutet,
LITERATURWELT.net, 23.07.2024.
This page has a sidebar on the right with content that automatically scrolls upwards (like a vertical carousel) and both a fast-moving marquee and a horizontal carousel below the article itself. (Accessed on 27.08.2024.) -
Sonamos (redirected from www.sonamos.com.ar:
animated background (slanted stripes passing over the background).
Note also the issue in the
title
element:<title>s o n a m o s | Instagram, Facebook | Linktree</title>
(Accessed on 15.04.2024.) - Jones & Bartlett Learning: Mathematics: carousel that movess automatically and cannot be paused. (Accessed on 25.03.2024.)
- Integrated Reasoning: animation of a grid of grey dots on a dark background that fills almost the entire page. (Accessed on 08.03.2024. 8 March 2024 site of the day.)
- Kreativagentur & Neuromarketing Kochstrasse™: this page contains several animated GIFs. (Accessed on 06.12.2023.)
- Bahé Revive, Bahé: ticker tape at the top of the page. In addition, the buttons to move through the images of the shoe have low contrast with the background images in the “carousel”. (Accessed on 12.11.2023.)
- Bloomsbury Publishing (UK): carousel that moves automatically, unless the mouse pointer hovers over it. (Accessed on 21.10.2023.)
- xanthir.com: the home page displays green text on a black background in the style of an old DOS terminal. The main issue is the blurring and skewing effects that run in a loop. (Accessed on 21.10.2023.)
- Branding & Digital Design - Orangery®: animation or carousel that takes up most of the browser window and that cannot be paused, stopped or hidden. (Accessed on 22.02.2023, 21.10.2023.)
- Typora: animation that imitates markdown code being typed, withoout a mechanism to pause or stop it. (Accessed on 13.02.2023, 21.10.2023.)
- spirou.com: the top of the page contains a carousel that uses the entire width of the browser window and that cannot be paused, stopped or hidden. The page also has a non-modal cookie pop-up. (Accessed on 19.02.2023, 21.10.2023.)
-
Stack Overflow (homepage):
this contains a text-based animation that changes the second word in
Every developer has a tab open to Stack Overflow
every second. This is done by manipulatingclass
attributes onspan
elements by means of JavaScript. There is no mechanism to pause, stop or hide the animation. (Accessed on 11.01.2022, 21.10.2023.) -
Antoine de Saint Exupéry: large carousel at the top of the page. Some of the slides contain videos that play automatically.
There is something that looks like a paus button at the bottom of the carousel (
<a class="ls-nav-stop" aria-label="stop slideshow" href="#"></a>
), but due to its transparent background, it is easy to overlook on some of the slides. Just above the footer, there are also bare URLshttps://www.lepetitprince.com
. (Accessed on 21.10.2023.) - ASCon Systems GmbH - The Digital Twin Company (English) /ASCon Systems (German): video or animation that fills much of the page. (Accessed on 02.05.2022, 21.10.2023).
- The man who wasn't Hamlet: animated top half of page. (Accessed on 18.01.2022, 21.10.2023.)
- ETSI: animated background in the header section, inside a carousel (accessed on 08.09.2021, 21.10.2023).
- Eat Genesis uses SVG animations. There is no visible keyboard focus. (Accessed on 22.06.2021, 21.10.2023.)
- What Role Does Estrogen Play in Muscle Strength?, Cathe Friedrich, 31.01.2016; accessed on 05.08.2021, 21.10.2023). This page has a video on a loop in the header section.
- Wormhole (file sharing): animated background that represents a wormhole (background image slowly rotates around the centre). (Accessed on 15.06.2021, 21.10.2023.)
-
Myprobe: animated background using an
iframe
that loads a page containing acanvas
element. (Last accessed on 11.05.2021, 21.10.2023.) - psychoslinux.gitlab.io: background video. (24.01.2021; last accessed on 11.05.2021, 21.10.2023.)
- Verlag Vittorio Klostermann: carousel that cannot be paused or hidden. (Accessed on 11.05.2021, 21.10.2023.)
China asks officials to halt mandatory coronavirus vaccination, Business Standard (India), 12.04.2021.Update 21.10.2023: the animation is no longer present.
Section "Just in" below the header: this has a play/pause button and previous/next buttons. (Accessed on 13.06.2021.)The 2 of July – Independence of Brazil in Bahia Salvador da Bahia — Official Website (no date; accessed on 28.11.2021).Update 21.10.2023: the animation is no longer present.
This page has a favicon that constantly switches between three background colours: red, light blue and yellow.- KOC – Kenniscentrum Hulpmiddelen: startpagina: the left-hand side of the home page contains an animation with a button below it to stop it.
-
Waaark - Creative Web Studio - 2011 / 2021: SVG animations. (Accessed on 30.11.2022.)
Update 21.10.2023: there are animations that play at load time and that last no longer than five seconds. 版塊設計 Block Studio: this page has a ticker tape at the top of the page, an animated map (usingUpdate 21.10.2023: the ticker tape is no longer present but the page still contains other animations.canvas
that fills largest part of the screen, and SVG animation in the right-hand part of the page. (Accessed on 30.11.2022.)- Wehubit: background video on the homepage. (Accessed on 13.04.2023.) The video was replaced by a carousel without a pause buttton between April and October 2023.
CodeAbbey has two animated GIF images below the image of the abbey. (Accessed on 18.11.2021.)Update 21.10.2023: the page no longer has an animation that play for more than five seconds.Aufklärung im 21. Jahrhundert: animation at the top of the page (entire width of the page) and no way to pause it (not even with mouse hover). (Accessed on 31.12.2021.)Update 21.10.2023: the domain is for sale.Font size conversion px-pt-em-rem-percent webSemantics(snowflakes, on 10.12.2020; not when accessed on 24.01.2021, 21.10.2023).Bücher und Kuriosa - Verlag Faber und Faber: ship that slowly moves across the header (accessed on 04.102.2021).Update 21.10.2023: the animation is no longer present.
Animated GIF were very popular in the late 1990s and early 2000s but have become less common on websites (except social media). See for example 11 Best Old School Animated GIFs (by Sam Greenspan, 2008, updated in 2018), the archive at textfiles.com, and GifCities.
- Stanley, Pablo:
Designing for accessibility is not that hard,
Inside Design Blog, 06.11.2018 (accessed on 28.09.2021).
This article about accessible design contains eight animated GIFs that are on an endless loop. The authors were not aware that this may distract certain types of people. UX Collective originally published the article on 27.06.2018 (including the animations). - Animated logo: Ethical Systems (last accessed 24.01.2021).
- Animated logo (top left) and e-mail image (bottom centre): L'aménagement linguistique dans le monde: page d'accueil. (Accessed on 28.04.2022.)
- Maupassant, le passeur d’images. (Animated GIF at the bottom; web page created with Microsoft Word 11. Accessed on 12.04.2021.)
- Slaski, Dan: Things to Stop Saying: “I Know Enough to Be Dangerous”, SolidSmack, 24.06.2020. (Several animated GIFs.)
- La baraque aux arts: intro animation that lasts around 12 seconds. (Last accessed on 28.04.2022.)
- Should I Use A Carousel? (accessed on 17.06.2021).
- Sandwich Tribunal. A sort of sandwich death panel (accessed on 25.08.2021). When one has scrolled down a bit, every few seconds, the content scrolls up or down a bit.
Flashes or Flashing Content
-
The Equalizer (2014) - Journey to The Equalizer 3 - Movie Review
(The Teenage Movie Critic on YouTube, 4:19 minutes, 15.08.2023; accessed on 11.10.2023).
The first 33 seconds of this video switch so quickly between mostly dark and mostly bright images that the result probably violates WCAG's success criterion for flashing. - Useful Idioms, The YUNiversity: flashes in the image for the idiom “put out the fire” (accessed on 09.04.2021 and 04.07.2021).
- Teleport: the website's homepage contains a large video that start playing automatically and cannot be stopped or paused by the user. Some sequences in the video violate the flash threshold. (Accessed on 28.04.2022.)
- Kartin Eupen: the website's homepage contains a large video that start playing automatically; fortunately, there is a pause button in the lower left corner. The video contains several sequences that violate the flash threshold. The animations will make some people with vestibular disorder sick. (The original video is 2020 Karting Eupen Final File HDavi from Pixelbar PGmbH on Vimeo.) (Accessed on 28.04.2022.)
- Some YouTube videos contain sequences that violate the flash threshold and may cause epileptic seizures, for example, RICK & MORTY ON ACID (Trippy Video) and Astrix - Deep Jungle Walk [Hommega Productions]. (Accessed on 28.04.2022.)
- Judas Priest - Painkiller possibly violates the flash threshold.
Autoplaying Video (with Audio)
AdaComply: automatically playing video that warns againstgreedy lawyers and shady individuals who are taking business owners to the cleaners with a bunch of frivolous lawsuits aimed to get those same lawyers a quick payday
. Other accessibility issues on this page include empty heading elements, and images with the the attributealt="Default Alt Tag for this page"
.
Invisible or Barely Visible Keyboard Focus
- What the Dickens: What Does Dickensian Really Mean?, Faber and Faber, 09.06.2023. See also Faber. The keyboard focus is not visible at all. (Accessed on 14.10.2024.)
-
Register of delegated and implementing acts,
European Commssion, European Parliament and European Uion.
The keyboard focus is not visible unless one activates the easily overlooked button “Active accessibility Styles” in the upper right corner. Activating that button makes keyboard visible by means of a yellow outline (colour code#ffd617
) that has a contrast ratio of 1.41:1 with the white parts of the page, of 3.5:1 with the light blue (#3d72b1
) parts of the page and of 6.6:1 with the darker blue (#004494
parts of the page. In other words, even the so-called accessible styles don't provide a good enough keyboard focus indicator on a white background.
In addition, the page contains a caroousel that can' be paused, stopper or hidden by the user, and thebody
element has the attributerole="main"
, which does not make sense. Axe DevTools also reports a missinglang
attribute on thehtml
element and links without discernible text. (Accessed on 24.09.2024.) -
Search results for Magnificent Rebels: The First Romantics and the Invention of the Self”,
Knopf Doubleday Publishing Group (accessed on 27.08.2024).
Keyboard focus is not visible when tabbing through the search results. When you press Enter while the focus is on a search result, you get a non-modal pop-up that you cannot close using the keyboard because the keyboard focus is still on the content behind the pop-up. In addition, the page title is not updated to reflect that the page now displays search results; in only saysKnopf Doubleday
. - JetBrains has a good keyboard focus indicator on most of the homepage. (Accessed on 06.12.2023.)
- When you access Gorewear, chances are that you get a pop-up asking you whether you want to go to a different language or country version of the site, e.g. the Belgian Gorewear site. When you try to tab anywhhere while that pop-up is still open, there is no visible keyboard focus. (Accessed on 05.12.2023.)
- Otto: no visible keyboard focus anywhere on the home page. (Accessed on 08.11.2023.)
- Linden-Museum Stuttgart no visible keyboard focus anywhere on the home page. (Accessed on 08.11.2023.)
- a & o Gruppe: keyboard focus in the cookie pop-up (which is not a proper modal dialog) is not visible except on the link (where it is barely visible). (Accessed on 25.10.2023.)
- Glossier: keyboard focus is entirely invisible. (Accessed on 21.10.2023.)
- Kylie Cosmetics by Kylie Jenner: keyboard focus is invisible inside the menus at the top of the page. (Accessed on 21.10.2023.)
- Alo Yoga: the page does not seem to contain any elements with a visible kayboard focus indicator. In addition, the top of the page contains a carousel without a pause button. (Accessed on 21.10.2023.)
- CoSchedule: barely visible keyboard focus. After a while, the page spawns a non-modal pop-up that allows the keyboard navigation to disappeare behind the opaque overlay. This pop-up contains an animation that cannot be paused. (Accessed on 21.10.2023.)
- CoolTool: the links have hover effects but no visible keyboard focus indicator. (Accessed on 17.01.2023.)
-
Gradient Swatches — CSS Gradient:
keyboard focus is totally invisible. This website's stylesheet uses rules such as
a { text-decoration: none; }
,a:hover { outline: none; }
anda:active, a:focus { outline: none; }
. (Accessed on 12.01.2023.) - Online-Shop – Boehringer Ingelheim Vetmedica GmbH: keyboard focus is totally invisible. (Accessed on 12.01.2023.)
- Gil, Austin:
Just Use Rem: Choosing between Pixels and Rems in CSS,
HackerNoon, 08.12.2022 (accessed on 12.01.2023).
The keyboard focus is barely visible. - SKULIMA Wissenschaftliche Versandbuchhandlung: the fly-out menus on the left don't open on keyboard focus but can be tabbed through. Since the menus remain closed, the keyboard focus is invisible inside the menus.
- World of Dante:
dl
element (withid="imap"
) that uses a background image; inside this list, thedt
element contains an absolute positioneda
element with a background image. -
Random Password Generator (Avast):
the page contains a slider for password strength that uses an
input
element with the attributetype=range
. The slider can be moved using the keyboard, but only if you can guess when it has received keyboard focus. (Accessed on 11.01.2022.)
Keyboard Trap
Since the demise of Java applets and Flash animations, keyboard traps have become rare.
-
Yoga International: the “Start your free trial” button in the top right corner seems to prevent forward tabbing past that button.
Similarly, the “Premium trainings” button at the bottom of the sidebar also prevents tabbing past it.
These are not real keyboard traps, because they don't prevent tabbing backwards.
Update July 2024: The homepage also has other accessibility issues, such as contrast issues, heading abuse (to make text larger), a large animation (below the fold), an input field for an e-mail address that has no proper label (aria-describedby
refers to the text “required”, nested interactive elements (buttons inside links in the side bar) and incorrectly usedaria-label
attributes. (Accessed on 17.11.2023, 04.07.2024.) - Juviler, Jamie:
How to Create Radio Buttons in HTML [+ Examples],
Hubspot blog, 08.06.2021, updated on 20.04.2022.
When you tab into the editable fields with code examples, you can't tab out of them again; instead, you just add tabs to the code examples.
Non-modal Dialogs That Are Hard to Reach
- Home Page - Preston City Council: the cookie consent dialog at the top of the page is not hard to reach but easy to miss for blind keyboard users: the consent dialog is the first widget after the skiplink, so blind users who activate the skiplink might miss the dialog. (Accesssed on 05.11.2024).
-
No Need to Lift a Finger Anymore? Assessing the Quality of Code Generation by ChatGPT,
IEEE Transactions on Software Engineering, Volume: 50 Issue: 6.
A few seconds after loading this page, a non-mmodal dialog appears to point out thatAccess to this document requires a subscription
and with a fake close button in the top right corern and “Learn more” and “Close” links (not buttons) at the bottom. The pop-up container (<div class="usabilla__overlay" style="...">
has no WAI-ARIA role to warn screen reader users, and accessing it requires tabbing through the entire page. (Accessed on 08.10.2024.)
Broken Modal Dialogs
- Internal Market Information System (IMI) - The EU Single Market, European Commission (no date; accesssed on 05.11.2024). A dialog that visually looks like a modal dialog contains a video without audio. The keyboard focus can move to the page content behind the semi-transparent layer behind the dialog.
- Charity Digital - Products - Recite Me, Charity Digital. The cookie consent dialog is a kind of modal dialog where pressing the Tab key allows you to navigate to just two tab stops: the scrollable area in the dialog and the screen behind it. When the keyboard focus is behind the modal, arrow keys scroll the page, but no other keyboard interaction is possible. When the keyboard focus is in the cookie consent dialog, only the scrollable area can be scrolled but rest of the dialog, such as the buttons labelled “Save settings” and “I accept” are not keyboard accessible. (Accesssed on 05.11.2024).
- Mijn Helan: keyboard focus first moves to the cookie dialog at the bottomof the page, then to the browser UI and finallyy to the page content. (Accesssed on 14.10.2024).
- Dilger, Daniel Eran: Stevie Wonder thanks Steve Jobs for making iOS devices fully accessible, AppleInsider, 15.09.2011. (Accessed on 04.10.2024.)
- Service & contact: waarmee kunnen we je helpen?, PostNL. (Accessed on 18.07.2024.)
-
Accessibility Support for the Popover Component,
Progress Design System.
The cookie dialog does not have all the visual styling of a modal dialog, since there is no semi-opaque background behind it. But the dalog appears over the regular content and the keyboard focus can simply move out of it. (Accessed on 25.06.2024.) - Fluvius: Meterstanden. (Accessed on 30.05.2024.)
- Tangerine Dream: the cookie dialog is at the end of the tab sequence. (There is no opaque overlay behind it.) The home page has a number of other accessibility issues, including low contrast (white text in a bright green background, grey text on a black background, etcetera). (Accessed on 10.04.2024.)
- Does Ibuprofen Disrupt Testosterone Production?: the subscription pop-up is not modal. In addition, the close button is not keyboard accessible. (Accessed on 12.12.2023.)
- Schule: Jugendliche weisen laut Studie weltweit Bildungslücken auf | ZEIT ONLINE: the pop-up to let visitors choose between reading the site with ads and subscribing to the newspaper is not a modal dialog. (Accessed on 18.11.2023.)
-
Grundlegende Fähigkeiten fehlen: Studie belegt "erschreckende" Bildungslücken der Jugend - n-tv.de:
the cookie dialog does not allow you to tab beyond the last link (Impressum). This is done by means of a
keydown
listener that listens for the Tab key. When tabbing backwards, the focus is allowed to move to the bottom of the page (and upwards from the point on). The dialog for Einstellungen oder ablehnen, by contrast, keeps the focus in the modal dialog inside the pop-up (without trapping the focus on the last button), but allows the keyboard focus to move to the page when tabbing backwards. Finally, the dialog that pops up after exiting the cookie settings dalog (Möchten Sie künftig direkt per Browser-Benachrichtigung über die wichtigsten Nachrichten informiert werden?
) is not a modal dialog either. (Accessed on 18.11.2023.) - Yoga Nidrā Network: the site has a subscription pop-up that allows keyboard focus to move to the content behind the pop-up. The gray button in that pop-up has an almost invisible keyboard focus indicator. (On the page itself, the navigation menubar has menus that need to be opened with the Space bar (pressing Return activates a link). Keyboard access relies on the Tab key; the arrow keys don't do anything in the menu. The website also has many contrast errors.) (Accessed on 17.11.2023.)
- Zehenspiel. The page also has low contrast issues, both in the cookie dialog and the rest of the page. (Accessed on 12.11.2023.)
- VDH: FAQs (some contrast issues also). (Accessed on 08.11.2023.)
- goFree Concepts: cookie dialog that can only be reached after tabbing through the entire page behind it. The top navigation menu is not keyboard accessible. (Accessed on 08.11.2023.)
- Kunstmuseum Stuttgart: cookie pop-up is not modal. In addition, the navigation menu at the top is not keyboard accessible. Even using it with a mouse is non-intuitive because it requires a click instead of mouse hover. (Accessed on 08.11.2023.)
- Coolblue (Germany): cookie pop-up is not modal. On the other hand, the navigation menu at the top is keyboard accessible: Enter opens the menu; Esc closes it. (Accessed on 08.11.2023.)
- Otto: pop-up promoting the Otto app is not modal.
- Urban Move® | Outdoor-Training- und Workout in Stuttgart: in September 2021, this page had an animated background in the header section (accessed on 06.09.2021), which was still present in October 2023. In October 2023, it had a cookie pop-up that was not modal, so the keyboard focus disappeared behind the opaqua overlay. (Accessed on 21.10.2023.)
- adesso mobile solutions GmbH: the cookie dialog is not a proper modal dialog: keyboard focus moves through the whole page behind the modal dialog, which sits at the end of the tab sequence. (Accessed on 16.02.2023.)
-
Skims: after confirming the cookie settings, there is a non-modal dialog entitled
Sie kaufen in Deutschland ein
. The keyboard focus disappears behind the opaque overlay. In addition, the page contains a carousel with a pause button, but in Firefox, it seems impossible to reach that button by tabbing in a forward direction; the keyboard focus gets trapped by a link above the carousel. (Accessed on 21.10.2023.) - Git Commands (Git Tower): this page is not listed here because of broken modal pop-up (it's cookie consent dialog is a proper modal) but because after the cookie settings and scrolling down, there is suddenly a full-screen modal pop-up. (Accessed on 28.10.2023.)
Live Updates
- China ranked 96th out of 100 countries in Covid data transparency index, Markets Insider, 12.01.2021. See the live updates on futures, gold and oil at the top of the page. (Last accessed on 28.04.2022.)
Navigation Menus
-
University of Georgia Press: the navigation menu at the top can only be used with the Tab key,
so it is not possible to move through it without tabbing through all the items in each menu.
The site is based on Supadu. The Supadu home page has no issue according to Axe Devtools, but ARC Toolkit gives many warnings. (Accessed on 16.11.2024.)
Linktext That Is Not Meaningful
- Shakespeare Survey Online: link text that reads “clicking here”. (Accessed on 13.08.2024.)
- How Elon Musk uses X to spread his views around the world (Fortune, 13.08.2024):
This site abuses the
aria-label
attribute to replace a link's accessible name:As X's owner and most followed user, Elon Musk has increasingly used the social media platform as a microphone to <a href="https://fortune.com/2024/08/12/elon-musk-pitches-himself-to-donald-trump-as-a-leader-to-audit-government-spending/" target="_self" aria-label="Go to https://fortune.com/2024/08/12/elon-musk-pitches-himself-to-donald-trump-as-a-leader-to-audit-government-spending/" class="sc-93594058-0 fowfrQ">amplify his political views</a> and, lately, those of <a href="https://fortune.com/2024/08/12/elon-musks-said-his-chat-with-trump-on-x-was-delayed-due-to-a-massive-hack/" target="_self" aria-label="Go to https://fortune.com/2024/08/12/elon-musks-said-his-chat-with-trump-on-x-was-delayed-due-to-a-massive-hack/" class="sc-93594058-0 fowfrQ">right-wing figures he's aligned with</a>.
-
MatheVital:
the twelve image links at the top of the page all have the same textalternative:
alt="1"
. This triggers the following alert in WebAIM's WAVE:A nearby image has the same alternative text
. WAVE also flags contrast issues on blue links on a grey background. (Accessed on 23.04.2024.) - Milmoe, Joanne:
New survey shows 89% of UK artists want the Government to better protect their work by regulating AI,
DACS, 18.01.2024.
Link named "here" at the bottom of the page that references a PDF file. (Accessed on 23.01.2024.) - Hal Leonard:
If you're looking for Backbeat Books, Amadeus Press, Applause Theatre & Cinema Books, or Limelight Editions, click here.
-
Research, The Teen Species. (Accessed on 27.07.2021.)
Example:To explore Professor Baird's publications, click here
.
See also the “here” links on the News page. - Axelle Red: WebAIM's WAVE reports five errors, four of which are empty links. (Accessed on 23.01.2023.)
- Kelly, Jack:
Million Jobs Will Be Lost Or Degraded By Artificial Intelligence,
Forbes, 31.03.2023.
One of the links uses a redundantaria-label
attribute and atitle
attribute that contains a URL:<a href="https://www.key4biz.it/wp-content/uploads/2023/03/Global-Economics-Analyst_-The-Potentially-Large-Effects-of-Artificial-Intelligence-on-Economic-Growth-Briggs_Kodnani.pdf" target="_blank" class="color-link" title="https://www.key4biz.it/wp-content/uploads/2023/03/Global-Economics-Analyst_-The-Potentially-Large-Effects-of-Artificial-Intelligence-on-Economic-Growth-Briggs_Kodnani.pdf" rel="nofollow noopener noreferrer" data-ga-track="ExternalLink:https://www.key4biz.it/wp-content/uploads/2023/03/Global-Economics-Analyst_-The-Potentially-Large-Effects-of-Artificial-Intelligence-on-Economic-Growth-Briggs_Kodnani.pdf" aria-label="300 million jobs">300 million jobs</a>
(Accessed on 30.12.2023.)
Forms
-
O RLY Parody Book Generator,
DEV Community.
label
elements positioned aboveinput
elements without an explicit connection (nofor
attributes on the labels). (Accessed on 11.05.2021.) -
DinoPass - Simple password generator for kids:
the password is presented in an editable
input
field that has anid
attribute but nolabel
. (Accessed on 11.01.2022.)
fieldset
and legend
-
Create an account,
Transport for London (accessed on 12.01.2023).
legend
element withAccount type
for two radio buttons. -
Create your account,
Login.gov (accessed on 12.01.2023).
legend
element withSelect your email language preference
for three radio buttons.
Page Title
Examples where the title
element is not meaningful, missing or has other issues.
- Untitled Document, Gabriela Mistral. (Accessed on 04.11.2024.)
-
Why I Am Not Going to Buy a Computer (Wendell Berry),
Counterpoin Press:
this page has no
title
element. (Accessed on 23.08.2024.) Stelter, Brian; Darcy, Oliver: "Reliable Sources" / "Tell us what happened", CNN Business, January 2021.Page no longer online in August 2024.
Emptytitle
element:<title></title>
. (Accessed on 12.01.2021, 11.05.2021.)O RLY Parody Book Generator, DEV Community.
Two head elements, each containing atitle
element. (Accessed on 02.12.2020; issue no longer present on 11.05.2021.)
Frames
Frames, implemented using the elements
frameset
and
frame
,
were once of feature of HTML 4.
HTML 5.0 declared these elements non-conforming,
but they don't necessarily consitute of violation of WCAG 2.0 or 2.1.
- Raine Koskimaa: Digital Literature - From Text to Hypertext and Beyond (thesis, 2000). (Accessed on 06.07.2024.)
- HomePage of Marcus Hutter. (Accessed on 01.03.2024.)
- JavaTM 2 Platform Standard Edition 5.0: API Specification. (Accessed on 17.11.2023.)
- Java™ Platform, Standard Edition 7 API Specification: Overview (Java Platform SE 7) (generated with javadoc; last accessed 17.11.2023).
- Eclipse documentation (outdated version; last accessed 17.11.2023).
- rilke.de (last accessed 17.11.2023).
- enenuru.net (last accessed 24.01.2021).
- TITUS: Thesaurus Indogermanischer Text- und Sprachmaterialien.
- Wereldbibliotheek (accessed on 22.03.2021).
- Brother Death (Robert Ronnow) (accessed on 07.06.2021).
-
Joust Outliner (Ivan Peters):
a navigation system that relies on HTML 3.02, frames and
document.writeln
developed around the year 2000 and not updated since March 2001. (Accessed on 17.01.2023.)
Marquee
The marquee
element was never part of
HTML 3.2 or
HTML 4.01, and
HTML 5.0 listed marquee
as obsolete.
Nevertheless, the element is still supported by browsers and can still be found on current websites.
- Craft Recordings: marquee at the top of the page. (Accessed on 07.02.2024.)
- World Of Mind: this site has a marquee containing fake links or buttons that you need to click in order to buy tickets. (Accessed on 30.05.2023.)
- The Ukrainian Weekly: marquee at the top (accessed on 25.04.2022).
- Coronavirus in Deutschland, Bundesregierung, (accessed on 25.05.2020). Marquee with a pause button.
-
Belgien kritisiert deutsche Corona-Weihnachtsregeln,
FinanzNachrichten.de, 28.11.2020. "Ticker" labelled Ad hoc-Mitteilungen; uses
<div class="js-marque">
and pauses on hover. (Last verified on 25.02.2021.) -
België start op 5 januari met vaccineren,
Business AM, 02.12.2020. Stock exchange ticker at the top of the page; uses
<div class="o-marquee js-marquee">
. (Last verified on 25.02.2021.) - Early Office Museum: this website has a marquee ánd animated GIFs. (Last verified on 25.02.2021.)
-
eduroam Configuration Assistant Tool: uses a
marquee
element that alternates its direction. (Last verified on 25.02.2021.) -
Doublet:
marquee
element at the bottom of the page. (Last verified on 25.02.2021.) - Ireland suspends AstraZeneca vaccine as Norway investigates blood clots. (Accessed on 20.03.2021.)
- Wackett, Mike: Warning to ocean carriers: don't use canal crisis to 'price-gouge customers', The Loadstar, 30.03.2021 (accessed on 31.03.2021).
- Early Office Museum: uses marquee and animated GIFs (accessed on 31.03.2021).
- Peter Münder: 200 Jahre Fontane (Teil 2): marquee in the page header («Aktuell&rquo;) (access on 05.04.2021).
Other Moving or Updating Content
- Shakespeare Resource Cente: news items that scroll up at intervals of five seconds. (Accessed on 14.08.2024.)
Lists without List Markup
-
Clarence Bass: this page contains a list marked up with two asterisks followed by a link and a line break for each list item:
<span style="font-size: 12.0pt; font-family: Times New Roman"><br> **</span></b> <font face="Times New Roman"><b> </b></font> <font color="#0000FF"><span style="background-color: #FFFFFF; background-position: 0% 0%"><a href="quadstrength.html">Quad Strength Plummets in 80s</a></span></font>
Numbered lists are also implemented withoutol
; see the page Clarence Bass' Fat Loss and Weight Control Articles.
Mystery Meat Navigation
- Game of Thrones | Fanartikel aus Westeros | Elbenwald: the brands are identified in the navigation as “7 9 w 2 r 5 u o s v p 4 y” instead of “Harry Potter, Der Herr der Ringe, Star Wars, Batman, Game of Thrones, Marvel, Disney, Deadpool, Zelda, Supernatural, Avengers, and Rick and Morty”, respectively. For example, Game of Thrones is represented as “5”; only hovering over the link reveals the brand name. (Accessed on 25.06.2021.)
Images of Text and Complex Images
- UK Economy under Conservative Government 2010-2023
(Economics Help, 22.11.2023): Axe Devtools reports issues related to text spacing, contrast,
missing text alternatives, form elements without labels and missing link text.
Not detected by Axe Devtools are charts with
alt
attribute values such as “uk-gdp-per-capita-91-23-trend”, “growth-average-wages192”, “inflation-nov-23”, “inflation-uk-spain-france”, “uk-national-debt-10-2023” and “austerity-lower-growth”. Thealt
attribute values simply reuse the file name without the file name extension. (Accessed on 18.12.2023.) - Yirka, Bobl
ChatGPT able to pass Theory of Mind Test at 9-year-old human level,
TechXplore, 17.02.2023.
The image in this article has a short text alternative that does not describe the image and an extremely long tooltip. (Accessed on 20.12.2023.) - Authors - University of Alabama Press: both the links in the top navigation ("Home", "Books", "Authors", etcetera) and in the left-hand navigation ("Contact Us", "Facebook", etcetera) are images of text instead of text. (Accessed on 31.08.2021.)
- Pope, Colin:
We Need to Talk About the Canon: Demographics in ‘The Norton Anthology’,
The Millions, 29.04.2019.
This article contains several large infographics with an emptyalt
attribute and no other type of text alternative.
Layout Tables
- Bill Gahan: Ballad Measure in Print, English Broadside Ballad Archive: small “layout table” to lay out the nursery rhyme &lduqo;Baa, baa, black sheep”: one half is in one column, the other half in the second column. As a result, the reading order is line 1, line 5, line 2, line 6, etcetera, messing up the correct sequence. (Accessed on 02.09.2024.)
- Pope A Metaphysician! (1754), The Schiller Institute, 2005 (reprinted from Fidelio Magazine, Winter 1999).
- operators.htm: Search engines operators: contains a layout table at the top. (Accessed on 04.12.2021.)
Fake Tables
- MHonArc Home Page (accessed on 17.08.2022). This page uses the
pre
element to simlate a table:
MD5 Checksum Filename Size - Sig --------------------------------- --------------------------- ------------- 80f1f0044ce5bf2a341465e96668274f MHonArc-2.6.19-1.noarch.rpm 1947004 - Sig 6e74712a6da370c8c63b5bde7573f48f MHonArc-2.6.19.tar.bz2 1577790 - Sig d86645e67da3524574caaee8a4dde69a MHonArc-2.6.19.tar.gz 1992055 - Sig 5a2c9f5c0e6c438a607e9f786c4870b1 MHonArc-2.6.19.zip 2441451 - Sig --------------------------------- --------------------------- -------------
-
Meccano Gilde Nederland (accessed on 05.10.2022).
In addition to layout tables, this site also uses the attributes
background
andbgproperties
on thebody
element, andfont
elements.
Datepickers
- Trivago: the datepickers for Anreise and Abreise cannot be used without a pointing device. (Verified on 10.11.2021.)
- Expedia: the datepickers for Anreise and Abreise can be used from the keyboard alone, but using them requires a lot of tabbing. (Verified on 10.11.2021.)
- Vrijetijds- en vakantieaanbod VGC - activiteit overzicht. (Accessed on 20.12.2022.)
Keyboard Accessibility Issues
- Real People, Real Skills: this page does not contain a single keyboard-focusable element outside the cookie consent. Axe DevTools and ARC Toolkit don't detect any errors in this page. (ARC Toolkit only gives three alerts.) (Accessed on 23.09.2024. This website was shut down before the end of November 2024.)
-
DIGITALEUROPE - The voice of digitally transforming industries in Europe:
the website's cookie dialogue has Decline and Accept buttons that are immplemnted as
div
elements that are not accessible to keyboard users. (This issue has been present since at least June 2022.) In addition, the home page's membership section displays a rotating globe (in acanvas
element); this animation runs longer than five seconds and cannot be paused or stopped by the user. Axe DevTools reports 10 empty links (for example, the social media links contain icons without text alternatives). The form fields "Get in touch" and "Search" don't have labels, i.e. the visible text above the form fields is not in a properly connectedlabel
element; instead, there is a placeholder. (Accessed on 17.09.2024.) - Valparaíso Ediciones - Libros de Poesía: SVG-based image map is not keyboard accessible. Fortunately, the country selector at the top of the page performs the same function. (Accessed on 02.09.2024.)
- The Daily WTF: the menus at the top can be opened by hovering the mouse pointer over them but not by keyboard. WAVE also reports many other issues, such as missing text alternatives, empty links, low contrast issues and the absence of a first-level heading. (Accessed on 29.08.2024.)
- Wie nutzen Menschen mit Behinderung das Internet?: keyboard focus is not visible. (Accessed on 12.11.2023.)
- Xero Shoes Europa: FAQ: WAVE reports various types of issues: a missing text alternative, a missing form label, an empty button, eleven empty links, a broken ARIA reference and 176 contrast errors. The FAQ section uses accordions that can be used by keyboard, but due to a lack of keyboard focus indicators, sighted keyboard users can't know where they are on the page. (Accessed on 12.11.2023.)
- museen.de: the hamburger button in the top left corner is not keyboard accessible, so only mouse users can see the labels for the icons on the left. (Accessed on 08.11.2023.)
- Sephora: when the keyboard focus lands on the search field at the top, the open a pop-up that cannot be closed using the keyboard has no keyboard focus indicator.
- Seil-Shop: navigation menu cannnot be opened using the keyboard. (Accessed on 2022; rechecked on 19.02.2023.)
- Abonnements | spirou.com: the accordions don't receive keyboard focus and are not usable without a mouse. (Accessed on 19.02.2023.)
- Arsène Lupin le coffre fort de Madame Imbert - Cultivons nous: the automatic pop-up (by MailMunch) asking you to subscribe to the mailing list does not appear to be truly modal; the keyboard focus cycles through the links on the page behind the fake modal does not seem to be accessible using only the keyboard. (Accessed on 31.12.2022; rechecked on 19.02.2023.)
Video Accessibility Issues
-
Making an Infinite LEGO Domino Ring
(JK Brickworks on YouTube, 8 minutes, 08.02.2023).
This video has no spoken narrration. The actions shown in the video are only described in the subtitles, so blind users have no idea what the video is about. This video requires audio description.
Image Maps
-
Harad: section “Sigelwara Land&dquo;,
Wikipedia:
Imagemap with clickable links. Tolkien's Sigelwara etymologies, leading to major strands of his Legendarium including also the Silmarils and Balrogs.
Thearea
elements havealt
andtitle
attributes.
Language Markup
-
Cython: C-Extensions for Python: the
html
element has nolang
attribute. (Accessed on 12.12.2023.)
Abuse of Structural or Semantic Markup
-
Embroidery Trouble Shooting Page,
Sewing and (Wayback Machine). This page contains a very large number of
h3
headings with increasing large text as you go down the page. (Accessed on 28.10.2024.) - Hollister, Sean:
Intel is laying off over 15,000 employees and will stop ‘non-essential work’,
The Verge, 01.08.2024.
This article uses theem
element for italics instead of sentence stress / spoken emphasis:… which will mean a headcount reduction of greater than 15,000 roles, Intel tells <em>The Verge</em>.
. (Accessed on 20.08.2024.)
Pages With Various Accessibility Features or Tools
Externally developed toolbars or overlays:
- ATbar: developed at the University of Southampton.
- Recite Me:
- Recite Me accessibility and language toolbar user guide, Preston City Council. The “Accessibility” button at the top of the page allows you to open Recite Me using the keyboard but once you have done that it is not clear how you can use the keyboard to activate Recite Me's various functions. (Accessed on 05.11.2024.)
- Introducing Recite Me: Enhancing Accessibility for Job Seekers, Blue Arrow. Press the accessibility icon in the bottom left corner, just above the button for the cookie consent form. (Accessed on 05.11.2024.)
-
Accessibility toolbar user guide, MindWell.
Conains the following claim:
Who is it for? Best for blind or partially sighted people or individuals who prefer to listen to text read aloud.
(Accessed on 05.11.2024.) - University of London (“Accessibility Tools” in the top right corner). (No longer present on 05.11.2024.)
- Accessibility tools (GMB Union) (resize-font icon to the left of the social media links).
- ReadSpeaker:
- Listen button instructions, DEEP: The UK Network of Dementia Voices. (Accessed 05.11.2024.)
- Dementia Enquirers – a DEEP project (accessed on 05.11.2024).
- How to use the "Listen to This Page" function, NHS Wales (accessed on 05.11.2024).
- Digital Accessibility Summit am 20. Mai mit Livestream, DBSV, 06.05.2021. (Accessed on 11.05.2021.)
- Kim, Min-Chul; Bae, Seongman; Kim, Ji Yeun; Park, Se Yoon; Lim, Joon Seo; Sung, Minki; et al: Effectiveness of surgical, KF94, and N95 respirator masks in blocking SARS-CoV-2: a controlled comparison in 7 patients, Infectious Diseases, Volume 52, Issue 12 (July / August 2020).
- Browsealoud:
- Assistive Technology for People with Disabilities and Older People: A Discussion Paper by Enable Ireland and Disability Federation Ireland (DFI), FreedomTech. (Accessed on 20.07.2021.)
- BingeWith:
- Hartsock, Jenny: Don’t sign off on fat acceptance. Don’t normalize obesity., KevinMD, 01.10.2018. (Accessd on 05.08.2021.)
Widgets for contrast, background colour, font size or a combination of these:
-
The Audio Description Project,
American Council of the Blind (no date; accessed on 23.03.2021).
This site has a widget for “Larger Font”, “Reverse Colors” and “Large Font, Reverse”. - Setting a different background colour (for dyslexia or Irlen synrome):
- Irlen Institute (USA): 11 different background colours, but the chosen background colour is not remembered when navigating to another page. (The site has not accessibility statement. Accessed on 14.05.2021.)
- Irlen Diagnostic Clinic Newcastle (Australia): 12 different background colours. (The site has not accessibility statement. Accessed on 14.05.2021.)
- Dyslexia Dailey: 9 different background colours. (The site also uses Recite. The site has not accessibility statement. Accessed on 14.05.2021.)
- Braille Institute of America: button displaying an eye with a diagonal strikethrough in the top right corner: this button opens a widget that enables the user to (1) resize the font, (2) choose a different background colour, (3) highlight links and (4) reset these settings. The Accessibility Statement for Braille Institute does not mention this widget. (Accessed on 14.05.2021.)
- Easy-to-Read: contrast widget. (Accessed on 30.10.2023.)
Other examples:
-
PDFs und Co: Dokumente barrierefrei veröffentlichen,
Der Landesbehindertenbeauftragte der Freien Hansestadt Bremen (no date; accessed on 12.04.2022).
Page with sign-language video and Leichte Sprache. -
Etudes de l'UCBA,
UCBA (no date; accessed on 14.11.2022).
Page with widgets for the following: language version (French, German or Italian), text-to-speech (or audio version), text size (three sizes), high contrast (white on black, which does the cookie consent widget). - TONIC Magazin – 2010 bis 2022: website with a toggle button Gendern aus / Gendern an.
- Article on the diginomica website have buttons for &dlquo;Audio mode” and “Dyslexia mode”. The “Dyslexia mode” button enables a so-called dyslexia-friendly font. The site doesn't have an accessibility statement where these features are explained. Example: "AI software development is completely different" — how Sage plans to deliver enterprise AI with thousands of customer-specific finance models, (diginomica, 29.03.2024; accessed on 05.04.2024).
Websites or Pages for Learning Accessibility Auditing
- Voices of Europe (Council of Europe reaches 70). (Accessed on 30.07.2024.)
- Europcar: Autovermietung. (Accessed on 30.07.2024.)
- 707-Inc. (Accessed on 30.07.2024.)
- Grafzoeker. (This site uses Web Components with Shadow DOM. Accessed on 30.07.2024.)
Sites That Intercept Right-Clicks and/or Keyboard Shortcuts
Most sites that intercept right-clicks, keyboard shortcuts or both do this to prevent the copying of content.
- 5Livres.fr. (Accessed on 16.11.2024.)
-
150 password jokes, Laugh Lore.
Not really an accessibility issue, but this website uses JavaScript to prevent right-clicks and keyboard shortcuts (such as Ctrl u to view the source code, Crtl i to view page matadata in Firefox,
Ctrl Shift i and F12 to open the Developer tools and F7 to enable caret browsing.
If you want keyboard shortcuts to work, you need to make sure the caret or focus is not in the page but on the browser's UI, for example in the URL bar.
The page contains JavaScript code (not in a separate JavaScript file) that capture the Print Screen button (with the function
stopPrntScr()
), detects browsers such as Opera, Firefox, Safari and Chrome, and listens for specific keystrokes to prevent the execution of their corresponding functions. (Accessed on 12.11.2024.)
Horizontally Scrolling Page Designs
- Avantt Typeface: if you press the down arrow or the space bar, the content scrolls horizontally instead of vertically. (Accessed on 19.08.2024.)
- Audento Digital | Digital Marketing Agency in Kerala: after the loading animation (which takes about five seconds), pressing the down arrow or the space bar makes the content horizontally instead of vertically. The page also contains an animation that plays for longer than five seconds. (Accessed on 19.08.2024.)
Examples of Accessible Websites or Specific Features
-
Climate Action, .
This page contains a countdown timer that counts down to 1 January 2050. It gets updated every second. Thediv
element that contains the timer has the attributesrole="timer"
,aria-live="off"
andaria-atomic="true"
. Thediv
element for the seconds has the attributearia-hidden="true"
. (Accessed on 16.11.2024.) - Seitenübersicht | Europawahl 2024: sitemap. (Accessed on 07.11.2023.)
- Baer, Jay: 20 Awesome Examples of Accessible Websites, Convince & Convert, 03.03.2021.
Some of the Worst Websites Ever?
- Arngren.net: apparently the same design since the late 1990s. (Accessed on 21.06.2022.)
- LINGsCARS: background images, animated GIFs and an overload of colours as if we were still in the late 1990s. (Accessed on 21.06.2022.)
- The World's Worst Website Ever! According to the source code, the site is meant to be atrocious. (Accessed on 21.06.2022.)
- Limiting Palette. Apparently, a website created using Adobe PageMill 2.0 for Mac, which was released in 1997. (Accessed on 21.06.2022.)
- Internet Explorer is EVIL! A page created using Mozilla's or Netscape's built-in authoring tool. (Accessed on 21.06.2022.)
- Yolickity Frozen Yogurt Bar. Includes white text on yellow or bright green buttons. Created using the Wix website builder. (Accessed on 21.06.2022.)
- The Visual Novel Database (VNDB). Low contrast, small font size. (Accessed on 21.06.2022.)
- The Careers Department. Created using the Wix website builder. (Accessed on 21.06.2022.)
- Yale School of Art.
Other Links
- Onder Woorden: contrast issues, nested layout tables, unusual keyboard sequence in layout table for navigation at the top, incorrect nesting in list markup. (Accessed on 05.07.2024.)
- Adam Blatner:
Renaissance-Neoplatonism:
various issues, such as lists without list markup, images with empty
alt
attributes, incorrectly used heading levels, nolang
attribute. (Accessed on 05.07.2024.) - Speelgoedmuseum Mechelen: various issues on a website that still uses the doctype for XHTML Transitional instead of HTML 5. The site also has contrast issues that automated checkers can't detect because they occur in text embedded in images. (Accessed on 05.07.2024. This website was updated in early October 2024.)
-
Antiquariat Aachen / von Agris.
ARIA tablist role used without required child roles; links without discernible text. (Accessed on 03.07.2024.) -
Metadata Encoding and Transmission Standard (METS) Official Web Site,
Library of Congress.
Thehtml
element has nolang
attribute, and there are a few other issues related to labels and accessible names. (Accessed on 03.07.2024.) -
EDItEUR.
Thehtml
element has nolang
attribute, at least one image has no text alternative, one link has no descernible text and a list is not correctly nested. (Accessed on 03.07.2024.) - Amadeo, Ron:
Amazon Fresh kills “Just Walk Out” shopping tech—it never really worked,
Ars Technica, 03.04.2024.
The subtitle,"AI" checkout was actually powered by 1,000 human video reviewers in India.
, is marked up as ah2
heading to make the text larger. (Accessed on 16.04.2024.) - Schaum's Outline of Linear Algebra, Sixth Edition (McGrawHill). The page contains a tablist with WAI-ARIA attributes that have not been applied entirely correctly according to Axe DevTools. (Accessed on 25.03.2024.)
-
MINI FAQ ABOUT THE ALTERNATE TEXT OF IMAGES by Ian Hickson.
The page content is contained in a
pre
element, headings are fake and the page has notitle
element. (Accessed on 12.03.2024.) - International Master Eric Rosen: contrast issues, empty links. (Accessed on 31.12.2023.)
-
Just Eat Takeaway: the site as an autoplaying video at the top, an SVG-based image map (without using the
map
element) and a short animation of numbers increasing on the screeen. (Accessed on 12.11.2023.) - Human Factors International (HFI): this site displays a Google CAPTCHA when you merely visit the home page. (Accessed on 09.12.2022.)
- phpMyFAQ: some very small text, centred. (Accessed on 08.11.2023.)
- Lara Fabian: WebAIM's WAVE doesn't report any errors but 59 alerts, including a redundant alternative text, 46 possible headings and seven redundant links. (Accessed on 23.01.2023.)
- Jo Lemaire: WebAIM's WAVE reports five contrast errors and 12 other errors (including six broken ARIA references). (Accessed on 23.01.2023.)
- Pemberton, Steven:
An Englishman's Difficulties with the Dutch
(on Steven Pemberton's website, 1993).
The table of contents doesn't use list markup but ablockquote
element containing links separated with<br>
elements. (Accessed on 07.09.2022.) -
You don't look like a librarian!:
a website that still uses the DOCTYPE
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
. Website last updated in 2014. (Accessed on 17.04.2023.) - awwwards.com: many interesting websites with all sort of issues: Sites Of The Day, MENU INSPIRATION, TYPOGRAPHY IN WEB DESIGN.
-
Les 5 meilleurs livres sur l'histoire de l'Ukraine,
5livres, 06.05.2022 (accessed on 03.07.2022).
Not an accessibility issue but one that makes inspection a bit more difficult: this website uses JavaScript to prevent viewing page information and source code, and to disable the context menu. (The code does not catch Ctrl+u (for the source code view) or Ctrl+i (for page information) in Otter Browser.Show JavaScript code
var image_save_msg='You are not allowed to save images!'; var no_menu_msg='Context Menu disabled!'; var smessage = "Contenu protégé"; function disableEnterKey(e) { var elemtype = e.target.tagName; elemtype = elemtype.toUpperCase(); if (elemtype == "TEXT" || elemtype == "TEXTAREA" || elemtype == "INPUT" || elemtype == "PASSWORD" || elemtype == "SELECT" || elemtype == "OPTION" || elemtype == "EMBED") { elemtype = 'TEXT'; } if (e.ctrlKey){ var key; if(window.event) key = window.event.keyCode; //IE else key = e.which; //firefox (97) //if (key != 17) alert(key); if (elemtype!= 'TEXT' && (key == 97 || key == 65 || key == 67 || key == 99 || key == 88 || key == 120 || key == 26 || key == 85 || key == 86 || key == 83 || key == 43 || key == 73)) { if(wccp_free_iscontenteditable(e)) return true; show_wpcp_message('You are not allowed to copy content or view source'); return false; }else return true; } } // (...) document.onkeydown = disableEnterKey; document.onselectstart = disable_copy_ie; if(navigator.userAgent.indexOf('MSIE')==-1) { document.onmousedown = disable_copy; document.onclick = reEnable; }