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).
-
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.
Pages Featuring Various Accessibility Issues
Low Contrast
- 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.)
- 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).
- 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.) - Grey on white, green on white: Tee - Gesundheit aus der Tasse - GesuenderNet (accessed 24.01.2021).
- 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 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).
Animations and Animated Backgrounds
These animations (and videos) constitute an issue because they run longer than a few seconds and cannot be paused or hidden by users.
- THEOplayer: background video on the homepage. (Accessed on 17.04.2023.)
- Wehubit: background video on the homepage. (Accessed on 13.04.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.)
- Typora: animation that imitates markdown code being typed, withoout a mechanism to pause or stop it. (Accessed on 13.02.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. (Accessed on 19.02.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.) -
Antoine de Saint Exupéry: large animation at the top of the page, without a pause or stop button.
Just above the footer, there are also bare URLs
https://www.lepetitprince.com
. - 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.)
- 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.)
- Polyphony Project (accessed on 02.05.2022).
- ASCon Systems GmbH - The Digital Twin Company (accessed on 02.05.2022).
- Ergotopia: Ergonomische Büromöbel und kostenlose Gesundheitstipps: background video in top half of the page (25.03.2022).
- Ergonomischer Stuhl/Balance-Hocker | Rückenprobleme vermeiden | Backapp: background video in top half of the page (15.02.2022).
- The man who wasn't Hamlet: animated top half of page. (Accessed on 18.01.2022.)
- 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.)
- CodeAbbey has two animated GIF images below the image of the abbey. (Accessed on 18.11.2021.)
- Urban Move® | Outdoor-Training- und Workout in Stuttgart: animated background in the header section (accessed on 06.09.2021).
- Bücher und Kuriosa - Verlag Faber und Faber: ship that slowly moves across the header (accessed on 04.102.2021).
- ETSI: animated background in the header section (accessed on 08.09.2021).
- Eat Genesis uses SVG animations. There is no visible keyboard focus. (Accessed on 22.06.2021.)
- What Role Does Estrogen Play in Muscle Strength?, Cathe Friedrich, 31.01.2016; accessed on 05.08.2021). 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.)
-
Myprobe: animated background using an
iframe
that loads a page containing acanvas
element. (Last accessed on 11.05.2021.) - psychoslinux.gitlab.io: background video. (24.01.2021; last accessed on 11.05.2021.)
Font size conversion px-pt-em-rem-percent webSemantics(snowflakes, on 10.12.2020; not when accessed on 24.01.2021).- Verlag Vittorio Klostermann: carousel that cannot be paused or hidden. (Accessed on 11.05.2021.)
- Bundesfachstelle Barrierefreiheit: carousel that can be paused and therefore meets Success Criterion 2.2.2 Pause, Stop, Hide. (Accessed on 11.05.2021.)
-
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.) - 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. - 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.)
-
版塊設計 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.)
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
- 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 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
- 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.
- 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
- 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.)
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 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.
- Stelter, Brian; Darcy, Oliver:
"Reliable Sources" / "Tell us what happened",
CNN Business, January 2021.
Emptytitle
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™ Platform, Standard Edition 7 API Specification: Overview (Java Platform SE 7) (generated with javadoc; last accessed 24.01.2021).
- Eclipse documentation (outdated version; last accessed 24.01.2021).
- rilke.de (last accessed 24.01.2021).
- 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 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
- 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
- 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
- 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.
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.)
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
- Human Factors International (HFI): this site displays a Google CAPTCHA when you merely visit the home page. (Accessed on 09.12.2022.)
- 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 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.) -
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; }