Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FR translation for a11y chapter #759

Merged
merged 18 commits into from
Apr 28, 2020
Merged

FR translation for a11y chapter #759

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
26f8dbe
Creation of FR translation for a11y chapter
nico3333fr Apr 27, 2020
583dc80
Fix some descriptions (vertical/horizontal)
nico3333fr Apr 28, 2020
058c78a
Add kbd tag to tab text
nico3333fr Apr 28, 2020
6034d35
Add non-breaking space before percentages
nico3333fr Apr 28, 2020
bc28ec5
Fix some URLs
nico3333fr Apr 28, 2020
7d4edf6
Fix line number
nico3333fr Apr 28, 2020
ba2515f
Accessibility chapter FR translation
nico3333fr Apr 28, 2020
19e47d3
FR translation of bio a11y
nico3333fr Apr 28, 2020
2bd24fe
Escape quotes on Abigail's bio
borisschapira Apr 28, 2020
cfaa6b6
Minor fixes
borisschapira Apr 28, 2020
b5fe628
Improve wording
borisschapira Apr 28, 2020
6c3a2e8
Web -> web + gender inclusive developpers
borisschapira Apr 28, 2020
042974d
More inclusive (gender)
borisschapira Apr 28, 2020
c0db65b
microtypo
borisschapira Apr 28, 2020
efb630b
Improve meaning
borisschapira Apr 28, 2020
d83e6a4
More inclusive
borisschapira Apr 28, 2020
115fed4
Merge pull request #1 from borisschapira/patch-1
nico3333fr Apr 28, 2020
a89b22e
Moved Boris updates to chapter summary
nico3333fr Apr 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/content/en/2019/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ All of these elements are primarily designed for accessibility support and have
<a href="/static/images/2019/accessibility/fig5.png">
<img src="/static/images/2019/accessibility/fig5.png" alt="Figure 5. Usage of various HTML semantic elements." aria-labelledby="fig5-caption" aria-describedby="fig5-description" width="600" height="371" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vSG3DTnx7j-YT1hnQpQYjDRD-rCSF1dXbgva-iJQZKdCKIt34ojGMDRhx74fF93CpPg7oGW_C68fWGT/pubchart?oid=708035719&amp;format=interactive">
</a>
<div id="fig5-description" class="visually-hidden">Horizontal bar chart with bars for each element type vs percent of pages ranging from 0 to 60 in increments of 20. nav: 53.94%; header: 54.82%; footer: 55.92%; main: 18.47%; aside: 16.99%; article: 22.59%; hr: 19.1%; section: 36.55%.</div>
<div id="fig5-description" class="visually-hidden">Vertical bar chart with bars for each element type vs percent of pages ranging from 0 to 60 in increments of 20. nav: 53.94%; header: 54.82%; footer: 55.92%; main: 18.47%; aside: 16.99%; article: 22.59%; hr: 19.1%; section: 36.55%.</div>
<figcaption id="fig5-caption" >Figure 5. Usage of various HTML semantic elements.</figcaption>
</figure>

Expand All @@ -169,15 +169,15 @@ Many popular screen readers also allow users to navigate by quickly jumping thro
<a href="/static/images/2019/accessibility/fig6.png">
<img src="/static/images/2019/accessibility/fig6.png" alt="Figure 6. Other HTML elements used for navigation" aria-labelledby="fig6-caption" aria-describedby="fig6-description" width="600" height="371" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vSG3DTnx7j-YT1hnQpQYjDRD-rCSF1dXbgva-iJQZKdCKIt34ojGMDRhx74fF93CpPg7oGW_C68fWGT/pubchart?oid=389034849&amp;format=interactive">
</a>
<div id="fig6-description" class="visually-hidden">Horizontal bar chart with bars for each element type vs percent of pages ranging from 0 to 100 in increments of 25. a: 98.22%; ul: 88.62%; input: 76.63%; iframe: 60.39%; button: 56.74%; select: 19.68%; textarea: 12.03%.</div>
<div id="fig6-description" class="visually-hidden">Vertical bar chart with bars for each element type vs percent of pages ranging from 0 to 100 in increments of 25. a: 98.22%; ul: 88.62%; input: 76.63%; iframe: 60.39%; button: 56.74%; select: 19.68%; textarea: 12.03%.</div>
<figcaption id="fig6-caption">Figure 6. Other HTML elements used for navigation.</figcaption>
</figure>

### Skip Links

A [skip link](https://webaim.org/techniques/skipnav/) is a link placed at the top of a page which allows screen readers or keyboard-only users to jump straight to the main content. It effectively "skips" over all navigational links and menus at the top of the page. Skip links are especially useful to keyboard users who don't use a screen reader, as these users don't usually have access to other modes of quick navigation (like landmarks and headings). 14.19% of the pages in our sample were found to have skip links.

If you'd like to see a skip link in action for yourself, you can! Just do a quick Google search and hit "tab" as soon as you land on the search result pages. You'll be greeted with a previously hidden link just like the one in Figure 7.
If you'd like to see a skip link in action for yourself, you can! Just do a quick Google search and hit "<kbd>tab</kbd>" as soon as you land on the search result pages. You'll be greeted with a previously hidden link just like the one in Figure 7.

<figure>
<a href="/static/images/2019/accessibility/example-of-a-skip-link-on-google.com.png">
Expand Down Expand Up @@ -247,7 +247,7 @@ Currently, 46.91% of pages use at least one ARIA role attribute. In Figure 9 bel
<a href="/static/images/2019/accessibility/fig9.png">
<img src="/static/images/2019/accessibility/fig9.png" alt="Figure 9. Top 10 aria roles." aria-labelledby="fig9-caption" aria-describedby="fig9-description" width="600" height="371" data-width="600" data-height="371" data-seamless data-frameborder="0" data-scrolling="no" data-iframe="https://docs.google.com/spreadsheets/d/e/2PACX-1vSG3DTnx7j-YT1hnQpQYjDRD-rCSF1dXbgva-iJQZKdCKIt34ojGMDRhx74fF93CpPg7oGW_C68fWGT/pubchart?oid=176877741&amp;format=interactive">
</a>
<div id="fig9-description" class="visually-hidden">Horizontal bar chart with bars for each role type vs percent of sites using ranging from 0 to 25 in increments of 5. Navigation: 20.4%; search: 15.49%; main: 14.39%; banner: 13.62%; contentinfo: 11.23%; button: 10.59%; dialog: 7.87%; complementary: 6.06%; menu: 4.71%; form: 3.75%</div>
<div id="fig9-description" class="visually-hidden">Vertical bar chart with bars for each role type vs percent of sites using ranging from 0 to 25 in increments of 5. Navigation: 20.4%; search: 15.49%; main: 14.39%; banner: 13.62%; contentinfo: 11.23%; button: 10.59%; dialog: 7.87%; complementary: 6.06%; menu: 4.71%; form: 3.75%</div>
<figcaption id="fig9-caption" >Figure 9. Top 10 aria roles.</figcaption>
</figure>

Expand Down
Loading