> The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
> The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
>
>
@ -28,7 +28,7 @@ Every web developer should familiarize themselves with a screen reader. As highl
Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools.
Some browsers also have built-in tools and extensions that can read text aloud or even provide some basic navigational features, such as [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). These are also important accessibility tools, but function very differently from screen readers and they should not be mistaken for screen reader testing tools.
✅ Try a screen reader and browser text reader. On Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default.
✅ Try a screen reader and browser text reader. On Windows, Narrator is included by default, and [JAWS](https://webaim.org/articles/jaws/) and [NVDA](https://www.nvaccess.org/about-nvda/) can also be installed. On macOS and iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) is installed by default.
### Zoom
### Zoom
@ -52,8 +52,6 @@ In the developer tool area of your browser, you'll find the Lighthouse tool. Thi
Accessibility is a relatively large topic. To help you out, there are numerous resources available.
Accessibility is a relatively large topic. To help you out, there are numerous resources available.
- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
While we won't be able to cover every aspect of creating accessible sites, below are some of the core tenets you will want to implement. Designing an accessible page from the start is **always** easier than going back to an existing page to make it accessible.
While we won't be able to cover every aspect of creating accessible sites, below are some of the core tenets you will want to implement. Designing an accessible page from the start is **always** easier than going back to an existing page to make it accessible.
## Good display principles
## Good display principles
@ -104,7 +102,7 @@ Screen readers also have the ability to read only the hyperlinks on a page, much
### Good link text
### Good link text
Good link text briefly describes what's on the other side of the link. In the above example talking about little penguins, the link is to the Wikipedia page about the species. The phrase *little penguins* would make for perfect link text as it makes it clear what someone will learn about if they click the link - little penguins.
Good link text briefly describes what's on the other side of the link. In the above example talking about little penguins, the link is to the Wikipedia page about the species. The phrase _little penguins_ would make for perfect link text as it makes it clear what someone will learn about if they click the link - little penguins.
> The [little penguin](https://en.wikipedia.org/wiki/Little_penguin), sometimes known as the fairy penguin, is the smallest penguin in the world.
> The [little penguin](https://en.wikipedia.org/wiki/Little_penguin), sometimes known as the fairy penguin, is the smallest penguin in the world.
@ -123,7 +121,7 @@ Imagine the following page:
| Widget | [Description]('#') | [Order]('#') |
| Widget | [Description]('#') | [Order]('#') |
| Super widget | [Description]('#') | [Order]('#') |
| Super widget | [Description]('#') | [Order]('#') |
In this example, duplicating the text of description and order make sense for someone using a browser. However, someone using a screen reader would only hear the words *description* and *order* repeated without context.
In this example, duplicating the text of description and order make sense for someone using a browser. However, someone using a screen reader would only hear the words _description_ and _order_ repeated without context.
To support these types of scenarios, HTML supports a set of attributes known as [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). These attributes allow you to provide additional information to screen readers.
To support these types of scenarios, HTML supports a set of attributes known as [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). These attributes allow you to provide additional information to screen readers.
@ -218,7 +216,6 @@ Take this HTML and rewrite it to be as accessible as possible, given the strateg
aryandas2911
2 months ago