Examples of Failures and Features

Websites Claiming WCAG Conformance

• Toegankelijkheid van de website, Symfoon (no date; 2022).
• 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.

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 a div element with the attribute aria-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”, the 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.

• 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

• 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 meaningful title element (Programm) and first heading represented by an image containing text with just the alt text “Header”. (Accessed on 11.05.2021.) Page not available on 19.19.2023.
• 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.)

Issues Regarding Text Alternatives

• 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 an alt 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 constitute an issue because they run longer than a few seconds and cannot be paused or hidden by users.

• 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 because they run longer than a few seconds and cannot be paused or hidden by users.

• 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 manipulating class attributes on span 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 URLs https://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 a canvas 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.
  Section "Just in" below the header: this has a play/pause button and previous/next buttons. (Accessed on 13.06.2021.) Update 21.10.2023: the animation is no longer present.
• The 2 of July – Independence of Brazil in Bahia Salvador da Bahia — Official Website (no date; accessed on 28.11.2021).
  This page has a favicon that constantly switches between three background colours: red, light blue and yellow. Update 21.10.2023: the animation is no longer present.
• 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 (using canvas that fills largest part of the screen, and SVG animation in the right-hand part of the page. (Accessed on 30.11.2022.) Update 21.10.2023: the ticker tape is no longer present but the page still contains other animations.
• 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).
• 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 against greedy 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 attribute alt="Default Alt Tag for this page".

Invisible or Barely Visible Keyboard Focus

• 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; } and a: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 (with id="imap") that uses a background image; inside this list, the dt element contains an absolute positioned a element with a background image.
• Random Password Generator (Avast): the page contains a slider for password strength that uses an input element with the attribute type=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. (Accessed on 17.11.2023.)
• 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.

Broken Modal Dialogs

• 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.)

Linktext That Is Not Meaningful

• 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.)

Forms

• O RLY Parody Book Generator, DEV Community.
  label elements positioned above input elements without an explicit connection (no for 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 an id attribute but no label. (Accessed on 11.01.2022.)

fieldset and legend

• Create an account, Transport for London (accessed on 12.01.2023).
  legend element with Account type for two radio buttons.
• Create your account, Login.gov (accessed on 12.01.2023).
  legend element with Select your email language preference for three radio buttons.

Page Title

Examples where the title element is not meaningful, missing or has other issues.

• Stelter, Brian; Darcy, Oliver: "Reliable Sources" / "Tell us what happened", CNN Business, January 2021.
  Empty title element: <title></title>. (Accessed on 12.01.2021, 11.05.2021.)
• O RLY Parody Book Generator, DEV Community.
  Two head elements, each containing a title 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.

• Java^TM 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.

• 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).

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 without ol; 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

• 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 empty alt attribute and no other type of text alternative.

Layout Tables

• 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 and bgproperties on the body element, and font 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

• 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. The area elements have alt and title attributes.

Pages With Various Accessibility Features or Tools

Externally developed toolbars or overlays:

• ATbar: developed at the University of Southampton.
• Recite:
  • University of London (“Accessibility Tools” in the top right corner).
  • Accessibility tools (GMB Union) (resize-font icon to the left of the social media links).
• ReadSpeaker:
  • 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).

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

• 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.)
• Seitenübersicht | Europawahl 2024: sitemap. (Accessed on 07.11.2023.)
• 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.)
• Baer, Jay: 20 Awesome Examples of Accessible Websites, Convince & Convert, 03.03.2021.
• 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 a blockquote 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.)
• 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;
            }