Recommendation from the W3C, which explains to developers and authors how to make Web content accessible to people with disabilities.
Questions tagged [wcag2.0]
225 questions
23
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
19
votes
5 answers
Making a clickable accessible through tab structure?
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
- 625
- 1
- 4
- 17
16
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
- 7,974
- 10
- 41
- 85
15
votes
11 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
- 11,808
- 26
- 77
- 154
11
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
- 774
- 5
- 16
9
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
- 2,961
- 5
- 28
- 60
8
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
- 123
- 1
- 6
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
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
- 13,825
- 5
- 35
- 47
6
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
- 1,924
- 2
- 26
- 50
6
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
- 237
- 3
- 11
6
votes
1 answer
Keyboard accessible markers with Google maps js api
As per the WCAG and section 508, all the informations on a website must be accessible using only the keyboard.
I have a google maps with some markers on it that open a modal with dedicated informations.
The problem is that Markers with google maps…
Flunch
- 746
- 4
- 17
6
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
- 63
- 1
- 7
4
votes
2 answers
WCAG - How to make the screen reader read all the page automatically?
I need to have a screen in my app which all of it's content will be read using the screen reader automatically.
I tried to add role="dialog" aria-live="assertive" aria-atomic="true" and it didn't make it.
I also tried to use role="alert"…
roeygol
- 6,664
- 6
- 43
- 75
4
votes
1 answer
Can page language be set at run time for accessibility and WCAG 2 3.1.1 compliance?
If a page loads and then uses javascript to change the language attribute on the element, could that be detrimental to accessibility? Or do screen readers and other accessibility devices usually let the page load dynamic content before…
AlexMA
- 8,952
- 5
- 39
- 55
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
- 625
- 1
- 4
- 17
16
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
- 7,974
- 10
- 41
- 85
15
votes
11 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
- 11,808
- 26
- 77
- 154
11
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
- 774
- 5
- 16
9
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
- 2,961
- 5
- 28
- 60
8
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
- 123
- 1
- 6
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
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
- 13,825
- 5
- 35
- 47
6
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
- 1,924
- 2
- 26
- 50
6
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…
If I want to make it accessible should I use aria-label for link along with alt for an image or only…
franenos
- 237
- 3
- 11
6
votes
1 answer
Keyboard accessible markers with Google maps js api
As per the WCAG and section 508, all the informations on a website must be accessible using only the keyboard.
I have a google maps with some markers on it that open a modal with dedicated informations.
The problem is that Markers with google maps…
Flunch
- 746
- 4
- 17
6
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
- 63
- 1
- 7
4
votes
2 answers
WCAG - How to make the screen reader read all the page automatically?
I need to have a screen in my app which all of it's content will be read using the screen reader automatically.
I tried to add role="dialog" aria-live="assertive" aria-atomic="true" and it didn't make it.
I also tried to use role="alert"…
roeygol
- 6,664
- 6
- 43
- 75
4
votes
1 answer
Can page language be set at run time for accessibility and WCAG 2 3.1.1 compliance?
If a page loads and then uses javascript to change the language attribute on the element, could that be detrimental to accessibility? Or do screen readers and other accessibility devices usually let the page load dynamic content before…
AlexMA
- 8,952
- 5
- 39
- 55