Skip to content

Commit

Permalink
chore: add languages to code blocks in marking guides (#726)
Browse files Browse the repository at this point in the history 
__Additions:__
- Add lang to code block info strings in marking guides 

__Changes:__
- incidental formatting md & code blocks
- Minor typo fix
- indent nested lists in md
  • Loading branch information
@bsmth
bsmth authored Apr 5, 2024
1 parent 88fa9dd commit 5c24cf4
Show file tree
Hide file tree
Showing 26 changed files with 699 additions and 487 deletions.
22 changes: 12 additions & 10 deletions accessibility/tasks/html-css/aria/marking.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ The aim of these tasks is to demonstrate an understanding of the techniques cove

## Task 1

In our first ARIA task, we present you with a section of non-semantic markup, which is obviously meant to be a list. Assuming you are not able to change the elements used, how can you allow screenreader users to recognize this as a list?
In our first ARIA task, we present you with a section of non-semantic markup, which is obviously meant to be a list. Assuming you are not able to change the elements used, how can you allow screenreader users to recognize this as a list?

The `list` and `listitem` roles are what you need here. The updated markup would look like so:

```
```html
<div role="list">
<div role="listitem">Pig</div>
<div role="listitem">Gazelle</div>
Expand All @@ -32,21 +32,23 @@ Answers:

The finished HTML should look something like this:

```
```html
<form role="search">
<input type="search" name="search"
aria-label="Search for your favorite content on our site">
<input
type="search"
name="search"
aria-label="Search for your favorite content on our site"
/>
</form>
```

## Task 3
For this final WAI-ARIA task, we return to an example we previously saw in the [CSS and JavaScript skilltest](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility). As before, we have a simple app that presents a list of animal names. Clicking one of the animal names causes a further description of that animal to appear in a box below the list. Here, we are starting with a mouse- and keyboard-accessible version.

For this final WAI-ARIA task, we return to an example we previously saw in the [CSS and JavaScript skilltest](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility). As before, we have a simple app that presents a list of animal names. Clicking one of the animal names causes a further description of that animal to appear in a box below the list. Here, we are starting with a mouse- and keyboard-accessible version.

The problem we have now is that when the DOM changes to show a new description, screenreaders cannot see what has changed. Can you update it so that description changes are announced by the screenreader?

There are two ways to solve this:

* Add an `aria-live=""` attribute to the animal-description `<div>` to turn it into a live region, so when its content changes, the updated content will be read out by a screenreader. The best value is probably `assertive`, which makes the screenreader read out the updated content as soon as it changed. `polite` means that the screenreader will wait until other descriptions have finished before it starts reading out the changed content.
* Add a `role="alert"` attribute to the animal-description `<div>`, to make it have alert box semantics. This has the same effect on the screenreader as setting `aria-live="assertive"` on it.


- Add an `aria-live=""` attribute to the animal-description `<div>` to turn it into a live region, so when its content changes, the updated content will be read out by a screenreader. The best value is probably `assertive`, which makes the screenreader read out the updated content as soon as it changed. `polite` means that the screenreader will wait until other descriptions have finished before it starts reading out the changed content.
- Add a `role="alert"` attribute to the animal-description `<div>`, to make it have alert box semantics. This has the same effect on the screenreader as setting `aria-live="assertive"` on it.
38 changes: 22 additions & 16 deletions accessibility/tasks/html-css/css/marking.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,22 @@ We'd like you to assume that the existing ruleset with the `a` selector is suppl

The CSS could look something like this:

```
```css
li a {
text-decoration: underline;
color: rgb(150,0,0);
color: rgb(150, 0, 0);
}

li a:hover, li a:focus {
li a:hover,
li a:focus {
text-decoration: none;
color: rgb(255,0,0);
color: rgb(255, 0, 0);
}
```

## Task 2

In this next task you are presented with a simple bit of content — just headings and paragraphs. There are accessibility issues with the colors and sizing of the text; we'd like you to:
In this next task you are presented with a simple bit of content — just headings and paragraphs. There are accessibility issues with the colors and sizing of the text; we'd like you to:

1. Explain what the problems are, and what the guidelines are that state the acceptable values for color and sizing.
2. Select new values for the color and font-size that fix the problem.
Expand All @@ -35,28 +36,33 @@ The answers:

1. (Q1) The problems are that first of all, the color contrast is not acceptable, as per WCAG criteria [1.4.3 (AA)](https://www.w3.org/TR/WCAG21/#contrast-minimum) and [1.4.6 (AAA)](https://www.w3.org/TR/WCAG21/#contrast-enhanced), and secondly, the text is sized using vw units, which means that it is not zoomable in most browsers. [WCAG 1.4.4 (AA)](https://www.w3.org/TR/WCAG21/#resize-text) states that text should be resizable.
2. (Qs 2 and 3) to fix the code, you need to
* Choose a much better contrasting set of background and foreground colors.
* Use some different units to size the text (such as rem or even px), or even implement something that uses a combination of vw and other units, if you want it resizable but still relative in part to the viewport size

- Choose a much better contrasting set of background and foreground colors.
- Use some different units to size the text (such as rem or even px), or even implement something that uses a combination of vw and other units, if you want it resizable but still relative in part to the viewport size

3. For testing:
* You can test color contrast using a tool such as [aXe](https://www.deque.com/axe/), The [Firefox Accessibility Inspector](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector), or even a simple standalone web page tool like the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/).
* For text resizing, you'd need to load the example in a browser and try to resize it. Resizing vw unit-sized text works in Safari, but not Firefox or Chromium-based browsers.

- You can test color contrast using a tool such as [aXe](https://www.deque.com/axe/), The [Firefox Accessibility Inspector](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector), or even a simple standalone web page tool like the [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/).
- For text resizing, you'd need to load the example in a browser and try to resize it. Resizing vw unit-sized text works in Safari, but not Firefox or Chromium-based browsers.

For the updated code, something like this would work for the updated color scheme:

```
```css
main {
padding: 20px;
background-color: red;
}

h1, h2, p {
h1,
h2,
p {
color: black;
}
```
```

And something like this would work for the font sizing:

```
```css
h1 {
font-size: calc(2.5rem);
}
Expand All @@ -70,9 +76,9 @@ p {
}
```

Or this, if you want to do something a bit cleverer that gives you resizable viewport-relative units:
Or this, if you want to do something a bit cleverer that gives you resizable viewport-relative units:

```
```css
h1 {
font-size: calc(1.5vw + 1rem);
}
Expand All @@ -97,7 +103,7 @@ Answers:
1. To begin with, you'll need to add `tabindex="0"` to the list items to make them focusable via the keyboard.
2. Then you'll need to add in another event listener inside the `forEach()` loop, to make the code respond to keys being pressed while the list items are selected. It is probably a good idea to make it respond to a specific key, such as "Enter", in which case something like the following is probably acceptable:

```
```css
item.addEventListener('keyup', function(e) {
if(e.key === 'Enter') {
handleSelection(e);
Expand Down
126 changes: 78 additions & 48 deletions accessibility/tasks/html-css/html/marking.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,48 @@ In this task we will test your understanding of text semantics, and why they are

The given text is a simple information panel with action buttons:

```
<font size="7">Need help?</font>
<br><br>
If you have any problems with our products, our support center can offer you all the help you need, whether you want:
<br><br>
```html
<font size="7">Need help?</font> <br /><br />
If you have any problems with our products, our support center can offer you all
the help you need, whether you want:
<br /><br />
1. Advice choosing a new product
<br>
<br />
2. Tech support on an existing product
<br>
<br />
3. Refund and cancellation assistance
<br><br>
<br /><br />
<font size="5">Contact us now</font>
<br><br>
<br /><br />
Our help center contains live chat, e-mail addresses, and phone numbers.
<br><br>
<br /><br />
<div class="button">Find Contact Details</div>
<br><br>
<br /><br />
<font size="5">Find out answers</font>
<br><br>
Our Forums section contains a large knowledge base of searchable previously asked questions, and you can always ask a new question if you can't find the answer you're looking for.
<br><br>
<br /><br />
Our Forums section contains a large knowledge base of searchable previously
asked questions, and you can always ask a new question if you can't find the
answer you're looking for.
<br /><br />
<div class="button">Access forums</div>
```

But of course, this is terrible for semantics and accessibility. A much better set of markup would look like so:

```
```html
<h2>Need help?</h2>

<p>If you have any problems with our products, our support center can offer you all the help you need, whether you want:</p>
<p>
If you have any problems with our products, our support center can offer you
all the help you need, whether you want:
</p>

<ul>
<li>Advice choosing a new product</li>
<li>Tech support on an existing product</li>
<li>Refund and cancellation assistance</li>
</ul>

<h3>Contact us now</h3>

<p>Our help center contains live chat, e-mail addresses, and phone numbers.</p>
Expand All @@ -51,7 +58,11 @@ But of course, this is terrible for semantics and accessibility. A much better s

<h3>Find out answers</h3>

<p>Our Forums section contains a large knowledge base of searchable previously asked questions, and you can always ask a new question if you can't find the answer you're looking for.</p>
<p>
Our Forums section contains a large knowledge base of searchable previously
asked questions, and you can always ask a new question if you can't find the
answer you're looking for.
</p>

<button>Access forums</button>
```
Expand All @@ -62,6 +73,7 @@ You can get a couple of extra marks for:
2. Using an unordered list, not an ordered list — the list of items doesn't really need to be in any order.

## Task 2

In the second task, you have a form containing three input fields. You need to:

1. Semantically associate the input with their labels.
Expand All @@ -76,29 +88,29 @@ This is fairly simple, especially if you have previously worked through our [Web

Your answer should end up looking something like this:

```
```html
<form>
<fieldset>
<legend>Personal data</legend>
<legend>Personal data</legend>
<ul>
<li>
<label for="name">Name</label>
<input type="text" name="name" id="name">
<input type="text" name="name" id="name" />
</li>
<li>
<label for="age">Age</label>
<input type="number" name="age" id="age">
<input type="number" name="age" id="age" />
</li>
<li>
<label for="email">Email address</label>
<input type="email" name="email" id="email">
<input type="email" name="email" id="email" />
</li>
</ul>
</fieldset>
</form>
```

# Task 3
## Task 3

In this task you are required to turn all the information links in the paragraph into good, accessible links.

Expand All @@ -108,14 +120,26 @@ In this task you are required to turn all the information links in the paragraph

Initially the paragraph looks like this:

```
<p>For more information about our activities, check out our fundraising page (<a href="/fundraising">click here</a>), education page (<a href="/education">click here</a>), sponsorship pack (<a href="/resources/sponsorship.pdf">click here</a>), and assessment sheets (<a href="/resources/assessments.docx">click here</a>).</p>
```html
<p>
For more information about our activities, check out our fundraising page (
<a href="/fundraising">click here</a>), education page (
<a href="/education">click here</a>), sponsorship pack (
<a href="/resources/sponsorship.pdf">click here</a>), and assessment sheets (
<a href="/resources/assessments.docx">click here</a>).
</p>
```

But you should update it to something like this:

```
<p>For more information about our activities, check out our <a href="/fundraising">fundraising page</a>, <a href="/education">education page</a>, <a href="/resources/sponsorship.pdf">sponsorship pack (PDF, 8MB)</a>, and <a href="/resources/assessments.docx">assessment sheets (Word document)</a>.</p>
```html
<p>
For more information about our activities, check out our
<a href="/fundraising">fundraising page</a>,
<a href="/education">education page</a>,
<a href="/resources/sponsorship.pdf">sponsorship pack (PDF, 8MB)</a>, and
<a href="/resources/assessments.docx">assessment sheets (Word document)</a>.
</p>
```

## Task 4
Expand All @@ -127,31 +151,37 @@ In our final HTML accessibility task, you are given a simple image gallery, whic

So, on to the answers:

1. The header image is decorative, so doesn't really need alt text. The best solution if you are going to use decorative HTML images is to put `alt=""`, so a screenreader will just read out nothing — rather than a description, or the image file name. It is not part of the content.
1. The header image is decorative, so doesn't really need alt text. The best solution if you are going to use decorative HTML images is to put `alt=""`, so a screenreader will just read out nothing — rather than a description, or the image file name. It is not part of the content.
2. The gallery images need alt text, and they are part of the content. The updated HTML could look something like this:

```
<header>
<img src="images/star.png" alt="">
<h1>Groovy images</h1>
</header>
<main>
<img src="images/teapot.jpg" alt="a black teapot placed on a shelf just inside a window">
<img src="images/football.jpg" alt="A black and white round panelled ball">
</main>
```
```html
<header>
<img src="images/star.png" alt="" />
<h1>Groovy images</h1>
</header>
<main>
<img
src="images/teapot.jpg"
alt="a black teapot placed on a shelf just inside a window"
/>
<img
src="images/football.jpg"
alt="A black and white round panelled ball"
/>
</main>
```

3. It would be arguable better to implement the background header image using CSS background images. To do this, you would remove the following line:

```
<img src="images/star.png" alt="A star that I use to decorate my page">
```
```html
<img src="images/star.png" alt="A star that I use to decorate my page" />
```

And add in a CSS rule along these lines:
And add in a CSS rule along these lines:

```
h1 {
background: url(images/star.png) no-repeat left;
padding-left: 50px;
}
```
```css
h1 {
background: url(images/star.png) no-repeat left;
padding-left: 50px;
}
```
Loading

0 comments on commit 5c24cf4

Please sign in to comment.