Accessibility/Extensions and Manual:Extension/ContentDroplets/Examples: Difference between pages

(Difference between pages)
VisualWikitext
No edit summary
Tag: 2017 source edit
 
No edit summary
Tag: 2017 source edit
 
Line 1: Line 1:
<div id="wcaginfo">
{{TOClimit|limit=1|nonum=1|notitle=1|noborder=0|fontlarge=0|inline=1}}
{{#ask: [[Reference:+]][[Modification date::+]][[wcagStatus::+]]
==Lists==
|?wcagSupport
<div class="sectionflex col3 frame">
|intortemplate=wcagListIntro
<div>
|template=wcagList
=== Statistics ===
|outrotemplate=wcagListOutro
<bs:whoisonlinepopup /> (<bs:whoisonlinecount />)
}}
* Number of characters: <bs:countcharacters mode="chars" />
* Number of files: <bs:countfiles />
* Number of pages: <bs:countarticles />
* Number of users: <bs:countusers />
</div>
</div>
<div>
===Booklist===
<bs:booklist filter="author1:Margit Link-Rodrigue" />
</div>
<div>
===Links to this page===
<whatlinkshere count="5" period="-" sort="time" showns="0" />
</div>
<div>
===Members in group===
<bs:userlist groups="sysop" count="10" />
</div>
<div>
===Most visited pages===
<bs:toplist count="6" period="-" />
</div>
<div>
===Data query===
<dataquery modified="+" format="ul" count="6" namespaces="Manual" />
</div>
<div>
===Recent Changes===
<recentchanges count="6" period="-" sort="time" showns="0" />
</div>
<div>
===Subpages===
{{Subpages|parentnamespace=Manual|parentpage=Extension/ContentDroplets|cols=no|bullets=yes}}
</div>
<div>
===My last visited pages===
<bs:pagesvisited count="6" maxtitlelength="30" order="time" />
</div>
<div>
===My watchlist===
<bs:watchlist count="6" maxtitlelength="30" order="time" />
</div>
</div>
==Visual formatting==
<div class="sectionflex col3 frame">
<div>
===Button===
{{ButtonLink|external=no|target=Main Page|label=My page 1|format=blue}}&nbsp;{{ButtonLink|external=no|target=Main Page|label=My page 2|format=red}}&nbsp;{{ButtonLink|external=no|target=Main Page|label=My page 3|format=white}}
</div>
<div>
===Modal button===
{{ModalDialog|title=Legal notice|btnLabel=Google.com|body=You are leaving this website. We are not responsible for any content beyond this point.


==General users (readers, editors)==
[https://google.com Visit google.com]|bgcolor=blue|footer=}}
</div>
<div>
===Circled number===
{{CircledNumber|bgColor=#3e5389|fgColor=white|number=1}} Preheat oven to 425°F


=== Core functionality ===
{{CircledNumber|bgColor=#3e5389|fgColor=white|number=2}} Mix all the ingredients
CF = Core functionality, EF= Extended functionality, n/a= not applicable; AT=Authoring tool, Web=View mode, SD=Support docs (Helpdesk)


{| class="sortable contenttable rowcount" style="width:100%;"
{{CircledNumber|bgColor=#3e5389|fgColor=white|number=3}} Bake for 40 minutes
! style="width:80px;" |Type
! style="width:220px;" |Name
! style="width:100px;" |Type
!WCAG
!Accessibility notes
|-
| style="width:80px;" |CF
| style="width:220px;" | Arrays
| style="width:100px;" |
| class="col-green-bg" |supported
|parser functions - entered as text
|-
| style="width:80px;" |CF
| style="width:220px;" | BlueSpiceArticleInfo
| style="width:100px;" |AT, Web, SD
| class="col-orange-bg" |partially supported


|
{{CircledNumber|bgColor=#3e5389|fgColor=white|number=4}} Take out and let cool 30 mintes
*Extjs: Pagination in grids not announcing button types and spinbutton value
|-
| style="width:80px;" |CF
| style="width:220px;" | BlueSpiceAuthors
| style="width:100px;" |Web,


SD
{{CircledNumber|bgColor=#3e5389|fgColor=white|number=5}} Eat
| class="col-orange-bg" |partially supported
</div>
|
<div>
*Extjs: Pagination in grids not announcing button types and spinbutton value
=== {{Icon|bi bi-broadcast|||}} Icon===
|-
{{Icon|bi bi-book|||}} User manual
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceAvatars
| style="width:100px;" |
|
|
|-
| style="width:80px;"|CF
| style="width:220px;" | BlueSpiceBookshelf
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceDiscovery
| style="width:100px;" |AT, Web
| class="col-green-bg" |supported
|skip navigation, aria roles and labels for screenreaders, fully keyboard accessible
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceCategoryCheck
| style="width:100px;" |AT
| class="col-green-bg" |supported
|category announcements in save dialog (fixed in [[erm:25232|erm:25232)]]
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceCategoryManager
| style="width:100px;" |AT, Web
| class="col-grey-light-bg" |partially supported
|supported: tabbing through tabular data
not supported:


*Extjs: Pagination in grids not announcing button types and spinbutton value
{{Icon|bi bi-arrow-right-circle|||}}  Go to "Releases"
*parent-child relationships not announced
*actions-buttons only visible and interactive on mouse-hover


workaround: categories can also be managed directly on the category pages themselves. The parent-child relationship of categories is also always listed on the categories pages
{{Icon|bi bi-gear|||}} Admin info
|-
| class="col-grey-light-bg" style="width:80px;" |CLDCF
| style="width:220px;" class="col-grey-light-bg" | BlueSpiceCloudClient
| class="col-grey-light-bg" style="width:100px;" |
| class="col-grey-light-bg" style="" |
| class="col-grey-light-bg" style="" |
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceContextMenu
| style="width:100px;" |Web, SD
| class="col-orange-bg" |workaround
|allows to open a context menu that executes actions on the target page without actually going to the target page.
workaround: Simply execute the actions directly on the target page or use the "original" links in the interface
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceCustomMenu
| style="width:100px;" |AT, Web, SD
| class="col-green-bg" |supported
|
*AT: Authoring in Wikitext
* Web: Simple links lists with accessible headings
|-
| style="width:80px;" |CF
| style="width:220px;" | BlueSpiceExpiry
| style="width:100px;" |AT
| class="col-orange-bg" |partially supported
|
*Simple dialog to add/edit expiration date
*Expired articles list: extjs pagination issue
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceExpiry
| style="width:100px;" |Web, SD
| class="col-red-bg" |not supported
|page does not indicate on load that it is expired
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceExportTables
| style="width:100px;" |
| class="col-green-bg" |supported
|export menu is keyboard and screenreader accessible
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceExtendedFilelist
| style="width:100px;" |AT, Web, SD
| class="col-orange-bg" |workaround
|
*Extjs: Pagination in grids not announcing button types and spinbutton value


'''workaround:''' Special:Files uses standard html results table and accessible search form
{{Icon|bi bi-graph-up|||}}  Business updates


|-
</div>
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceExtendedSearch
| style="width:100px;" |Web,


SD
<div>
| class="col-orange-bg" |workaround
===Code===
|Problems with grid buttons and pagination. [[erm:25470|erm:25456]]
<syntaxhighlight lang="css">
 
/* Container holding the image and the text */
'''workaround:''' Special:Search uses standard html results table and accessible search form
.container {
|-
  position: relative;
|  style="width:80px;"| CF
}
| style="width:220px;" | BlueSpiceFilterableTables
/* Bottom right text */
| style="width:100px;" |AT, Web, SD
.text-block {
| class="col-green-bg" |supported
  position: absolute;
|Only needs filterable style attribute in wikitext. Fully screenreader accessible when inserted on a wiki page. Does not use extjs pagination.
  bottom: 20px;
|-
  right: 20px;
|  style="width:80px;"|CF
  padding-left: 20px;
| style="width:220px;" | BlueSpiceFilterSpecialPages
  padding-right: 20px;
| style="width:100px;" |Web, SD
}
| class="col-green-bg" |supported
</syntaxhighlight>
|Form field gets focus and it is easy to tab to the filtered links
</div>
|-
<div>
|  style="width:80px;"|CF
===Math===
| style="width:220px;" | BlueSpiceHideTitle
<math>x=\frac{-b\pm\sqrt{b^2-4ac}}{2a}</math>
| style="width:100px;" |AT
</div>
| class="col-green-bg" |supported
<div>
|Add behavior switch in source editing mode
===Chem===
|-
<chem>H2NCO2- + H2O <=> NH4+ + CO3^2-</chem>
|  style="width:80px;"|CF
</div>
| style="width:220px;" | BlueSpiceMultiUpload
<div>
| style="width:100px;" |AT
</div>
| class="col-green-bg" |supported
<div>
|workflow from clicking upload link to uploading files with the upload dialog work in screenreader
</div>
|-
</div>
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpicePageAccess
| style="width:100px;" |AT
| class="col-green-bg" |supported
|tag can be added in source editing mode
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpicePageAssignments
| style="width:100px;" |AT, Web
| class="col-grey-light-bg" |partially supported
|Supported:
AT: Assignments can be added/edited on a wiki page
 
Not supported:
 
Web: Assignments overview list uses extjs pagination
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpicePageTemplates
| style="width:100px;" |AT
| class="col-grey-light-bg" |partially supported
|Page templates manager: ExtJS grid issue for screenreaders, keyboard is supported
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpicePrivacy
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" | BlueSpiceReadConfirmation
| style="width:100px;" |Web
|FAIL 
(easy fix)
|wrong aria role; needs alertdialog instead of alert for checkbox to get focus [[erm:25475]]
|-
| style="width:80px;" |CF
| style="width:220px;" | BlueSpiceReaders
| style="width:100px;" |Web
|FAIL
|Ext Js pagination [[erm:25470|erm:25456]]
|-
| style="width:80px;" |CF
| style="width:220px;" | BlueSpiceReminder
| style="width:100px;" |Web
|FAIL
|overlay issues
|-
| style="width:80px;" |CF
| style="width:220px;" | BlueSpiceReview
| style="width:100px;" |Web
|FAIL
|overlay issues, Ext JS grid issues [[erm:25470|erm:25456]]
|-
| style="width:80px;" |CF
| style="width:220px;" | BlueSpiceReviewExtended
| style="width:100px;" |Web
|FAIL
|Ext JS grid issues [[erm:25470|erm:25456]]
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceRSSFeeder
| style="width:100px;" |
|
|
|-
| class="col-grey-light-bg" style="width:80px;" |n/a
| style="width:220px;" class="col-grey-light-bg" | BlueSpiceSaferEdit
| class="col-grey-light-bg" style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| style="width:80px;" |CF
| style="width:220px;" | BlueSpiceSmartList
| style="width:100px;" |AT, Web, SD
| class="col-green-bg" |supported
|tag can be added in source editing mode; Output: standard html unordered list
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceSocial
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceSocialArticleActions
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceSocialBlog
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceSocialComments
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceSocialMicroBlog
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceSocialProfile
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceSocialRating
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceSocialResolve
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceSocialTags
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceSocialTimelineUpdate
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceSocialTopics
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceSocialWatch
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceSocialWikiPage
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceTagCloud
| style="width:100px;" |
|'''<span class="col-blue-dark">supported</span>'''
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceTagSearch
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceUEModuleBookPDF
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceUEModuleHTML
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceUEModulePDF
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceUEModulePDFRecursive
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceUEModulePDFSubpages
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceUEModuleTable2Excel
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceUniversalExport
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceUsageTracker
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceUserInfo
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | BlueSpiceUserSidebar
| style="width:100px;" |AT
|FAIL


erm:25233
==Form fields==
|edit link does not receive keyboard focus
===Create page===
|-
| style="width:80px;" | CF
| style="width:220px;" |BlueSpiceUserSidebar
| style="width:100px;" |Web
| class="col-green-bg" |supported
|navigation links with collapsible heading
|-
| style="width:80px;" |CF
| style="width:220px;" | BlueSpiceWikiExplorer
| style="width:100px;" |Web
|FAIL
|ExtJS pagination [[erm:25470|erm:25456]]
|-
| style="width:80px;" |CF
| style="width:220px;" | Bootstrap
| style="width:100px;" |AT, Web, SD
| class="col-green-bg" |supported (however, individual implementations need to be tested individually)
|Interactive elements are implemented with aria-roles. High-contrast requirements and keyboard access need to be tested during implementation.


[https://getbootstrap.com/docs/5.0/getting-started/accessibility/ Bootstrap accessibility statement]
{{CreateInput|alignment=left|buttonlabel=Create minutes|preload=Manual:Extension/ContentDroplets/Checklist|placeholder=Enter page name|prefix=Minutes/}}
|-
<br><br>
|  style="width:80px;"|CF
<div class="sectionflex col3 frame" style="clear:both">
| style="width:220px;" | CategoryTree
<div>
| style="width:100px;" |
=== Section filter example 1===
|
<containerfilter></containerfilter>
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | Cite
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | CiteThisPage
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | CodeEditor
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | ConfirmAccount
| style="width:100px;" |
|
|
|-
| style="width:80px;"|CF
| style="width:220px;" | ConfirmEdit
| style="width:100px;" |
| class="col-green-bg" |supported
 
1.1.1
|Note: This extension allows to user various CAPTCHA techniques. To comply, an accessible captchas (e.g. ReCaptcha or hCaptcha) would have to be implemented and techniques [https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html G143] AND [https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html G144] need to be applied.
|-
| style="width:80px;"|CF
| style="width:220px;" | CookieWarning
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" | DynamicPageList3
| style="width:100px;" |AT, Web, SD
| class="col-green-bg" |supported
|text-based edit functionality, output formats can be created in accessible formats
|-
|  style="width:80px;"|CF
| style="width:220px;" | Echo
| style="width:100px;" |
|
|
|-
| class="col-grey-light-bg" style="width:80px;" |n/a
| style="width:220px;" class="col-grey-light-bg" | EditNotify
| style="width:100px;" |
|
| class="col-grey-light-bg" |
|-
|  style="width:80px;"|CF
| style="width:220px;" | EmbedVideo
| style="width:100px;" |
|
|
|-
| class="col-grey-light-bg" style="width:80px;" |n/a
| style="width:220px;" class="col-grey-light-bg" | External Data
| style="width:100px;" |
|
| class="col-grey-light-bg" |
|-
|  style="width:80px;"|CF
| style="width:220px;" | FlaggedRevs
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | FlexiSkin
| style="width:100px;" |AT
|FAIL
(easy fix)
|Small keyboard access issues [[erm:25223]]
 
No screen reader testing, since here you set the color scheme and fonts for the skin. Vision seems to be a requirement to accomplish this.
|-
|  style="width:80px;"|CF
| style="width:220px;" | Gadgets
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | HitCounters
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | InputBox
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | Interwiki
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | InviteSignup
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | Lingo
| style="width:100px;" |AT, Web, SD
| class="col-green-bg" |
supported


AAA


3.1.3
{| class="wikitable"
|'''<span class="col-blue-dark">supported</span>''': Extension "Lingo" creates definition lists. When a word from the definition list is used on a wiki page, the definition is listed at the end of the page. ('''Note: the (through css) hidden list at the end of a page does not have a heading)'''
!City
|-
!Country
| class="col-grey-light-bg" style="width:80px;" |n/a
| style="width:220px;" class="col-grey-light-bg" | LocalisationUpdate
| style="width:100px;" |
|
| class="col-grey-light-bg" |
|-
|  style="width:80px;"|CF
| style="width:220px;" | LoginNotify
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | Math
| style="width:100px;" |AT, Web
|'''<span class="col-red">FAIL</span>'''
|'''<span class="col-red">FAIL</span>'''  is okay here, this type of image output  is simply not supported by screenreaders. ''workaround: maybe MathML-based syntax?''
|-
|  style="width:80px;"|CF
| style="width:220px;" | MediaWiki
| style="width:100px;" |
|
|
|-
| class="col-grey-light-bg" style="width:80px;" |n/a
| style="width:220px;" class="col-grey-light-bg" | NativeSvgHandler
| class="col-grey-light-bg" style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| class="col-grey-light-bg" style="width:80px;" |n/a
| style="width:220px;" class="col-grey-light-bg" | NSFileRepo
| class="col-grey-light-bg" style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
|  style="width:80px;"|CF
| style="width:220px;" | Nuke
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | Page Forms
| style="width:100px;" |AT
| class="col-green-bg" |supported
|forms are created using wikitext
|-
|  style="width:80px;"|CF
| style="width:220px;" | Page Forms
| style="width:100px;" |Web
| class="col-red-bg" |not supported
|generated forms neither create correct tabindex nor label/field associations
|-
|  style="width:80px;"|CF
| style="width:220px;" | Page Schemas
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" | ParserFunctions
| style="width:100px;" |AT
| class="col-green-bg" |supported
|wikitext
|-
| class="col-grey-light-bg" style="width:80px;" |n/a
| style="width:220px;" class="col-grey-light-bg" | ParserHooks
| class="col-grey-light-bg" style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| class="col-grey-light-bg" style="width:80px;" |n/a
| style="width:220px;" class="col-grey-light-bg" | PdfHandler
| class="col-grey-light-bg" style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
|-
| class="col-grey-light-bg" style="width:80px;" |n/a
|Munich
| style="width:220px;" class="col-grey-light-bg" | PluggableAuth
|Germany
| class="col-grey-light-bg" style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
|-
| style="width:80px;"|CF
|Hamburg
| style="width:220px;" | Renameuser
|Germany
| style="width:100px;" |AT
|'''<span class="col-red">FAIL</span>'''
|needs aria labels, screenreader doesn't read them out
|-
|-
| style="width:80px;"| CF
|Vienna
| style="width:220px;" | Replace Text
|Austria
| style="width:100px;" |
|
|
|-
|-
| style="width:80px;"|CF
|Salzburg
| style="width:220px;" | RSS
|Austria
| style="width:100px;" |
|
|
|-
| class="col-grey-light-bg" style="width:80px;" |n/a
| style="width:220px;" class="col-grey-light-bg" | Scribunto
| class="col-grey-light-bg" style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
|  style="width:80px;"|CF
| style="width:220px;" | SyntaxHighlight
| style="width:100px;" |Web, SD
|'''<span class="col-red">FAIL</span>'''
|No announcement of switching to code-language, needs some aria-described-by
|-
|  style="width:80px;"|CF
| style="width:220px;" | SyntaxHighlight
| style="width:100px;" |AT
| class="col-orange-bg" |workaround
|keyboard trap in textarea Code ([https://www.mediawiki.org/w/index.php?title=Topic:Wdfwjsqfal0jeaox&topic_showPostId=wdgda0v42x2a02af see mw discussion]).
'''workaround:''' Source code editing
|-
| class="col-grey-light-bg" style="width:80px;" |n/a
| style="width:220px;" class="col-grey-light-bg" | TextExtracts
| class="col-grey-light-bg" style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
|  style="width:80px;"|CF
| style="width:220px;" | TitleBlacklist
| style="width:100px;" |AT
| class="col-green-bg" |supported
|wikitext
|-
| class="col-grey-light-bg" style="width:80px;" |n/a
| style="width:220px;" class="col-grey-light-bg" | TitleKey
| class="col-grey-light-bg" style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
|  style="width:80px;"|CF
| style="width:220px;" | TwoColConflict
| style="width:100px;" |
|
|
|-
|  style="width:80px;"|CF
| style="width:220px;" | UrlGetParameters
| style="width:100px;" |AT
| class="col-green-bg" |supported
|source code editing; text-based
|-
|  style="width:80px;"|CF
| style="width:220px;" | UserFunctions
| style="width:100px;" |AT
| class="col-green-bg" |supported
|source code editing; text-based
|-
|  style="width:80px;"|CF
| style="width:220px;" | UserMerge
| style="width:100px;" |
|
|
|-
| class="col-grey-light-bg" style="width:80px;" |n/a
| style="width:220px;" class="col-grey-light-bg" | Validator
| class="col-grey-light-bg" style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| class="col-grey-light-bg" style="width:80px;" |n/a
| style="width:220px;" class="col-grey-light-bg" | Variables
| class="col-grey-light-bg" style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| style="width:80px;" |CF
| style="width:220px;" |VisualEditor
| style="width:100px;" |AT
| class="col-green-bg" |supported
| |
*Recently solved tickets:
*support for High Contrast mode ([https://phabricator.wikimedia.org/T180890 T180890)]
*correct tab order (T12345)
|-
| style="width:80px;" |CF
| style="width:220px;" | Widgets
| style="width:100px;" | AT
| class="col-green-bg" |supported
|pure text-based functionality that allows inserting a widget on a page. If a website includes a particular widget, the widget itself has to be tested for WCAG.
|}
|}
</div>
<div>
=== Section filter example 2===
<containerfilter selector=".mylist li" />


=== Extended functionality ===
CF = Core functionality, EF= Extended functionality, n/a= not applicable; AT=Authoring tool, Web=View mode, SD=Support docs (Helpdesk)
{| class="wikitable sortable contenttable" style="width:100%;"
! style="width:80px;" |Type
! style="width:220px;" |Name
! style="width:100px;" |Type
!WCAG
!Accessibility notes
|-
| style="width:80px;" |CF
| style="width:220px;" |Arrays
| style="width:100px;" |
| class="col-green-bg" |supported
|parser functions - entered as text
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceAbout
| style="width:100px;" |Web
| class="col-orange-bg" |partially supported
|Focus does not stay in iframe after accepting privacy policy. (Ticket: [[Erm:25216|erm:25216)]]
Default loads a page from bluespice.com which has non-compliant content (video without captions). The default page is hard to navigate because of cookie consent menu and focusable mobile menu.


* Link can be deactivated in main menu for all users and can be ignored by admin users in the management menu.
<div class="mylist">
* Extension can be deactivated for on-premise installations or custom content can be loaded in iframe (customer is responsible for loading accessible content).
* Apple, pear, orange
|-
*Apple
| style="width:80px;" |CF
*Orange
| style="width:220px;" |BlueSpiceArticleInfo
*Orange, grape
| style="width:100px;" |AT, Web, SD
*Grape
| class="col-orange-bg" |partially supported
</div>
|
* Extjs: Pagination in grids not announcing button types and spinbutton value
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceArticlePreviewCapture
| style="width:100px;" |Web,
SD
| class="col-orange-bg" |partially supported
|
* Extjs: Pagination in grids not announcing button types and spinbutton value
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceAuthors
| style="width:100px;" |Web,
SD
| class="col-orange-bg" |partially supported
|
* Extjs: Pagination in grids not announcing button types and spinbutton value
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceAvatars
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceBookshelf
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceDiscovery
| style="width:100px;" |AT, Web
| class="col-green-bg" |supported
|skip navigation, aria roles and labels for screenreaders, fully keyboard accessible
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceCategoryCheck
| style="width:100px;" |AT
| class="col-green-bg" |supported
|category announcements in save dialog (fixed in [[Erm:25232|erm:25232)]]
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceCategoryManager
| style="width:100px;" |AT, Web
| class="col-grey-light-bg" |partially supported
|supported: tabbing through tabular data
not supported:


* Extjs: Pagination in grids not announcing button types and spinbutton value
</div>
* parent-child relationships not announced
<div>
* actions-buttons only visible and interactive on mouse-hover
===Checklist===
(Checklist status is only saved for users with "edit" permissions)


workaround: categories can also be managed directly on the category pages themselves. The parent-child relationship of categories is also always listed on the categories pages
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceChecklist
| style="width:100px;" |AT, Web, SD
| class="col-green-bg" |supported
|edit in source mode; output standard html list
|-
| style="width:80px;" |CLDCF
| style="width:220px;" |BlueSpiceCloudClient
| style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceContextMenu
| style="width:100px;" |Web, SD
| class="col-orange-bg" |workaround
|allows to open a context menu that executes actions on the target page without actually going to the target page.
workaround: Simply execute the actions directly on the target page or use the "original" links in the interface
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceCountThings
| style="width:100px;" |AT, Web, SD
| class="col-green-bg" |supported
|edit in source mode; output: standard html table
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceCustomMenu
| style="width:100px;" |AT, Web, SD
| class="col-green-bg" |supported
|
* AT: Authoring in Wikitext
* Web: Simple links lists with accessible headings
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceDashboards
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceEmoticons
| style="width:100px;" |AT, Web
| class="col-green-bg" |supported
|Fixed in [[erm:25160]]
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceExpiry
| style="width:100px;" |AT
| class="col-orange-bg" |partially supported
|
* Simple dialog to add/edit expiration date
* Expired articles list: extjs pagination issue
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceExpiry
| style="width:100px;" |Web, SD
| class="col-red-bg" |not supported
|page does not indicate on load that it is expired
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceExportTables
| style="width:100px;" |
| class="col-green-bg" |supported
|export menu is keyboard and screenreader accessible
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceExtendedFilelist
| style="width:100px;" |AT, Web, SD
| class="col-orange-bg" |workaround
|
* Extjs: Pagination in grids not announcing button types and spinbutton value


'''workaround:''' Special:Files uses standard html results table and accessible search form
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceExtendedSearch
| style="width:100px;" |Web,
SD
| class="col-orange-bg" |workaround
|Problems with grid buttons and pagination. [[Erm:25470|erm:25456]]
'''workaround:''' Special:Search uses standard html results table and accessible search form
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceExtendedStatistics
| style="width:100px;" |Web
| class="col-red-bg" |not supported
|some stats only available as png
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceFilterableTables
| style="width:100px;" |AT, Web, SD
| class="col-green-bg" |supported
|Only needs filterable style attribute in wikitext. Fully screenreader accessible when inserted on a wiki page. Does not use extjs pagination.
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceFilterSpecialPages
| style="width:100px;" |Web, SD
| class="col-green-bg" |supported
|Form field gets focus and it is easy to tab to the filtered links
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceHideTitle
| style="width:100px;" |AT
| class="col-green-bg" |supported
|Add behavior switch in source editing mode
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceInsertCategory
| style="width:100px;" |AT
| class="col-orange-bg" |workaround
|add category in wikitext
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceInsertFile
| style="width:100px;" |AT
| class="col-orange-bg" |workaround
|add image in wikitext
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceInsertLink
| style="width:100px;" |AT
| class="col-orange-bg" |workaround
|add link in wikitext
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceInsertMagic
| style="width:100px;" |AT
| class="col-orange-bg" |workaround
|add tag in wikitext
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceInterWikiLinks
| style="width:100px;" |
| class="col-red-bg" |not supported
|Web:


* ext-js pagination issues
<bs:checklist type="list" value="false" list="Template:JF Status" />
<br>


AT: setting up interwiki links with keyboard/screenreader not supported
[[Manual:Extension/ContentDroplets/Checklist|See example "Meeting minutes"]]
</div>


* ext-js pagination issues
<div>
* button labels not announced
=== Checkbox===
* edit buttons in grid not selectable on focus, only on hover
(Checkbox status is only saved for users with "edit" permissions)
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceInterwikiSearch
| style="width:100px;" |
| class="col-grey-light-bg" |
|
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceMatomoConnector
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceMultiUpload
| style="width:100px;" |AT
| class="col-green-bg" |supported
|workflow from clicking upload link to uploading files with the upload dialog work in screenreader
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpicePageAccess
| style="width:100px;" |AT
| class="col-green-bg" |supported
|tag can be added in source editing mode
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpicePageAssignments
| style="width:100px;" |AT, Web
| class="col-grey-light-bg" |partially supported
|Supported:
AT: Assignments can be added/edited on a wiki page


Not supported:
<bs:checkbox checked="false" /> Generate wiki instance


Web: Assignments overview list uses extjs pagination
<bs:checkbox checked="false" /> Create user "customer"
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpicePagesVisited
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpicePageTemplates
| style="width:100px;" |AT
| class="col-grey-light-bg" |partially supported
|Page templates manager: ExtJS grid issue for screenreaders, keyboard is supported
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpicePlayer
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpicePrivacy
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceQrCode
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceRating
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceReadConfirmation
| style="width:100px;" |Web
|FAIL
(easy fix)
|wrong aria role; needs alertdialog instead of alert for checkbox to get focus [[erm:25475]]
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceReaders
| style="width:100px;" |Web
|FAIL
|Ext Js pagination [[Erm:25470|erm:25456]]
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceReminder
| style="width:100px;" |Web
|FAIL
|overlay issues
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceReview
| style="width:100px;" |Web
|FAIL
|overlay issues, Ext JS grid issues [[Erm:25470|erm:25456]]
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceReviewExtended
| style="width:100px;" |Web
|FAIL
|Ext JS grid issues [[Erm:25470|erm:25456]]
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceRSSFeeder
| style="width:100px;" |
|
|
|-
| style="width:80px;" |n/a
| style="width:220px;" |BlueSpiceSaferEdit
| style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceSignHere
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceSmartList
| style="width:100px;" |AT, Web, SD
| class="col-green-bg" |supported
|tag can be added in source editing mode; Output: standard html unordered list
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceSocial
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceSocialArticleActions
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceSocialBlog
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceSocialComments
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceSocialMicroBlog
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceSocialProfile
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceSocialRating
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceSocialResolve
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceSocialTags
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceSocialTimelineUpdate
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceSocialTopics
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceSocialWatch
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceSocialWikiPage
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceTagCloud
| style="width:100px;" |
|'''<span class="col-blue-dark ve-pasteProtect">supported</span>'''
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceTagSearch
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceUEModuleBookPDF
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceUEModuleDOCX
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceUEModuleHTML
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceUEModulePDF
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceUEModulePDFRecursive
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceUEModulePDFSubpages
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceUEModuleTable2Excel
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceUniversalExport
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceUsageTracker
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceUserInfo
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceUserSidebar
| style="width:100px;" |AT
|FAIL
erm:25233
|edit link does not receive keyboard focus
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceUserSidebar
| style="width:100px;" |Web
| class="col-green-bg" |supported
|navigation links with collapsible heading
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceWatchList
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceWebDAVClientIntegration
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceWebDAVMinorSave
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |BlueSpiceWhoIsOnline
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |BlueSpiceWikiExplorer
| style="width:100px;" |Web
|FAIL
|ExtJS pagination [[Erm:25470|erm:25456]]
|-
| style="width:80px;" |CF
| style="width:220px;" |Bootstrap
| style="width:100px;" |AT, Web, SD
| class="col-green-bg" |supported (however, individual implementations need to be tested individually)
|Interactive elements are implemented with aria-roles. High-contrast requirements and keyboard access need to be tested during implementation.
[https://getbootstrap.com/docs/5.0/getting-started/accessibility/ Bootstrap accessibility statement]
|-
| style="width:80px;" |CF
| style="width:220px;" |CategoryTree
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |Cite
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |CiteThisPage
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |CodeEditor
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |ConfirmAccount
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |ConfirmEdit
| style="width:100px;" |
| class="col-green-bg" |supported
1.1.1
|Note: This extension allows to user various CAPTCHA techniques. To comply, an accessible captchas (e.g. ReCaptcha or hCaptcha) would have to be implemented and techniques [https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html G143] AND [https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html G144] need to be applied.
|-
| style="width:80px;" |EF
| style="width:220px;" |ContentTransfer
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |CookieWarning
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |DrawioEditor
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |Duplicator
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |DynamicPageList3
| style="width:100px;" |AT, Web, SD
| class="col-green-bg" |supported
|text-based edit functionality, output formats can be created in accessible formats
|-
| style="width:80px;" |CF
| style="width:220px;" |Echo
| style="width:100px;" |
|
|
|-
| style="width:80px;" |n/a
| style="width:220px;" |EditNotify
| style="width:100px;" |
|
| class="col-grey-light-bg" |
|-
| style="width:80px;" |CF
| style="width:220px;" |EmbedVideo
| style="width:100px;" |
|
|
|-
| style="width:80px;" |n/a
| style="width:220px;" |External Data
| style="width:100px;" |
|
| class="col-grey-light-bg" |
|-
| style="width:80px;" |CF
| style="width:220px;" |FlaggedRevs
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |FlexiSkin
| style="width:100px;" |AT
|FAIL
(easy fix)
|Small keyboard access issues [[erm:25223]]
No screen reader testing, since here you set the color scheme and fonts for the skin. Vision seems to be a requirement to accomplish this.
|-
| style="width:80px;" |CF
| style="width:220px;" |Gadgets
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |Header Tabs
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |HitCounters
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |ImageMap
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |ImageMapEdit
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |InputBox
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |InsertTemplate
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |Interwiki
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |InviteSignup
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |LatexRenderer
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |Lingo
| style="width:100px;" |AT, Web, SD
| class="col-green-bg" |supported


AAA
<bs:checkbox checked="false" /> Send password to customer
 
</div>
3.1.3
<div>
|'''<span class="col-blue-dark ve-pasteProtect">supported</span>''': Extension "Lingo" creates definition lists. When a word from the definition list is used on a wiki page, the definition is listed at the end of the page. ('''Note: the (through css) hidden list at the end of a page does not have a heading)'''
<bs:tagsearch type="wikipage" namespace="Setup" operator="AND" />
|-
</div>
| style="width:80px;" |n/a
</div>
| style="width:220px;" |LocalisationUpdate
==Other==
| style="width:100px;" |
|
| class="col-grey-light-bg" |
|-
| style="width:80px;" |CF
| style="width:220px;" |LoginNotify
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |Maps
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |Math
| style="width:100px;" |AT, Web
|'''<span class="col-red ve-pasteProtect">FAIL</span>'''
|'''<span class="col-red ve-pasteProtect">FAIL</span>'''  is okay here, this type of image output  is simply not supported by screenreaders. ''workaround: maybe MathML-based syntax?''
|-
| style="width:80px;" |CF
| style="width:220px;" |MediaWiki
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |MergeArticles
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |MultimediaViewer
| style="width:100px;" |
|
|
|-
| style="width:80px;" |n/a
| style="width:220px;" |NativeSvgHandler
| style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| style="width:80px;" |n/a
| style="width:220px;" |NSFileRepo
| style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| style="width:80px;" |CF
| style="width:220px;" |Nuke
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |Page Forms
| style="width:100px;" |AT
| class="col-green-bg" |supported
|forms are created using wikitext
|-
| style="width:80px;" |CF
| style="width:220px;" |Page Forms
| style="width:100px;" |Web
| class="col-red-bg" |not supported
|generated forms neither create correct tabindex nor label/field associations
|-
| style="width:80px;" |CF
| style="width:220px;" |Page Schemas
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |PageImages
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |ParserFunctions
| style="width:100px;" |AT
| class="col-green-bg" |supported
|wikitext
|-
| style="width:80px;" |n/a
| style="width:220px;" |ParserHooks
| style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| style="width:80px;" |n/a
| style="width:220px;" |PdfHandler
| style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| style="width:80px;" |n/a
| style="width:220px;" |PluggableAuth
| style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| style="width:80px;" |EF
| style="width:220px;" |Poem
| style="width:100px;" |AT
| class="col-green-bg" |supported
|tag is added in source view. Only applies some text indent and line breaks in the background. Produces standard html
|-
| style="width:80px;" |EF
| style="width:220px;" |Popups
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |Quiz
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |Renameuser
| style="width:100px;" |AT
|'''<span class="col-red ve-pasteProtect">FAIL</span>'''
|needs aria labels, screenreader doesn't read them out
|-
| style="width:80px;" |CF
| style="width:220px;" |Replace Text
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |RSS
| style="width:100px;" |
|
|
|-
| style="width:80px;" |n/a
| style="width:220px;" |Scribunto
| style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| style="width:80px;" |EF
| style="width:220px;" |Semantic Compound Queries
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |Semantic Extra Special Properties
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |Semantic Internal Objects
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |Semantic MediaWiki
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |Semantic Result Formats
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |Semantic Scribunto
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |SyntaxHighlight
| style="width:100px;" |Web, SD
|'''<span class="col-red ve-pasteProtect">FAIL</span>'''
|No announcement of switching to code-language, needs some aria-described-by
|-
| style="width:80px;" |CF
| style="width:220px;" |SyntaxHighlight
| style="width:100px;" |AT
| class="col-orange-bg" |workaround
|keyboard trap in textarea Code ([https://www.mediawiki.org/w/index.php?title=Topic:Wdfwjsqfal0jeaox&topic_showPostId=wdgda0v42x2a02af see mw discussion]).
'''workaround:''' Source code editing
|-
| style="width:80px;" |EF
| style="width:220px;" |TemplateData
| style="width:100px;" |
|
|
|-
| style="width:80px;" |EF
| style="width:220px;" |TemplateStyles
| style="width:100px;" |
|
|
|-
| style="width:80px;" |n/a
| style="width:220px;" |TextExtracts
| style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| style="width:80px;" |CF
| style="width:220px;" |TitleBlacklist
| style="width:100px;" |AT
| class="col-green-bg" |supported
|wikitext
|-
| style="width:80px;" |n/a
| style="width:220px;" |TitleKey
| style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| style="width:80px;" |CF
| style="width:220px;" |TwoColConflict
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |UrlGetParameters
| style="width:100px;" |AT
| class="col-green-bg" |supported
|source code editing; text-based
|-
| style="width:80px;" |CF
| style="width:220px;" |UserFunctions
| style="width:100px;" |AT
| class="col-green-bg" |supported
|source code editing; text-based
|-
| style="width:80px;" |CF
| style="width:220px;" |UserMerge
| style="width:100px;" |
|
|
|-
| style="width:80px;" |n/a
| style="width:220px;" |Validator
| style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| style="width:80px;" |n/a
| style="width:220px;" |Variables
| style="width:100px;" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| style="width:80px;" |CF
| style="width:220px;" |VisualEditor
| style="width:100px;" |AT
| class="col-green-bg" |supported
|
* Recently solved tickets:
* support for High Contrast mode ([https://phabricator.wikimedia.org/T180890 T180890)]
* correct tab order (T12345)
|-
| style="width:80px;" |EF
| style="width:220px;" |WebDAV
| style="width:100px;" |
|
|
|-
| style="width:80px;" |CF
| style="width:220px;" |Widgets
| style="width:100px;" |AT
| class="col-green-bg" |supported
|pure text-based functionality that allows inserting a widget on a page. If a website includes a particular widget, the widget itself has to be tested for WCAG.
|}


<div class="sectionflex col2 frame">


<div>
===Messages===
{{Textbox|boxtype=note|header=|text=This is a Note Message.|icon=yes}}
{{Textbox|boxtype=important|header=|text=This is an Important Message.|icon=yes}}
{{Textbox|boxtype=tip|header=|text=This is a  Tip Message.|icon=yes}}
{{Textbox|boxtype=warning|header=|text=This is a Warning message.|icon=yes}}
{{Textbox|boxtype=neutral|header=|text=This is a generic message.|icon=yes}}
</div>
<div>
===Progress===
'''Output'''<div><bs:statistics:progress basecount="5" progressitem="closed" width="300" baseitem="Statecheck:" /></div><br />
* This is my topic 1 (Statecheck:open)
*This is my topic 2 (Statecheck:closed)
*This is my topic 3 (Statecheck:closed)
*This is my topic 4 (Statecheck:closed)
*This is my topic 5 (Statecheck:closed)
</div>
</div>


=== Pros and cons===
{{ProConList|title-advantages=Advantages|title-disadvantages=Disadvantages|advantages=* affordable
* well-known
* easily accessible|disadvantages=* somewhat dated look and feel
* not customizable
* GDPR compliance unclear}}


===Administrative users===
===Attachments===
{| class="wikitable sortable contenttable" style="width:100%;"
<attachments>
!Type
!Name
!Type
!WCAG
!Accessibility notes
|-
| |n/a
| class="col-grey-light-bg" |Auth remoteuser
| class="col-grey-light-bg" |n/a
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |CF
|BlueSpiceCategoryManager
|AT, Web
|partially supported
|supported: tabbing through tabular data
not supported:
 
*Extjs: Pagination in grids not announcing button types and spinbutton value
*parent-child relationships not announced
*actions-buttons only visible and interactive on mouse-hover
 
workaround: categories can also be managed directly on the category pages themselves. The parent-child relationship of categories is also always listed on the categories pages
|-
| |n/a
| class="col-grey-light-bg" |BlueSpiceCloudClient
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |CF
|BlueSpiceConfigManager
|AT, Web
|
'''<span class="col-red ve-pasteProtect">partially supported</span>'''
|supported:
 
form fields and tooltips are announced correctly and can be saved
 
issues:
 
* <span class="col-red ve-pasteProtect">search field needs aria-role "search" (2.1.1)</span>
*<span class="col-red ve-pasteProtect">Save-button does not get focus after making form changes. (2.1</span>
|-
| |EF
|BlueSpiceDashboards
|
|
|
|-
| |n/a
| class="col-grey-light-bg" |BlueSpiceDistributionConnector
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |n/a
| class="col-grey-light-bg" |BlueSpiceDrawioConnector
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |n/a
| class="col-grey-light-bg" |BlueSpiceEchoConnector
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |n/a
| class="col-grey-light-bg" |BlueSpiceEditNotifyConnector
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |EF
|BlueSpiceExtendedStatistics
|
|
|
|-
| |n/a
| class="col-grey-light-bg" |BlueSpiceFoundation
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |CF
|BlueSpiceGroupManager
|AT, Web
|
'''<span class="col-red ve-pasteProtect">not supported</span>'''
|
*buttons have no labels
*selected checkboxes are not indicated
*Ext js paginatetoolbar
|-
| |EF
|BlueSpiceNamespaceCSS
|AT
|not supported
|Note: this page is limited to admin users
 
*text area to enter css does not allow to tab out of it to save the page. Mouse required.
|-
| |CF
|BlueSpiceNamespaceManager
|AT
|
|Note: this page is limited to admin users
 
*Extjs: Pagination in grids not announcing button types and spinbutton value
|-
| |n/a
| class="col-grey-light-bg" |BlueSpiceNSFileRepoConnector
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |CF
|BlueSpicePageAccess
|AT
| class="col-green-bg" |'''<span class="col-blue-dark ve-pasteProtect">supported</span>'''
|tag can be added in source editing mode
|-
| |CF
|BlueSpicePageTemplates
|AT
|'''<span class="col-red ve-pasteProtect">FAIL</span>'''
|selecting template during page creation: No group heading for templates to jump to; Namespace heading is h3,  h2 missing on page;
Page templates manager: ExtJS grid issues [[erm:25470|erm:25456]]
|-
| |CF
|BlueSpicePermissionManager
|AT
|'''<span class="col-red ve-pasteProtect">FAIL</span>'''
|Ext JS grid issues [[erm:25470|erm:25456]]
|-
| |CF
|BlueSpicePrivacy
|
|
|
|-
| |CF
|BlueSpiceReaders
|Web
|'''<span class="col-red ve-pasteProtect">FAIL</span>'''
|Ext Js pagination [[erm:25470|erm:25456]]
|-
| |CF
|BlueSpiceReminder
|Web
|'''<span class="col-red ve-pasteProtect">FAIL</span>'''
|overlay issues
|-
| |CF
|BlueSpiceRSSFeeder
|
|
|
|-
| |n/a
| class="col-grey-light-bg" |BlueSpiceSMWConnector
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |CF
|BlueSpiceUsageTracker
|
|
|
|-
| |CF
|BlueSpiceUserInfo
|
|
|
|-
| |CF
|BlueSpiceUserManager
|
|'''<span class="col-red ve-pasteProtect">FAIL</span>'''
|JS grid buttons, pagination
|-
| |n/a
| class="col-grey-light-bg" |BlueSpiceUserMergeConnector
|
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |n/a
| class="col-grey-light-bg" |BlueSpiceVisualEditorConnector
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |EF
|BlueSpiceWebDAVClientIntegration
|
|
|
|-
| |EF
|BlueSpiceWebDAVMinorSave
|
|
|
|-
| |EF
|BlueSpiceWikiFarm
|
|
|
|-
| |CF
|ConfirmAccount
|
|
|
|-
| |CF
|ConfirmEdit
|
| class="col-green-bg" |'''<span class="col-blue-dark ve-pasteProtect">supported</span>'''
1.1.1
|Note: This extension allows to use various CAPTCHA techniques. To comply, an accessible captchas (e.g. ReCaptcha or hCaptcha) would have to be implemented and techniques [https://www.w3.org/WAI/WCAG21/Techniques/general/G143.html G143] AND [https://www.w3.org/WAI/WCAG21/Techniques/general/G144.html G144] need to be applied.
|-
| |n/a
| class="col-grey-light-bg" |EditNotify
|
|
| class="col-grey-light-bg" |
|-
| |n/a
| class="col-grey-light-bg" |External Data
|
|
| class="col-grey-light-bg" |
|-
| |n/a
| class="col-grey-light-bg" |ExtJSBase
|
|
| class="col-grey-light-bg" |
|-
| |CF
|FlexiSkin
|AT
|'''FAIL'''
(easy fix)
|Small keyboard access issues [[erm:25223]]
No screen reader testing, since here you set the color scheme and fonts for the skin. Vision seems to be a requirement to accomplish this.
|-
| |CF
|Gadgets
|
|
|
|-
| |CF
|HitCounters
|
|
|
|-
| |CF
|Interwiki
|
|
|
|-
| |CF
|InviteSignup
|
|
|
|-
| |EF
|LDAP Authorization
|
|
|
|-
| |EF
|LDAPAuthentication2
|
|
|
|-
| |EF
|LDAPGroups
|
|
|
|-
| |EF
|LDAPProvider
|
|
|
|-
| |EF
|LDAPSyncAll
|
|
|
|-
| |EF
|LDAPUserInfo
|
|
|
|-
| |n/a
| class="col-grey-light-bg" |LocalisationUpdate
|
|
| class="col-grey-light-bg" |
|-
| |CF
|LoginNotify
|
|
|
|-
| |CF
|MediaWiki
|
|
|
|-
| |EF
|MultimediaViewer
|
|
|
|-
| |n/a
| class="col-grey-light-bg" |NativeSvgHandler
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |n/a
| class="col-grey-light-bg" |NSFileRepo
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |CF
|Nuke
|
|
|
|-
| |n/a
| class="col-grey-light-bg" |OATHAuth
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |n/a
| class="col-grey-light-bg" |OOJSPlus
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |n/a
| class="col-grey-light-bg" |OpenID Connect
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |n/a
| class="col-grey-light-bg" |OpenLayers
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |CF
|Page Schemas
|
|
|
|-
| |n/a
| class="col-grey-light-bg" |ParserHooks
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |n/a
| class="col-grey-light-bg" |PluggableAuth
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |CF
|Renameuser
|AT
|'''<span class="col-red ve-pasteProtect">FAIL</span>'''
|needs aria labels, screenreader doesn't read them out
|-
| | n/a
| class="col-grey-light-bg" |Scribunto
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |EF
|Semantic Compound Queries
|
|
|
|-
| |EF
|Semantic Extra Special Properties
|
|
|
|-
| |EF
|Semantic Internal Objects
|
|
|
|-
| |EF
|Semantic MediaWiki
|
|
|
|-
| |EF
|Semantic Result Formats
|
|
|
|-
| |EF
|Semantic Scribunto
|
|
|
|-
| |n/a
| class="col-grey-light-bg" |SimpleSAMLphp
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |CF
|SpamBlacklist
|AT
| class="col-green-bg" |'''<span class="col-blue-dark ve-pasteProtect">supported</span>'''
|wikitext
|-
| |CF
|TitleBlacklist
|AT
| class="col-green-bg" |'''<span class="col-blue-dark ve-pasteProtect">supported</span>'''
|wikitext
|-
| |n/a
| class="col-grey-light-bg" |TitleKey
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |CF
|TwoColConflict
|
|
|
|-
| |CF
|UserMerge
|
|
|
|-
| |n/a
| class="col-grey-light-bg" |Validator
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |n/a
| class="col-grey-light-bg" |Variables
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |n/a
| class="col-grey-light-bg" |WebAuthn
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
| class="col-grey-light-bg" |
|-
| |EF
|WebDAV
|
|
|
|-
| |CF
|Widgets
|AT
| class="col-green-bg" |'''<span class="col-blue-dark ve-pasteProtect">supported</span>'''
|pure text-based functionality that allows insering a widget on a page. If a website includes a particular widget, the widget itself has to be tested for WCAG.
|}
 
 
===Recurring issues===
*ExtJS grid ticket - (button labels, pagination)
*QM / book overlays: [[erm:25470]]
 
==Core functionality==
 
===VisualEditor===
 
===High contrast===
In Windows high-contrast system settings, the icons of the toolbar are not visible, since they are implemented as black background images:
 
Ticket seems to be progressing: https://phabricator.wikimedia.org/T180890
 
[[File:high-contrast-black-ve.png|alt=Menu icons in VisualEditor not visible in black high-contrast mode.|center|thumb|750x750px|Menu icons in VisualEditor not visible in black high-contrast mode.]]
 
'''workaround'''
 
While using BlueSpice, turn off High Contrast mode and switch to the Color filter setting instead. Here, you also get a hight contrast setting in black, but the Visual Editor toolbar is fully visible:
[[File:windows-colorfilter.png|alt=Color filter in Windows 10 settings|center|thumb|750x750px|Color filter in Windows 10 settings]]
 
'''Custom css for users in group MediaWiki:Group-Accessibilitygroup.css'''
 
The colors can be fully customized for a specific user group in the wiki
 
'''Google Chrome high contrast extension'''
 
The high contrast extension [https://support.google.com/chrome/answer/7040464?hl=en#zippy=%2Chigh-contrast-adjust-or-remove-colors recommended in the Google Chrome help center]does not work in edit mode, but can be used for browsing a BlueSpice wiki page.
 
=== Keyboard navigation===
'''workaround'''
 
All functionality of VisualEditor can be entered in source editing mode, which is a standard way of editing a wiki page. The save dialog can be activated via keyboard <code>alt</code>+<code>shift</code>+<code>s</code>. Available Shortcut keys can be viewed with <code>Ctrl</code>+<code>/</code>
 
==Extended functionality==


===TemplateData===
</attachments>
Does not support


# dialog window does not recognize  language
===Tag cloud===
# no tabbing to hidden fields (solution: user task: mark all non-required fields as suggested to be shown instantly).
<bs:tagcloud renderer="text" store="category" width="100%" showcount="true" minsize="14" maxsize="30" exclude="Pages using Dynamic PageList parser function" />


===Map===
{{Map|Brandenburg Gate, Berlin, Germany|center=Germany}}


[[Category:Accessibility]]
=== Signature ===
<bs:signhere />

Revision as of 17:29, 16 August 2023

Lists

Statistics

Who is online? (0)

  • Number of characters:
  • Number of files: 1016
  • Number of pages: 670
  • Number of users: 57

Subpages

My last visited pages

To see pages you have visited, please log in to your account

My watchlist

Watchlist cannot be displayed because no user is logged in

Visual formatting

Modal button

Google.com

Circled number

1 Preheat oven to 425°F

2 Mix all the ingredients

3 Bake for 40 minutes

4 Take out and let cool 30 mintes

5 Eat

Icon

User manual

Go to "Releases"

Admin info

Business updates

Code

/* Container holding the image and the text */
.container {
  position: relative;
}
/* Bottom right text */
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

Math

Chem

Form fields

Create page



Section filter example 1


City Country
Munich Germany
Hamburg Germany
Vienna Austria
Salzburg Austria

Section filter example 2


  • Apple, pear, orange
  • Apple
  • Orange
  • Orange, grape
  • Grape

Checklist

(Checklist status is only saved for users with "edit" permissions)



See example "Meeting minutes"

Checkbox

(Checkbox status is only saved for users with "edit" permissions)

Generate wiki instance

Create user "customer"

Send password to customer

Other

Messages

This is a Note Message.
This is an Important Message.
This is a Tip Message.
This is a Warning message.
This is a generic message.

Progress

Output
100.0%

  • This is my topic 1 (Statecheck:open)
  • This is my topic 2 (Statecheck:closed)
  • This is my topic 3 (Statecheck:closed)
  • This is my topic 4 (Statecheck:closed)
  • This is my topic 5 (Statecheck:closed)

Pros and cons

Advantages Disadvantages
  • affordable
  • well-known
  • easily accessible
  • somewhat dated look and feel
  • not customizable
  • GDPR compliance unclear

Attachments


Tag cloud

Map

Loading map...

Signature

Signatures


To submit feedback about this documentation, visit our community forum.

Retrieved from "https://en.wiki.bluespice.com/w/index.php?title=Accessibility/Extensions&oldid=7292"
No categories assignedEdit

Discussions