🌐 AI搜索 & 代理 主页
Skip to content

Commit 8474277

Browse files
tmorehousejacobmllr95
authored andcommitted
docs(accessibility): add sub section on application a11y testing (#4061)
* docs(accessibility): add sub section on application testing * Update README.md
1 parent a090d7a commit 8474277

File tree

1 file changed

+26
-0
lines changed
  • docs/markdown/reference/accessibility

1 file changed

+26
-0
lines changed

docs/markdown/reference/accessibility/README.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,32 @@ sliding animation in carousels) will be disabled.
8383
If you are expecting animations and/or transitions to work and they are not, then you may have the
8484
reduced motion (no animation) setting enabled in your operating system control panel.
8585

86+
## Testing your application for accessibility
87+
88+
It is highly recommended to test your app for accessibility before deployment. Note that some
89+
countries even have laws
90+
[requiring all websites to be accessible](https://webaim.org/articles/laws/world/).
91+
92+
There are just two main things to think about when making your web app accessible:
93+
94+
- Defining the right keyboard behavior. BootstrapVue provides keyboard control for most of our
95+
components, but you should make sure your custom components are also keyboard accessible.
96+
- Making it possible for screen readers to understand your app. Bootstrap, in most situations, will
97+
automatically set the correct `role` and `aria-*` attributes on our components. You should also
98+
make sure that all of your custom components provide the correct roles and attributes (use
99+
semantic HTML elements and markup where possible).
100+
101+
Steps you should do for testing:
102+
103+
- Try using the _keyboard only_ to see if all interactive components can be reached and controlled.
104+
Ensure that controls have focus styling so that the user knows which interactive element they are
105+
on. Remember, keyboard user _cannot_ trigger an element's `hover` state.
106+
- Use a screen reader (combined with keyboard only) to navigate and interact with your app. There
107+
are several free screen readers available for various operating systems and browsers. Remember
108+
that screen reader users can only "see" what they hear.
109+
- See how your app looks and works when increasing the zoom level (and/or font size) of your
110+
browser.
111+
86112
## Additional resources
87113

88114
- [Bootstrap v4 Accessibility Documentation](https://getbootstrap.com/docs/4.3/getting-started/accessibility/)

0 commit comments

Comments
 (0)