From d75ba5998110b9933d30725a5da43f8551310e85 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 10 Dec 2024 17:11:10 +0000 Subject: [PATCH 1/6] move the aria-live example in page --- .../accessibility/wai-aria_basics/index.md | 172 +++++++++++++++++- 1 file changed, 170 insertions(+), 2 deletions(-) diff --git a/files/en-us/learn/accessibility/wai-aria_basics/index.md b/files/en-us/learn/accessibility/wai-aria_basics/index.md index 57c7fb54fab30c8..b1290f6484b0206 100644 --- a/files/en-us/learn/accessibility/wai-aria_basics/index.md +++ b/files/en-us/learn/accessibility/wai-aria_basics/index.md @@ -256,8 +256,176 @@ There is an additional consideration here — only the bit of text that updates The `aria-atomic="true"` attribute tells screen readers to read out the entire element contents as one atomic unit, not just the bits that were updated. -> [!NOTE] -> You can see the finished example at [`aria-live.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-live.html) ([see it running live](https://mdn.github.io/learning-area/accessibility/aria/aria-live.html)). +#### Finished example + +```html live-sample___aria-live +
+

Random quote

+
+

+
+
+``` + +```css live-sample___aria-live +html { + font-family: sans-serif; +} + +h1 { + letter-spacing: 2px; +} + +p { + line-height: 1.6; +} + +section { + padding: 10px; + width: calc(100% - 20px); + background: #666; + text-shadow: 1px 1px 1px black; + color: white; + min-height: 160px; +} +``` + +```js hidden live-sample___aria-live +let quotes = [ + { + quote: "Life is about making an impact, not making an income.", + author: "Kevin Kruse", + }, + { + quote: "Whatever the mind of man can conceive and believe, it can achieve.", + author: "Napoleon Hill", + }, + { + quote: "Strive not to be a success, but rather to be of value.", + author: "Albert Einstein", + }, + { + quote: + "Two roads diverged in a wood, and I—I took the one less traveled by, And that has made all the difference", + author: "Robert Frost", + }, + { + quote: "I attribute my success to this: I never gave or took any excuse.", + author: "Florence Nightingale", + }, + { + quote: "You miss 100% of the shots you don’t take.", + author: "Wayne Gretzky", + }, + { + quote: + "I’ve missed more than 9000 shots in my career. I’ve lost almost 300 games. 26 times I’ve been trusted to take the game winning shot and missed. I’ve failed over and over and over again in my life. And that is why I succeed.", + author: "Michael Jordan", + }, + { + quote: + "The most difficult thing is the decision to act, the rest is merely tenacity.", + author: "Amelia Earhart", + }, + { + quote: "Every strike brings me closer to the next home run.", + author: "Babe Ruth", + }, + { + quote: "Definiteness of purpose is the starting point of all achievement.", + author: "W. Clement Stone", + }, + { + quote: "Life isn’t about getting and having, it’s about giving and being.", + author: "Kevin Kruse", + }, + { + quote: "Life is what happens to you while you’re busy making other plans.", + author: "John Lennon", + }, + { + quote: "We become what we think about.", + author: "Earl Nightingale", + }, + { + quote: + "Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do, so throw off the bowlines, sail away from safe harbor, catch the trade winds in your sails. Explore, Dream, Discover.", + author: "Mark Twain", + }, + { + quote: "Life is 10% what happens to me and 90% of how I react to it.", + author: "Charles Swindoll", + }, + { + quote: + "The most common way people give up their power is by thinking they don’t have any.", + author: "Alice Walker", + }, + { + quote: "The mind is everything. What you think you become.", + author: "Buddha", + }, + { + quote: + "The best time to plant a tree was 20 years ago. The second best time is now.", + author: "Chinese Proverb", + }, + { + quote: "An unexamined life is not worth living.", + author: "Socrates", + }, + { + quote: "Eighty percent of success is showing up.", + author: "Woody Allen", + }, + { + quote: + "Your time is limited, so don’t waste it living someone else’s life.", + author: "Steve Jobs", + }, + { + quote: "Winning isn’t everything, but wanting to win is.", + author: "Vince Lombardi", + }, + { + quote: + "I am not a product of my circumstances. I am a product of my decisions.", + author: "Stephen Covey", + }, + { + quote: + "Every child is an artist. The problem is how to remain an artist once he grows up.", + author: "Pablo Picasso", + }, + { + quote: + "You can never cross the ocean until you have the courage to lose sight of the shore.", + author: "Christopher Columbus", + }, + { + quote: + "I love deadlines. I love the whooshing noise they make as they go by.", + author: "Douglas Adams", + }, +]; +``` + +```js live-sample___aria-live +const quotePara = document.querySelector("section p"); + +let quoteJson = quotes; // the list of quotes is hidden but can be seen when clicking play +let numOfQuotes = quoteJson.length; +console.log(numOfQuotes); + +window.setInterval(showQuote, 10000); + +function showQuote() { + let random = Math.floor(Math.random() * numOfQuotes); + quotePara.textContent = `${quoteJson[6].quote} -- ${quoteJson[6].author}`; +} +``` + +{{EmbedLiveSample("aria-live", "100", "180")}} > [!NOTE] > The [`aria-relevant`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant) property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out. From 181192bdf9f6b0908df48b1f60ffa0b9a1a47ea1 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Wed, 11 Dec 2024 11:42:26 +0000 Subject: [PATCH 2/6] added the aria-no-live example into the page and updated the text about these examples --- .../accessibility/wai-aria_basics/index.md | 179 ++++++------------ 1 file changed, 59 insertions(+), 120 deletions(-) diff --git a/files/en-us/learn/accessibility/wai-aria_basics/index.md b/files/en-us/learn/accessibility/wai-aria_basics/index.md index b1290f6484b0206..bae5758bad7189b 100644 --- a/files/en-us/learn/accessibility/wai-aria_basics/index.md +++ b/files/en-us/learn/accessibility/wai-aria_basics/index.md @@ -207,11 +207,9 @@ The improved semantics of the search form have shown what is made possible when Content loaded into the DOM can be easily accessed using a screen reader, from textual content to alternative text attached to images. Traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments. -The problem is that modern web apps are often not just static text — they often update parts of the page by fetching new content from the server and updating the DOM. These are sometimes referred to as **live regions**. +The problem is that modern web apps are often not just static text — they often update parts of the page by fetching new content from the server (in this example we are using a static array of quotes) and updating the DOM. These are sometimes referred to as **live regions**. -Let's look at a quick example — see [`aria-no-live.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-no-live.html) (also [see it running live](https://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html)). In this example, we have a simple random quote box: - -```html +```html live-sample___aria-no-live

Random quote

@@ -220,12 +218,62 @@ Let's look at a quick example — see [`aria-no-live.html`](https://github.com/m
``` -Our JavaScript uses the {{domxref("Window.fetch", "fetch()")}} API to load a JSON file via containing a series of random quotes and their authors. Once that is done, we start up a {{domxref("Window.setInterval", "setInterval()")}} loop that loads a new random quote into the quote box every 10 seconds: +```css live-sample___aria-no-live +html { + font-family: sans-serif; +} -```js -const intervalID = setInterval(showQuote, 10000); +h1 { + letter-spacing: 2px; +} + +p { + line-height: 1.6; +} + +section { + padding: 10px; + width: calc(100% - 20px); + background: #666; + text-shadow: 1px 1px 1px black; + color: white; + min-height: 160px; +} ``` +```js live-sample___aria-no-live +let quotes = [ + { + quote: + "Every child is an artist. The problem is how to remain an artist once he grows up.", + author: "Pablo Picasso", + }, + { + quote: + "You can never cross the ocean until you have the courage to lose sight of the shore.", + author: "Christopher Columbus", + }, + { + quote: + "I love deadlines. I love the whooshing noise they make as they go by.", + author: "Douglas Adams", + }, +]; +``` + +```js live-sample___aria-no-live +const quotePara = document.querySelector("section p"); + +window.setInterval(showQuote, 10000); + +function showQuote() { + let random = Math.floor(Math.random() * quotes.length); + quotePara.textContent = `${quotes[random].quote} -- ${quotes[random].author}`; +} +``` + +{{EmbedLiveSample("aria-no-live", "100", "180")}} + This works OK, but it is not good for accessibility — the content update is not detected by screen readers, so their users would not know what is going on. This is a fairly trivial example, but just imagine if you were creating a complex UI with lots of constantly updating content, like a chat room, or a strategy game UI, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates. WAI-ARIA, fortunately, provides a useful mechanism to provide these alerts — the [`aria-live`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live) property. Applying this to an element causes screen readers to read out the content that is updated. How urgently the content is read out depends on the attribute value: @@ -237,7 +285,7 @@ WAI-ARIA, fortunately, provides a useful mechanism to provide these alerts — t - `assertive` - : Updates should be announced to the user as soon as possible. -We'd like you to take a copy of [`aria-no-live.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-no-live.html) and [`quotes.json`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/quotes.json), and update your `
` opening tag as follows: +Here we update the `
` opening tag as follows: ```html
…
@@ -245,9 +293,6 @@ We'd like you to take a copy of [`aria-no-live.html`](https://github.com/mdn/lea This will cause a screen reader to read out the content as it is updated. -> [!NOTE] -> Most browsers will throw a security exception if you try to make an HTTP request from a `file://` URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). See [how to set up a local testing server](/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server). - There is an additional consideration here — only the bit of text that updates is read out. It might be nice if we always read out the heading too, so the user can remember what is being read out. To do this, we can add the [`aria-atomic`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-atomic) property to the section. Update your `
` opening tag again, like so: ```html @@ -256,8 +301,6 @@ There is an additional consideration here — only the bit of text that updates The `aria-atomic="true"` attribute tells screen readers to read out the entire element contents as one atomic unit, not just the bits that were updated. -#### Finished example - ```html live-sample___aria-live

Random quote

@@ -290,108 +333,8 @@ section { } ``` -```js hidden live-sample___aria-live +```js live-sample___aria-live let quotes = [ - { - quote: "Life is about making an impact, not making an income.", - author: "Kevin Kruse", - }, - { - quote: "Whatever the mind of man can conceive and believe, it can achieve.", - author: "Napoleon Hill", - }, - { - quote: "Strive not to be a success, but rather to be of value.", - author: "Albert Einstein", - }, - { - quote: - "Two roads diverged in a wood, and I—I took the one less traveled by, And that has made all the difference", - author: "Robert Frost", - }, - { - quote: "I attribute my success to this: I never gave or took any excuse.", - author: "Florence Nightingale", - }, - { - quote: "You miss 100% of the shots you don’t take.", - author: "Wayne Gretzky", - }, - { - quote: - "I’ve missed more than 9000 shots in my career. I’ve lost almost 300 games. 26 times I’ve been trusted to take the game winning shot and missed. I’ve failed over and over and over again in my life. And that is why I succeed.", - author: "Michael Jordan", - }, - { - quote: - "The most difficult thing is the decision to act, the rest is merely tenacity.", - author: "Amelia Earhart", - }, - { - quote: "Every strike brings me closer to the next home run.", - author: "Babe Ruth", - }, - { - quote: "Definiteness of purpose is the starting point of all achievement.", - author: "W. Clement Stone", - }, - { - quote: "Life isn’t about getting and having, it’s about giving and being.", - author: "Kevin Kruse", - }, - { - quote: "Life is what happens to you while you’re busy making other plans.", - author: "John Lennon", - }, - { - quote: "We become what we think about.", - author: "Earl Nightingale", - }, - { - quote: - "Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do, so throw off the bowlines, sail away from safe harbor, catch the trade winds in your sails. Explore, Dream, Discover.", - author: "Mark Twain", - }, - { - quote: "Life is 10% what happens to me and 90% of how I react to it.", - author: "Charles Swindoll", - }, - { - quote: - "The most common way people give up their power is by thinking they don’t have any.", - author: "Alice Walker", - }, - { - quote: "The mind is everything. What you think you become.", - author: "Buddha", - }, - { - quote: - "The best time to plant a tree was 20 years ago. The second best time is now.", - author: "Chinese Proverb", - }, - { - quote: "An unexamined life is not worth living.", - author: "Socrates", - }, - { - quote: "Eighty percent of success is showing up.", - author: "Woody Allen", - }, - { - quote: - "Your time is limited, so don’t waste it living someone else’s life.", - author: "Steve Jobs", - }, - { - quote: "Winning isn’t everything, but wanting to win is.", - author: "Vince Lombardi", - }, - { - quote: - "I am not a product of my circumstances. I am a product of my decisions.", - author: "Stephen Covey", - }, { quote: "Every child is an artist. The problem is how to remain an artist once he grows up.", @@ -413,15 +356,11 @@ let quotes = [ ```js live-sample___aria-live const quotePara = document.querySelector("section p"); -let quoteJson = quotes; // the list of quotes is hidden but can be seen when clicking play -let numOfQuotes = quoteJson.length; -console.log(numOfQuotes); - window.setInterval(showQuote, 10000); function showQuote() { - let random = Math.floor(Math.random() * numOfQuotes); - quotePara.textContent = `${quoteJson[6].quote} -- ${quoteJson[6].author}`; + let random = Math.floor(Math.random() * quotes.length); + quotePara.textContent = `${quotes[random].quote} -- ${quotes[random].author}`; } ``` From 3950b3810eadf83ea6d4b05ca50af90ec0d366fa Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Wed, 11 Dec 2024 13:08:27 +0000 Subject: [PATCH 3/6] added the aria-tabbed-info-box example --- .../accessibility/wai-aria_basics/index.md | 198 +++++++++++++++++- 1 file changed, 195 insertions(+), 3 deletions(-) diff --git a/files/en-us/learn/accessibility/wai-aria_basics/index.md b/files/en-us/learn/accessibility/wai-aria_basics/index.md index bae5758bad7189b..851c839c8971c68 100644 --- a/files/en-us/learn/accessibility/wai-aria_basics/index.md +++ b/files/en-us/learn/accessibility/wai-aria_basics/index.md @@ -490,11 +490,203 @@ Now when you try this using a screen reader, you'll have buttons be reported usi There are a whole host of other [roles](/en-US/docs/Web/Accessibility/ARIA/Roles) that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example [`combobox`](/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role), [`slider`](/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role), [`tabpanel`](/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role), [`tree`](/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role). You can see several useful examples in the [Deque university code library](https://dequeuniversity.com/library/) to give you an idea of how such controls can be made accessible. -Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see [Hiding things](/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#hiding_things) in our CSS and JavaScript accessibility article), which you can find at [Tabbed info box example](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/tabbed-info-box.html) (see [source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/tabbed-info-box.html)). +Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see [Hiding things](/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#hiding_things) in our CSS and JavaScript accessibility article), which you can find at [Tabbed info box example](/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples#a_fixed_position_tabbed_info-box). This example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. It is also fairly accessible too — you can scroll through the content and use the headings to navigate, even if you can't see what is happening on screen. It is however not that obvious what the content is — a screen reader currently reports the content as a list of links, and some content with three headings. It doesn't give you any idea of what the relationship is between the content. Giving the user more clues as to the structure of the content is always good. -To improve things, we've created a new version of the example called [`aria-tabbed-info-box.html`](https://github.com/mdn/learning-area/blob/main/accessibility/aria/aria-tabbed-info-box.html) ([see it running live](https://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html)). We've updated the structure of the tabbed interface like so: +To improve things, we've created a new version of the example. + +```html live-sample___aria-tabbed-info-box +
+
    + +
  • + Tab 2 +
    • +
  • + Tab 3 +
    • +
+
+
+

The first tab

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque + turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum + et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius + libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt + metus. Donec ultrices, urna maximus consequat aliquet, dui neque + eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor + urna. Nulla facilisi. +

+
+ + +
+
+``` + +```css live-sample___aria-tabbed-info-box +/* General setup */ +html { + font-family: sans-serif; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; +} + +/* info-box setup */ + +.info-box { + width: calc(100% - 20px); + height: 400px; + margin: 0 auto; +} + +/* styling info-box tabs */ + +ul[role="tablist"] { + padding-left: 0; + margin-top: 0; +} + +li[role="tab"] { + float: left; + list-style-type: none; + width: calc(100% / 3); + display: inline-block; + line-height: 3; + background-color: red; + color: black; + text-align: center; +} + +li[role="tab"]:focus, +li[role="tab"]:hover { + background-color: #a60000; + color: white; +} + +li[role="tab"].active { + background-color: #a60000; + color: white; +} + +/* styling info-box panels */ + +.info-box .panels { + clear: both; + position: relative; + height: 352px; +} + +.info-box article { + background-color: #a60000; + color: white; + position: absolute; + padding: 10px; + height: 352px; + top: 0; + left: 0; +} + +.info-box .active-panel { + z-index: 1; +} +``` + +```js live-sample___aria-tabbed-info-box +let tabs = document.querySelectorAll(".info-box li"); +let panels = document.querySelectorAll(".info-box article"); + +for (let i = 0; i < tabs.length; i++) { + let tab = tabs[i]; + setTabHandler(tab); +} + +function setTab(e) { + if (e.type === "keypress" && e.keyCode !== 13) { + return; + } + + let tabPos = Number(this.getAttribute("aria-posinset")) - 1; + for (let i = 0; i < tabs.length; i++) { + if (tabs[i].getAttribute("class")) { + tabs[i].removeAttribute("class"); + } + + tabs[i].setAttribute("aria-selected", "false"); + } + + this.setAttribute("class", "active"); + this.setAttribute("aria-selected", "true"); + + for (let i = 0; i < panels.length; i++) { + if (panels[i].getAttribute("class")) { + panels[i].removeAttribute("class"); + } + + panels[i].setAttribute("aria-hidden", "true"); + } + + panels[tabPos].setAttribute("class", "active-panel"); + panels[tabPos].setAttribute("aria-hidden", "false"); +} + +function setTabHandler(tab) { + tab.addEventListener("click", setTab); + tab.addEventListener("keypress", setTab); +} +``` + +{{EmbedLiveSample("aria-tabbed-info-box", "100", "420")}} + +We've updated the structure of the tabbed interface like so: ```html
    @@ -532,7 +724,7 @@ To improve things, we've created a new version of the example called [`aria-tabb ``` > [!NOTE] -> The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screen reader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc. +> The most striking change here is that we've removed the links that were originally present in the [example](/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples#a_fixed_position_tabbed_info-box), and just used the list items as the tabs — this was done because it makes things less confusing for screen reader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc. ARIA features used include: From 5e08723a2bd3d8abeda3d89db32ae4a247edd522 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Wed, 11 Dec 2024 15:33:11 +0000 Subject: [PATCH 4/6] Update files/en-us/learn/accessibility/wai-aria_basics/index.md Co-authored-by: Brian Smith --- files/en-us/learn/accessibility/wai-aria_basics/index.md | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/files/en-us/learn/accessibility/wai-aria_basics/index.md b/files/en-us/learn/accessibility/wai-aria_basics/index.md index 851c839c8971c68..3a4b64fc2b9f22f 100644 --- a/files/en-us/learn/accessibility/wai-aria_basics/index.md +++ b/files/en-us/learn/accessibility/wai-aria_basics/index.md @@ -568,15 +568,9 @@ To improve things, we've created a new version of the example. ```css live-sample___aria-tabbed-info-box /* General setup */ -html { +body { font-family: sans-serif; -} - -* { box-sizing: border-box; -} - -body { margin: 0; } From 1cc44434953e46f89b7854c652aaeefde39cca6b Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Wed, 11 Dec 2024 15:33:24 +0000 Subject: [PATCH 5/6] Update files/en-us/learn/accessibility/wai-aria_basics/index.md Co-authored-by: Brian Smith --- files/en-us/learn/accessibility/wai-aria_basics/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/accessibility/wai-aria_basics/index.md b/files/en-us/learn/accessibility/wai-aria_basics/index.md index 3a4b64fc2b9f22f..b14fae86d6e791d 100644 --- a/files/en-us/learn/accessibility/wai-aria_basics/index.md +++ b/files/en-us/learn/accessibility/wai-aria_basics/index.md @@ -566,7 +566,7 @@ To improve things, we've created a new version of the example.
``` -```css live-sample___aria-tabbed-info-box +```css hidden live-sample___aria-tabbed-info-box /* General setup */ body { font-family: sans-serif; From 7559688ced21a4b7bc9e6cc6562b389391891522 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Wed, 11 Dec 2024 16:46:53 +0000 Subject: [PATCH 6/6] added the aria-roles example --- .../accessibility/wai-aria_basics/index.md | 458 +++++++++++++++++- 1 file changed, 449 insertions(+), 9 deletions(-) diff --git a/files/en-us/learn/accessibility/wai-aria_basics/index.md b/files/en-us/learn/accessibility/wai-aria_basics/index.md index 851c839c8971c68..412e6297cc33135 100644 --- a/files/en-us/learn/accessibility/wai-aria_basics/index.md +++ b/files/en-us/learn/accessibility/wai-aria_basics/index.md @@ -123,29 +123,233 @@ See our section on [testing screen readers](/en-US/docs/Learn/Tools_and_testing/ ### Signposts/Landmarks -WAI-ARIA adds the [`role` attribute](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screen readers so that their users can find common page elements. Let's look at an example — our [website-no-roles](https://github.com/mdn/learning-area/tree/main/accessibility/aria/website-no-roles) example ([see it live](https://mdn.github.io/learning-area/accessibility/aria/website-no-roles/)) has the following structure: +WAI-ARIA adds the [`role` attribute](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screen readers so that their users can find common page elements. This example has the following structure: -```html +```html live-sample___aria-website-no-roles
-

…

+

Header

+ + +
+
-
…
- + +
+

Article heading

+ +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam + lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra + nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam + eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue + enim, ut porta lorem lacinia consectetur. +

+ +

subsection

+ +

+ Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum + dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut + turpis felis, pulvinar a semper sed, adipiscing id dolor. +

+
+ + +
-
…
+ + +
+

©Copyright 2050 by nobody. All rights reversed.

+
+``` + +```css hidden live-sample___aria-website-no-roles +/* || General setup */ + +html, +body { + margin: 0; + padding: 0; +} + +html { + font-size: 10px; + background-color: #a9a9a9; +} + +body { + width: max(70vw, 90%); + margin: 0 auto; + padding: 0 10px; + display: flex; + flex-direction: column; +} + +/* || typography */ + +h1, +h2, +h3 { + font-family: "Sonsie One", cursive; + color: #2a2a2a; +} + +p, +input, +li { + font-family: "Open Sans Condensed", sans-serif; + color: #2a2a2a; +} + +h1 { + font-size: 4rem; + text-align: center; + color: white; + text-shadow: 2px 2px 10px black; +} + +h2 { + font-size: 3rem; + text-align: center; +} + +h3 { + font-size: 2.2rem; +} + +p, +li { + font-size: 1.6rem; + line-height: 1.5; +} + +/* || header layout */ + +header { + margin-bottom: 10px; +} + +nav, +article, +aside, +footer { + background-color: white; + padding: 1%; +} + +nav { + background-color: ff80ff; + display: flex; + gap: 2vw; + @media (width <= 650px) { + flex-direction: column; + } +} + +nav ul { + padding: 0; + list-style-type: none; + flex: 2; + display: flex; + gap: 2vw; +} + +nav li { + display: inline; + text-align: center; +} + +nav a { + display: inline-block; + font-size: 2rem; + text-transform: uppercase; + text-decoration: none; + color: black; +} + +nav form { + flex: 1; + display: flex; + align-items: center; + height: 100%; +} + +input { + font-size: 1.6rem; + height: 32px; +} + +input[type="search"] { + flex: 3; +} + +input[type="submit"] { + flex: 1; + margin-left: 1rem; + background: #333; + border: 0; + color: white; +} + +/* || main layout */ + +main { + display: flex; + gap: 2vw; + @media (width <= 650px) { + flex-direction: column; + } +} + +article { + flex: 4; +} + +aside { + flex: 1; + background-color: #ff80ff; +} + +aside li { + padding-bottom: 10px; +} + +footer { + margin-top: 10px; +} ``` +{{EmbedLiveSample("aria-website-no-roles", "100", "850")}} + If you try testing the example with a screen reader in a modern browser, you'll already get some useful information. For example, VoiceOver gives you the following: - On the `
` element — "banner, 2 items" (it contains a heading and the `