Skip to content
This repository has been archived by the owner on May 7, 2023. It is now read-only.

Fix: #172, Enhancement, Create ARIA accessibility question & answer #180

Merged
merged 2 commits into from
Oct 6, 2019
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
reword how ARIA spec is defined
  • Loading branch information
digilou committed Oct 5, 2019
commit b1629d40ef0c8c5c80938f7223c069b0ae87ce3e
7 changes: 4 additions & 3 deletions questions/accessibility-aria.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

#### Answer

ARIA stands for "Accessible Rich Internet Applications". ARIA code is HTML. It provides additional attributes in the development of web applications to offer screen reader users more context about dynamic components, including the component's role, name, and state. It should only be used when an HTML element equivalent is not available or lacks full support. ARIA is semantic, and doesn't actually make your component dynamic.
ARIA stands for "Accessible Rich Internet Applications", and is a technical specification created by the World Wide Web Consortium (W3C). Better known as WAI-ARIA, it provides additional HTML attributes in the development of web applications to offer people who use assistive technologies (AT) a more robust and interoperable experience with dynamic components. By providing the component's role, name, and state, AT users can better understand how to interact with the component. WAI-ARIA should only be used when an HTML element equivalent is not available or lacks full browser or AT support. WAI-ARIA's semantic markup coupled with JavaScript works to provide an understandable and interactive experience for people who use AT.

An example using ARIA:

Expand All @@ -13,16 +13,17 @@ An example using ARIA:
aria-owns="ex1-grid"
aria-haspopup="grid"
id="ex1-combobox">
<!-- more code here-->
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wasn't there an elipses here? Is that why it's conflicting?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was torn about clarity. @skatcat31 does the updated description and bullet points make more sense to you?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No I mean... I was seeing a conflict and no ellipses. I was wondering if that was why the PR said there was a conflict

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You were right though. I resolved that conflict. I changed to a comment because I was torn about the clarity of how to present the idea there was more code that would go between the opening and closing div.

</div>
```
Credit: W3C's [ARIA 1.1 Combobox with Grid Popup Example](https://w3c.github.io/aria-practices/examples/combobox/aria1.1pattern/grid-combo.html)

#### Good to hear

* Accessible Rich Internet Applications
* Benefits screen reader users
* Benefits people who use assistive technologies (AT)
* Provides role, name, and state
* Semantic HTML that doesn't produce interaction by itself
* Semantic HTML coupled with JavaScript

##### Additional links

Expand Down