Questions tagged [wcag2.0]

Recommendation from the W3C, which explains to developers and authors how to make Web content accessible to people with disabilities.

Web Content Accessibility Guidelines are part of a series of Web accessibility guidelines published by the W3C's Web Accessibility Initiative . The current version is 2.1, which became a W3C Recommendation on 05 June 2018, content that conforms to WCAG 2.1 also conforms to .

They consist of a set of guidelines for making content accessible, primarily for disabled users, but also for all user agents, including highly limited devices, such as mobile phones.

The primary considerations for web content are Perceivable, Operable, Understandable, Robust, and Conformance. Within each category there are several guidelines and breakdown for 3 levels of compliance (A, AA, AAA).

The WCAG 2.0 overview from W3C can be found here.

269 questions
34
votes
6 answers

Making a clickable

So I am working on a project that requires a
with an onclick event. I've got the main functionality working, but there is one problem. I need the onclick event to happen when the user tabs to the
and presses enter. I added a tabindex to…
lfitzgibbons
  • 783
  • 1
  • 5
  • 18
27
votes
13 answers

How to keep focus within modal dialog?

I'm developing an app with Angular and Semantic-UI. The app should be accessible, this means it should be compliant with WCAG 2.0. To reach this purpose the modals should keep focus within the dialog and prevents users from going outside or move…
smartmouse
  • 13,912
  • 34
  • 100
  • 166
27
votes
4 answers

Font Awesome accessibility issue. Use tags instead of

I am testing my HTML code markup compliance with accessibility standards: http://achecker.ca/checker/index.php. The following is an error I get: Repair: Replace your i elements with em or strong.
sdvnksv
  • 9,350
  • 18
  • 56
  • 108
25
votes
7 answers

Combining a table and hierarchical list in HTML

I'm working to redesign a legacy toolset and I'm looking at how to better display some information both presentationally and semantically. The data hierarchically in nature but has properties that need to be readily visible to users. The desired…
user764357
13
votes
2 answers

Do tracking pixels need to have alt attributes for accessibility (WCAG 2.0)?

We are running a website and have 3rd party tracking pixels, but we're receiving alt attribute errors when doing a webaim/WCAG 2.0 scan on our site. I'm not sure if in this situation the tracking pixels actually need to still have a blank alt…
Abe
  • 303
  • 3
  • 7
12
votes
4 answers

How do I make Font Awesome WCAG 2.0 compatible?

If I have a site with a couple of font awesome icons on it, e.g. And run this through the WCAG 2.0 validator I get the following error: Success Criteria 1.4.4 Resize text (AA) Check 117: i (italic) element…
zelexir
  • 784
  • 5
  • 16
11
votes
2 answers

Do HTML elements like pill/badge need extra Aria-role?

I'm trying to add accessibility to my web page and I'm not sure how to deal with this badge element. It's something like the number circle you see on your online shopping cart icon. (See example image below) I couldn't decide what kind of aria role…
tzhang
  • 307
  • 3
  • 9
11
votes
2 answers

image inside a link for accessible users

Say I wanna make a clickable image(say site-logo, or whatever) like so: If I want to make it accessible should I use aria-label for link along with alt for an image or only…
franenos
  • 337
  • 2
  • 5
  • 14
10
votes
3 answers

How to set priority for screen readers of some HTML page parts?

I want to make my HTML page suitable for screen readers. Currently, the page have 3 main parts: header, sidebar and content: Screen readers read header at first, then sidebar and finally search results. Unfortunately, users which has problems with…
bmalets
  • 3,207
  • 7
  • 35
  • 64
8
votes
1 answer

Must I use aria-invalid when I invalidate a field using the HTML5 constraint validation API?

As I understand it's not recommended to add duplicate roles to an element: This is redundant because nav tells the screen reader what the semantics of content is already. So far so good. Now I want to invalid a form…
lampshade
  • 2,470
  • 3
  • 36
  • 74
8
votes
2 answers

accessibility and using javascript

I wanted to get something cleared up and that is the use of Javascript on websites with regards to WCAG. Am i correct that the use of Javascript is fine as long as it does not stop a user from accessing the content of the website or achieve an…
Lee
  • 273
  • 2
  • 20
8
votes
2 answers

AA Level Accessibility - Colour Contrast boosted using text shadow

I have a site that I'm coding to WCAG 2.0 AA Level compliance and one of the buttons has a colour contrast that does not pass. Background - #D57405 Foreground - #FFF Is it possible to use text-shadow to boost the contrast – would that be seen as a…
Brent Dayman
  • 83
  • 1
  • 7
7
votes
1 answer

Is td allowed inside thead?

I have couple of elements within a element. The first one or one of them is an empty th used as placeholder and does not contain any text. Wave tool gives out an error that th cannot be empty and suggests I change to . Now if I have…
wallop
  • 2,510
  • 1
  • 22
  • 39
7
votes
3 answers

Accessibility (WCAG 2.0), redundant links and responsive website navigation

The following simple navigation exists for touch devices on a responsive site: About Us About Us Contact Us At mobile, the primary link expands a subnav on touch, with a replicated child link to actually open About Us and other child pages. At…
Stuart Kershaw
  • 16,831
  • 6
  • 37
  • 48
6
votes
2 answers

Does using a placeholder as a label comply with WCAG 2?

I get that using placeholder text as a label is not very accessible, but does it technically go against WCAG 2? I could not find anything explicit but I wonder if a more lawyerly reading of that standard would find something in there.
tylertrotter
  • 352
  • 1
  • 11
1
2 3
17 18