Accessibility Fails

Last updated: 2 August 2016 by @dugboticus and @cfq

The aim of this page is to run autmated tools against it to see which fails are identified.

There are 144 fails grouped into 19 categories. This is a work in progress, we'll be adding many more fails.

Content

Plain Language is not used

Title I of the CARE Act creates a program of formula and supplemental competitive grants to help metropolitan areas with 2,000 or more reported AIDS cases meet emergency care needs of low-income HIV patients. Title II of the Ryan White Act provides formula grants to States and territories for operation of HIV service consortia in the localities most affected bu the epidemic, provision of home and community -based care, continuation of insurance coverage for persons with HIV infection, and treatments that prolong life and prevent serious deterioration of health. Up to 10 percent of the funds for this program can be used to support Special Projects of National Significance.

Content is not organised into into well-defined groups or chunks, using headings, lists, and other visual mechanisms

insert_example

First instance of abbreviation not expanded

GDS is part of the Cabinet Office. Our job is digital transformation of government.

Content identified by location

The artist on the right won the Album of the year Taylor Swift Ed Sheeran

Content is not in correct reading order in source code

3-Step Skin Care Moisturise Exfoliate Cleanse

Page Layout

Wide page forces users to scroll horizontally

When sites are constructed to require horizontal scrolling in order to navigate or read content at a normal size of 100% using standard screen sizes, additional problems can arise for users with low vision or mobility impairments. This is some text you have to horizontally scroll to read.

Colour and Contrast

Color alone is used to convey content

The green mushrooms listed here are OK to eat. The red mushrooms will kill you. Amanita

Chanterelle

Porcini

Shitake

Tylopilus

Small text does not have a contrast ratio of at least 4.5:1 so does not meet AA

This small text does not have enough contrast with it's background

Large text does not have a contrast ratio of at least 3:1 so does not meet AA

This large text does not have enough contrast with it's background

Small text does not have a contrast ratio of at least 7:1 so does not meet AAA

This small text does not have enough contrast with it's background

Large text does not have a contrast ratio of at least 4.5:1 so does not meet AAA

This large text does not have enough contrast with it's background

Focus not visible

Typography

Very small text found

This is some tiny text, much too small for some people to read

Italics used on long sections of text

Italics are sometimes used to highlight text. But you shouldn't use italicized text because they make letters hard to read. The letters have a jagged line compared to non-italic fonts. The letters also lean over making it hard for dyslexic users to make out the words. When the text size is small, the text is even more illegible.

All caps text found

Typing sentences or phrases IN ALL CAPITALS is rarely a good idea. It may make sense under some circumstances, but only rarely. Lengthy segments of capitalized content are more difficult to read. In some cases, a screen reader may interpret ALL CAPITAL text as being an acronym and may read it as letters rather than words. For example, a screen reader may read the uppercase text CONTACT US as "Contact U. S." because it interprets the uppercase "US" as being an acronym for "United States".

Justified text found

When text is justified to both margins it may add additional spaces between words which may be difficult for users with visual or cognitive impairments to read. Full text justification can also cause words to be spaced closely together thus making it difficult to determine where a word starts and ends.

Inadequate line height used

Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one.

Long lines of text

For people with some reading or vision disabilities, long lines of text can become a significant barrier. They have trouble keeping their place and following the flow of text. Having a narrow block of text makes it easier for them to continue on to the next line in a block. Lines should not exceed 80 characters

Blink element found

Blinking text and moving text (such as a marquee) can distract the reader's attention. This is especially relevant to people with attention deficits or cognitive disabilities. Neither is likely to cause a seizure, but they are likely to decrease the readability of the document as a whole and increase the time it takes for users to finish reading it.

Marquee element found

The BLINK and MARQUEE element animates content in a way that cannot be overridden or disabled by the user.

Language of content

html element is missing a lang attribute

html element has an empty lang attribute

html element has an invalid value in the lang attribute

html element has lang attribute set to wrong language

lang attribute not used to identify change of language

Mother, he's asking you to go. He's saying, "Allons, Madame plaisante!"

lang attribute used to identify change of language, but with invalid value

Mother, he's asking you to go. He's saying, "Allons, Madame plaisante!"

lang attribute used to identify change of language, but with wrong language

Mother, he's asking you to go. He's saying, "Allons, Madame plaisante!"

Text language changed without required change in direction

الإعفاء الإلكتروني من التأشيرة

Text language is in the wrong direction

Electronic visa waiver

Page Title

Missing page title

Empty page title

Inappropriate page title

Headings

Missing H1

Headings not structured in a hierarchical manner

Heading 3 Pages should be structured in a hierarchical manner, generally with one 1st degree headings (h1) being the most important (usually page titles or main content heading), then 2nd degree headings (h2 - usually major section headings), down to 3rd degree headings (sub-sections of the h2), and so on. Heading 5 Technically, lower degree headings should be contained within headings of the next highest degree (i.e., one should not skip heading levels, such as from an h2 to an h4, going down the document). Heading 4 This is an example where heading levels have been skipped and are not in a logical order, which makes the page difficult to understand and navigate for people using assitive technologies such as screen reader.

Empty heading

This paragraph is preceded by an empty H4

Text formatting used instead of an actual heading

Fake Heading This paragraph is preceded by a div that is styled to look like a heading

Lists

List not marked up as a list

* apple

* orange

* banana

* pear

Improperly nested lists

improperly nested

LI element with no parent

no parent

DT or DD elements that are not contained within a DL element

html a markup language for describing web documents

Tables

Table is missing a caption

Name Age Birthday Jackie 5 April 5 Beth 8 January 14

Table has an empty table header

Shelly's Daughters Age Birthday Jackie 5 April 5 Beth 8 January 14

Table has no scope attributes

Shelly's Daughters Name Age Birthday Jackie 5 April 5 Beth 8 January 14

Table has no table headings

Shelly's Daughters Name Age Birthday Jackie 5 April 5 Beth 8 January 14

Table that only has TH elements in it

Foo Bar Bat Baz

Table nested within table header

b.a b.b a.b

Table nested within table

1.1 2.1 2.2

Table used for layout

navigation main content

Table with inconsistent numbers of columns in rows

Requester information Requester Information Name Jon Smith 9/9/2005 Department Customer Service E-mail jon.smith@gov.uk Phone 07700 900258

Table with some empty cells

Bills before Parliament 2016-17 Current House Bill title Last updated A Lords Abortion (Disability Equality) Bill [HL] 26.05.2016 Lords Access to Palliative Care Bill [HL] 10.06.2016

Table with column headers and double row headers

Road Traffic at Junctions Road Junction Car Bus Regent Street Oxford Street 307 12 Regent Street Bond Street 1731 58 Southwark Street Union Street 1975 51

Images

Image with no alt attribute

Image that conveys information has an empty alt attribute

Image that conveys information has inappropriate alt text

Image alt attribute contains image file name

Image with presentation role has non-empty alt

Image has empty alt and non-empty title

Image has alt and title that are different

Background image that conveys information does not have a text alternative

Taking too much of your pension money in early retirement could mean you don't have enough for later.

A distraction is present, an animated gif

Image with partial text alternative

The image below contains a lot of information, such as which departments the sale is on. The text alternative in the alt attribute does not include this information, only a partial "25% off sale"

Multimedia

Embedded video file is missing text alternative

Embedded audio file is missing text alternative

Flashing content doesn't have warning

Uninformative link text

Polar bear The polar bear is a carnivorous bear whose native range lies largely within the Arctic Circle, encompassing the Arctic Ocean, its surrounding seas and surrounding land masses. Read more

Non-specific link text

Click here for more information on the Rocky Mountains.

Link text does not make sense out of context

To know more about me, visit my page.

Adjacent links going to the same destination

Image link alt text repeats text in the link

Image link with no alternative text

Blank link text

Link contains only a full stop

Visit the GOV.UK website .

Link with the same text go to different pages

Lions are the only truly social cats, with related females living together in prides overseen by male coalitio that compete for possession in fierce and often fatal battles. Lions are predatory carnivores and it's the females that perform most of the hunting at night; the majority of the prey being antelope, zebra and wildebeest.

Link text with identical title

Link launches new window with no warning

Link not clearly identifiable and distinguishable from surrounding text

Find out more about Doctor Who

Link to pdf does not include information on file format and file size

Link to an image, no text alternative

My favourite bat

Link to a multimedia file, no transcript

Links to a sound file, no transcript

Links not seperated by printable characters

Link to #, invalid hypertext reference

Link to javascript, invalid hypertext reference

Identifying links by colour alone

Buttons

Empty button

Image button has no alt attribute

Empty alt attribute on image button

Uninformative alt attribute value on image button

Forms

Fieldset without a legend

I am a fieldset without a legend

Empty legend

Form element has no label

Empty label found

Placeholder no label

Non-unique field label found

Name

Name

Field hint not associated with input

National Insurance number It'll be on your last payslip. For example, JH 21 90 0A.

Group of radio buttons not enclosed in a fieldset

Do you already have a personal user account? Yes

No

Group of check boxes not enclosed in a fieldset

Which types of waste do you transport regularly? Waste from animal carcasses

Waste from mines or quarries

Farm or agricultural waste

Errors are not identified

You need to fix the errors on this page before continuing. Name Surname Date of birth

Errors identified by colour only

You need to fix the errors on this page before continuing. Passport number Name on passport Date of expiry

Errors identified with a poor colour contrast

You need to fix the errors on this page before continuing. Claimant's name Claimant's surname Claimant's date of birth

Error messages - no suggestion for corrections given, eg. required format

Phone number is not valid

Missing labels in checkboxes

What is your nationality? British (including English, Scottish, Welsh and Northern Irish) Irish Citizen of a different country

Two unique labels, but identical for= attributes

Date of issue Day Month Year

Label element with for= attribute but not matching id= attribute of form control

Non-matching for attribute form

Labels missing when they would look clumsy for some form controls

Your child's date of birth

Left aligned form labels with too much white space

Country

Form control that changes context without warning

Select your language Change your language English German French

Navigation

Navigation placement, display, or functionality changes from from page to page

insert_example

Inadequately-sized clickable targets found

Keyboard Access

Keyboard focus is not indicated visually

Don't use the accesskey attribute

Tabindex greater than 0

Fake button is not keyboard accessible

launch webchat

Link with a role=button does not work with space bar

Keyboard focus assigned to a non focusable element using tabindex=0

My favourite car

Keyboard trap

Lightbox - focus is not retained within the lightbox

Open lightbox X This lightbox doesn't retain the focus within itself. The Ministry of Justice website has information about mental capacity.

Lightbox - close button doesn't receive focus

Open lightbox X This lightbox's close button isn't a link so you can't focus on it. The Ministry of Justice website has information about mental capacity.

Lightbox - focus is not moved immediately to lightbox

Open lightbox X This lightbox is placed at the end of the DOM so you'll have to tab through other links to reach it. The Ministry of Justice website has information about mental capacity.

Lightbox - ESC key doesn't close the lightbox

Open lightbox X This lightbox can't be closed with an escape key. The Ministry of Justice website has information about mental capacity.

Concertina items don't get keyboard focus

Understanding user research How user research improves service design

Start by learning user needs

Understanding users who don't use digital services Preparing for user research Plan user research for your service

Plan a round of user research

Find user research participants

Choose a location for user research

Write a recruitment brief

Getting users' consent for research Analysing and sharing findings Sharing user research findings

Analyse a research session

Focus order in wrong order

Dropdown navigation - only the top level items receive focus

Tooltips don't receive keyboard focus

Your driving licence number ? Your driving licence number can be found in section 5 of your driving licence photocard

Alert shows for a short time

You should complete this form in 20 minutes Prisoner's name

Frames

iframe is missing a title attribute

iframe title attribute does not describes the content or purpose in the iframe

HTML

Duplicate id

global nav page nav

Start and close tags don't match

strings of pearls

Empty paragraph

Deprecated color definition

The colour of this text is set using the font element and the color attribute

Deprecated font element

The size and face of this text is set using the font element and the size and face attributes

Deprecated center element

This text is centred using the center element

Spacer image found

PRE element without CODE element inside it

Your /\ (`/`|| _ + /--\,)\,|| (||`| goes here

Object not embedded accessibly - wmode parameter not set to window

Invalid ARIA role names

Article element used to mark-up an element that's not an article/blog post etc.

CSS

display:none used to visually hide content when it should be available to screenreader

visibility:hidden used to visually hide content when it should be available to screenreader

Content is not readable and functional when text is increased

This text becomes unreadable when you increase the text-size (Zoom text only) in Firefox

Non-decorative content inserted using CSS

My favourite food is

display:table being used for layout

Vertically and horzontally aligned text

Page zoom - boxes that don't expand with the text