You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: dev-checklists.md
+98-24Lines changed: 98 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,15 +17,18 @@ outline: "deep"
17
17
18
18
# Development Checklists
19
19
20
-
20
+
<!-- -->
21
21
22
-
23
-
There are a number of tools we can use to assist in the creation of accessible web applications.
22
+
There are a number of tools we can use to assist in the creation of accessible web applications.
24
23
25
24
Here are some common issues that should make your spidey senses go off. My goal is for you to be able to identify these in code reviews and demos.
26
25
27
26
We want to bring kindness to these situations and not judge people. We also need to identify accessibility issues (ideally) before they ship:
28
27
28
+
## Use Semantic Structure
29
+
30
+
Semantic structure is created with `<h1>`-`<h6>` headings, landmarks such as `<main>`, `<nav>`, `<footer>`, `<section>` (with unique labels), content markup including `<ul>` and `<ol>` lists, and more. These are incredibly important for people who rely on AT to understand the structure of a page.
31
+
29
32
## Keyboard Navigation
30
33
31
34
By far the easiest and also one of the most important checks is to test if your entire website can be reached and used with the keyboard alone. Do this by:
@@ -35,36 +38,86 @@ By far the easiest and also one of the most important checks is to test if your
35
38
3. Using `Enter` to activate elements.
36
39
4. Where required, using your keyboard arrow keys to interact with some elements, such as menus and dropdowns.
37
40
38
-
::: info
41
+
::: warning
42
+
43
+
Users should know which element is currently focused. Do not remove default styles of the focused elements. If you want to change the style of the focus ring, replace the default one with your own outline.
44
+
45
+
Here are some examples of custom focus rings in [Tapsi design system](https://github.com/Tap30/web-components):
Proximity issues can arise when interface elements are designed far apart from one another. This mostly affects people with **low-vision** who rely on zoom software.
What happens when someone uses zoom software is that they only see a small fraction of the screen at once. Usually, the zoomed portion of the screen follows the current position of the mouse pointer or keyboard cursor.
73
+
As you see both link and button are focusable, but we want the whole thing be focusable once.
53
74
54
-
As a result of someone only being able to see a small section at a time, oftentimes when attempting to complete a task, content is difficult to find or may be missed entirely.
75
+
We have 2 options:
55
76
56
-
How do we test to ensure there are minimal to no proximity issues with our design? One relatively simple and effective method is to perform what's called, "the straw test."
<!-- If you are using `@tapsioss/web-components` or `@tapsioss/react-components` package, you can easily pass href to the button componets and use them as links. -->
On most pages, keyboard and screen reader users must navigate a long list of navigation links and other elements before ever arriving at the main content. This can be particularly difficult for users with some forms of motor disabilities. Consider users with no or limited arm movement who navigate a web page by tapping their heads on a switch or that use a stick in their mouth to press keyboard keys. Requiring users to perform any action numerous times before reaching the main content poses an accessibility barrier.
101
+
102
+
Of course, sighted people who use their mouse do not have any trouble with web pages like this. They can almost immediately scan over the page and identify where the main content is. Skip navigation links are useful to give screen reader and keyboard users the same capability of navigating directly to the main content.
103
+
104
+
The idea is simple enough: provide a link at the top of the page that, when activated, jumps the user to the beginning of the main content area.
105
+
106
+
```html
107
+
<body>
108
+
<ahref="#main">Skip to main content</a>
109
+
<navrole="navigation">
110
+
<ul>
111
+
<li><ahref="/">Home</a></li>
112
+
<li><ahref="/about">About</a></li>
113
+
<li><ahref="/blog">Blog</a></li>
114
+
</ul>
115
+
</nav>
116
+
<mainid="main">
117
+
<!-- page specific content -->
118
+
</main>
119
+
</body>
120
+
```
68
121
69
122
## Modals
70
123
@@ -85,8 +138,7 @@ Non-modal dialogs don’t have all of the same background requirements. But the
85
138
</tapsi-button-group>
86
139
</tapsi-modal>
87
140
88
-
89
-
## Don't be a `div` button creator!
141
+
## Don't be a `div` button creator
90
142
91
143
It’s real easy to add a click event to a `div`. Too easy, in fact. And it happens all the time! the problem is, `div`s are not interactive elements so you have to backfill quite a few things to make them accessible. All the while, you could have just used a `<button>` element and been done with it.
92
144
@@ -114,7 +166,6 @@ Then we set a `role="button"` attribute. based on [MDN documentation](https://de
114
166
115
167
> The button role is for clickable elements that trigger a response when activated by the user. Adding role="button" tells the screen reader the element is a button, but provides no button functionality.
116
168
117
-
118
169
```tsx
119
170
const MyComponent = () => {
120
171
const fn = () => {
@@ -201,7 +252,7 @@ That’s it. No explicit button `role`, no `tabIndex`, no key handler (because b
201
252
202
253
:::
203
254
204
-
## Use `prefer-reduce-motion` for your animations!
255
+
## Use `prefer-reduce-motion` for your animations
205
256
206
257
::: danger Warning
207
258
@@ -219,6 +270,29 @@ Such animations can trigger discomfort for those with vestibular motion disorder
219
270
on <a href="https://codepen.io">CodePen</a>.
220
271
</iframe>
221
272
273
+
## Straw Testing
274
+
275
+
Proximity issues can arise when interface elements are designed far apart from one another. This mostly affects people with **low-vision** who rely on zoom software.
276
+
277
+
What happens when someone uses zoom software is that they only see a small fraction of the screen at once. Usually, the zoomed portion of the screen follows the current position of the mouse pointer or keyboard cursor.
278
+
279
+
As a result of someone only being able to see a small section at a time, oftentimes when attempting to complete a task, content is difficult to find or may be missed entirely.
280
+
281
+
How do we test to ensure there are minimal to no proximity issues with our design? One relatively simple and effective method is to perform what's called, "the straw test."
Copy file name to clipboardExpand all lines: focus-control.md
+43-11Lines changed: 43 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,8 +13,8 @@ Ensure that your web application can be fully operated with the keyboard only:
13
13
14
14
-[WebAIM talks about keyboard accessibility](https://webaim.org/techniques/keyboard/)
15
15
16
-
## Keyboard focus and focus outline (focus ring)
17
-
16
+
<!--## Keyboard focus and focus outline (focus ring)-->
17
+
<!--
18
18
Keyboard focus refers to the current element in the DOM that is selected to accept input from the keyboard. We see it everywhere as a focus outline similar to that shown in the following image:
19
19
20
20
[](https://legacy.reactjs.org/static/dec0e6bcc1f882baf76ebc860d4f04e5/4fcfe/keyboard-focus.png)
@@ -31,13 +31,9 @@ Here are some examples of custom focus rings in [Tapsi design system](https://gi
Provide a mechanism to allow users to skip past navigation sections in your application as this assists and speeds up keyboard navigation.
39
-
40
-
### Skip Links
36
+
## Skip Links
41
37
42
38
On most pages, keyboard and screen reader users must navigate a long list of navigation links and other elements before ever arriving at the main content. This can be particularly difficult for users with some forms of motor disabilities. Consider users with no or limited arm movement who navigate a web page by tapping their heads on a switch or that use a stick in their mouth to press keyboard keys. Requiring users to perform any action numerous times before reaching the main content poses an accessibility barrier.
43
39
@@ -61,9 +57,6 @@ The idea is simple enough: provide a link at the top of the page that, when acti
@@ -132,3 +125,42 @@ A great focus management example is the [react-aria-modal](https://github.com/d
132
125
::: warning
133
126
While this is a very important accessibility feature, it is also a technique that should be used judiciously. Use it to repair the keyboard focus flow when it is disturbed, not to try and anticipate how users want to use applications.
<!-- If you are using `@tapsioss/web-components` or `@tapsioss/react-components` package, you can easily pass href to the button componets and use them as links. -->
Accessibility is the practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.
10
+
<b>Accessibility is the practice of making your websites usable by as many people as possible</b>. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.
11
11
12
12
You might also think of accessibility as treating everyone the same, and giving them equal opportunities, no matter what their ability or circumstances. Just as it is wrong to exclude someone from a physical building because they are in a wheelchair (modern public buildings generally have wheelchair ramps or elevators), it is also not right to exclude someone from a website because they have a visual impairment. We are all different, but we are all human, and therefore have the same human rights.
13
13
14
14
Accessibility is the right thing to do. Providing accessible sites is part of the law in some countries, which can open up some significant markets that otherwise would not be able to use your services or buy your products.
15
15
16
16
## What kinds of disability are we looking at?
17
17
18
-
People with disabilities are just as diverse as people without disabilities, and so are their disabilities. The key lesson here is to think beyond your own computer and how you use the web, and start learning about how others use it — you are not your users. The main types of disability to consider are explained below, along with any special tools they use to access web content (known as assistive technologies, or ATs).
18
+
People with disabilities are just as diverse as people without disabilities, and so are their disabilities. <b>The key lesson here is to think beyond your own computer and how you use the web, and start learning about how others use it — you are not your users</b>. The main types of disability to consider are explained below, along with any special tools they use to access web content (known as assistive technologies, or ATs).
19
19
20
20
::: info Note
21
21
@@ -26,7 +26,6 @@ The World Health Organization's [Disability and health](https://www.who.int/en/n
26
26
27
27
People with visual impairments include people with blindness, low-level vision, and color blindness. Many people with visual impairments use screen magnifiers that are either physical magnifiers or software zoom capabilities. Most browsers and operating systems these days have zoom capabilities. Some users will rely on screen readers, which is software that reads digital text aloud.
28
28
29
-
30
29
### People with hearing impairments
31
30
32
31
[Deaf and hard-of-hearing (DHH)](https://www.nad.org/resources/american-sign-language/community-and-culture-frequently-asked-questions/) people have various levels of hearing loss ranging from mild to profound. Although some do use AT (see [Assistive Devices for People with Hearing, Voice, Speech, or Language Disorders](https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders)), they are not widespread.
@@ -60,4 +59,3 @@ A good foundation of accessibility for people with cognitive impairments include
60
59
- Dividing processes into logical, essential steps with progress indicators.
61
60
- Website authentication as easy as possible without compromising security.
62
61
- Making forms easy to complete, such as with clear error messages and simple error recovery.
0 commit comments