Skip to content
Snippets Groups Projects
Commit 933cc27f authored by Tomislav Cosic's avatar Tomislav Cosic
Browse files

Initial commit

parents
No related branches found
No related tags found
No related merge requests found
Showing
with 831 additions and 0 deletions
# EditorConfig is awesome: http://EditorConfig.org
root = true
[*]
indent_style = tab
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
quote_type = double
[*.{html,js,css}]
block_comment_start = /**
block_comment = *
block_comment_end = */
[*.js]
quote_type = single
[*.svg]
insert_final_newline = false
# Enforce Unix newlines
* text=auto eol=lf
# Don't diff or textually merge source maps
*.map binary
version: 2
updates:
- package-ecosystem: "github-actions"
directory: "/"
schedule:
interval: monthly
day: monday
time: "12:00"
timezone: Europe/Berlin
- package-ecosystem: npm
directory: "/"
reviewers:
- tommycos
labels:
- dependencies
schedule:
interval: monthly
day: monday
time: "12:00"
timezone: Europe/Berlin
versioning-strategy: increase
rebase-strategy: disabled
name: Build
on:
push:
paths:
- 'webextension/**'
branches-ignore:
- "dependabot/**"
pull_request:
types:
- opened
- synchronize
branches:
- main
- "!dependabot/**"
workflow_dispatch:
env:
FORCE_COLOR: 2
NODE: 16
permissions:
contents: read
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Clone repository
uses: actions/checkout@v4
with:
persist-credentials: false
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: "${{ env.NODE }}"
cache: npm
- name: Install npm dependencies
run: npm ci
- name: Package webextensions
run: npm run build
- name: Lint
run: npm t
# See http://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# IDEs and editors
/.idea
.idea
/.idea:*
/.idea/*
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
.vscode/*
.history/*
# misc
/.sass-cache
# System Files
.DS_Store
._*
Thumbs.db
# Numerous always-ignore extensions
*.diff
*.err
*.log
*.rej
# Build
manifest.json
*.zip
temp/
LICENSE 0 → 100644
The MIT License (MIT)
Copyright (c) 2013-2016 Gaël Poupard
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.
# Advancing Web Accessibility Knowledge by Utilizing a11y.css as an Educational Resource for Programmers
This is the code for a browser extension modified for the bachelor thesis with the title: Advancing Web Accessibility Knowledge by Utilizing a11y.css as an Educational Resource for Programmers, by Tomislav Cosic.
The original a11y.css-webextension:
[a11y.css](https://github.com/ffoodd/a11y.css/) webextension repository — for both Chromium-based browsers and Firefox.
How to set-up:
- Clone or download the repository.
- Install node and npm.
- Navigate to the webextension folder using your commnad line.
- Run "npm install" and then "npm run build".
- Two new zip folders should now have appeared within the webextension folder.
- Set the language of your browser to english.
For Firefox users:
- Go to the about:debugging page.
- Click on “This Firefox” on the left.
- Click the “Load Temporary Add-on…” button under Temporary Extensions.
- Choose the zip folder ending with "-firefox" (should be a11ycss-webextension-2.0.1-firefox.zip).
- The extension should now show up within Firefox.
For Chrome users:
- Unzip the zip folder ending with "-chrome" (should be a11ycss-webextension-2.0.1-chrome.zip).
- Go to the chrome://extensions/ page.
- Activate Developer mode on the top right of the page.
- Click on the “Load unpacked” button on the top left of the page.
- Choose the unzipped folder.
- The extension should now show up.
You may test the webextension on any website or use this simple testpage: https://github.com/tommycos/test-webpage (requires installing http-server with npm to host)
{
"a11ycssBtnApply": {
"message": "Εμφάνιση"
},
"a11ycssBtnClear": {
"message": "Εκκαθάριση"
},
"a11ycssLevel_all": {
"message": "Όλα"
},
"a11ycssLevel_obsolete": {
"message": "Παρωχημένα, Προειδοποιήσεις, και Σφάλματα"
},
"a11ycssLevel_warning": {
"message": "Προειδοποιήσεις και Σφάλματα"
},
"a11ycssLevel_error": {
"message": "Μόνο Σφάλματα"
},
"a11ycssMinimumNoticeLevel": {
"message": "Ελάχιστο Επίπεδο Αναφοράς"
},
"altEmpty": {
"message": "κενή"
},
"altMissing": {
"message": "λείπει"
},
"localizeOn": {
"message": "Ενεργοποιημένη"
},
"localizeOff": {
"message": "Ανενεργή"
},
"btn_a11y_label": {
"message": "Εμφάνιση a11y.css"
},
"btn_alt_label": {
"message": "Εμφάνιση εναλλακτικών <code>img</code>"
},
"btn_spacing_label": {
"message": "Αύξηση απόστασης κειμένου"
},
"btn_outline_label": {
"message": "Έμφαση Περιγράμματος"
},
"btn_lang_label": {
"message": "Εμφάνιση χρησιμοποιούμενων γλωσσών"
},
"h1Allycss": {
"message": "a11y.css"
},
"h1Allycss2": {
"message": "a11y.css: ρυθμίσεις"
},
"h1Others": {
"message": "Άλλα εργαλεία"
},
"scrollToImage": {
"message": "Μετακινηθείτε στην εικόνα"
},
"checkAltsHeading": {
"message": "$NUMBER$ εικόνες",
"placeholders": {
"number": {
"content": "$1",
"example": "6"
}
}
}
}
{
"a11ycssBtnApply": {
"message": "Show"
},
"a11ycssBtnClear": {
"message": "Clear"
},
"a11ycssLevel_all": {
"message": "Everything"
},
"a11ycssLevel_obsolete": {
"message": "Obsolete Stuff, Warnings, and Errors"
},
"a11ycssLevel_warning": {
"message": "Warnings and Errors"
},
"a11ycssLevel_error": {
"message": "Only Errors"
},
"a11ycssMinimumNoticeLevel": {
"message": "Minimum Notice Level"
},
"altEmpty": {
"message": "empty"
},
"altMissing": {
"message": "missing"
},
"localizeOn": {
"message": "On"
},
"localizeOff": {
"message": "Off"
},
"btn_a11y_label": {
"message": "Show a11y.css"
},
"btn_alt_label": {
"message": "Show <code>error</code> list"
},
"btn_errorShow_label": {
"message": "Show list of errors"
},
"btn_spacing_label": {
"message": "Increase text spacing"
},
"btn_outline_label": {
"message": "Outline focus"
},
"btn_lang_label": {
"message": "Show languages used"
},
"h1Allycss": {
"message": "a11y.css"
},
"h1Allycss2": {
"message": "a11y.css: settings"
},
"h1Others": {
"message": "Other tools"
},
"h2ErrorList": {
"message": "List of Errors"
},
"scrollToImage": {
"message": "Scroll to Error"
},
"scrollTarget": {
"message": "Target of error scrolling"
},
"errorListHeading":{
"message": "List of Errors"
},
"errorListTotal":{
"message": "Total Errors: $number$",
"placeholders": {
"number": {
"content": "$1",
"example": "6"
}
}
},
"errorCardShow":{
"message": "Show"
},
"errorCardDetails":{
"message": "How to Fix"
},
"modalErrorSource":{
"message": "Error Source"
},
"modalContext":{
"message": "Context / Importance"
},
"modalProcedure":{
"message": "Procedure / Fix"
},
"modalTopic":{
"message": "More on the topic"
},
"modalTechniques":{
"message": "More techniques can be found here:"
},
"modalBtnClose":{
"message": "Close"
},
"figureError":{
"message": "Error:"
},
"figureTitleTag":{
"message": "Check Title Tag"
},
"figureHighlight":{
"message": "Click to highlight"
},
"checkAltsNumber": {
"message": "$1 total / $2 missing"
},
"altHeader":{
"message": "Alt tags"
},
"altErrorSource":{
"message": "Images need text alternatives (alt tag missing or empty)."
},
"altContext":{
"message": "The text alternatives provide ways to perceive images for people with visual impairments (using screen readers) or those who have difficulty understanding images. <br/> It also provides a way to search for images using keywords."
},
"altProcedure":{
"message": "Use the <b>alt</b> attribute of HTML's <b>img</b> Element to provide a description of the image (e.g. &lt;img alt=&quot;DESCRIPTION&quot;/&gt;). If the image serves a specific purpose on the web page, then describing the purpose is more important than describing the content (e.g. interactive images that provide more content when clicked). <br/> <br/> Verify that existing <b>alt</b> attributes correctly convey the meaning of their respective images."
},
"altGuideline":{
"message": "WCAG 2.2 Guideline 1.1 Text Alternatives:<br/> Success criterion 1.1.1"
},
"altSource":{
"message": "https://www.w3.org/TR/WCAG22/#non-text-content"
},
"altTechniques":{
"message": "https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=111#non-text-content"
},
"checkButtonTypesNumber": {
"message": "$number$ types missing",
"placeholders": {
"number": {
"content": "$1",
"example": "6"
}
}
},
"buttonTypeHeader":{
"message": "Missing [type] (button)"
},
"buttonTypeErrorSource":{
"message": "A button that is not part of a form and doesn't have form attributes (form, formaction, formtarget) needs to have its type attribute set (Missing [type])."
},
"buttonTypeContext":{
"message": "Assistive technologies need enough information about components to function correctly, using the HTML button tag according to spec is one way to ensure that the buttons function is obvious. <br/> <br/> People with disabilities need assistive technologies to function correctly in order to be able to use a website the same way all other people do."
},
"buttonTypeProcedure":{
"message": "If a button is not part of a form, set its <b>type</b> to type=&quot;button&quot;. <br/> <br/> If it is outside of a form but acts like a form button, set its form attributes accordingly (form, formaction, formtarget)."
},
"buttonTypeGuideline":{
"message": "WCAG 2.2 Guideline 4.1 Compatible:<br/> Success criterion 4.1.2"
},
"buttonTypeSource":{
"message": "https://www.w3.org/TR/WCAG22/#name-role-value"
},
"buttonTypeTechniques":{
"message": "https://www.w3.org/WAI/WCAG22/Techniques/html/H88.html"
},
"checkTabindexNumber": {
"message": "$number$ positive tabindexes",
"placeholders": {
"number": {
"content": "$1",
"example": "6"
}
}
},
"tabindexHeader":{
"message": "Disrupting tab order"
},
"tabindexErrorSource":{
"message": "Using a positive tabindex changes the order in which content is accessed when using a keyboard. <br/> <br/> Disclaimer: The changed order might still be logical, but using a positive tabindex is bad practice (everytime new content is added to the middle of the page, tab indexes must be set again)."
},
"tabindexContext":{
"message": "When using keyboard controls to navigate through the webpage, the order should be consistent and the meaning of the content preserved. Doing so allows people who rely on keyboard controls to navigate the page easily and prevents people with visual impairments from becoming confused (e.g. when the focus changes to a different part of the page)."
},
"tabindexProcedure":{
"message": "Remove positive <b>tabindexes</b> and instead write the webpage with elements in a logical sequence. Test order by tabbing through the page."
},
"tabindexGuideline":{
"message": "WCAG 2.2 Guideline 2.4 Navigable: <br/> Success criterion 2.4.3"
},
"tabindexSource":{
"message": "https://www.w3.org/TR/WCAG22/#focus-order"
},
"tabindexTechniques":{
"message": "https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=243#focus-order"
},
"checkInputNamesNumber": {
"message": "$number$ names missing",
"placeholders": {
"number": {
"content": "$1",
"example": "6"
}
}
},
"inputNameHeader":{
"message": "Missing [name]"
},
"inputNameErrorSource":{
"message": "Input elements that are grouped, like radio buttons or checkboxes, need a name attribute. (Missing [name])"
},
"inputNameContext":{
"message": "Input elements of the types <b>radio</b> and <b>checkbox</b> must be grouped, so that users that rely on screen readers know which buttons belong to the same group. <br/> <br/> The <b>name</b> attribute of the input element (&lt;input name=&quot;NAME&quot;&gt;) is used to associate radio buttons and checkboxes with one another. (e.g., in multiple choice tests the choices for a particular question must all have the same name attribute.)"
},
"inputNameProcedure":{
"message": "Use the <b>name</b> attribute on all input elements that are <b>radio</b> buttons and <b>checkboxes</b>. <br/> <br/> All radio buttons and checkboxes that belong to the same group need the same name!"
},
"inputNameGuideline":{
"message": "WCAG 2.2 Guideline 1.3 Adaptable: <br/> Success criterion 1.3.1"
},
"inputNameSource":{
"message": "https://www.w3.org/TR/WCAG22/#info-and-relationships"
},
"inputNameTechniques":{
"message": "https://www.w3.org/WAI/WCAG21/Techniques/html/H71"
},
"checkTitleTagsNumber": {
"message": "$number$ title missing",
"placeholders": {
"number": {
"content": "$1",
"example": "6"
}
}
},
"titleTagHeader":{
"message": "Empty &lt;title&gt;"
},
"titleTagErrorSource":{
"message": "Every web page should have a title that describes its content and overall topic (empty &lt;title&gt;). "
},
"titleTagContext":{
"message": "The title of a web page is used to help users quickly identify the contents of a page, making it easier to navigate. Titles allow people with visual impairments, for example, to quickly differentiate between multiple web sites."
},
"titleTagProcedure":{
"message": "Use HTMLs <b>title</b> element within the <b>head</b> section (&lt;head&gt; &lt;/head&gt;) to provide a short but descriptive title (&lt;title&gt; DESCRIPTIVE TITLE &lt;/title&gt;). "
},
"titleTagGuideline":{
"message": "WCAG 2.2 Guideline 2.4 Navigable: <br/> Success criterion 2.4.2"
},
"titleTagSource":{
"message": "https://www.w3.org/TR/WCAG22/#page-titled"
},
"titleTagTechniques":{
"message": "https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=242#page-titled"
},
"labelForsNumber": {
"message": "$number$ labels missing",
"placeholders": {
"number": {
"content": "$1",
"example": "6"
}
}
},
"labelForHeader":{
"message": "Empty [for]"
},
"labelForErrorSource":{
"message": "The <b>for</b> attribute of the <b>label</b> element should not be left empty (Empty [for])."
},
"labelForContext":{
"message": "The <b>for</b> attribute is used to associate a <b>label</b> to its corresponding component. By providing a descriptive label for components, people that rely on assistive technologies (e.g. screen readers) will have an easier time navigating the web page."
},
"labelForProcedure":{
"message": "Fill the <b>for</b> attribute with the <b>id</b> of the component it is supposed to label. (&lt;label for=&quot;TargetId&quot; &gt; &lt;/label&gt;)"
},
"labelForGuideline":{
"message": "WCAG 2.2 Guideline 1.3 Adaptable: <br/> Success criterion 1.3.1"
},
"labelForSource":{
"message": "https://www.w3.org/TR/WCAG22/#info-and-relationships"
},
"labelForTechniques":{
"message": "https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=131#info-and-relationships"
}
}
{
"a11ycssBtnApply": {
"message": "Mostrar"
},
"a11ycssBtnClear": {
"message": "Limpiar"
},
"a11ycssLevel_all": {
"message": "Todo"
},
"a11ycssLevel_obsolete": {
"message": "Cosas Obsoletas, Advertencias y Errores"
},
"a11ycssLevel_warning": {
"message": "Advertencias y Errores"
},
"a11ycssLevel_error": {
"message": "Solo Errores"
},
"a11ycssMinimumNoticeLevel": {
"message": "Nivel Mínimo de Aviso"
},
"altEmpty": {
"message": "vacío"
},
"altMissing": {
"message": "falta"
},
"localizeOn": {
"message": "On"
},
"localizeOff": {
"message": "Off"
},
"btn_a11y_label": {
"message": "Mostrar a11y.css"
},
"btn_alt_label": {
"message": "Mostrar alternativas a <code>img</code>"
},
"btn_spacing_label": {
"message": "Incrementar espaciado de texto"
},
"btn_outline_label": {
"message": "Contornear en foco"
},
"btn_lang_label": {
"message": "Mostrar idiomas utilizados"
},
"h1Allycss": {
"message": "a11y.css"
},
"h1Allycss2": {
"message": "a11y.css: ajustes"
},
"h1Others": {
"message": "Otras herramientas"
},
"scrollToImage": {
"message": "Desplácese hasta la imagen"
},
"checkAltsHeading": {
"message": "$NUMBER$ imágenes",
"placeholders": {
"number": {
"content": "$1",
"example": "6"
}
}
}
}
{
"a11ycssBtnApply": {
"message": "Afficher"
},
"a11ycssBtnClear": {
"message": "Masquer"
},
"a11ycssLevel_all": {
"message": "Tout"
},
"a11ycssLevel_obsolete": {
"message": "Éléments obsolètes, Alertes et Erreurs"
},
"a11ycssLevel_warning": {
"message": "Alertes et Erreurs"
},
"a11ycssLevel_error": {
"message": "Erreurs seulement"
},
"a11ycssMinimumNoticeLevel": {
"message": "Niveau minimum"
},
"altEmpty": {
"message": "vide"
},
"altMissing": {
"message": "manquant"
},
"localizeOn": {
"message": "Activé"
},
"localizeOff": {
"message": "Désactivé"
},
"btn_a11y_label": {
"message": "Afficher a11y.css"
},
"btn_alt_label": {
"message": "Afficher les alternatives aux <code>img</code>"
},
"btn_spacing_label": {
"message": "Augmenter les espacements du texte"
},
"btn_outline_label": {
"message": "Encadrer le focus"
},
"btn_lang_label": {
"message": "Afficher les langues"
},
"h1Allycss": {
"message": "a11y.css"
},
"h1Allycss2": {
"message": "a11y.css : réglages"
},
"h1Others": {
"message": "Autres outils"
},
"scrollToImage": {
"message": "Défiler vers l’image"
},
"checkAltsHeading": {
"message": "$number$ images",
"placeholders": {
"number": {
"content": "$1",
"example": "6"
}
}
}
}
{
"a11ycssBtnApply": {
"message": "Pokaż"
},
"a11ycssBtnClear": {
"message": "Wyczyść"
},
"a11ycssLevel_all": {
"message": "Wszystko"
},
"a11ycssLevel_obsolete": {
"message": "Przestarzałe, ostrzeżenia i błędy"
},
"a11ycssLevel_warning": {
"message": "Ostrzeżenia i błędy"
},
"a11ycssLevel_error": {
"message": "Tylko błędy"
},
"a11ycssMinimumNoticeLevel": {
"message": "Minimalny poziom alertów"
},
"altEmpty": {
"message": "pusty"
},
"altMissing": {
"message": "brak"
},
"localizeOn": {
"message": "Wł."
},
"localizeOff": {
"message": "Wył."
},
"btn_a11y_label": {
"message": "Pokaż a11y.css"
},
"btn_alt_label": {
"message": "Pokaż alternatywy <code>img</code>"
},
"btn_spacing_label": {
"message": "Zwiększ odstępy w tekście"
},
"btn_outline_label": {
"message": "Wskaźnik fokusu"
},
"btn_lang_label": {
"message": "Pokaż użyte języki"
},
"h1Allycss": {
"message": "a11y.css"
},
"h1Allycss2": {
"message": "a11y.css: ustawienia"
},
"h1Others": {
"message": "Inne narzędzia"
},
"scrollToImage": {
"message": "Przewiń do obrazu"
},
"checkAltsHeading": {
"message": "$NUMBER$ obrazów",
"placeholders": {
"number": {
"content": "$1",
"example": "6"
}
}
}
}
{
"a11ycssBtnApply": {
"message": "Показать"
},
"a11ycssBtnClear": {
"message": "Скрыть"
},
"a11ycssLevel_all": {
"message": "Все"
},
"a11ycssLevel_obsolete": {
"message": "Устаревшее, предупреждения и ошибки"
},
"a11ycssLevel_warning": {
"message": "Предупреждения и ошибки"
},
"a11ycssLevel_error": {
"message": "Только ошибки"
},
"a11ycssMinimumNoticeLevel": {
"message": "Отобразить"
},
"altEmpty": {
"message": "пустая строка"
},
"altMissing": {
"message": "отсутствует"
},
"localizeOn": {
"message": "Вкл"
},
"localizeOff": {
"message": "Выкл"
},
"btn_a11y_label": {
"message": "Показать a11y.css"
},
"btn_alt_label": {
"message": "Показать <code>img</code> alt-ы"
},
"btn_spacing_label": {
"message": "Увеличить ширину текста"
},
"btn_outline_label": {
"message": "Подсветить элементы, получившие фокус"
},
"btn_lang_label": {
"message": "Показать используемые языковые атрибуты"
},
"h1Allycss": {
"message": "a11y.css"
},
"h1Allycss2": {
"message": "a11y.css: настройки"
},
"h1Others": {
"message": "Другие инструменты"
},
"scrollToImage": {
"message": "Прокрутите изображение"
},
"checkAltsHeading": {
"message": "$NUMBER$ изображений",
"placeholders": {
"number": {
"content": "$1",
"example": "6"
}
}
}
}
This diff is collapsed.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
This diff is collapsed.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
This diff is collapsed.
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment