CODEWITHSUNDEEP
accessibilitywcagwcag2.0
jiostoph
jiostoph

Reputation: 35

1.3 and 2.1.1 parts of wcag 2.0

I'm reading WCAG 2.0 guidelines located here(click me) and some parts of it isn't clear to me.

1) As I understand from 1.3 section, I should make content that would be visible properly without css, for example. How is it "technology-agnostic" I wonder? Simply, I MUST use javascript in some cases in order to some of my css cool stuff will work. So if I wanna make my site independent of JS - I simply can't. Also if I'm using something that is JS-coded, I can't be sure it will work with some screen readers. So again, it is technology depended. Am I missing here something?

2) About the 2.1.1 part. If for example I have a slider on my site and I can't make it accessible from keyboard for some reason, but it has no keyboard trap and the content the slider represents has no critical value(it can be accessed from other links on the site). Would this be fine to success the criteria? In the description of the 2.1.1 section, it says "wherever possible", so my guess it is totally fine, but yet I'm not sure.

Upvotes: 1

Views: 222

Answers (2)

slugolicious
slugolicious

Reputation: 17563

There are three parts of 1.3, but as Adam said, the technology agnostic part refers the the WCAG spec itself. It doesn't mean your site has to be technology agnostic.

1.3.1, Info and Relationships, is very important for users without any vision. If a user can't see the page, then that user wouldn't be able to see how the structural/physical layout of the page/application can create meaning. Sighted users perceive structure and relationships through various visual cues such as headings are in bold, paragraphs are separated by a blank line, rows and columns of data, etc. When such relationships are perceivable to one set of users, those should be perceivable to all.

It doesn't matter what technology you use to create an application, which is why this spec is technology agnostic. If you happen to use html, css, and javascript, just make sure you use header tags, tables are marked up properly, and use the respecitve ARIA tags if needed.

1.3.2 Meaningful Sequence, is also important for users w/o vision. For example, if you had a shopping cart checkout process where the steps are arranged visually so you know the order of steps when you're checking out, you should make sure the tabbing and reading order (DOM order) of those steps is also the same so that the screen reader can flow through the process correctly.

1.3.3 Sensory Characteristics. Make sure the size, color, or shape of an object isn't the only clue to how to interact with an object. Don't have directions such as "click on the green button" or "select the round icon". Visionless users won't know which one is green or round.

Regarding 2.1.1, all interactive elements on your page should be accessible via the keyboard. Sliders are pretty easy. The native slider is inherently accessible. If you make your own slider out of div tags, just set the correct ARIA tags. See https://www.w3.org/TR/wai-aria-practices/#slider for guideance.

Upvotes: 1

Adam
Adam

Reputation: 18855

  1. WCAG is "technology-agnostic", but your site does not have to be.

You can see from WCAG's website an example of declaration of "relied-upon technologies" : https://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html

  1. Hard to answer this question without experimenting the user experience. You have to remember that the keyboard-only navigation is not intended to be used only by blind people. So it can be very frustrating to view a slider and have no way to interact with it.

For a "screen reader" perspective, you can choose to ignore elements if they are purely used for decoration or redundant (aria-hidden attributes), but it does not mean that you can ignore keyboard accessibility for those elements.

Upvotes: 0

Related Questions