diff --git a/.gitignore b/page1/.gitignore similarity index 100% rename from .gitignore rename to page1/.gitignore diff --git a/2020-04/1-environment.md b/page1/2020-04/1-environment.md similarity index 100% rename from 2020-04/1-environment.md rename to page1/2020-04/1-environment.md diff --git a/2020-04/2-data.md b/page1/2020-04/2-data.md similarity index 100% rename from 2020-04/2-data.md rename to page1/2020-04/2-data.md diff --git a/2020-04/3-results.md b/page1/2020-04/3-results.md similarity index 100% rename from 2020-04/3-results.md rename to page1/2020-04/3-results.md diff --git a/LICENSE b/page1/LICENSE similarity index 100% rename from LICENSE rename to page1/LICENSE diff --git a/README.md b/page1/README.md similarity index 100% rename from README.md rename to page1/README.md diff --git a/global.css b/page1/global.css similarity index 100% rename from global.css rename to page1/global.css diff --git a/index.html b/page1/index.html similarity index 100% rename from index.html rename to page1/index.html diff --git a/page2/.github/workflows/jekyll-docker.yml b/page2/.github/workflows/jekyll-docker.yml new file mode 100644 index 0000000..3d0eedb --- /dev/null +++ b/page2/.github/workflows/jekyll-docker.yml @@ -0,0 +1,20 @@ +name: Jekyll site CI + +on: + push: + branches: [ "main" ] + pull_request: + branches: [ "main" ] + +jobs: + build: + + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + - name: Build the site in the jekyll/builder container + run: | + docker run \ + -v ${{ github.workspace }}:/srv/jekyll -v ${{ github.workspace }}/_site:/srv/jekyll/_site \ + jekyll/builder:latest /bin/bash -c "chmod -R 777 /srv/jekyll && jekyll build --future" diff --git a/page2/.gitignore b/page2/.gitignore new file mode 100644 index 0000000..bfba4b6 --- /dev/null +++ b/page2/.gitignore @@ -0,0 +1,2 @@ +.DS_Store +**/.DS_Store \ No newline at end of file diff --git a/page2/2020-04/1-environment.md b/page2/2020-04/1-environment.md new file mode 100644 index 0000000..7239888 --- /dev/null +++ b/page2/2020-04/1-environment.md @@ -0,0 +1,78 @@ +# Testing environment + +## Languages + +- Website language: English + Spanish +- OS language: Finnish +- Screen reader UI: Finnish +- Browser language: Finnish + +## Website + +I compared the following 7 approaches for labelling a close button: + +- K: Using `aria-label`. +- L: Using `aria-label` and an explicit `lang` attribute. +- M: Using `aria-labelledby` and referring to a visually hidden label outside the labelled element. +- N: Using `aria-labelledby` and referring to a visually hidden and `aria-hidden` label outside the labelled element. +- O: Using `aria-labelledby` and referring to a visually hidden label inside the labelled element. +- P: Using `aria-labelledby` and referring to a visually hidden and `aria-hidden` label inside the labelled element. +- Q: Using a visually hidden label inside the labelled element. + +## Combinations + +- VoiceOver (desktop): + + - Device: MacBook Pro (16-inch, 2019) + - macOS version: 10.15.2 + - VoiceOver: included with macOS + - Safari version: 13.1 (15609.1.20.111.8) + - Chrome version: 81.0.4044.92 + - Firefox version: 75.0 + - Opera version: 67.0.3575.137 + - Edge version: 80.0.361.111 + +- VoiceOver (mobile): + + - Device: iPhone 11 + - iOS version: 13.4.1 + - VoiceOver: included with iOS + - Safari version: 13 + - Chrome version: 81.0.4044.62 + - Firefox version: 24.1 + - Opera Touch version: 2.2.1 + - Edge version: 45.2.16 + +- NVDA + + - Device: Asus X540LA + - Windows version: 10 Home 18362.418 + - NVDA version: 2019.3.1 + - Safari version: N/A (not maintained) + - Chrome version: 81.0.4044.92 + - Firefox version: 75.0 + - Opera version: 67.0.3575.137 + - Edge version: 80.0.361.111 + +- JAWS + + - Device: Asus X540LA + - Windows version: 10 Home 18362.418 + - JAWS version: 2019.1912.9 Multilingual + - JAWS with "Language Detect Change" selected + - Safari version: N/A (not maintained) + - Chrome version: 81.0.4044.92 + - Firefox version: 75.0 + - Opera version: 67.0.3575.137 + - Edge version: 80.0.361.111 + +- TalkBack + + - Device: Samsung Galaxy S8+ + - OS: Android 9 Build/PPR1.180610.011 + - TalkBack version: 8.1.0.278818032 + - Safari version: N/A (not maintained) + - Chrome version: 81.0.4044.96 + - Firefox version: 68.7.0 + - Opera Touch version: 2.3.9 + - Edge version: 45.02.4.4931 diff --git a/page2/2020-04/2-data.md b/page2/2020-04/2-data.md new file mode 100644 index 0000000..e6cfad1 --- /dev/null +++ b/page2/2020-04/2-data.md @@ -0,0 +1,497 @@ +# Data + +## VoiceOver (desktop) + +### VoiceOver (desktop) + Safari + +#### VoiceOver (desktop) + Safari + continuous reading + +- K: [Finnish voice] close, painike +- L: [Finnish voice] close, painike +- M: [Finnish voice] close, painike, close +- N: [Finnish voice] close, painike +- O: [Finnish voice] close, painike +- P: [Finnish voice] close, painike +- Q: [English voice] close [Finnish voice] painike + +#### VoiceOver (desktop) + Safari + using VO-right arrow to move the reading cursor + +- K: [Finnish voice] close, painike +- L: [Finnish voice] close, painike +- M: [Finnish voice] close, painike [English voice] close +- N: [Finnish voice] close, painike +- O: [Finnish voice] close, painike +- P: [Finnish voice] close, painike +- Q: [English voice] close [Finnish voice] painike + +#### VoiceOver (desktop) + Safari + tabbing to move focus + +- K: [Finnish voice] close, painike +- L: [Finnish voice] close, painike +- M: [Finnish voice] close, painike +- N: [Finnish voice] close, painike +- O: [Finnish voice] close, painike +- P: [Finnish voice] close, painike +- Q: [English voice] close [Finnish voice] painike + +### VoiceOver (desktop) + Chrome + +#### VoiceOver (desktop) + Chrome + continuous reading + +- K: [Finnish voice] close, painike +- L: [Finnish voice] close, painike +- M: [English voice] close [Finnish voice] painike, close +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +#### VoiceOver (desktop) + Chrome + using VO-right arrow to move the reading cursor + +- K: [Finnish voice] close, painike +- L: [Finnish voice] close, painike +- M: [English voice] close [Finnish voice] painike [English voice] close +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +#### VoiceOver (desktop) + Chrome + tabbing to move focus + +- K: [Finnish voice] close, painike +- L: [Finnish voice] close, painike +- M: [English voice] close [Finnish voice] painike +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +### VoiceOver (desktop) + Firefox + +#### VoiceOver (desktop) + Firefox + continuous reading + +- K: [Finnish voice] close, button +- L: [Finnish voice] close, button +- M: [Finnish voice] close, button, close +- N: [Finnish voice] close, button +- O: [Finnish voice] close, button +- P: [Finnish voice] close, button +- Q: [Finnish voice] close, button + +#### VoiceOver (desktop) + Firefox + using VO-right arrow to move the reading cursor + +- K: [Finnish voice] close, button +- L: [Finnish voice] close, button +- M: [Finnish voice] close, button, close +- N: [Finnish voice] close, button +- O: [Finnish voice] close, button +- P: [Finnish voice] close, button +- Q: [Finnish voice] close, button + +#### VoiceOver (desktop) + Firefox + tabbing to move focus + +- K: [Finnish voice] close, button +- L: [Finnish voice] close, button +- M: [Finnish voice] close, button, close +- N: [Finnish voice] close, button +- O: [Finnish voice] close, button +- P: [Finnish voice] close, button +- Q: [Finnish voice] close, button + +### VoiceOver (desktop) + Opera + +#### VoiceOver (desktop) + Opera + continuous reading + +- K: [Finnish voice] close, painike +- L: [Finnish voice] close, painike +- M: [English voice] close [Finnish voice] painike, close +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +#### VoiceOver (desktop) + Opera + using VO-right arrow to move the reading cursor + +- K: [Finnish voice] close, painike +- L: [Finnish voice] close, painike +- M: [English voice] close [Finnish voice] painike [English voice] close +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +#### VoiceOver (desktop) + Opera + tabbing to move focus + +- K: [Finnish voice] close, painike +- L: [Finnish voice] close, painike +- M: [English voice] close [Finnish voice] painike +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +### VoiceOver (desktop) + Edge + +#### VoiceOver (desktop) + Edge + continuous reading + +- K: [Finnish voice] close, painike +- L: [Finnish voice] close, painike +- M: [English voice] close [Finnish voice] painike, close +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike, close +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +#### VoiceOver (desktop) + Edge + using VO-right arrow to move the reading cursor + +- K: [Finnish voice] close, painike +- L: [Finnish voice] close, painike +- M: [English voice] close [Finnish voice] painike [English voice] close +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +#### VoiceOver (desktop) + Edge + tabbing to move focus + +- K: [Finnish voice] close, painike +- L: [Finnish voice] close, painike +- M: [English voice] close [Finnish voice] painike +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +## VoiceOver (mobile) + +### VoiceOver (mobile) + Safari, Chrome, Firefox, Opera Touch, Edge + +On iPhone, you can perform a simple gesture (by default, swipe up with one finger) to change VoiceOver language regardless of the OS language. If VoiceOver is in Finnish, everything is announced with a Finnish voice. When VoiceOver is in English, everything is announced with an English voice. + +- K: [Finnish voice] close, painike +- L: [Finnish voice] close, painike +- M: [Finnish voice] close, painike, close +- N: [Finnish voice] close, painike +- O: [Finnish voice] close, painike +- P: [Finnish voice] close, painike +- Q: [Finnish voice] close, painike + +## NVDA + +### NVDA + Chrome + +#### NVDA + Chrome + continuous reading + +- K: [Finnish voice] painike, close +- L: [Finnish voice] painike, close +- M: [Finnish voice] painike, close [English voice] close +- N: [Finnish voice] painike, close +- O: [Finnish voice] painike, close +- P: [Finnish voice] painike, close +- Q: [Finnish voice] painike [English voice] close + +#### NVDA + Chrome + using down arrow to move reading cursor + +- K: [Finnish voice] painike, close +- L: [Finnish voice] painike, close +- M: [Finnish voice] painike, close [English voice] close +- N: [Finnish voice] painike, close +- O: [Finnish voice] painike, close +- P: [Finnish voice] painike, close +- Q: [Finnish voice] painike [English voice] close + +#### NVDA + Chrome + tabbing to move focus + +- K: [Finnish voice] close painike +- L: [Finnish voice] close painike +- M: [Finnish voice] close painike +- N: [Finnish voice] close painike +- O: [Finnish voice] close painike +- P: [Finnish voice] close painike +- Q: [English voice] close [Finnish voice] painike + +### NVDA + Firefox + +#### NVDA + Firefox + continuous reading + +- K: [Finnish voice] painike [English voice] close +- L: [Finnish voice] painike [English voice] close +- M: [Finnish voice] painike [English voice] close, close +- N: [Finnish voice] painike [English voice] close +- O: [Finnish voice] painike [English voice] close +- P: [Finnish voice] painike [English voice] close +- Q: [Finnish voice] painike [English voice] close + +#### NVDA + Firefox + using down arrow to move reading cursor + +- K: [Finnish voice] painike [English voice] close +- L: [Finnish voice] painike [English voice] close +- M: [Finnish voice] painike [English voice] close, close +- N: [Finnish voice] painike [English voice] close +- O: [Finnish voice] painike [English voice] close +- P: [Finnish voice] painike [English voice] close +- Q: [Finnish voice] painike [English voice] close + +#### NVDA + Firefox + tabbing to move focus + +- K: [English voice] close [Finnish voice] painike +- L: [English voice] close [Finnish voice] painike +- M: [English voice] close [Finnish voice] painike +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +#### NVDA + Opera + continuous reading + +- K: [Finnish voice] painike, close +- L: [Finnish voice] painike, close +- M: [Finnish voice] painike, close [English voice] close +- N: [Finnish voice] painike, close +- O: [Finnish voice] painike, close +- P: [Finnish voice] painike, close +- Q: [Finnish voice] painike [English voice] close + +#### NVDA + Opera + using down arrow to move reading cursor + +- K: [Finnish voice] painike, close +- L: [Finnish voice] painike, close +- M: [Finnish voice] painike, close [English voice] close +- N: [Finnish voice] painike, close +- O: [Finnish voice] painike, close +- P: [Finnish voice] painike, close +- Q: [Finnish voice] painike [English voice] close + +#### NVDA + Opera + tabbing to move focus + +- K: [Finnish voice] close painike +- L: [Finnish voice] close painike +- M: [Finnish voice] close painike +- N: [Finnish voice] close painike +- O: [Finnish voice] close painike +- P: [Finnish voice] close painike +- Q: [English voice] close [Finnish voice] painike + +### NVDA + Edge + +#### NVDA + Edge + continuous reading + +- K: [Finnish voice] painike, close +- L: [Finnish voice] painike, close +- M: [Finnish voice] painike, close [English voice] close +- N: [Finnish voice] painike, close +- O: [Finnish voice] painike, close +- P: [Finnish voice] painike, close +- Q: [Finnish voice] painike [English voice] close + +#### NVDA + Edge + using down arrow to move reading cursor + +- K: [Finnish voice] painike, close +- L: [Finnish voice] painike, close +- M: [Finnish voice] painike, close [English voice] close +- N: [Finnish voice] painike, close +- O: [Finnish voice] painike, close +- P: [Finnish voice] painike, close +- Q: [Finnish voice] painike [English voice] close + +#### NVDA + Edge + tabbing to move focus + +- K: [Finnish voice] close painike +- L: [Finnish voice] close painike +- M: [Finnish voice] close painike +- N: [Finnish voice] close painike +- O: [Finnish voice] close painike +- P: [Finnish voice] close painike +- Q: [English voice] close [Finnish voice] painike + +## JAWS + +### JAWS + Chrome + +#### JAWS + Chrome + continuous reading + +- K: [English voice] close painike +- L: [English voice] close painike +- M: [English voice] close painike, close +- N: [English voice] close painike +- O: [English voice] close painike +- P: [English voice] close painike +- Q: [English voice] close painike + +#### JAWS + Chrome + using the down arrow to move the reading cursor + +- K: [English voice] close painike +- L: [English voice] close painike +- M: [English voice] close painike, close +- N: [English voice] close painike +- O: [English voice] close painike +- P: [English voice] close painike +- Q: [English voice] close painike + +#### JAWS + Chrome + tabbing to move focus + +- K: [English voice] close [Finnish voice] painike +- L: [English voice] close [Finnish voice] painike +- M: [English voice] close [Finnish voice] painike +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +### JAWS + Firefox + +This combination didn't really work. + +### JAWS + Opera + +#### JAWS + Opera + continuous reading + +- K: [English voice] close painike +- L: [English voice] close painike +- M: [English voice] close painike, close +- N: [English voice] close painike +- O: [English voice] close painike +- P: [English voice] close painike +- Q: [English voice] close painike + +#### JAWS + Opera + using down arrow to move the reading cursor + +- K: [English voice] close painike +- L: [English voice] close painike +- M: [English voice] close painike, close +- N: [English voice] close painike +- O: [English voice] close painike +- P: [English voice] close painike +- Q: [English voice] close painike + +#### JAWS + Opera + tabbing to move focus + +- K: [English voice] close [Finnish voice] painike +- L: [English voice] close [Finnish voice] painike +- M: [English voice] close [Finnish voice] painike +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +### JAWS + Edge + +#### JAWS + Edge + continuous reading + +- K: [English voice] close painike +- L: [English voice] close painike +- M: [English voice] close painike, close +- N: [English voice] close painike +- O: [English voice] close painike +- P: [English voice] close painike +- Q: [English voice] close painike + +#### JAWS + Edge + using down arrow to move the reading cursor + +- K: [English voice] close painike +- L: [English voice] close painike +- M: [English voice] close painike, close +- N: [English voice] close painike +- O: [English voice] close painike +- P: [English voice] close painike +- Q: [English voice] close painike + +#### JAWS + Edge + tabbing to move focus + +- K: [English voice] close [Finnish voice] painike +- L: [English voice] close [Finnish voice] painike +- M: [English voice] close [Finnish voice] painike +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +## Samsung + TalkBack + +### Samsung + TalkBack + Chrome + +#### Samsung + TalkBack + Chrome + continuous reading + +- K: [English voice] close [Finnish voice] painike +- L: [English voice] close [Finnish voice] painike +- M: [English voice] close [Finnish voice] painike [English voice] close +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +#### Samsung + TalkBack + Chrome + swiping right to move reading pointer + +- K: [English voice] close [Finnish voice] painike +- L: [English voice] close [Finnish voice] painike +- M: [English voice] close [Finnish voice] painike [English voice] close +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +### Samsung + TalkBack + Firefox + +#### Samsung + TalkBack + Firefox + continuous reading + +- K: [Finnish voice] close painike +- L: [Finnish voice] close painike +- M: [Finnish voice] close painike, close +- N: [Finnish voice] close painike +- O: [Finnish voice] close painike +- P: [Finnish voice] close painike +- Q: [Finnish voice] close painike + +#### Samsung + TalkBack + Firefox + swiping right to move reading pointer + +- K: [Finnish voice] close painike +- L: [Finnish voice] close painike +- M: [Finnish voice] close painike, close +- N: [Finnish voice] close painike +- O: [Finnish voice] close painike +- P: [Finnish voice] close painike +- Q: [Finnish voice] close painike + +### Samsung + TalkBack + Opera Touch + +#### Samsung + TalkBack + Opera + continuous reading + +- K: [English voice] close, button +- L: [English voice] close, button +- M: [English voice] close, button, close +- N: [English voice] close, button +- O: [English voice] close, button +- P: [English voice] close, button +- Q: [English voice] close, button + +#### Samsung + TalkBack + Opera + swiping right to move reading pointer + +- K: [English voice] close, button +- L: [English voice] close, button +- M: [English voice] close, button, close +- N: [English voice] close, button +- O: [English voice] close, button +- P: [English voice] close, button +- Q: [English voice] close, button + +### Samsung + TalkBack + Edge + +#### Samsung + TalkBack + Edge + continuous reading + +- K: [English voice] close [Finnish voice] painike +- L: [English voice] close [Finnish voice] painike +- M: [English voice] close [Finnish voice] painike [English voice] close +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike + +#### Samsung + TalkBack + Edge + swiping right to move reading pointer + +- K: [English voice] close [Finnish voice] painike +- L: [English voice] close [Finnish voice] painike +- M: [English voice] close [Finnish voice] painike [English voice] close +- N: [English voice] close [Finnish voice] painike +- O: [English voice] close [Finnish voice] painike +- P: [English voice] close [Finnish voice] painike +- Q: [English voice] close [Finnish voice] painike diff --git a/page2/2020-04/3-results.md b/page2/2020-04/3-results.md new file mode 100644 index 0000000..6eae373 --- /dev/null +++ b/page2/2020-04/3-results.md @@ -0,0 +1,55 @@ +# Results + +## Scoring + +- For each test case, I recorded how and with what voice (Finnish or English) the screen reader announces the button. Check out [data.md](2020-04/data.md)! + +- I gave scores for each test case. Check out [the Google Sheet's Scores tab](https://docs.google.com/spreadsheets/d/18hjaiR4UyI4lisJQK_L7eHHohkWZwv4vlrvHm1IkIXY/edit#gid=0): + + - 3: Perfect announcement; voices and languages matched correctly. + - Example 1: [English voice] close button + - Example 2: [English voice] close [Finnish voice] painike + - 2: The voices and languages are matched correctly, but there's repetition. + - Example: [English voice] close [Finnish voice] painike, close + - 1: The accessible label is announced in the right voice, but the name of the element is announced in the wrong voice. Or, the accessible label is announced multiple times and not all of them correctly. + - Example: [English voice] close, painike + - 0: the accessible label is announced in the wrong voice, or there's some other big issue + - Example 1: [Finnish voice] close, painike + +## Analysis + +I did some analysis. Check out [the Google Sheet's Analysis tab](https://docs.google.com/spreadsheets/d/18hjaiR4UyI4lisJQK_L7eHHohkWZwv4vlrvHm1IkIXY/edit#gid=1046548750). + +- All ARIA-based approaches (A to F) led to language issues in more than 50% test cases. +- Approach G (using a visually hidden text element) led to the least amount of language issues. Furthermore, if we exclude from the analysis the test cases that gave uniformly bad results (score of 0 or 1), approach G was announced perfectly 100% of the time. +- By screen reader: + - TalkBack had the highest score. + - VoiceOver (mobile) had the lowest score, because it doesn't automatically switch languages. +- By browser: they all performed quite poorly, with average scores below 1.5. +- By screen reader and browser combination: + - The most successful combination was NVDA + Firefox. This is interesting, considering that Firefox got only 0 scores with all other screen readers. + - After Firefox, VoiceOver (desktop), performed the worst with Safari, and it also performed equally with the other three browsers. This is interesting, since I've heard often that VoiceOver is most suited to work with Safari. + - VoiceOver (mobile) had the exact same behavior in all cases. + - Both JAWS and TalkBack performed equally with Chrome, Opera, and Edge. + +## Conclusion + +Put the text alternatives a `` element or similar, and put that **inside** the element in question. Then use CSS to hide it **visually**. + +- Do not use `display: none` or `visibility: hidden`, those hide it from screen readers too. +- Something like this works well: + +```css +.visually-hidden:not(:focus):not(:focus-within):not(:active) { + position: absolute; + height: 1px; + width: 1px; + border: 0; + padding: 0; + margin: 0; + overflow: hidden; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + white-space: nowrap; +} +``` diff --git "a/page2/LEEME_Jes\303\272s.txt" "b/page2/LEEME_Jes\303\272s.txt" new file mode 100644 index 0000000..99b6221 --- /dev/null +++ "b/page2/LEEME_Jes\303\272s.txt" @@ -0,0 +1 @@ +He hecho el siguiente cambio: en la segunda imagen (lang explícito), he cambiado el lang a ES y he puesto el contenido del aria-label en español. \ No newline at end of file diff --git a/page2/LICENSE b/page2/LICENSE new file mode 100644 index 0000000..c82e7ee --- /dev/null +++ b/page2/LICENSE @@ -0,0 +1,7 @@ +Copyright (c) 2020 Xurxe Toivo García + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/page2/README.md b/page2/README.md new file mode 100644 index 0000000..803c5f3 --- /dev/null +++ b/page2/README.md @@ -0,0 +1,44 @@ +# Accessible labelling multilanguage experiment + +Just a little experiment on how screen readers handle languages and different ways of providing accessible labels to elements. + +When information is conveyed by visual means (for example, an "X" icon to indicate a Close button), we must provide an accessible label: an equivalent text alternative that can be annouced by screen readers. + +Screen readers don't always perform well in multiple languages (for example, when the OS or screen reader UI is in one language, and the web content is in another). There are multiple challenges in this matter, but this experiment was specifically designed to figure out what's the best way to provide text alternatives for elements that don't support an `alt` attribute. + +## Overview + +I made a website with a number of common ways to provide text alternatives. + +Then I performed tests... + +...using 4 major screen readers (VoiceOver, NVDA, JAWS, TalkBack) + +...on 5 major browsers (Safari, Chrome, Firefox, Opera / Opera Touch, Edge) + +...on desktop and mobile + +...in 3 modes (continous reading, using keyboard or swiping shortcuts to move the reading cursor, and tabbing to move focus to the next button). + +## Testing site + +[Check it out on GitHub pages](https://xurxe.github.io/accessible-labelling-multilanguage-experiment/)! + +## Outcomes + +I'm planning on repeating this experiment once a year. + +- [2020 experiment](2020-04) + +## Sibling study + +- [Screen reader multilanguage experiment](https://github.com/xurxe/screenreader-multilanguage-experiment), the previous study. +- [The troubled state of screen readers in multilingual situations](https://medium.com/@xurxe/the-troubled-state-of-screen-readers-in-multilingual-situations-f6a9da4ecdf3), a Medium article where I explain and analyze several related experiments. + +## Author + +Xurxe Toivo García + +## License + +This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. diff --git a/page2/global.css b/page2/global.css new file mode 100644 index 0000000..e782cc4 --- /dev/null +++ b/page2/global.css @@ -0,0 +1,28 @@ +/* ------- */ +/* GENERAL */ +/* ------- */ + +* { + font-size: 40px; +} + +body { + margin: 100px; +} + +ol { + list-style-type: upper-alpha; +} + +li { + margin-bottom: 1em; +} + +.visually-hidden { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); +} diff --git a/page2/index.html b/page2/index.html new file mode 100644 index 0000000..580e4ab --- /dev/null +++ b/page2/index.html @@ -0,0 +1,155 @@ + + + + + + + + + Título + + + + + + + + + + + + + + + + +
+

Page Header

+ +
+ + + +
+

Different accessible labelling methods

+
    +
  1. +

    This button has aria-label:

    + +
    2. +
  2. +

    + This button has aria-label and an explicit + lang attribute: +

    + +
    3. +
  3. +

    + This button has aria-labelledby, and the visually + hidden label is outside: +

    + + +
    4. +
  4. +

    + This button has aria-labelledby, and the visually + hidden and aria-hidden label is outside: +

    + + +
    5. +
  5. +

    + This button has aria-labelledby, and the visually + hidden label is inside: +

    + +
    6. +
  6. +

    + This button has aria-labelledby, and the visually + hidden and aria-hidden label is inside: +

    + +
    7. +
  7. +

    This button has a visually hidden label inside:

    + +
    8. +
+ + + + + + + + + + + + + + + + + + +
CAT Editor
ENESStatus
HelloHola100
ByeAdiós90
+
+ Translation of Word +

Palabra

+
+
+
Lemma
+
Casa
+
Part of Speech
+
Sustantivo femenino
+
+
+ + + + diff --git a/page2/index2copia.html b/page2/index2copia.html new file mode 100644 index 0000000..3a31817 --- /dev/null +++ b/page2/index2copia.html @@ -0,0 +1,155 @@ + + + + + + + + + Título + + + + + + + + + + + + + + + + +
+

Page Header

+ +
+ + + +
+

Different accessible labelling methods

+
    +
  1. +

    Este botón tiene aria-label:

    + +
    2. +
  2. +

    + This button has aria-label and an explicit + lang attribute: +

    + +
    3. +
  3. +

    + This button has aria-labelledby, and the visually + hidden label is outside in Spanish: +

    + + +
    4. +
  4. +

    + This Spanish button has aria-labelledby, and the visually + hidden and aria-hidden label is outside: +

    + + +
    5. +
  5. +

    + This button has aria-labelledby, and the visually + hidden label is inside: +

    + +
    6. +
  6. +

    + This button has aria-labelledby, and the visually + hidden and aria-hidden label is inside: +

    + +
    7. +
  7. +

    This button has a visually hidden label inside:

    + +
    8. +
+

Example of abbreviations, such as Mr., fig., Wed.

+ + + + + + + + + + + + + + + + + +
CAT Editor
ENESStatus
HelloHola100
ByeAdiós90
+
+ Traducción de palabra +

Word

+
+
+
Lemma
+
Casa
+
Part of Speech
+
Sustantivo femenino
+
+
+ + + + diff --git a/page2/indexXurxe.html b/page2/indexXurxe.html new file mode 100644 index 0000000..df7c8aa --- /dev/null +++ b/page2/indexXurxe.html @@ -0,0 +1,114 @@ + + + + + + + + + Title + + + + + + + + + + + + + + + +
+

Different accessible labelling methods

+
    +
  1. +

    This button has aria-label:

    + +
    2. +
  2. +

    + This button has aria-label and an explicit + lang attribute: +

    + +
    3. +
  3. +

    + This button has aria-labelledby, and the visually + hidden label is outside: +

    + + +
    4. +
  4. +

    + This button has aria-labelledby, and the visually + hidden and aria-hidden label is outside: +

    + + +
    5. +
  5. +

    + This button has aria-labelledby, and the visually + hidden label is inside: +

    + +
    6. +
  6. +

    + This button has aria-labelledby, and the visually + hidden and aria-hidden label is inside: +

    + +
    7. +
  7. +

    This button has a visually hidden label inside:

    + +
    8. +
+

+ Check out the + GitHub repository + for test results! +

+
+ +